Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mai/Fix-413-added in Link to logo #446

Merged
merged 9 commits into from
Jul 31, 2024
16 changes: 16 additions & 0 deletions components/LogoNav/LogoNav.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { render, screen, fireEvent, waitFor } from '@testing-library/react';
import LogoNav from './LogoNav';

describe('LogoNav Component', () => {
it('renders the logo and links to the /league/all page', () => {
render(<LogoNav />);

const logoImage = screen.getByTestId('logo-nav');
expect(logoImage).toBeInTheDocument();

const linkElement = screen.getByRole('link', {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Are we able to use the datatest-id of logo-nav here instead?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The data-testid="logo-nav" is currently used for the Image tag. I like the idea of adding a data-testID to test the Link tag and will implement one shortly.

name: /Gridiron Survivor logo/i,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

General question, what's the forward-slashes and "i" do here?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ryandotfurrer it's regex to look for the specific word of 'Gridiron Survivor Logo'. Here's a great blog about the i in Regex: https://www.w3schools.com/jsref/jsref_regexp_i.asp. Please let me know if this makes sense :)

});
expect(linkElement).toHaveAttribute('href', '/league/all');
});
});
19 changes: 10 additions & 9 deletions components/LogoNav/LogoNav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@

import { JSX } from 'react';
import Image from 'next/image';
import Link from 'next/link';
import logo from '/public/assets/logo-colored-nav.svg';

/**
Expand All @@ -11,15 +12,15 @@ import logo from '/public/assets/logo-colored-nav.svg';
*/
export const LogoNav = (): JSX.Element => {
return (
<Image
src={logo}
alt="Gridiron Survivor logo"
width={1}
height={1}
priority
className="w-20"
data-testid="logo-nav"
/>
<Link href="/league/all">
<Image
alt="Gridiron Survivor logo"
data-testid="logo-nav"
height={36}
src={logo}
width={80}
/>
</Link>
);
};

Expand Down