@jmruthers/pace-core 0.5.4 → 0.5.6

package/src/__tests__/helpers/test-utils.tsx

@@ -15,7 +15,7 @@ const createTestQueryClient = () =>
     defaultOptions: {
       queries: {
         retry: false,
-        cacheTime: 0,
+        gcTime: 0,
       },
       mutations: {
         retry: false,
@@ -78,6 +78,152 @@ export const mockData = {
   }),
 };
 
+// Test data generators for various data types
+export const testDataGenerators = {
+  user: (overrides = {}) => ({
+    id: 'test-user-id',
+    email: 'test@example.com',
+    name: 'Test User',
+    created_at: '2023-01-01T00:00:00Z',
+    ...overrides,
+  }),
+  
+  createUser: (count = 1, overrides = {}) => {
+    if (count === 1) {
+      return {
+        id: 'test-user-id',
+        email: 'test@example.com',
+        name: 'Test User',
+        created_at: '2023-01-01T00:00:00Z',
+        ...overrides,
+      };
+    }
+    return Array.from({ length: count }, (_, i) => ({
+      id: `test-user-${i + 1}`,
+      email: `test${i + 1}@example.com`,
+      name: `Test User ${i + 1}`,
+      created_at: '2023-01-01T00:00:00Z',
+      ...overrides,
+    }));
+  },
+  
+  createUsers: (count = 1, overrides = {}) => {
+    return Array.from({ length: count }, (_, i) => ({
+      id: `test-user-${i + 1}`,
+      email: `test${i + 1}@example.com`,
+      name: `Test User ${i + 1}`,
+      created_at: '2023-01-01T00:00:00Z',
+      ...overrides,
+    }));
+  },
+  
+  organisation: (overrides = {}) => ({
+    id: 'test-org-id',
+    name: 'Test Organisation',
+    created_at: '2023-01-01T00:00:00Z',
+    ...overrides,
+  }),
+  
+  event: (overrides = {}) => ({
+    id: 'test-event-id',
+    name: 'Test Event',
+    organisation_id: 'test-org-id',
+    created_at: '2023-01-01T00:00:00Z',
+    ...overrides,
+  }),
+  
+  permission: (overrides = {}) => ({
+    id: 'test-permission-id',
+    name: 'test:permission',
+    resource: 'test-resource',
+    operation: 'read',
+    ...overrides,
+  }),
+  
+  session: (overrides = {}) => ({
+    access_token: 'test-access-token',
+    refresh_token: 'test-refresh-token',
+    expires_in: 3600,
+    token_type: 'bearer',
+    user: {
+      id: 'test-user-id',
+      email: 'test@example.com',
+      ...(overrides as any).user,
+    },
+    ...overrides,
+  }),
+  
+  createSession: (count = 1, overrides = {}) => {
+    if (count === 1) {
+      return {
+        access_token: 'test-access-token',
+        refresh_token: 'test-refresh-token',
+        expires_in: 3600,
+        token_type: 'bearer',
+        user: {
+          id: 'test-user-id',
+          email: 'test@example.com',
+          ...(overrides as any).user,
+        },
+        ...overrides,
+      };
+    }
+    return Array.from({ length: count }, (_, i) => ({
+      access_token: `test-access-token-${i + 1}`,
+      refresh_token: `test-refresh-token-${i + 1}`,
+      expires_in: 3600,
+      token_type: 'bearer',
+      user: {
+        id: `test-user-${i + 1}`,
+        email: `test${i + 1}@example.com`,
+        ...(overrides as any).user,
+      },
+      ...overrides,
+    }));
+  },
+};
+
+// Mock Supabase client
+export const createMockSupabaseClient = () => {
+  const mockRpc = vi.fn(() => Promise.resolve({ data: null, error: null }));
+  
+  // Create a chainable mock for the query builder
+  const createQueryBuilder = () => {
+    const queryBuilder = {
+      select: vi.fn(() => queryBuilder),
+      eq: vi.fn(() => queryBuilder),
+      single: vi.fn(() => Promise.resolve({ data: { id: 'test-app-id' }, error: null })),
+      maybeSingle: vi.fn(() => Promise.resolve({ data: null, error: null })),
+      order: vi.fn(() => queryBuilder),
+      limit: vi.fn(() => Promise.resolve({ data: [], error: null })),
+      insert: vi.fn(() => Promise.resolve({ data: null, error: null })),
+      update: vi.fn(() => Promise.resolve({ data: null, error: null })),
+      delete: vi.fn(() => Promise.resolve({ data: null, error: null })),
+    };
+    return queryBuilder;
+  };
+  
+  return {
+    from: vi.fn(() => createQueryBuilder()),
+    auth: {
+      getUser: vi.fn(() => Promise.resolve({ data: { user: null }, error: null })),
+      getSession: vi.fn(() => Promise.resolve({ data: { session: null }, error: null })),
+      signIn: vi.fn(() => Promise.resolve({ data: null, error: null })),
+      signOut: vi.fn(() => Promise.resolve({ data: null, error: null })),
+    },
+    rpc: mockRpc,
+  };
+};
+
+// Test wrapper component
+export const TestWrapper = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <QueryClientProvider client={createTestQueryClient()}>
+      {children}
+    </QueryClientProvider>
+  );
+};
+
 // Common test helpers
 export const testHelpers = {
   // Wait for async operations

package/src/components/DataTable/DataTable.tsx

@@ -95,6 +95,10 @@
  * <DataTable
  *   data={data}
  *   columns={columns}
+ *   rbac={{
+ *     resource: 'users',
+ *     pageId: 'user-management'
+ *   }}
  *   title="Users"
  *   description="Manage your users"
  *   features={{
@@ -126,6 +130,10 @@
  * <DataTable
  *   data={data}
  *   columns={columns}
+ *   rbac={{
+ *     resource: 'users',
+ *     pageId: 'user-management'
+ *   }}
  *   title="Custom Ordered Table"
  *   features={{
  *     selection: true,
@@ -146,6 +154,10 @@
  * <DataTable
  *   data={largeDataset} // 50,000+ records
  *   columns={columns}
+ *   rbac={{
+ *     resource: 'users',
+ *     pageId: 'user-management'
+ *   }}
  *   title="Large Dataset"
  *   
  *   // Features configuration
@@ -183,6 +195,10 @@
  * <DataTable
  *   data={[]} // Empty - data comes from server
  *   columns={columns}
+ *   rbac={{
+ *     resource: 'users',
+ *     pageId: 'user-management'
+ *   }}
  *   title="Server-side Data"
  *   
  *   // Features configuration
@@ -235,6 +251,10 @@
  * <DataTable
  *   data={customerData}
  *   columns={customerColumns}
+ *   rbac={{
+ *     resource: 'customers',
+ *     pageId: 'customer-management'
+ *   }}
  *   title="Customer Management"
  *   features={{
  *     search: true,

package/src/components/DataTable/__tests__/DataTable.hooks.test 2.tsx

@@ -0,0 +1,191 @@
+/**
+ * @file DataTable Hooks Violation Test
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/__tests__
+ * @since 0.5.4
+ * 
+ * Test to verify that the DataTable component doesn't cause React Hooks violations.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DataTable } from '../DataTable';
+import type { DataTableColumn } from '../types';
+
+// Mock the required providers
+const MockUnifiedAuthProvider = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div data-testid="mock-auth-provider">
+      {children}
+    </div>
+  );
+};
+
+// Mock the useUnifiedAuth hook
+const mockUseUnifiedAuth = {
+  user: {
+    id: 'test-user',
+    user_metadata: {
+      organisationId: 'test-org',
+      eventId: 'test-event',
+      appId: 'test-app'
+    }
+  },
+  isAuthenticated: true,
+  isLoading: false,
+  error: null
+};
+
+// Mock the useCan hook
+const mockUseCan = {
+  can: true,
+  isLoading: false,
+  error: null
+};
+
+// Mock all the required modules
+vi.mock('../../../providers/UnifiedAuthProvider', () => ({
+  useUnifiedAuth: () => mockUseUnifiedAuth
+}));
+
+vi.mock('../../../rbac/hooks', () => ({
+  useCan: () => mockUseCan
+}));
+
+vi.mock('../components/DataTableCore', () => ({
+  DataTableCore: ({ children, ...props }: any) => (
+    <div data-testid="datatable-core" {...props}>
+      {children}
+    </div>
+  )
+}));
+
+vi.mock('../components/DataTableErrorBoundary', () => ({
+  DataTableErrorBoundary: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="error-boundary">{children}</div>
+  )
+}));
+
+describe('DataTable Hooks Violation Test', () => {
+  const mockData = [
+    { id: '1', name: 'Item 1', value: 100 },
+    { id: '2', name: 'Item 2', value: 200 }
+  ];
+
+  const mockColumns: DataTableColumn<typeof mockData[0]>[] = [
+    { accessorKey: 'id', header: 'ID' },
+    { accessorKey: 'name', header: 'Name' },
+    { accessorKey: 'value', header: 'Value' }
+  ];
+
+  const mockFeatures = {
+    search: true,
+    pagination: true,
+    sorting: true,
+    filtering: true,
+    import: true,
+    export: true,
+    selection: true,
+    creation: true,
+    editing: true,
+    deletion: true,
+    deleteSelected: true,
+    grouping: true,
+    columnVisibility: true,
+    columnReordering: true,
+    hierarchical: false
+  };
+
+  const mockRBAC = {
+    resource: 'test-resource',
+    pageId: 'test-page'
+  };
+
+  it('should render without React Hooks violations', () => {
+    // This test will fail if there are React Hooks violations
+    expect(() => {
+      render(
+        <MockUnifiedAuthProvider>
+          <DataTable
+            data={mockData}
+            columns={mockColumns}
+            rbac={mockRBAC}
+            features={mockFeatures}
+            getRowId={(row) => row.id}
+          />
+        </MockUnifiedAuthProvider>
+      );
+    }).not.toThrow();
+  });
+
+  it('should render DataTable with all required props', () => {
+    render(
+      <MockUnifiedAuthProvider>
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={mockFeatures}
+          getRowId={(row) => row.id}
+        />
+      </MockUnifiedAuthProvider>
+    );
+
+    expect(screen.getByTestId('datatable-core')).toBeInTheDocument();
+  });
+
+  it('should handle multiple re-renders without hooks violations', () => {
+    const { rerender } = render(
+      <MockUnifiedAuthProvider>
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={mockFeatures}
+          getRowId={(row) => row.id}
+        />
+      </MockUnifiedAuthProvider>
+    );
+
+    // Re-render with different data
+    const newData = [
+      { id: '3', name: 'Item 3', value: 300 },
+      { id: '4', name: 'Item 4', value: 400 }
+    ];
+
+    expect(() => {
+      rerender(
+        <MockUnifiedAuthProvider>
+          <DataTable
+            data={newData}
+            columns={mockColumns}
+            rbac={mockRBAC}
+            features={mockFeatures}
+            getRowId={(row) => row.id}
+          />
+        </MockUnifiedAuthProvider>
+      );
+    }).not.toThrow();
+
+    // Re-render with different features
+    const newFeatures = {
+      ...mockFeatures,
+      search: false,
+      pagination: false
+    };
+
+    expect(() => {
+      rerender(
+        <MockUnifiedAuthProvider>
+          <DataTable
+            data={newData}
+            columns={mockColumns}
+            rbac={mockRBAC}
+            features={newFeatures}
+            getRowId={(row) => row.id}
+          />
+        </MockUnifiedAuthProvider>
+      );
+    }).not.toThrow();
+  });
+});

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

@@ -0,0 +1,191 @@
+/**
+ * @file DataTable Hooks Violation Test
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/__tests__
+ * @since 0.5.4
+ * 
+ * Test to verify that the DataTable component doesn't cause React Hooks violations.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { DataTable } from '../DataTable';
+import type { DataTableColumn } from '../types';
+
+// Mock the required providers
+const MockUnifiedAuthProvider = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div data-testid="mock-auth-provider">
+      {children}
+    </div>
+  );
+};
+
+// Mock the useUnifiedAuth hook
+const mockUseUnifiedAuth = {
+  user: {
+    id: 'test-user',
+    user_metadata: {
+      organisationId: 'test-org',
+      eventId: 'test-event',
+      appId: 'test-app'
+    }
+  },
+  isAuthenticated: true,
+  isLoading: false,
+  error: null
+};
+
+// Mock the useCan hook
+const mockUseCan = {
+  can: true,
+  isLoading: false,
+  error: null
+};
+
+// Mock all the required modules
+vi.mock('../../../providers/UnifiedAuthProvider', () => ({
+  useUnifiedAuth: () => mockUseUnifiedAuth
+}));
+
+vi.mock('../../../rbac/hooks', () => ({
+  useCan: () => mockUseCan
+}));
+
+vi.mock('../components/DataTableCore', () => ({
+  DataTableCore: ({ children, ...props }: any) => (
+    <div data-testid="datatable-core" {...props}>
+      {children}
+    </div>
+  )
+}));
+
+vi.mock('../components/DataTableErrorBoundary', () => ({
+  DataTableErrorBoundary: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="error-boundary">{children}</div>
+  )
+}));
+
+describe('DataTable Hooks Violation Test', () => {
+  const mockData = [
+    { id: '1', name: 'Item 1', value: 100 },
+    { id: '2', name: 'Item 2', value: 200 }
+  ];
+
+  const mockColumns: DataTableColumn<typeof mockData[0]>[] = [
+    { accessorKey: 'id', header: 'ID' },
+    { accessorKey: 'name', header: 'Name' },
+    { accessorKey: 'value', header: 'Value' }
+  ];
+
+  const mockFeatures = {
+    search: true,
+    pagination: true,
+    sorting: true,
+    filtering: true,
+    import: true,
+    export: true,
+    selection: true,
+    creation: true,
+    editing: true,
+    deletion: true,
+    deleteSelected: true,
+    grouping: true,
+    columnVisibility: true,
+    columnReordering: true,
+    hierarchical: false
+  };
+
+  const mockRBAC = {
+    resource: 'test-resource',
+    pageId: 'test-page'
+  };
+
+  it('should render without React Hooks violations', () => {
+    // This test will fail if there are React Hooks violations
+    expect(() => {
+      render(
+        <MockUnifiedAuthProvider>
+          <DataTable
+            data={mockData}
+            columns={mockColumns}
+            rbac={mockRBAC}
+            features={mockFeatures}
+            getRowId={(row) => row.id}
+          />
+        </MockUnifiedAuthProvider>
+      );
+    }).not.toThrow();
+  });
+
+  it('should render DataTable with all required props', () => {
+    render(
+      <MockUnifiedAuthProvider>
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={mockFeatures}
+          getRowId={(row) => row.id}
+        />
+      </MockUnifiedAuthProvider>
+    );
+
+    expect(screen.getByTestId('datatable-core')).toBeInTheDocument();
+  });
+
+  it('should handle multiple re-renders without hooks violations', () => {
+    const { rerender } = render(
+      <MockUnifiedAuthProvider>
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={mockFeatures}
+          getRowId={(row) => row.id}
+        />
+      </MockUnifiedAuthProvider>
+    );
+
+    // Re-render with different data
+    const newData = [
+      { id: '3', name: 'Item 3', value: 300 },
+      { id: '4', name: 'Item 4', value: 400 }
+    ];
+
+    expect(() => {
+      rerender(
+        <MockUnifiedAuthProvider>
+          <DataTable
+            data={newData}
+            columns={mockColumns}
+            rbac={mockRBAC}
+            features={mockFeatures}
+            getRowId={(row) => row.id}
+          />
+        </MockUnifiedAuthProvider>
+      );
+    }).not.toThrow();
+
+    // Re-render with different features
+    const newFeatures = {
+      ...mockFeatures,
+      search: false,
+      pagination: false
+    };
+
+    expect(() => {
+      rerender(
+        <MockUnifiedAuthProvider>
+          <DataTable
+            data={newData}
+            columns={mockColumns}
+            rbac={mockRBAC}
+            features={newFeatures}
+            getRowId={(row) => row.id}
+          />
+        </MockUnifiedAuthProvider>
+      );
+    }).not.toThrow();
+  });
+});