Adding basic sorting tests

Author: andycwilliams

src/hooks/useTableSort.js

@@ -1,23 +1,36 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
-const useSortedData = (getFieldValue, initialFieldType, initialData = []) => {
-  const [fieldType, setFieldType] = useState(initialFieldType);
+const useTableSort = (initialData, initialSortValue) => {
   const [sortedData, setSortedData] = useState([]);
+  const [sortValue, setSortValue] = useState(initialSortValue);
+
+  const sortData = (value) => {
+    const sorted = [...initialData].sort((a, b) => {
+      if (value === 'First Name') {
+        return a.givenName.localeCompare(b.givenName);
+      }
+      if (value === 'Last Name') {
+        return a.familyName.localeCompare(b.familyName);
+      }
+      if (value === 'Web ID') {
+        return a.webId.localeCompare(b.webId);
+      }
+      return 0;
+    });
+    setSortedData(sorted);
+  };
 
   useEffect(() => {
-    const sortData = (field, dataToSort = []) => {
-      if (!Array.isArray(dataToSort)) return [];
-      return [...dataToSort].sort((a, b) => {
-        const fieldA = getFieldValue(a, field) || '';
-        const fieldB = getFieldValue(b, field) || '';
-        return fieldA.localeCompare(fieldB);
-      });
-    };
+    setSortedData([...initialData]);
+  }, [initialData]);
 
-    setSortedData(sortData(initialData, fieldType));
-  }, [fieldType, initialData, getFieldValue]);
+  useEffect(() => {
+    if (initialData.length > 0) {
+      sortData(sortValue, initialData);
+    }
+  }, [sortValue, initialData]);
 
-  return { fieldType, setFieldType, sortedData };
+  return { sortedData, sortValue, setSortValue };
 };
 
-export default useSortedData;
+export default useTableSort;

test/components/Contacts/ContactListTableDesktop.test.jsx

@@ -48,6 +48,12 @@ const contacts = [
     givenName: 'Bob',
     person: 'Bob Builder',
     webId: 'https://example.com/Builder'
+  },
+  {
+    familyName: 'Carl',
+    givenName: 'Carson',
+    person: 'Carl Carson',
+    webId: 'https://example.com/Carson'
   }
 ];
 

test/components/Contacts/ContactListTableMobile.test.jsx

@@ -13,6 +13,20 @@ afterEach(() => {
 
 const queryClient = new QueryClient();
 
+const sortData = (data, key) =>
+  [...data].sort((a, b) => {
+    if (key === 'First Name') {
+      return a.givenName.localeCompare(b.givenName);
+    }
+    if (key === 'Last Name') {
+      return a.familyName.localeCompare(b.familyName);
+    }
+    if (key === 'Web ID') {
+      return a.webId.localeCompare(b.webId);
+    }
+    return 0;
+  });
+
 const MockTableComponent = ({
   contacts,
   deleteContact = vi.fn(),
@@ -48,6 +62,12 @@ const contacts = [
     givenName: 'Bob',
     person: 'Bob Builder',
     webId: 'https://example.com/Builder'
+  },
+  {
+    familyName: 'Carson',
+    givenName: 'Carl',
+    person: 'Carl Carson',
+    webId: 'https://example.com/Carson'
   }
 ];
 
@@ -82,4 +102,31 @@ describe('contacts list table mobile tests', () => {
       expect(webIdElement).not.toBeNull();
     });
   });
+
+  it('sorts by first name correctly', () => {
+    render(<MockTableComponent contacts={contacts} session={sessionObj} />);
+
+    const sortedData = sortData(contacts, 'First Name');
+    expect(sortedData[0].givenName).toBe('Aaron');
+    expect(sortedData[1].givenName).toBe('Bob');
+    expect(sortedData[2].givenName).toBe('Carl');
+  });
+
+  it('sorts by last name correctly', () => {
+    render(<MockTableComponent contacts={contacts} session={sessionObj} />);
+
+    const sortedData = sortData(contacts, 'Last Name');
+    expect(sortedData[0].familyName).toBe('Abby');
+    expect(sortedData[1].familyName).toBe('Builder');
+    expect(sortedData[2].familyName).toBe('Carson');
+  });
+
+  it('sorts by web ID correctly', () => {
+    render(<MockTableComponent contacts={contacts} session={sessionObj} />);
+
+    const sortedData = sortData(contacts, 'Web ID');
+    expect(sortedData[0].webId).toBe('https://example.com/Abby');
+    expect(sortedData[1].webId).toBe('https://example.com/Builder');
+    expect(sortedData[2].webId).toBe('https://example.com/Carson');
+  });
 });

test/pages/Contacts.test.jsx

@@ -73,6 +73,7 @@ describe('Contacts Page', () => {
     const contacts = getByRole('grid');
     expect(contacts).not.toBeNull();
   });
+  
   it('displays empty list message when there are no contacts', () => {
     useContactsList.mockReturnValue({ data: [], refetch: vi.fn() });
     const { getByLabelText } = render(