Issue 662/fix failing tests

src/components/Contacts/ContactListTable.jsx

@@ -59,13 +59,15 @@ const ContactListTable = ({ contacts, deleteContact, handleDeleteContact, addCon
     >
       {isSmallScreen ? (
         <ContactListTableMobile
+          data-testid="ContactListTableMobile"
           contacts={contacts}
           deleteContact={deleteContact}
           handleSendMessage={handleSendMessage}
           editContact={handleEditContact}
         />
       ) : (
         <ContactListTableDesktop
+          data-testid="ContactListTableDesktop"
           contacts={contacts}
           deleteContact={deleteContact}
           handleSendMessage={handleSendMessage}

src/components/Contacts/ContactListTableDesktop.jsx

@@ -39,10 +39,17 @@ const CustomToolbar = () => (
  * @param {Function} Props.deleteContact - Function to delete a contact
  * @param {Function} Props.editContact - Function to edit a contact
  * @param {Function} Props.handleSendMessage - Function to handle sending a message
+ * @param {string} Props.'data-testid' - Test ID
 //  * @param {Function} Props.handleProfileClick - Function to handle profile click
  * @returns {React.JSX.Element} The ContactListTableDesktop component
  */
-const ContactListTableDesktop = ({ contacts, deleteContact, editContact, handleSendMessage }) => {
+const ContactListTableDesktop = ({
+  contacts,
+  deleteContact,
+  editContact,
+  handleSendMessage,
+  'data-testid': dataTestId
+}) => {
   const theme = useTheme();
 
   const columnTitlesArray = [
@@ -122,6 +129,7 @@ const ContactListTableDesktop = ({ contacts, deleteContact, editContact, handleS
 
   return (
     <DataGrid
+      data-testid={dataTestId}
       columns={columnTitlesArray}
       rows={contacts?.map((contact) => ({
         id: contact.webId,

src/components/Contacts/ContactListTableMobile.jsx

@@ -44,9 +44,16 @@ import ContactProfileIcon from './ContactProfileIcon';
  * @param {Function} Props.deleteContact - Function to delete a contact
  * @param {Function} Props.editContact - Function to edit a contact
  * @param {Function} Props.handleSendMessage - Function to handle sending a message
+ * @param {string} Props.'data-testid' - Test ID
  * @returns {React.JSX.Element} The ContactListTableMobile component
  */
-const ContactListTableMobile = ({ contacts, deleteContact, editContact, handleSendMessage }) => {
+const ContactListTableMobile = ({
+  contacts,
+  deleteContact,
+  editContact,
+  handleSendMessage,
+  'data-testid': dataTestId
+}) => {
   const { setContact } = useContext(DocumentListContext);
   const { addNotification } = useNotification();
   const [anchorEl, setAnchorEl] = useState(null);
@@ -98,7 +105,7 @@ const ContactListTableMobile = ({ contacts, deleteContact, editContact, handleSe
   };
 
   return (
-    <Box>
+    <Box data-testid={dataTestId}>
       <Box
         sx={{
           my: '15px',
@@ -157,6 +164,7 @@ const ContactListTableMobile = ({ contacts, deleteContact, editContact, handleSe
                 >
                   <IconButton
                     id="actions-icon-button"
+                    aria-labelledby="actions-icon-button"
                     aria-controls={openMenu === contact.webId ? 'actions-menu' : undefined}
                     aria-haspopup="true"
                     aria-expanded={openMenu === contact.webId ? 'true' : undefined}

src/components/Signup/PodRegistrationForm.jsx

@@ -83,6 +83,7 @@ const PodRegistrationForm = ({ register, caseManagerName, previousInfo = null })
           onChange={(e) => setPassword(e.target.value)}
           type={showPassword ? 'text' : 'password'}
           InputProps={{
+            'aria-label': 'Password',
             endAdornment: (
               <InputAdornment position="end">
                 <IconButton
@@ -111,6 +112,7 @@ const PodRegistrationForm = ({ register, caseManagerName, previousInfo = null })
           error={password !== confirmPassword}
           helperText={password !== confirmPassword && 'Password does not match'}
           InputProps={{
+            'aria-label': 'Confirm Password',
             endAdornment: (
               <InputAdornment position="end">
                 <IconButton

src/pages/Signup.jsx

@@ -2,16 +2,17 @@
 import React, { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
 // Custom Hooks Imports
-import { useSession, useNotification } from '@hooks';
+import { useNotification, useSession } from '@hooks';
 // Inrupt Imports
-import { getThing, getWebIdDataset, getStringNoLocale } from '@inrupt/solid-client';
+import { getStringNoLocale, getThing, getWebIdDataset } from '@inrupt/solid-client';
 import { FOAF } from '@inrupt/vocab-common-rdf';
 // Material UI Imports
 import Box from '@mui/material/Box';
 import Container from '@mui/material/Container';
 import Paper from '@mui/material/Paper';
-
-import { Tab, Tabs, Typography } from '@mui/material';
+import Tab from '@mui/material/Tab';
+import Tabs from '@mui/material/Tabs';
+import Typography from '@mui/material/Typography';
 // Constant Imports
 import { ENV } from '@constants';
 // Signup Form Imports
@@ -59,7 +60,7 @@ const PassRegistrationTab = ({ register, caseManagerName, previousInfo }) => {
     </Box>
   );
 };
-/**/
+
 /**
  * Signup - First screen in the user registration flow.
  * Allows users to either create a pod, or sign into an existing pod

test/components/Contacts/ContactListTable.test.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
-import { render, cleanup } from '@testing-library/react';
-import { afterEach, describe, expect, it } from 'vitest';
-// import { SessionContext } from '@contexts';
+import { cleanup, render, screen } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { SessionContext } from '@contexts';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ContactListTable } from '@components/Contacts';
 import createMatchMedia from '../../helpers/createMatchMedia';
@@ -14,48 +14,52 @@ afterEach(() => {
 
 const queryClient = new QueryClient();
 
-const MockTableComponent = ({ contacts }) => (
-  <QueryClientProvider client={queryClient}>
-    <BrowserRouter>
-      <ContactListTable contacts={contacts} />
-    </BrowserRouter>
-  </QueryClientProvider>
-);
+const MockTableComponent = ({ contacts, isSmallScreen, isLoggedIn = true }) => {
+  window.matchMedia = createMatchMedia(isSmallScreen ? 500 : 1200);
+
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <SessionContext.Provider value={{ session: { info: { isLoggedIn } } }}>
+        <BrowserRouter>
+          <ContactListTable
+            contacts={contacts}
+            deleteContact={vi.fn()}
+            handleDeleteContact={vi.fn()}
+            addContact={vi.fn()}
+          />
+        </BrowserRouter>
+      </SessionContext.Provider>
+    </QueryClientProvider>
+  );
+};
+
+const contacts = [
+  {
+    familyName: 'Abby',
+    givenName: 'Aaron',
+    person: 'Aaron Abby',
+    webId: 'https://example.com/Abby'
+  },
+  {
+    familyName: 'Builder',
+    givenName: 'Bob',
+    person: 'Bob Builder',
+    webId: 'https://example.com/Builder'
+  }
+];
 
 describe('contacts table tests', () => {
   it('renders all clients from client context', () => {
-    const contacts = [
-      {
-        familyName: 'Abby',
-        givenName: 'Aaron',
-        person: 'Aaron Abby',
-        webId: 'https://example.com/Abby'
-      },
-      {
-        familyName: 'Builder',
-        givenName: 'Bob',
-        person: 'Bob Builder',
-        webId: 'https://example.com/Builder'
-      }
-    ];
+    MockTableComponent({ contacts });
 
-    const { getAllByRole, queryByRole } = render(<MockTableComponent contacts={contacts} />);
+    const allRows = screen.getAllByRole('row');
 
-    const allRows = getAllByRole('row');
-
-    // Expect 3 rows: the header, Abby's row, Builder's Row
     expect(allRows.length).toBe(3);
 
-    const row1GivenName = queryByRole('cell', { name: 'Aaron' });
-    const row1FamilyName = queryByRole('cell', { name: 'Abby' });
-
-    const row2GivenName = queryByRole('cell', { name: 'Bob' });
-    const row2FamilyName = queryByRole('cell', { name: 'Builder' });
-
-    expect(row1GivenName).not.toBeNull();
-    expect(row1FamilyName).not.toBeNull();
-    expect(row2GivenName).not.toBeNull();
-    expect(row2FamilyName).not.toBeNull();
+    expect(screen.getByRole('cell', { name: 'Aaron' })).not.toBeNull();
+    expect(screen.getByRole('cell', { name: 'Abby' })).not.toBeNull();
+    expect(screen.getByRole('cell', { name: 'Bob' })).not.toBeNull();
+    expect(screen.getByRole('cell', { name: 'Builder' })).not.toBeNull();
   });
 
   it('sorts clients by familyName', () => {
@@ -74,19 +78,23 @@ describe('contacts table tests', () => {
       }
     ];
 
-    const { getByRole } = render(<MockTableComponent contacts={[...originalArray]} />);
+    MockTableComponent({ contacts: originalArray });
 
-    const client1 = getByRole('cell', { name: 'Zeigler' });
-    const client2 = getByRole('cell', { name: 'Builder' });
+    const client1 = screen.getByRole('cell', { name: 'Zeigler' });
+    const client2 = screen.getByRole('cell', { name: 'Builder' });
 
     expect(client1.compareDocumentPosition(client2)).toBe(Node.DOCUMENT_POSITION_PRECEDING);
   });
 
   it('renders ContactsListTableDesktop when user is logged in on larger screen device', () => {
-    window.matchMedia = createMatchMedia(1200);
+    MockTableComponent({ contacts, isSmallScreen: false });
+
+    expect(screen.getByTestId('ContactListTableDesktop')).not.toBeNull();
   });
 
   it('renders ContactsListTableMobile when user is logged in on smaller screen device', () => {
-    window.matchMedia = createMatchMedia(500);
+    MockTableComponent({ contacts, isSmallScreen: true });
+
+    expect(screen.getByTestId('ContactListTableMobile')).not.toBeNull();
   });
 });

test/components/Contacts/ContactListTableDesktop.test.jsx

@@ -1,11 +1,82 @@
-// import React from 'react';
-// import { BrowserRouter } from 'react-router-dom';
-// import { render } from '@testing-library/react';
-// import { expect, it } from 'vitest';
-// import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-// import ContactListTableDesktop from '../../../src/components/Contacts/ContactListTableDesktop';
+import React from 'react';
+import { BrowserRouter } from 'react-router-dom';
+import { cleanup, render, screen, within } from '@testing-library/react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import { SessionContext } from '@contexts';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ContactListTableDesktop } from '@components/Contacts';
 
-// const queryClient = new QueryClient();
-import { describe } from 'vitest';
+// Clear created DOM after each test
+afterEach(() => {
+  cleanup();
+});
 
-describe.todo('write tests for this component');
+const queryClient = new QueryClient();
+
+const MockTableComponent = ({
+  contacts,
+  deleteContact = vi.fn(),
+  editContact = vi.fn(),
+  handleSendMessage = vi.fn(),
+  'data-testid': dataTestId = 'contacts-table',
+  sessionObj
+}) => (
+  <QueryClientProvider client={queryClient}>
+    <SessionContext.Provider value={sessionObj}>
+      <BrowserRouter>
+        <ContactListTableDesktop
+          contacts={contacts}
+          deleteContact={deleteContact}
+          editContact={editContact}
+          handleSendMessage={handleSendMessage}
+          data-testid={dataTestId}
+        />
+      </BrowserRouter>
+    </SessionContext.Provider>
+  </QueryClientProvider>
+);
+
+const contacts = [
+  {
+    familyName: 'Abby',
+    givenName: 'Aaron',
+    person: 'Aaron Abby',
+    webId: 'https://example.com/Abby'
+  },
+  {
+    familyName: 'Builder',
+    givenName: 'Bob',
+    person: 'Bob Builder',
+    webId: 'https://example.com/Builder'
+  }
+];
+
+describe('contacts list table desktop tests', () => {
+  const sessionObj = {
+    login: vi.fn(),
+    fetch: vi.fn(),
+    podUrl: 'https://example.com',
+    session: {
+      fetch: vi.fn(),
+      info: {
+        webId: 'https://example.com/profile/',
+        isLoggedIn: true
+      }
+    }
+  };
+
+  it('renders', () => {
+    render(<MockTableComponent contacts={contacts} session={sessionObj} />);
+  });
+
+  it('renders with all clients from client context', () => {
+    render(<MockTableComponent contacts={contacts} session={sessionObj} />);
+
+    const dataGrid = screen.getByTestId('contacts-table');
+
+    contacts.forEach((contact) => {
+      expect(within(dataGrid).getByText(contact.givenName)).not.toBeNull();
+      expect(within(dataGrid).getByText(contact.familyName)).not.toBeNull();
+    });
+  });
+});