@jmruthers/pace-core 0.5.76 → 0.5.78

package/src/components/DataTable/__tests__/keyboard.test.tsx

@@ -0,0 +1,615 @@
+/**
+ * @file DataTable Keyboard Navigation Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Tests
+ * @since 0.4.0
+ * 
+ * Comprehensive keyboard navigation tests for DataTable component.
+ * Tests roving tabindex, arrow key navigation, and focus management.
+ */
+
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { vi, beforeEach, afterEach } from 'vitest';
+import { DataTable } from '../DataTable';
+import { MockRBACProvider } from './mocks/MockRBACProvider';
+import type { DataTableColumn } from '../types';
+
+// Mock the RBAC hooks
+vi.mock('../../../rbac/hooks', () => ({
+  useCan: vi.fn(() => ({ can: true, isLoading: false })),
+  useResolvedScope: vi.fn(() => ({ 
+    organisationId: 'test-org', 
+    eventId: 'test-event',
+    appId: 'test-app'
+  })),
+}));
+
+// Mock the UnifiedAuthProvider
+vi.mock('../../../providers/UnifiedAuthProvider', () => ({
+  useUnifiedAuth: vi.fn(() => ({
+    user: { id: 'test-user', name: 'Test User' },
+    isLoading: false,
+    error: null,
+  })),
+}));
+
+// Mock the toast hook
+vi.mock('../../../hooks/useToast', () => ({
+  toast: vi.fn(),
+}));
+
+// Test data
+interface TestUser {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  status: 'active' | 'inactive';
+}
+
+const testUsers: TestUser[] = [
+  { id: '1', name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'active' },
+  { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'active' },
+  { id: '3', name: 'Bob Johnson', email: 'bob@example.com', role: 'User', status: 'inactive' },
+  { id: '4', name: 'Alice Brown', email: 'alice@example.com', role: 'Manager', status: 'active' },
+];
+
+const testColumns: DataTableColumn<TestUser>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    sortable: true,
+    searchable: true,
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email',
+    sortable: true,
+    searchable: true,
+  },
+  {
+    accessorKey: 'role',
+    header: 'Role',
+    sortable: true,
+  },
+  {
+    accessorKey: 'status',
+    header: 'Status',
+    sortable: true,
+  },
+];
+
+const defaultFeatures = {
+  search: true,
+  pagination: true,
+  sorting: true,
+  filtering: true,
+  export: false,
+  import: true,
+  selection: true,
+  creation: false,
+  editing: false,
+  deletion: false,
+  deleteSelected: false,
+  grouping: false,
+  columnVisibility: false,
+  columnReordering: false,
+  hierarchical: false,
+};
+
+// Test wrapper component
+const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+  <MockRBACProvider>
+    {children}
+  </MockRBACProvider>
+);
+
+describe('DataTable Keyboard Navigation', () => {
+  beforeEach(() => {
+    // Clear any existing live regions
+    const existingLiveRegions = document.querySelectorAll('[aria-live]');
+    existingLiveRegions.forEach(region => {
+      if (region.parentNode) {
+        region.parentNode.removeChild(region);
+      }
+    });
+  });
+
+  afterEach(() => {
+    // Clean up live regions after each test
+    const liveRegions = document.querySelectorAll('[aria-live]');
+    liveRegions.forEach(region => {
+      if (region.parentNode) {
+        region.parentNode.removeChild(region);
+      }
+    });
+  });
+
+  describe('Header Navigation', () => {
+    it('should support Enter key to toggle sort on headers', async () => {
+      const user = userEvent.setup();
+      
+      render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+          />
+        </TestWrapper>
+      );
+
+      const nameHeader = screen.getByRole('columnheader', { name: /name/i });
+      const nameButton = nameHeader.querySelector('button');
+      
+      // Focus the button inside the header
+      nameButton?.focus();
+      expect(nameButton).toHaveFocus();
+
+      // Press Enter to sort
+      await user.keyboard('{Enter}');
+      
+      await waitFor(() => {
+        expect(nameHeader).toHaveAttribute('aria-sort', 'ascending');
+      });
+
+      // Press Enter again to sort descending
+      await user.keyboard('{Enter}');
+      
+      await waitFor(() => {
+        expect(nameHeader).toHaveAttribute('aria-sort', 'descending');
+      });
+    });
+
+    it('should support Space key to toggle sort on headers', async () => {
+      const user = userEvent.setup();
+      
+      render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+          />
+        </TestWrapper>
+      );
+
+      const nameHeader = screen.getByRole('columnheader', { name: /name/i });
+      const nameButton = nameHeader.querySelector('button');
+      
+      // Focus the button inside the header
+      nameButton?.focus();
+      expect(nameButton).toHaveFocus();
+
+      // Press Space to sort
+      await user.keyboard(' ');
+      
+      await waitFor(() => {
+        expect(nameHeader).toHaveAttribute('aria-sort', 'ascending');
+      });
+    });
+
+    it.skip('should navigate between headers with arrow keys', async () => {
+      const user = userEvent.setup();
+      
+      render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+          />
+        </TestWrapper>
+      );
+
+      const nameHeader = screen.getByRole('columnheader', { name: /name/i });
+      const emailHeader = screen.getByRole('columnheader', { name: /email/i });
+      
+      // Focus the first header
+      nameHeader.focus();
+      expect(nameHeader).toHaveFocus();
+
+      // Press Right arrow to move to next header
+      await user.keyboard('{ArrowRight}');
+      
+      await waitFor(() => {
+        expect(emailHeader).toHaveFocus();
+      });
+
+      // Press Left arrow to move back
+      await user.keyboard('{ArrowLeft}');
+      
+      await waitFor(() => {
+        expect(nameHeader).toHaveFocus();
+      });
+    });
+
+    it.skip('should navigate to first/last header with Home/End keys', async () => {
+      const user = userEvent.setup();
+      
+      render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+          />
+        </TestWrapper>
+      );
+
+      const nameHeader = screen.getByRole('columnheader', { name: /name/i });
+      const statusHeader = screen.getByRole('columnheader', { name: /status/i });
+      
+      // Focus a middle header
+      const emailHeader = screen.getByRole('columnheader', { name: /email/i });
+      emailHeader.focus();
+
+      // Press Home to go to first header
+      await user.keyboard('{Home}');
+      
+      await waitFor(() => {
+        expect(nameHeader).toHaveFocus();
+      });
+
+      // Press End to go to last header
+      await user.keyboard('{End}');
+      
+      await waitFor(() => {
+        expect(statusHeader).toHaveFocus();
+      });
+    });
+  });
+
+  describe('Cell Navigation', () => {
+    it.skip('should implement roving tabindex for cells', () => {
+      render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+          />
+        </TestWrapper>
+      );
+
+      const cells = screen.getAllByRole('cell');
+      
+      // Only one cell should be tabbable (tabindex="0")
+      const tabbableCells = cells.filter(cell => cell.getAttribute('tabindex') === '0');
+      expect(tabbableCells.length).toBeLessThanOrEqual(1);
+      
+      // All other cells should have tabindex="-1"
+      const nonTabbableCells = cells.filter(cell => cell.getAttribute('tabindex') === '-1');
+      expect(nonTabbableCells.length).toBeGreaterThan(0);
+    });
+
+    it.skip('should navigate between cells with arrow keys', async () => {
+      const user = userEvent.setup();
+      
+      render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+          />
+        </TestWrapper>
+      );
+
+      const cells = screen.getAllByRole('cell');
+      const firstCell = cells[0];
+      
+      if (firstCell) {
+        // Focus the first cell
+        firstCell.focus();
+        expect(firstCell).toHaveFocus();
+
+        // Test arrow key navigation
+        await user.keyboard('{ArrowRight}');
+        // The next cell should be focused (implementation dependent)
+        
+        await user.keyboard('{ArrowDown}');
+        // The cell below should be focused (implementation dependent)
+        
+        await user.keyboard('{ArrowLeft}');
+        // The previous cell should be focused (implementation dependent)
+        
+        await user.keyboard('{ArrowUp}');
+        // The cell above should be focused (implementation dependent)
+      }
+    });
+
+    it.skip('should navigate to row start/end with Home/End keys', async () => {
+      const user = userEvent.setup();
+      
+      render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+          />
+        </TestWrapper>
+      );
+
+      const cells = screen.getAllByRole('cell');
+      const middleCell = cells[2]; // Assuming this is not the first or last in row
+      
+      if (middleCell) {
+        // Focus a middle cell
+        middleCell.focus();
+        expect(middleCell).toHaveFocus();
+
+        // Press Home to go to row start
+        await user.keyboard('{Home}');
+        // Should focus first cell in row (implementation dependent)
+        
+        // Press End to go to row end
+        await user.keyboard('{End}');
+        // Should focus last cell in row (implementation dependent)
+      }
+    });
+
+    it.skip('should navigate to table start/end with Ctrl+Home/End', async () => {
+      const user = userEvent.setup();
+      
+      render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+          />
+        </TestWrapper>
+      );
+
+      const cells = screen.getAllByRole('cell');
+      const middleCell = cells[Math.floor(cells.length / 2)];
+      
+      if (middleCell) {
+        // Focus a middle cell
+        middleCell.focus();
+        expect(middleCell).toHaveFocus();
+
+        // Press Ctrl+Home to go to table start
+        await user.keyboard('{Control>}{Home}{/Control}');
+        // Should focus first cell in table (implementation dependent)
+        
+        // Press Ctrl+End to go to table end
+        await user.keyboard('{Control>}{End}{/Control}');
+        // Should focus last cell in table (implementation dependent)
+      }
+    });
+  });
+
+  describe('Focus Management', () => {
+    it.skip('should restore focus when modals close', async () => {
+      const user = userEvent.setup();
+      
+      render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+          />
+        </TestWrapper>
+      );
+
+      // Find and focus a cell
+      const cells = screen.getAllByRole('cell');
+      const firstCell = cells[0];
+      
+      if (firstCell) {
+        firstCell.focus();
+        expect(firstCell).toHaveFocus();
+
+        // Open import modal (if import button exists)
+        const importButton = screen.queryByText(/import/i);
+        if (importButton) {
+          await user.click(importButton);
+          
+          // Focus should be stored and modal should open
+          // (Implementation dependent - modal focus management)
+          
+          // Close modal (ESC key or close button)
+          await user.keyboard('{Escape}');
+          
+          // Focus should be restored to the original cell
+          await waitFor(() => {
+            expect(firstCell).toHaveFocus();
+          });
+        }
+      }
+    });
+
+    it('should not show focus warnings in console', () => {
+      const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      
+      render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+          />
+        </TestWrapper>
+      );
+
+      // Check that no focus-related warnings were logged
+      const focusWarnings = consoleSpy.mock.calls.filter(call => 
+        call.some(arg => 
+          typeof arg === 'string' && 
+          (arg.includes('focus') || arg.includes('tabindex') || arg.includes('keyboard'))
+        )
+      );
+      
+      expect(focusWarnings).toHaveLength(0);
+      
+      consoleSpy.mockRestore();
+    });
+  });
+
+  describe('Unsupported Operations', () => {
+    it('should disable keyboard resize when not supported', async () => {
+      const user = userEvent.setup();
+      
+      render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={{ ...defaultFeatures, columnReordering: false }}
+          />
+        </TestWrapper>
+      );
+
+      const nameHeader = screen.getByRole('columnheader', { name: /name/i });
+      const nameButton = nameHeader.querySelector('button');
+      
+      // Focus the button inside the header
+      nameButton?.focus();
+      expect(nameButton).toHaveFocus();
+
+      // Try to resize column (Ctrl + or Ctrl -)
+      await user.keyboard('{Control>}={/Control}');
+      
+      // Should announce that resizing is not supported
+      await waitFor(() => {
+        const liveRegion = document.querySelector('[aria-live="polite"]');
+        expect(liveRegion?.textContent).toContain('not supported');
+      }, { timeout: 1000 });
+    });
+
+    it('should disable keyboard reorder when not supported', async () => {
+      const user = userEvent.setup();
+      
+      render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={{ ...defaultFeatures, columnReordering: false }}
+          />
+        </TestWrapper>
+      );
+
+      const nameHeader = screen.getByRole('columnheader', { name: /name/i });
+      const nameButton = nameHeader.querySelector('button');
+      
+      // Focus the button inside the header
+      nameButton?.focus();
+      expect(nameButton).toHaveFocus();
+
+      // Try to reorder column (Ctrl + R)
+      await user.keyboard('{Control>}r{/Control}');
+      
+      // Should announce that reordering is not supported
+      await waitFor(() => {
+        const liveRegion = document.querySelector('[aria-live="polite"]');
+        expect(liveRegion?.textContent).toContain('not supported');
+      }, { timeout: 1000 });
+    });
+  });
+
+  describe('Tab Navigation', () => {
+    it('should allow normal Tab navigation to work', async () => {
+      const user = userEvent.setup();
+      
+      render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+          />
+        </TestWrapper>
+      );
+
+      // Tab should work normally and not be intercepted
+      await user.tab();
+      
+      // Should focus the first tabbable element
+      const focusedElement = document.activeElement;
+      expect(focusedElement).toBeTruthy();
+      
+      // Tab again
+      await user.tab();
+      
+      // Should move to next tabbable element
+      const nextFocusedElement = document.activeElement;
+      expect(nextFocusedElement).not.toBe(focusedElement);
+    });
+  });
+
+  describe('Integration Tests', () => {
+    it.skip('should work end-to-end with sorting and navigation', async () => {
+      const user = userEvent.setup();
+      
+      render(
+        <TestWrapper>
+          <DataTable
+            data={testUsers}
+            columns={testColumns}
+            rbac={{ pageId: 'test-page' }}
+            features={defaultFeatures}
+          />
+        </TestWrapper>
+      );
+
+      // Navigate to name header
+      const nameHeader = screen.getByRole('columnheader', { name: /name/i });
+      nameHeader.focus();
+      
+      // Sort by name
+      await user.keyboard('{Enter}');
+      
+      await waitFor(() => {
+        expect(nameHeader).toHaveAttribute('aria-sort', 'ascending');
+      });
+      
+      // Navigate to email header
+      await user.keyboard('{ArrowRight}');
+      
+      const emailHeader = screen.getByRole('columnheader', { name: /email/i });
+      await waitFor(() => {
+        expect(emailHeader).toHaveFocus();
+      });
+      
+      // Sort by email
+      await user.keyboard(' ');
+      
+      await waitFor(() => {
+        expect(emailHeader).toHaveAttribute('aria-sort', 'ascending');
+      });
+      
+      // Navigate to first cell
+      const cells = screen.getAllByRole('cell');
+      if (cells[0]) {
+        cells[0].focus();
+        
+        // Navigate around cells
+        await user.keyboard('{ArrowRight}');
+        await user.keyboard('{ArrowDown}');
+        await user.keyboard('{Home}');
+        
+        // Should not cause any errors or warnings
+      }
+    });
+  });
+});