@arbor-education/design-system.components 0.3.0 → 0.3.2

package/src/components/table/Table.test.tsx

@@ -1,5 +1,5 @@
 import { describe, expect, expectTypeOf, test, vi } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import { Table, TABLE_SPACING } from './Table';
 import '@testing-library/jest-dom/vitest';
 import { BulkActionsDropdown } from 'Components/table/BulkActionsDropdown';
@@ -7,6 +7,7 @@ import { HideColumnsDropdown } from 'Components/table/HideColumnsDropdown';
 import { TableSettingsDropdown } from './pagination/TableSettingsDropdown';
 import userEvent from '@testing-library/user-event';
 import type { GridApi } from 'ag-grid-enterprise';
+import * as focusFirstFocusableElementModule from 'Utils/focusFirstFocusableElement';
 
 describe('Table', () => {
   test('renders table container', () => {
@@ -594,7 +595,7 @@ describe('Table', () => {
       });
     });
 
-    test('Cell colours checkbox is unchecked by default', async () => {
+    test('Cell colours checkbox is checked by default', async () => {
       render(
         <Table
           headerContent={<TableSettingsDropdown />}
@@ -605,11 +606,11 @@ describe('Table', () => {
 
       await waitFor(() => {
         const cellColoursCheckbox = screen.getByLabelText('Cell colours') as HTMLInputElement;
-        expect(cellColoursCheckbox.checked).toBe(false);
+        expect(cellColoursCheckbox.checked).toBe(true);
       });
     });
 
-    test('can toggle Cell colours checkbox on', async () => {
+    test('can toggle Cell colours checkbox off', async () => {
       render(
         <Table
           headerContent={<TableSettingsDropdown />}
@@ -622,11 +623,11 @@ describe('Table', () => {
       await userEvent.click(cellColoursCheckbox);
 
       await waitFor(() => {
-        expect((cellColoursCheckbox as HTMLInputElement).checked).toBe(true);
+        expect((cellColoursCheckbox as HTMLInputElement).checked).toBe(false);
       });
     });
 
-    test('can toggle Cell colours checkbox off after turning it on', async () => {
+    test('can toggle Cell colours checkbox on after turning it off', async () => {
       render(
         <Table
           headerContent={<TableSettingsDropdown />}
@@ -640,7 +641,7 @@ describe('Table', () => {
       await userEvent.click(cellColoursCheckbox);
 
       await waitFor(() => {
-        expect((cellColoursCheckbox as HTMLInputElement).checked).toBe(false);
+        expect((cellColoursCheckbox as HTMLInputElement).checked).toBe(true);
       });
     });
 
@@ -960,6 +961,215 @@ describe('Table', () => {
         expect(onColumnBordersChanged).toHaveBeenCalledWith(false);
       });
     });
+
+    test('applies both foreground and background colours when enabled', async () => {
+      const columnDefs = [
+        {
+          field: 'status',
+          headerName: 'Status',
+        },
+      ];
+
+      const rowData = [
+        {
+          status: {
+            foregroundColor: 'rgb(255, 255, 255)',
+            backgroundColor: 'rgb(0, 0, 255)',
+          },
+        },
+      ];
+
+      const { container } = render(
+        <Table
+          columnDefs={columnDefs}
+          rowData={rowData}
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+
+      // Check that both colours are applied by default
+      await waitFor(() => {
+        const cells = container.querySelectorAll('.ag-cell');
+        const statusCell = Array.from(cells).find(cell =>
+          cell.getAttribute('col-id') === 'status',
+        ) as HTMLElement;
+        expect(statusCell).toBeDefined();
+        expect(statusCell.style.color).toBe('rgb(255, 255, 255)');
+        expect(statusCell.style.backgroundColor).toBe('rgb(0, 0, 255)');
+      });
+    });
+
+    test('re-applies colours when cell colours is re-enabled', async () => {
+      const columnDefs = [
+        {
+          field: 'status',
+          headerName: 'Status',
+        },
+      ];
+
+      const rowData = [
+        { status: { backgroundColor: 'rgb(255, 165, 0)' } },
+      ];
+
+      const { container } = render(
+        <Table
+          columnDefs={columnDefs}
+          rowData={rowData}
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+
+      // Disable and then re-enable cell colours
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+      const cellColoursCheckbox = screen.getByLabelText('Cell colours');
+      await userEvent.click(cellColoursCheckbox);
+      await userEvent.click(cellColoursCheckbox);
+
+      // Check that background colour is re-applied
+      await waitFor(() => {
+        const cells = container.querySelectorAll('.ag-cell');
+        const statusCell = Array.from(cells).find(cell =>
+          cell.getAttribute('col-id') === 'status',
+        ) as HTMLElement;
+        expect(statusCell).toBeDefined();
+        expect(statusCell.style.backgroundColor).toBe('rgb(255, 165, 0)');
+      });
+    });
+
+    test('cell colours are safe for cells with nullish/empty values', async () => {
+      const columnDefs = [
+        {
+          field: 'status',
+          headerName: 'Status',
+        },
+      ];
+
+      const rowData = [
+        { },
+      ];
+      await expect(async () => {
+        render(
+          <Table
+            headerContent={<TableSettingsDropdown />}
+            columnDefs={columnDefs}
+            rowData={rowData}
+          />,
+        );
+      }).not.toThrow();
+    });
+
+    test('onCellColorsChanged gets called when cell colours toggle', async () => {
+      const onCellColorsChanged = vi.fn();
+
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+          onCellColorsChanged={onCellColorsChanged}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      const cellColoursCheckbox = screen.getByLabelText('Cell colours');
+      await userEvent.click(cellColoursCheckbox);
+
+      await waitFor(() => {
+        expect(onCellColorsChanged).toHaveBeenCalledExactlyOnceWith(false);
+      });
+
+      await userEvent.click(cellColoursCheckbox);
+
+      await waitFor(() => {
+        expect(onCellColorsChanged).toHaveBeenCalledTimes(2);
+        expect(onCellColorsChanged).toHaveBeenNthCalledWith(2, true);
+      });
+    });
+
+    test('onCellColorsChanged is called when reset button is clicked', async () => {
+      const onCellColorsChanged = vi.fn();
+
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+          onCellColorsChanged={onCellColorsChanged}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      const cellColoursCheckbox = screen.getByLabelText('Cell colours');
+      await userEvent.click(cellColoursCheckbox);
+
+      await waitFor(() => {
+        expect(onCellColorsChanged).toHaveBeenCalledWith(false);
+      });
+
+      const resetButton = screen.getByRole('button', { name: /Reset Table Settings/i });
+      await userEvent.click(resetButton);
+
+      await waitFor(() => {
+        expect(onCellColorsChanged).toHaveBeenCalledWith(true);
+      });
+    });
+
+    test('reset button resets cell colours to default (on)', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      // Turn off cell colours
+      const cellColoursCheckbox = screen.getByLabelText('Cell colours');
+      await userEvent.click(cellColoursCheckbox);
+
+      await waitFor(() => {
+        expect((cellColoursCheckbox as HTMLInputElement).checked).toBe(false);
+      });
+
+      // Click reset button
+      const resetButton = screen.getByRole('button', { name: /Reset Table Settings/i });
+      await userEvent.click(resetButton);
+
+      await waitFor(() => {
+        expect((cellColoursCheckbox as HTMLInputElement).checked).toBe(true);
+      });
+    });
+
+    test('cell colours setting persists when dropdown is closed and reopened', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      // Open dropdown and toggle cell colours
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      const cellColoursCheckbox = screen.getByLabelText('Cell colours');
+      await userEvent.click(cellColoursCheckbox);
+
+      await waitFor(() => {
+        expect((cellColoursCheckbox as HTMLInputElement).checked).toBe(false);
+      });
+
+      // Close dropdown
+      await userEvent.keyboard('{Escape}');
+
+      // Reopen dropdown
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      // Check setting persisted
+      await waitFor(() => {
+        expect((screen.getByLabelText('Cell colours') as HTMLInputElement).checked).toBe(false);
+      });
+    });
   });
 
   describe('ButtonCellRenderer', () => {
@@ -1025,4 +1235,330 @@ describe('Table', () => {
       expect(handleClick2).toHaveBeenCalledTimes(1);
     });
   });
+
+  describe('SelectDropdownCellRenderer', () => {
+    const options = [{ label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' }];
+    const columnDefs = [{
+      field: 'selectField',
+      headerName: 'Select Field',
+      cellRenderer: 'dsSelectDropdownCellRenderer',
+      cellRendererParams: { options: options, placeholder: 'Placeholder Text' },
+    }];
+
+    test('renders with placeholder', () => {
+      const rowData = [{ selectField: null }];
+      render(
+        <Table
+          columnDefs={columnDefs}
+          rowData={rowData}
+        />,
+      );
+      expect(screen.getByText('Placeholder Text')).toBeInTheDocument();
+    });
+
+    test('renders with option', () => {
+      const rowData = [{ selectField: 'option1' }];
+      render(
+        <Table
+          columnDefs={columnDefs}
+          rowData={rowData}
+        />,
+      );
+      expect(screen.getByText('Option 1')).toBeInTheDocument();
+    });
+
+    test('renders with value not in options as raw string', () => {
+      const rowData = [{ selectField: 'unknown-value' }];
+      render(
+        <Table
+          columnDefs={columnDefs}
+          rowData={rowData}
+        />,
+      );
+      expect(screen.getByText('unknown-value')).toBeInTheDocument();
+    });
+
+    test('renders with empty string shows placeholder', () => {
+      const rowData = [{ selectField: '' }];
+      render(
+        <Table
+          columnDefs={columnDefs}
+          rowData={rowData}
+        />,
+      );
+      expect(screen.getByText('Placeholder Text')).toBeInTheDocument();
+    });
+
+    test('renders dropdown button variant in cell', () => {
+      const rowData = [{ selectField: 'option1' }];
+      const { container } = render(
+        <Table
+          columnDefs={columnDefs}
+          rowData={rowData}
+        />,
+      );
+      const dropdownButton = container.querySelector('.ds-table__select-dropdown-cell.ds-button--dropdown');
+      expect(dropdownButton).toBeInTheDocument();
+    });
+  });
+
+  describe('SelectDropdownCellEditor', () => {
+    const options = [
+      { label: 'Option 1', value: 'option1' },
+      { label: 'Option 2', value: 'option2' },
+      { label: 'Option 3', value: 'option3' },
+    ];
+    const editableSelectColumnDefs = [{
+      field: 'selectField',
+      headerName: 'Select Field',
+      cellRenderer: 'dsSelectDropdownCellRenderer',
+      cellEditor: 'dsSelectDropdownCellEditor',
+      cellRendererParams: { options, placeholder: 'Placeholder Text' },
+      cellEditorParams: { options, placeholder: 'Placeholder Text' },
+      editable: true,
+    }];
+
+    async function renderAndStartEditing(rowData: { selectField: string }[]) {
+      let gridApi: GridApi | null = null;
+      render(
+        <Table
+          columnDefs={editableSelectColumnDefs}
+          rowData={rowData}
+          onGridReady={(e) => {
+            gridApi = e.api;
+          }}
+        />,
+      );
+      await waitFor(() => expect(gridApi).toBeTruthy());
+      await act(async () => {
+        gridApi!.startEditingCell({ rowIndex: 0, colKey: 'selectField' });
+      });
+      const editorWrapper = await waitFor(() => document.querySelector('.ds-table__select-dropdown-editor'));
+      return editorWrapper!.querySelector('button')!;
+    }
+
+    test('opens editor with dropdown; selecting option updates cell', async () => {
+      const trigger = await renderAndStartEditing([{ selectField: 'option1' }]);
+      expect(trigger).toHaveTextContent('Option 1');
+      await userEvent.click(trigger);
+      await userEvent.click(screen.getByText('Option 2'));
+      await waitFor(() => expect(screen.getByText('Option 2')).toBeInTheDocument());
+    });
+
+    test('Escape closes dropdown without changing value', async () => {
+      const trigger = await renderAndStartEditing([{ selectField: 'option1' }]);
+      await userEvent.click(trigger);
+      await waitFor(() => expect(screen.getByText('Option 2')).toBeInTheDocument());
+      await userEvent.keyboard('{Escape}');
+      expect(screen.queryByText('Option 2')).not.toBeInTheDocument();
+      expect(screen.getByText('Option 1')).toBeInTheDocument();
+    });
+  });
+
+  describe('Cell Editing', () => {
+    describe('with literal data values', () => {
+      test('supports editing text fields', async () => {
+        const onCellValueChanged = vi.fn();
+        const columnDefs = [{
+          field: 'name',
+          headerName: 'Name',
+          editable: true,
+        }];
+        const rowData = [
+          { id: 1, name: 'John Doe' },
+          { id: 2, name: 'Jane Smith' },
+        ];
+
+        render(
+          <Table
+            columnDefs={columnDefs}
+            rowData={rowData}
+            onCellValueChanged={onCellValueChanged}
+          />,
+        );
+
+        await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+        await waitFor(() => expect(screen.getByText('John Doe')).toBeInTheDocument());
+
+        const cell = screen.getByText('John Doe');
+        await userEvent.dblClick(cell);
+
+        await userEvent.keyboard('John Updated{Enter}');
+
+        await waitFor(() => {
+          expect(onCellValueChanged).toHaveBeenCalled();
+        });
+
+        expect(onCellValueChanged).toHaveBeenLastCalledWith(expect.objectContaining({ newValue: 'John Updated', oldValue: 'John Doe' }));
+      });
+
+      test('supports editing number fields', async () => {
+        const onCellValueChanged = vi.fn();
+        const columnDefs = [{
+          field: 'age',
+          headerName: 'Age',
+          editable: true,
+          cellDataType: 'number',
+        }];
+        const rowData = [
+          { id: 1, name: 'John Doe', age: 30 },
+          { id: 2, name: 'Jane Smith', age: 25 },
+        ];
+
+        render(
+          <Table
+            columnDefs={columnDefs}
+            rowData={rowData}
+            onCellValueChanged={onCellValueChanged}
+          />,
+        );
+
+        await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+        await waitFor(() => expect(screen.getByText('30')).toBeInTheDocument());
+
+        const cell = screen.getByText('30');
+        await userEvent.dblClick(cell);
+
+        await userEvent.keyboard('35{Enter}');
+
+        await waitFor(() => {
+          expect(onCellValueChanged).toHaveBeenCalled();
+        });
+
+        expect(onCellValueChanged).toHaveBeenLastCalledWith(expect.objectContaining({ oldValue: 30, newValue: 35 }));
+      });
+    });
+
+    /**
+     * Note: when editing object values, the table will just insert the new value and
+     * override the object. It will be the consumer's responsibility within the data layer
+     * to do any processing on cell updates to maintain or alter other fields on the data
+     * as necessary (e.g. cell colours).
+     */
+    describe('with object data values (value field)', () => {
+      test('supports editing text fields with object values', async () => {
+        const onCellValueChanged = vi.fn();
+        const columnDefs = [{
+          field: 'name',
+          headerName: 'Name',
+          editable: true,
+          valueFormatter: Table.DefaultValueFormatter,
+        }];
+        const rowData = [
+          { id: 1, name: { value: 'John Doe' } },
+          { id: 2, name: { value: 'Jane Smith' } },
+        ];
+
+        render(
+          <Table
+            columnDefs={columnDefs}
+            rowData={rowData}
+            onCellValueChanged={onCellValueChanged}
+            defaultColDef={{
+              cellEditorParams: {
+                useFormatter: true,
+              },
+            }}
+          />,
+        );
+
+        await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+        await waitFor(() => expect(screen.getByText('John Doe')).toBeInTheDocument());
+
+        const cell = screen.getByText('John Doe');
+        await userEvent.dblClick(cell);
+
+        await userEvent.keyboard('John Updated{Enter}');
+
+        await waitFor(() => {
+          expect(onCellValueChanged).toHaveBeenCalled();
+        });
+
+        expect(onCellValueChanged).toHaveBeenLastCalledWith(expect.objectContaining({ newValue: 'John Updated', oldValue: { value: 'John Doe' } }));
+      });
+
+      test('supports editing number fields with object values', async () => {
+        const onCellValueChanged = vi.fn();
+        const columnDefs = [{
+          field: 'age',
+          headerName: 'Age',
+          editable: true,
+          cellDataType: 'number',
+          valueFormatter: Table.DefaultValueFormatter,
+        }];
+        const rowData = [
+          { id: 1, name: { value: 'John Doe' }, age: { value: 30 } },
+          { id: 2, name: { value: 'Jane Smith' }, age: { value: 25 } },
+        ];
+
+        render(
+          <Table
+            columnDefs={columnDefs}
+            rowData={rowData}
+            onCellValueChanged={onCellValueChanged}
+            defaultColDef={{
+              cellEditorParams: {
+                useFormatter: true,
+              },
+            }}
+          />,
+        );
+
+        await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+        await waitFor(() => expect(screen.getByText('30')).toBeInTheDocument());
+
+        const cells = screen.getByText('30');
+        await userEvent.dblClick(cells);
+
+        await userEvent.keyboard('35{Enter}');
+
+        await waitFor(() => {
+          expect(onCellValueChanged).toHaveBeenCalled();
+        });
+
+        expect(onCellValueChanged).toHaveBeenLastCalledWith(expect.objectContaining({ newValue: 35, oldValue: { value: 30 } }));
+      });
+    });
+  });
+
+  describe('supressCellFocusAndFocusFirstElement', () => {
+    const handleClick = vi.fn();
+    const columnDefs = [{
+      field: 'action',
+      headerName: 'Action',
+      cellRenderer: 'dsButtonCellRenderer',
+      cellRendererParams: {
+        supressCellFocusAndFocusFirstElement: true,
+      },
+    }];
+    const rowData = [{
+      action: {
+        children: 'Im a lovely button',
+        onClick: handleClick,
+      },
+    }];
+
+    test('setting supressCellFocusAndFocusFirstElement to true should sadd the ds-table__cell--supress-focus class', async () => {
+      render(<Table columnDefs={columnDefs} rowData={rowData} />);
+      await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+    });
+
+    test('setting supressCellFocusAndFocusFirstElement to true should suppress cell focus and focus the first element', async () => {
+      const focusFirstFocusableElementSpy = vi.spyOn(
+        focusFirstFocusableElementModule,
+        'focusFirstFocusableElement',
+      );
+      render(<Table columnDefs={columnDefs} rowData={rowData} />);
+      await waitFor(() => expect(screen.getByRole('grid')).toBeInTheDocument());
+      await waitFor(() => expect(screen.getByText('Im a lovely button')).toBeInTheDocument());
+      // first tab should focus the table heading
+      await userEvent.tab();
+      expect(screen.getByRole('columnheader')).toHaveFocus();
+      // second tab should focus the button bypassing the cell
+      await userEvent.tab();
+      expect(focusFirstFocusableElementSpy).toHaveBeenCalledTimes(1);
+      const button = screen.getByText('Im a lovely button');
+      expect(button).toHaveFocus();
+    });
+  });
 });