Add tests and fix onSort behaviour

cadence-workflow · Nov 22, 2024 · 3a0d48d · 3a0d48d
1 parent 6a8e803
commit 3a0d48d
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 7 deletions.
diff --git a/src/components/table/__tests__/table.test.tsx b/src/components/table/__tests__/table.test.tsx
@@ -11,6 +11,14 @@ type TestDataT = {
 const SAMPLE_DATA_NUM_ROWS = 10;
 const SAMPLE_DATA_NUM_COLUMNS = 5;
 
+jest.mock('../table-sortable-head-cell/table-sortable-head-cell', () =>
+  jest.fn(({ name, columnID, onSort }) => (
+    <th data-testid="sortable-head-cell" onClick={() => onSort(columnID)}>
+      {name}
+    </th>
+  ))
+);
+
 const SAMPLE_ROWS: Array<TestDataT> = Array.from(
   { length: SAMPLE_DATA_NUM_ROWS },
   (_, rowIndex) => ({ value: `test_${rowIndex}` })
@@ -56,24 +64,46 @@ describe('Table', () => {
     const { mockOnSort } = setup({ shouldShowResults: true });
 
     const columnElements = await screen.findAllByText(/Column Name \d+/);
+    expect(columnElements.length).toEqual(5);
+
+    const sortableColumnHeadCells =
+      await screen.findAllByTestId('sortable-head-cell');
+    expect(sortableColumnHeadCells.length).toEqual(5);
 
     act(() => {
       fireEvent.click(columnElements[0]);
     });
 
     expect(mockOnSort).toHaveBeenCalledWith('column_id_0');
   });
+
+  it('should render plain head cells for sortable columns when onSort is missing', async () => {
+    setup({ shouldShowResults: true, omitOnSort: true });
+
+    const columnElements = await screen.findAllByText(/Column Name \d+/);
+    expect(columnElements.length).toEqual(5);
+
+    const sortableColumnHeadCells =
+      screen.queryAllByTestId('sortable-head-cell');
+    expect(sortableColumnHeadCells.length).toEqual(0);
+  });
 });
 
-function setup({ shouldShowResults }: { shouldShowResults: boolean }) {
+function setup({
+  shouldShowResults,
+  omitOnSort,
+}: {
+  shouldShowResults: boolean;
+  omitOnSort?: boolean;
+}) {
   const mockOnSort = jest.fn();
   render(
     <Table
       data={SAMPLE_ROWS}
       columns={SAMPLE_COLUMNS}
       shouldShowResults={shouldShowResults}
       endMessage={<div>Sample end message</div>}
-      onSort={mockOnSort}
+      {...(!omitOnSort && { onSort: mockOnSort })}
       sortColumn={SAMPLE_COLUMNS[SAMPLE_DATA_NUM_COLUMNS - 1].id}
       sortOrder="DESC"
     />

diff --git a/src/components/table/table-sortable-head-cell/__tests__/table-sortable-head-cell.test.tsx b/src/components/table/table-sortable-head-cell/__tests__/table-sortable-head-cell.test.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+
+import { render, screen, userEvent } from '@/test-utils/rtl';
+
+import { type SortOrder } from '@/utils/sort-by';
+
+import TableSortableHeadCell from '../table-sortable-head-cell';
+
+describe(TableSortableHeadCell.name, () => {
+  it('should render unsorted without error', async () => {
+    setup({ sortColumn: 'column_2', sortOrder: 'DESC' });
+
+    expect(
+      await screen.findByLabelText('Column 1, not sorted')
+    ).toBeInTheDocument();
+  });
+
+  it('should call onSort when clicked', async () => {
+    const { mockOnSort, user } = setup({
+      sortColumn: 'column_2',
+      sortOrder: 'DESC',
+    });
+
+    const cell = await screen.findByLabelText('Column 1, not sorted');
+
+    await user.click(cell);
+    expect(mockOnSort).toHaveBeenCalledWith('column_1');
+  });
+
+  it('should render sorted ASC without error', async () => {
+    setup({ sortColumn: 'column_1', sortOrder: 'ASC' });
+
+    expect(
+      await screen.findByLabelText('Column 1, ascending sorting')
+    ).toBeInTheDocument();
+  });
+
+  it('should render sorted DESC without error', async () => {
+    setup({ sortColumn: 'column_1', sortOrder: 'DESC' });
+
+    expect(
+      await screen.findByLabelText('Column 1, descending sorting')
+    ).toBeInTheDocument();
+  });
+});
+
+function setup({
+  sortColumn,
+  sortOrder,
+}: {
+  sortColumn: string;
+  sortOrder: SortOrder;
+}) {
+  const user = userEvent.setup();
+  const mockOnSort = jest.fn();
+  render(
+    <TableSortableHeadCell
+      name="Column 1"
+      columnID="column_1"
+      width="20%"
+      onSort={mockOnSort}
+      sortColumn={sortColumn}
+      sortOrder={sortOrder}
+    />
+  );
+  return { mockOnSort, user };
+}
diff --git a/src/components/table/table-sortable-head-cell/table-sortable-head-cell.types.ts b/src/components/table/table-sortable-head-cell/table-sortable-head-cell.types.ts
@@ -1,8 +1,10 @@
+import { type SortOrder } from '@/utils/sort-by';
+
 export type Props = {
   name: string;
   columnID: string;
   width: string;
   sortColumn?: string;
-  sortOrder?: string;
+  sortOrder?: SortOrder;
   onSort: (column: string) => void;
 };
diff --git a/src/components/table/table.tsx b/src/components/table/table.tsx
@@ -17,22 +17,25 @@ export default function Table<T extends object, C extends TableConfig<T>>({
   columns,
   shouldShowResults,
   endMessage,
-  ...sortParams
+  onSort,
+  sortColumn,
+  sortOrder,
 }: Props<T, C>) {
   return (
     <styled.TableRoot>
       <StyledTable>
         <StyledTableHead>
           <StyledTableHeadRow>
             {columns.map((column) =>
-              column.sortable ? (
+              column.sortable && typeof onSort === 'function' ? (
                 <TableSortableHeadCell
                   key={column.id}
                   name={column.name}
                   columnID={column.id}
                   width={column.width}
-                  onSort={() => {}}
-                  {...sortParams}
+                  onSort={onSort}
+                  sortColumn={sortColumn}
+                  sortOrder={sortOrder}
                 />
               ) : (
                 <styled.TableHeadCell