diff --git a/src/components/atoms/IconLinks/IconLinks.test.tsx b/src/components/atoms/IconLinks/IconLinks.test.tsx new file mode 100644 index 0000000..957699d --- /dev/null +++ b/src/components/atoms/IconLinks/IconLinks.test.tsx @@ -0,0 +1,49 @@ +// IconLinks.test.tsx + +import { render, screen } from '@testing-library/react' +import userEvent from '@testing-library/user-event' + +import * as IconLinks from '.' + +const labels: { [key: string]: string } = { + DescriptionIconLink: 'Doc-button', + EmailIconLink: 'Email-button', + GitHubIconLink: 'GitHub-button', + LinkedInIconLink: 'LinkedIn-button', + AcademyIconLink: 'Academy-button', + VideoIconLink: 'Video-button', + ExtrernalIconLink: 'External-link-button', +} +describe('IconLinks', () => { + const open = vi.spyOn(window, 'open') + + const defaultProps = { + href: 'https://test.com', + fontSize: 'large' as const, + } + + describe.each(Object.entries(IconLinks))('%s', (name, Icon) => { + test('renders correctly and without crashing', async () => { + render() + await userEvent.click(screen.getByLabelText(labels[name])) + expect(open).toHaveBeenCalledTimes(1) + expect(open).toHaveBeenLastCalledWith(defaultProps.href, '_blank') + }) + + test('stops propagation when the icon button is clicked', async () => { + const onClick = vi.fn() + render( +
+ +
+ ) + await userEvent.click(screen.getByLabelText(labels[name])) + expect(onClick).not.toHaveBeenCalled() + }) + + test("renders the badge when 'index' is provided", () => { + render() + expect(screen.getByText(1)).toBeInTheDocument() + }) + }) +}) diff --git a/src/components/atoms/IconLinks/IconLinks.tsx b/src/components/atoms/IconLinks/IconLinks.tsx index 5dbc616..09008d6 100644 --- a/src/components/atoms/IconLinks/IconLinks.tsx +++ b/src/components/atoms/IconLinks/IconLinks.tsx @@ -35,7 +35,7 @@ const IconWrapper = ({ index, href: to, fontSize, Icon, ...props }: IconWrapperP ) } -export const DescriptionIconLink = (props: IconLinkProps) => +export const DescriptionIconLink = (props: IconLinkProps) => export const EmailIconLink = (props: IconLinkProps) => export const GitHubIconLink = (props: IconLinkProps) => export const LinkedInIconLink = (props: IconLinkProps) =>