From 2f18ca527c288bfb7fa46f27c39c522877aa7e3d Mon Sep 17 00:00:00 2001
From: m-tartari <37861893+m-tartari@users.noreply.github.com>
Date: Sat, 17 Feb 2024 14:38:44 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=85=20test(contacts):=20add=20unit=20test?=
 =?UTF-8?q?s?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pages/ContactPage/ContactPage.test.tsx    | 41 +++++++++++++++++++
 .../pages/ContactPage/ContactPage.tsx         |  6 +--
 2 files changed, 44 insertions(+), 3 deletions(-)
 create mode 100644 src/components/pages/ContactPage/ContactPage.test.tsx

diff --git a/src/components/pages/ContactPage/ContactPage.test.tsx b/src/components/pages/ContactPage/ContactPage.test.tsx
new file mode 100644
index 0000000..839f218
--- /dev/null
+++ b/src/components/pages/ContactPage/ContactPage.test.tsx
@@ -0,0 +1,41 @@
+import { screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { renderWithRouter as render } from 'components/utils/tests'
+
+import ContactPage from './ContactPage'
+
+vi.stubGlobal('open', vi.fn())
+describe('ContactPage', () => {
+  const open = vi.spyOn(window, 'open')
+
+  test('renders without crashing and displays the correct contact methods', () => {
+    render(<ContactPage />)
+
+    expect(screen.getAllByText('Contacts')).toHaveLength(2) // Page title and the Appbar drawer link
+    expect(screen.getByLabelText('Email button')).toBeInTheDocument()
+    expect(screen.getByLabelText('LinkedIn button')).toBeInTheDocument()
+    expect(screen.getByLabelText('GitHub button')).toBeInTheDocument()
+  })
+
+  test('opens the correct link when the email button is clicked', async () => {
+    render(<ContactPage />)
+
+    await userEvent.click(screen.getByLabelText('Email button'))
+    expect(open).toHaveBeenCalledWith('mailto:michele.tartari+web@live.com', '_blank')
+  })
+
+  test('opens the correct link when the LinkedIn button is clicked', async () => {
+    render(<ContactPage />)
+
+    await userEvent.click(screen.getByLabelText('LinkedIn button'))
+    expect(open).toHaveBeenCalledWith('https://www.linkedin.com/in/m-tartari/', '_blank')
+  })
+
+  test('opens the correct link when the GitHub button is clicked', async () => {
+    render(<ContactPage />)
+
+    await userEvent.click(screen.getByLabelText('GitHub button'))
+    expect(open).toHaveBeenCalledWith('https://www.github.com/m-tartari/', '_blank')
+  })
+})
diff --git a/src/components/pages/ContactPage/ContactPage.tsx b/src/components/pages/ContactPage/ContactPage.tsx
index ce76fc3..4ecf1ba 100644
--- a/src/components/pages/ContactPage/ContactPage.tsx
+++ b/src/components/pages/ContactPage/ContactPage.tsx
@@ -24,7 +24,7 @@ const ContactPage = () => {
       </Typography>
       <List>
         <ListItem disablePadding>
-          <ListItemButton onClick={() => window.open('mailto:michele.tartari+web@live.com', '_blank')}>
+          <ListItemButton aria-label="Email button" onClick={() => window.open('mailto:michele.tartari+web@live.com', '_blank')}>
             <DraftsIcon fontSize="large" />
             <Typography variant="h6" ml={2}>
               michele.tartari+web
@@ -34,7 +34,7 @@ const ContactPage = () => {
           </ListItemButton>
         </ListItem>
         <ListItem disablePadding>
-          <ListItemButton onClick={() => window.open('https://www.linkedin.com/in/m-tartari/', '_blank')}>
+          <ListItemButton aria-label="LinkedIn button" onClick={() => window.open('https://www.linkedin.com/in/m-tartari/', '_blank')}>
             <LinkedInIcon fontSize="large" />
             <Typography variant="h6" ml={2}>
               m-tartari
@@ -42,7 +42,7 @@ const ContactPage = () => {
           </ListItemButton>
         </ListItem>
         <ListItem disablePadding>
-          <ListItemButton onClick={() => window.open('https://www.github.com/m-tartari/', '_blank')}>
+          <ListItemButton aria-label="GitHub button" onClick={() => window.open('https://www.github.com/m-tartari/', '_blank')}>
             <GitHubIcon fontSize="large" />
             <Typography variant="h6" ml={2}>
               m-tartari