@arbor-education/design-system.components 0.1.5 → 0.2.1

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

@@ -1,9 +1,10 @@
 import { describe, expect, expectTypeOf, test, vi } from 'vitest';
 import { render, screen, waitFor } from '@testing-library/react';
-import { Table } from './Table';
+import { Table, TABLE_SPACING } from './Table';
 import '@testing-library/jest-dom/vitest';
 import { BulkActionsDropdown } from 'Components/table/BulkActionsDropdown';
 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';
 
@@ -409,4 +410,555 @@ describe('Table', () => {
       expect(container.querySelector('button')).toBeNull();
     });
   });
+
+  describe('TableSettingsDropdown', () => {
+    test('renders settings dropdown button in header', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await waitFor(() => {
+        const button = screen.getByRole('button', { name: /Table settings/i });
+        expect(button).toBeInTheDocument();
+      });
+    });
+
+    test('opens dropdown when settings button is clicked', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      const settingsButton = screen.getByRole('button', { name: /Table settings/i });
+      await userEvent.click(settingsButton);
+
+      await waitFor(() => {
+        expect(screen.getByText('Table spacing')).toBeInTheDocument();
+        expect(screen.getByText('Style')).toBeInTheDocument();
+        expect(screen.getByText('Reset Table Settings')).toBeInTheDocument();
+      });
+    });
+
+    test('displays all table spacing options', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      await waitFor(() => {
+        expect(screen.getByLabelText('X-Small')).toBeInTheDocument();
+        expect(screen.getByLabelText('Small')).toBeInTheDocument();
+        expect(screen.getByLabelText('Medium')).toBeInTheDocument();
+        expect(screen.getByLabelText('Large')).toBeInTheDocument();
+      });
+    });
+
+    test('Medium spacing is selected by default', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      await waitFor(() => {
+        const mediumRadio = screen.getByLabelText('Medium') as HTMLInputElement;
+        expect(mediumRadio.checked).toBe(true);
+      });
+    });
+
+    test('can change table spacing to Small', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      await waitFor(() => {
+        expect(screen.getByLabelText('Small')).toBeInTheDocument();
+      });
+
+      const smallRadio = screen.getByLabelText('Small');
+      await userEvent.click(smallRadio);
+
+      await waitFor(() => {
+        expect((smallRadio as HTMLInputElement).checked).toBe(true);
+      });
+    });
+
+    test('can change table spacing to Large', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      const largeRadio = screen.getByLabelText('Large');
+      await userEvent.click(largeRadio);
+
+      await waitFor(() => {
+        expect((largeRadio as HTMLInputElement).checked).toBe(true);
+      });
+    });
+
+    test('can change table spacing to X-Small', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      const xsmallRadio = screen.getByLabelText('X-Small');
+      await userEvent.click(xsmallRadio);
+
+      await waitFor(() => {
+        expect((xsmallRadio as HTMLInputElement).checked).toBe(true);
+      });
+    });
+
+    test('displays style options with Column borders and Cell colours', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      await waitFor(() => {
+        expect(screen.getByLabelText('Column borders')).toBeInTheDocument();
+        expect(screen.getByLabelText('Cell colours')).toBeInTheDocument();
+      });
+    });
+
+    test('Column borders checkbox is unchecked by default', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      await waitFor(() => {
+        const columnBordersCheckbox = screen.getByLabelText('Column borders') as HTMLInputElement;
+        expect(columnBordersCheckbox.checked).toBe(false);
+      });
+    });
+
+    test('can toggle Column borders checkbox on', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      const columnBordersCheckbox = screen.getByLabelText('Column borders');
+      await userEvent.click(columnBordersCheckbox);
+
+      await waitFor(() => {
+        expect((columnBordersCheckbox as HTMLInputElement).checked).toBe(true);
+      });
+    });
+
+    test('can toggle Column borders checkbox off after turning it on', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      const columnBordersCheckbox = screen.getByLabelText('Column borders');
+      await userEvent.click(columnBordersCheckbox);
+      await userEvent.click(columnBordersCheckbox);
+
+      await waitFor(() => {
+        expect((columnBordersCheckbox as HTMLInputElement).checked).toBe(false);
+      });
+    });
+
+    test('Cell colours checkbox is unchecked by default', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      await waitFor(() => {
+        const cellColoursCheckbox = screen.getByLabelText('Cell colours') as HTMLInputElement;
+        expect(cellColoursCheckbox.checked).toBe(false);
+      });
+    });
+
+    test('can toggle Cell colours checkbox on', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      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(true);
+      });
+    });
+
+    test('can toggle Cell colours checkbox off after turning it on', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      const cellColoursCheckbox = screen.getByLabelText('Cell colours');
+      await userEvent.click(cellColoursCheckbox);
+      await userEvent.click(cellColoursCheckbox);
+
+      await waitFor(() => {
+        expect((cellColoursCheckbox as HTMLInputElement).checked).toBe(false);
+      });
+    });
+
+    test('displays Reset Table Settings button', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      await waitFor(() => {
+        expect(screen.getByRole('button', { name: /Reset Table Settings/i })).toBeInTheDocument();
+      });
+    });
+
+    test('reset button resets table spacing to default (Medium)', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      // Change to Large
+      const largeRadio = screen.getByLabelText('Large');
+      await userEvent.click(largeRadio);
+
+      await waitFor(() => {
+        expect((largeRadio as HTMLInputElement).checked).toBe(true);
+      });
+
+      // Click reset button
+      const resetButton = screen.getByRole('button', { name: /Reset Table Settings/i });
+      await userEvent.click(resetButton);
+
+      await waitFor(() => {
+        const mediumRadio = screen.getByLabelText('Medium') as HTMLInputElement;
+        expect(mediumRadio.checked).toBe(true);
+      });
+    });
+
+    test('reset button resets column borders to default (off)', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      // Turn on column borders
+      const columnBordersCheckbox = screen.getByLabelText('Column borders');
+      await userEvent.click(columnBordersCheckbox);
+
+      await waitFor(() => {
+        expect((columnBordersCheckbox as HTMLInputElement).checked).toBe(true);
+      });
+
+      // Click reset button
+      const resetButton = screen.getByRole('button', { name: /Reset Table Settings/i });
+      await userEvent.click(resetButton);
+
+      await waitFor(() => {
+        expect((columnBordersCheckbox as HTMLInputElement).checked).toBe(false);
+      });
+    });
+
+    test('reset button resets all settings together', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      // Change multiple settings
+      const largeRadio = screen.getByLabelText('Large');
+      await userEvent.click(largeRadio);
+
+      const columnBordersCheckbox = screen.getByLabelText('Column borders');
+      await userEvent.click(columnBordersCheckbox);
+
+      await waitFor(() => {
+        expect((largeRadio as HTMLInputElement).checked).toBe(true);
+        expect((columnBordersCheckbox as HTMLInputElement).checked).toBe(true);
+      });
+
+      // Click reset button
+      const resetButton = screen.getByRole('button', { name: /Reset Table Settings/i });
+      await userEvent.click(resetButton);
+
+      await waitFor(() => {
+        const mediumRadio = screen.getByLabelText('Medium') as HTMLInputElement;
+        expect(mediumRadio.checked).toBe(true);
+        expect((columnBordersCheckbox as HTMLInputElement).checked).toBe(false);
+      });
+    });
+
+    test('can combine settings dropdown with other header content', async () => {
+      render(
+        <Table
+          headerContent={(
+            <>
+              <BulkActionsDropdown
+                actions={[
+                  {
+                    displayName: 'Test Action',
+                    callback: () => {},
+                  },
+                ]}
+              />
+              <TableSettingsDropdown />
+            </>
+          )}
+        />,
+      );
+
+      await waitFor(() => {
+        expect(screen.getByText('Actions (1)')).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: /Table settings/i })).toBeInTheDocument();
+      });
+    });
+
+    test('settings persist when dropdown is closed and reopened', async () => {
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+        />,
+      );
+
+      // Open dropdown and change settings
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      const smallRadio = screen.getByLabelText('Small');
+      await userEvent.click(smallRadio);
+
+      const columnBordersCheckbox = screen.getByLabelText('Column borders');
+      await userEvent.click(columnBordersCheckbox);
+
+      // Close dropdown
+      await userEvent.keyboard('{Escape}');
+
+      // Reopen dropdown
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      // Check settings persisted
+      await waitFor(() => {
+        expect((screen.getByLabelText('Small') as HTMLInputElement).checked).toBe(true);
+        expect((screen.getByLabelText('Column borders') as HTMLInputElement).checked).toBe(true);
+      });
+    });
+
+    test('onTableSettingsChanged gets called appropriately', async () => {
+      const onTableSettingsChanged = vi.fn();
+
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+          onTableSettingsChanged={onTableSettingsChanged}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      const largeRadio = screen.getByLabelText('Large');
+      await userEvent.click(largeRadio);
+
+      await waitFor(() => {
+        expect((largeRadio as HTMLInputElement).checked).toBe(true);
+      });
+      expect(onTableSettingsChanged).toHaveBeenCalledExactlyOnceWith(expect.objectContaining({
+        tableSpacing: TABLE_SPACING.L,
+      }));
+
+      const columnBordersCheckbox = screen.getByLabelText('Column borders');
+      await userEvent.click(columnBordersCheckbox);
+
+      expect(onTableSettingsChanged).toHaveBeenCalledTimes(2);
+      expect(onTableSettingsChanged).toHaveBeenNthCalledWith(2, expect.objectContaining({ hasColumnBorders: true }));
+    });
+
+    test('resetSettings is called appropriately', async () => {
+      const onTableSettingsReset = vi.fn();
+
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+          onTableSettingsReset={onTableSettingsReset}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      const largeRadio = screen.getByLabelText('Large');
+      await userEvent.click(largeRadio);
+
+      await waitFor(() => {
+        expect((largeRadio as HTMLInputElement).checked).toBe(true);
+      });
+
+      // Click reset button
+      const resetButton = screen.getByRole('button', { name: /Reset Table Settings/i });
+      await userEvent.click(resetButton);
+
+      expect(onTableSettingsReset).toHaveBeenCalledOnce();
+    });
+
+    test('onColumnBordersChanged gets called when column borders toggle', async () => {
+      const onColumnBordersChanged = vi.fn();
+
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+          onColumnBordersChanged={onColumnBordersChanged}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      const columnBordersCheckbox = screen.getByLabelText('Column borders');
+      await userEvent.click(columnBordersCheckbox);
+
+      await waitFor(() => {
+        expect(onColumnBordersChanged).toHaveBeenCalledExactlyOnceWith(true);
+      });
+
+      await userEvent.click(columnBordersCheckbox);
+
+      await waitFor(() => {
+        expect(onColumnBordersChanged).toHaveBeenCalledTimes(2);
+        expect(onColumnBordersChanged).toHaveBeenNthCalledWith(2, false);
+      });
+    });
+
+    test('onTableSpacingChanged gets called when spacing changes', async () => {
+      const onTableSpacingChanged = vi.fn();
+
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+          onTableSpacingChanged={onTableSpacingChanged}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      const largeRadio = screen.getByLabelText('Large');
+      await userEvent.click(largeRadio);
+
+      await waitFor(() => {
+        expect(onTableSpacingChanged).toHaveBeenCalledExactlyOnceWith(TABLE_SPACING.L);
+      });
+
+      const xsmallRadio = screen.getByLabelText('X-Small');
+      await userEvent.click(xsmallRadio);
+
+      await waitFor(() => {
+        expect(onTableSpacingChanged).toHaveBeenCalledTimes(2);
+        expect(onTableSpacingChanged).toHaveBeenNthCalledWith(2, TABLE_SPACING.XS);
+      });
+    });
+
+    test('onTableSpacingChanged is called when reset button is clicked', async () => {
+      const onTableSpacingChanged = vi.fn();
+
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+          onTableSpacingChanged={onTableSpacingChanged}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      const largeRadio = screen.getByLabelText('Large');
+      await userEvent.click(largeRadio);
+
+      await waitFor(() => {
+        expect(onTableSpacingChanged).toHaveBeenCalledWith(TABLE_SPACING.L);
+      });
+
+      const resetButton = screen.getByRole('button', { name: /Reset Table Settings/i });
+      await userEvent.click(resetButton);
+
+      await waitFor(() => {
+        expect(onTableSpacingChanged).toHaveBeenCalledWith(TABLE_SPACING.M);
+      });
+    });
+
+    test('onColumnBordersChanged is called when reset button is clicked', async () => {
+      const onColumnBordersChanged = vi.fn();
+
+      render(
+        <Table
+          headerContent={<TableSettingsDropdown />}
+          onColumnBordersChanged={onColumnBordersChanged}
+        />,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: /Table settings/i }));
+
+      const columnBordersCheckbox = screen.getByLabelText('Column borders');
+      await userEvent.click(columnBordersCheckbox);
+
+      await waitFor(() => {
+        expect(onColumnBordersChanged).toHaveBeenCalledWith(true);
+      });
+
+      const resetButton = screen.getByRole('button', { name: /Reset Table Settings/i });
+      await userEvent.click(resetButton);
+
+      await waitFor(() => {
+        expect(onColumnBordersChanged).toHaveBeenCalledWith(false);
+      });
+    });
+  });
 });