@jmruthers/pace-core 0.5.191 → 0.5.193

package/src/components/DataTable/__tests__/DataTable.grouping-aggregation.test.tsx

@@ -15,16 +15,49 @@ import { vi } from 'vitest';
 
 // Mock the RBAC hooks
 vi.mock('../../../rbac/hooks', () => ({
-  useCan: vi.fn(() => ({ can: true, isLoading: false })),
+  useCan: vi.fn(() => ({ can: true, isLoading: false, error: null })),
   useResolvedScope: vi.fn(() => ({
     resolvedScope: {
       organisationId: 'test-org-id',
       eventId: 'test-event-id',
       appId: 'test-app-id'
-    }
+    },
+    isLoading: false
   }))
 }));
 
+// Mock useDataTablePermissions to return non-loading permissions
+const mockUseDataTablePermissions = vi.hoisted(() => vi.fn(() => ({
+  permissions: {
+    canRead: { can: true, isLoading: false, error: null },
+    canCreate: { can: true, isLoading: false, error: null },
+    canUpdate: { can: true, isLoading: false, error: null },
+    canDelete: { can: true, isLoading: false, error: null },
+    canExport: { can: true, isLoading: false, error: null },
+    canImport: { can: true, isLoading: false, error: null },
+  },
+  secureFeatures: {
+    search: true,
+    sorting: true,
+    pagination: true,
+    selection: true,
+    creation: true,
+    editing: true,
+    deletion: true,
+    deleteSelected: true,
+    export: true,
+    import: true,
+    columnVisibility: true,
+    filtering: true,
+    grouping: true,
+  },
+  effectivePageId: 'test-page',
+})));
+
+vi.mock('../hooks/useDataTablePermissions', () => ({
+  useDataTablePermissions: mockUseDataTablePermissions
+}));
+
 const mockUseUnifiedAuthFn = vi.fn(() => ({
   user: {
     id: 'test-user',
@@ -67,7 +100,7 @@ const defaultRBAC = {
 
 describe('DataTable Grouping Aggregation', () => {
   describe('Basic Aggregation Functions', () => {
-    it('should display sum aggregation in grouped rows', () => {
+    it('should display sum aggregation in grouped rows', async () => {
       const columns: DataTableColumn<DinerData>[] = [
         {
           accessorKey: 'diet',
@@ -102,14 +135,19 @@ describe('DataTable Grouping Aggregation', () => {
         />
       );
 
+      // Wait for table to render
+      await waitFor(() => {
+        expect(screen.getByRole('table')).toBeInTheDocument();
+      });
+
       // Check that grouped rows show aggregated values
       // Standard group: 10 + 15 + 20 = 45 youth, 5 + 8 + 10 = 23 adults
-      expect(screen.getByText('Standard (3 items)')).toBeInTheDocument();
+      expect(await screen.findByText('Standard (3 items)')).toBeInTheDocument();
       // The aggregated values should be visible in the grouped row
       // Note: We need to check for the actual rendered values
     });
 
-    it('should display average aggregation in grouped rows', () => {
+    it('should display average aggregation in grouped rows', async () => {
       const columns: DataTableColumn<DinerData>[] = [
         {
           accessorKey: 'diet',
@@ -139,10 +177,15 @@ describe('DataTable Grouping Aggregation', () => {
         />
       );
 
-      expect(screen.getByText('Standard (3 items)')).toBeInTheDocument();
+      // Wait for table to render
+      await waitFor(() => {
+        expect(screen.getByRole('table')).toBeInTheDocument();
+      });
+
+      expect(await screen.findByText('Standard (3 items)')).toBeInTheDocument();
     });
 
-    it('should display count aggregation in grouped rows', () => {
+    it('should display count aggregation in grouped rows', async () => {
       const columns: DataTableColumn<DinerData>[] = [
         {
           accessorKey: 'diet',
@@ -172,10 +215,15 @@ describe('DataTable Grouping Aggregation', () => {
         />
       );
 
-      expect(screen.getByText('Standard (3 items)')).toBeInTheDocument();
+      // Wait for table to render
+      await waitFor(() => {
+        expect(screen.getByRole('table')).toBeInTheDocument();
+      });
+
+      expect(await screen.findByText('Standard (3 items)')).toBeInTheDocument();
     });
 
-    it('should display min aggregation in grouped rows', () => {
+    it('should display min aggregation in grouped rows', async () => {
       const columns: DataTableColumn<DinerData>[] = [
         {
           accessorKey: 'diet',
@@ -205,10 +253,15 @@ describe('DataTable Grouping Aggregation', () => {
         />
       );
 
-      expect(screen.getByText('Standard (3 items)')).toBeInTheDocument();
+      // Wait for table to render
+      await waitFor(() => {
+        expect(screen.getByRole('table')).toBeInTheDocument();
+      });
+
+      expect(await screen.findByText('Standard (3 items)')).toBeInTheDocument();
     });
 
-    it('should display max aggregation in grouped rows', () => {
+    it('should display max aggregation in grouped rows', async () => {
       const columns: DataTableColumn<DinerData>[] = [
         {
           accessorKey: 'diet',
@@ -238,12 +291,17 @@ describe('DataTable Grouping Aggregation', () => {
         />
       );
 
-      expect(screen.getByText('Standard (3 items)')).toBeInTheDocument();
+      // Wait for table to render
+      await waitFor(() => {
+        expect(screen.getByRole('table')).toBeInTheDocument();
+      });
+
+      expect(await screen.findByText('Standard (3 items)')).toBeInTheDocument();
     });
   });
 
   describe('Custom Aggregation Functions', () => {
-    it('should use custom aggregation function', () => {
+    it('should use custom aggregation function', async () => {
       const customAggregate = (rows: DinerData[]) => {
         return rows.reduce((total, row) => total + row.youth + row.adults, 0);
       };
@@ -277,12 +335,17 @@ describe('DataTable Grouping Aggregation', () => {
         />
       );
 
-      expect(screen.getByText('Standard (3 items)')).toBeInTheDocument();
+      // Wait for table to render
+      await waitFor(() => {
+        expect(screen.getByRole('table')).toBeInTheDocument();
+      });
+
+      expect(await screen.findByText('Standard (3 items)')).toBeInTheDocument();
     });
   });
 
   describe('Custom Aggregate Cell Renderer', () => {
-    it('should use custom aggregateCell renderer', () => {
+    it('should use custom aggregateCell renderer', async () => {
       const columns: DataTableColumn<DinerData>[] = [
         {
           accessorKey: 'diet',
@@ -313,12 +376,17 @@ describe('DataTable Grouping Aggregation', () => {
         />
       );
 
-      expect(screen.getByText('Standard (3 items)')).toBeInTheDocument();
+      // Wait for table to render
+      await waitFor(() => {
+        expect(screen.getByRole('table')).toBeInTheDocument();
+      });
+
+      expect(await screen.findByText('Standard (3 items)')).toBeInTheDocument();
     });
   });
 
   describe('Edge Cases', () => {
-    it('should handle empty groups gracefully', () => {
+    it('should handle empty groups gracefully', async () => {
       const emptyData: DinerData[] = [];
 
       const columns: DataTableColumn<DinerData>[] = [
@@ -354,7 +422,7 @@ describe('DataTable Grouping Aggregation', () => {
       expect(screen.queryByText(/items/)).not.toBeInTheDocument();
     });
 
-    it('should handle null/undefined values in aggregation', () => {
+    it('should handle null/undefined values in aggregation', async () => {
       const dataWithNulls: DinerData[] = [
         { id: '1', diet: 'Standard', youth: 10, adults: 5, cost: 100 },
         { id: '2', diet: 'Standard', youth: null as any, adults: 8, cost: 150 },
@@ -395,10 +463,15 @@ describe('DataTable Grouping Aggregation', () => {
         />
       );
 
-      expect(screen.getByText('Standard (3 items)')).toBeInTheDocument();
+      // Wait for table to render
+      await waitFor(() => {
+        expect(screen.getByRole('table')).toBeInTheDocument();
+      });
+
+      expect(await screen.findByText('Standard (3 items)')).toBeInTheDocument();
     });
 
-    it('should show empty cells for columns without aggregateFn', () => {
+    it('should show empty cells for columns without aggregateFn', async () => {
       const columns: DataTableColumn<DinerData>[] = [
         {
           accessorKey: 'diet',
@@ -433,12 +506,17 @@ describe('DataTable Grouping Aggregation', () => {
         />
       );
 
-      expect(screen.getByText('Standard (3 items)')).toBeInTheDocument();
+      // Wait for table to render
+      await waitFor(() => {
+        expect(screen.getByRole('table')).toBeInTheDocument();
+      });
+
+      expect(await screen.findByText('Standard (3 items)')).toBeInTheDocument();
     });
   });
 
   describe('Multiple Aggregations', () => {
-    it('should display multiple columns with different aggregation functions', () => {
+    it('should display multiple columns with different aggregation functions', async () => {
       const columns: DataTableColumn<DinerData>[] = [
         {
           accessorKey: 'diet',
@@ -488,13 +566,18 @@ describe('DataTable Grouping Aggregation', () => {
         />
       );
 
-      expect(screen.getByText('Standard (3 items)')).toBeInTheDocument();
-      expect(screen.getByText('Gluten Free (2 items)')).toBeInTheDocument();
+      // Wait for table to render
+      await waitFor(() => {
+        expect(screen.getByRole('table')).toBeInTheDocument();
+      });
+
+      expect(await screen.findByText('Standard (3 items)')).toBeInTheDocument();
+      expect(await screen.findByText('Gluten Free (2 items)')).toBeInTheDocument();
     });
   });
 
   describe('Integration with Existing Features', () => {
-    it('should work with sorting', () => {
+    it('should work with sorting', async () => {
       const columns: DataTableColumn<DinerData>[] = [
         {
           accessorKey: 'diet',
@@ -524,10 +607,15 @@ describe('DataTable Grouping Aggregation', () => {
         />
       );
 
-      expect(screen.getByText('Standard (3 items)')).toBeInTheDocument();
+      // Wait for table to render
+      await waitFor(() => {
+        expect(screen.getByRole('table')).toBeInTheDocument();
+      });
+
+      expect(await screen.findByText('Standard (3 items)')).toBeInTheDocument();
     });
 
-    it('should work with filtering', () => {
+    it('should work with filtering', async () => {
       const columns: DataTableColumn<DinerData>[] = [
         {
           accessorKey: 'diet',
@@ -558,7 +646,12 @@ describe('DataTable Grouping Aggregation', () => {
         />
       );
 
-      expect(screen.getByText('Standard (3 items)')).toBeInTheDocument();
+      // Wait for table to render
+      await waitFor(() => {
+        expect(screen.getByRole('table')).toBeInTheDocument();
+      });
+
+      expect(await screen.findByText('Standard (3 items)')).toBeInTheDocument();
     });
   });
 });

package/src/components/DataTable/__tests__/DataTableCore.test-setup.ts

@@ -13,13 +13,14 @@ import React from 'react';
 
 // Mock the RBAC hooks
 vi.mock('../../../rbac/hooks', () => ({
-  useCan: vi.fn(),
+  useCan: vi.fn(() => ({ can: true, isLoading: false, error: null })),
   useResolvedScope: vi.fn(() => ({
     resolvedScope: {
       organisationId: 'test-org-id',
       eventId: 'test-event-id',
       appId: 'test-app-id'
-    }
+    },
+    isLoading: false
   }))
 }));
 
@@ -153,12 +154,12 @@ vi.mock('../utils/hierarchicalSorting', () => ({
 // Create a mock implementation that can be overridden
 const mockUseDataTablePermissions = vi.hoisted(() => vi.fn(() => ({
   permissions: {
-    canRead: { can: true },
-    canCreate: { can: true },
-    canUpdate: { can: true },
-    canDelete: { can: true },
-    canExport: { can: true },
-    canImport: { can: true },
+    canRead: { can: true, isLoading: false, error: null },
+    canCreate: { can: true, isLoading: false, error: null },
+    canUpdate: { can: true, isLoading: false, error: null },
+    canDelete: { can: true, isLoading: false, error: null },
+    canExport: { can: true, isLoading: false, error: null },
+    canImport: { can: true, isLoading: false, error: null },
   },
   secureFeatures: {
     search: true,

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

@@ -20,13 +20,14 @@ import { renderWithProviders } from '../../../__tests__/helpers/test-utils';
 
 // Mock the RBAC hooks
 vi.mock('../../../rbac/hooks', () => ({
-  useCan: vi.fn(),
+  useCan: vi.fn(() => ({ can: true, isLoading: false, error: null })),
   useResolvedScope: vi.fn(() => ({
     resolvedScope: {
       organisationId: 'test-org-id',
       eventId: 'test-event-id',
       appId: 'test-app-id'
-    }
+    },
+    isLoading: false
   }))
 }));
 
@@ -171,12 +172,12 @@ const mockPermissions = {
 // Create a mock implementation that can be overridden
 const mockUseDataTablePermissions = vi.hoisted(() => vi.fn(() => ({
   permissions: {
-    canRead: { can: true },
-    canCreate: { can: true },
-    canUpdate: { can: true },
-    canDelete: { can: true },
-    canExport: { can: true },
-    canImport: { can: true },
+    canRead: { can: true, isLoading: false, error: null },
+    canCreate: { can: true, isLoading: false, error: null },
+    canUpdate: { can: true, isLoading: false, error: null },
+    canDelete: { can: true, isLoading: false, error: null },
+    canExport: { can: true, isLoading: false, error: null },
+    canImport: { can: true, isLoading: false, error: null },
   },
   secureFeatures: {
     search: true,
@@ -805,51 +806,10 @@ describe('DataTableCore Component', () => {
 
   describe('Event Handlers', () => {
     it('calls onEditRow when row is edited', async () => {
-      const user = userEvent.setup();
       const onEditRow = vi.fn();
       const features = createDefaultFeatures();
       features.editing = true;
 
-      const { useDataTableState } = await import('../hooks/useDataTableState');
-      vi.mocked(useDataTableState).mockReturnValueOnce({
-        state: {
-          sorting: [],
-          columnFilters: [],
-          columnVisibility: {},
-          grouping: [],
-          expanded: {},
-          pagination: { pageIndex: 0, pageSize: 10 },
-          columnOrder: [],
-          rowSelection: {},
-          isCreating: false,
-          creationData: {},
-          editingRowId: 'user-1',
-          editingData: { name: 'Edited Name' },
-          showImportModal: false,
-          showFilterRow: false,
-          searchQuery: '',
-        },
-        actions: {
-          setSorting: vi.fn(),
-          setColumnFilters: vi.fn(),
-          setColumnVisibility: vi.fn(),
-          setGrouping: vi.fn(),
-          setExpanded: vi.fn(),
-          setPagination: vi.fn(),
-          setColumnOrder: vi.fn(),
-          setRowSelection: vi.fn(),
-          setCreating: vi.fn(),
-          setCreationData: vi.fn(),
-          clearCreationData: vi.fn(),
-          setEditingRow: vi.fn(),
-          clearEditing: vi.fn(),
-          setImportModal: vi.fn(),
-          setFilterRow: vi.fn(),
-          setSearchQuery: vi.fn(),
-          resetState: vi.fn(),
-        },
-      });
-
       render(
         <DataTableCore
           data={mockData}
@@ -861,9 +821,17 @@ describe('DataTableCore Component', () => {
         />
       );
 
-      // Simulate save editing
-      // Note: This would require interacting with the EditableRow component
-      expect(screen.getByText('User 1')).toBeInTheDocument();
+      // Wait for table to render
+      await waitFor(() => {
+        expect(screen.getByRole('table')).toBeInTheDocument();
+      });
+
+      // Verify table rendered with data
+      expect(await screen.findByText('User 1')).toBeInTheDocument();
+      
+      // Note: Testing actual editing interaction would require clicking edit button
+      // and interacting with EditableRow component, which is complex to mock.
+      // This test verifies the component renders correctly with editing enabled.
     });
 
     it('calls onDeleteRow when row is deleted', async () => {