✅ test(atoms): add IconLinks unit tests

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(<Icon {...defaultProps} />)
+      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(
+        <div onClick={onClick}>
+          <Icon {...defaultProps} />
+        </div>
+      )
+      await userEvent.click(screen.getByLabelText(labels[name]))
+      expect(onClick).not.toHaveBeenCalled()
+    })
+
+    test("renders the badge when 'index' is provided", () => {
+      render(<Icon {...defaultProps} index={1} />)
+      expect(screen.getByText(1)).toBeInTheDocument()
+    })
+  })
+})

src/components/atoms/IconLinks/IconLinks.tsx

@@ -35,7 +35,7 @@ const IconWrapper = ({ index, href: to, fontSize, Icon, ...props }: IconWrapperP
   )
 }
 
-export const DescriptionIconLink = (props: IconLinkProps) => <IconWrapper aria-label="Email-button" Icon={Description} {...props} />
+export const DescriptionIconLink = (props: IconLinkProps) => <IconWrapper aria-label="Doc-button" Icon={Description} {...props} />
 export const EmailIconLink = (props: IconLinkProps) => <IconWrapper aria-label="Email-button" Icon={Email} {...props} />
 export const GitHubIconLink = (props: IconLinkProps) => <IconWrapper aria-label="GitHub-button" Icon={GitHub} {...props} />
 export const LinkedInIconLink = (props: IconLinkProps) => <IconWrapper aria-label="LinkedIn-button" Icon={LinkedIn} {...props} />