From f3724950511d656d64d9ae9d1e16f09f582298c0 Mon Sep 17 00:00:00 2001
From: m-tartari <37861893+m-tartari@users.noreply.github.com>
Date: Sat, 17 Feb 2024 15:13:40 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=85=20test(atoms):=20add=20`IconLinks`=20?=
 =?UTF-8?q?unit=20tests?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../atoms/IconLinks/IconLinks.test.tsx        | 49 +++++++++++++++++++
 src/components/atoms/IconLinks/IconLinks.tsx  |  2 +-
 2 files changed, 50 insertions(+), 1 deletion(-)
 create mode 100644 src/components/atoms/IconLinks/IconLinks.test.tsx

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(<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()
+    })
+  })
+})
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) => <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} />