✅ test(contacts): add unit tests

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')
+  })
+})

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