@jmruthers/pace-core 0.6.9 → 0.6.11

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

@@ -1,658 +0,0 @@
-/**
- * @file DataTable Grouping Aggregation Tests
- * @package @jmruthers/pace-core
- * @module Components/DataTable/__tests__
- * @since 0.6.0
- * 
- * Tests for grouped row aggregation functionality in DataTable component.
- */
-
-import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import { DataTable, sum, average, count, min, max } from '../index';
-import type { DataTableColumn } from '../types';
-import { vi } from 'vitest';
-
-// Mock the RBAC hooks
-vi.mock('../../../rbac/hooks', () => ({
-  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',
-    user_metadata: { organisationId: 'test-org' },
-    app_metadata: { organisationId: 'test-org' },
-  },
-  selectedOrganisation: { id: 'test-org-id' },
-  selectedEvent: { event_id: 'test-event-id' },
-  supabase: {},
-}));
-
-vi.mock('../../../providers/services/UnifiedAuthProvider', () => ({
-  useUnifiedAuth: () => mockUseUnifiedAuthFn(),
-  UnifiedAuthProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
-}));
-
-// Test data interface
-interface DinerData {
-  id: string;
-  diet: string;
-  youth: number;
-  adults: number;
-  cost: number;
-}
-
-// Sample test data
-const dinerData: DinerData[] = [
-  { id: '1', diet: 'Standard', youth: 10, adults: 5, cost: 100.50 },
-  { id: '2', diet: 'Standard', youth: 15, adults: 8, cost: 150.75 },
-  { id: '3', diet: 'Standard', youth: 20, adults: 10, cost: 200.00 },
-  { id: '4', diet: 'Gluten Free', youth: 5, adults: 3, cost: 75.25 },
-  { id: '5', diet: 'Gluten Free', youth: 8, adults: 4, cost: 120.00 },
-  { id: '6', diet: 'Vegetarian', youth: 12, adults: 6, cost: 90.50 },
-];
-
-const defaultRBAC = {
-  pageId: 'test-page',
-  pageName: 'test-page',
-};
-
-describe('DataTable Grouping Aggregation', () => {
-  describe('Basic Aggregation Functions', () => {
-    it('should display sum aggregation in grouped rows', async () => {
-      const columns: DataTableColumn<DinerData>[] = [
-        {
-          accessorKey: 'diet',
-          header: 'Diet',
-          enableGrouping: true,
-        },
-        {
-          accessorKey: 'youth',
-          header: 'Youth',
-          aggregateFn: sum('youth'),
-        },
-        {
-          accessorKey: 'adults',
-          header: 'Adults',
-          aggregateFn: sum('adults'),
-        },
-      ];
-
-      render(
-        <DataTable
-          data={dinerData}
-          columns={columns}
-          rbac={defaultRBAC}
-          features={{
-            grouping: true,
-            search: false,
-            pagination: false,
-            sorting: false,
-          }}
-          defaultGrouping={['diet']}
-          getRowId={(row) => row.id}
-        />
-      );
-
-      // 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(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', async () => {
-      const columns: DataTableColumn<DinerData>[] = [
-        {
-          accessorKey: 'diet',
-          header: 'Diet',
-          enableGrouping: true,
-        },
-        {
-          accessorKey: 'cost',
-          header: 'Avg Cost',
-          aggregateFn: average('cost'),
-        },
-      ];
-
-      render(
-        <DataTable
-          data={dinerData}
-          columns={columns}
-          rbac={defaultRBAC}
-          features={{
-            grouping: true,
-            search: false,
-            pagination: false,
-            sorting: false,
-          }}
-          defaultGrouping={['diet']}
-          getRowId={(row) => row.id}
-        />
-      );
-
-      // 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', async () => {
-      const columns: DataTableColumn<DinerData>[] = [
-        {
-          accessorKey: 'diet',
-          header: 'Diet',
-          enableGrouping: true,
-        },
-        {
-          accessorKey: 'id',
-          header: 'Count',
-          aggregateFn: count(),
-        },
-      ];
-
-      render(
-        <DataTable
-          data={dinerData}
-          columns={columns}
-          rbac={defaultRBAC}
-          features={{
-            grouping: true,
-            search: false,
-            pagination: false,
-            sorting: false,
-          }}
-          defaultGrouping={['diet']}
-          getRowId={(row) => row.id}
-        />
-      );
-
-      // 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', async () => {
-      const columns: DataTableColumn<DinerData>[] = [
-        {
-          accessorKey: 'diet',
-          header: 'Diet',
-          enableGrouping: true,
-        },
-        {
-          accessorKey: 'cost',
-          header: 'Min Cost',
-          aggregateFn: min('cost'),
-        },
-      ];
-
-      render(
-        <DataTable
-          data={dinerData}
-          columns={columns}
-          rbac={defaultRBAC}
-          features={{
-            grouping: true,
-            search: false,
-            pagination: false,
-            sorting: false,
-          }}
-          defaultGrouping={['diet']}
-          getRowId={(row) => row.id}
-        />
-      );
-
-      // 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', async () => {
-      const columns: DataTableColumn<DinerData>[] = [
-        {
-          accessorKey: 'diet',
-          header: 'Diet',
-          enableGrouping: true,
-        },
-        {
-          accessorKey: 'cost',
-          header: 'Max Cost',
-          aggregateFn: max('cost'),
-        },
-      ];
-
-      render(
-        <DataTable
-          data={dinerData}
-          columns={columns}
-          rbac={defaultRBAC}
-          features={{
-            grouping: true,
-            search: false,
-            pagination: false,
-            sorting: false,
-          }}
-          defaultGrouping={['diet']}
-          getRowId={(row) => row.id}
-        />
-      );
-
-      // 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', async () => {
-      const customAggregate = (rows: DinerData[]) => {
-        return rows.reduce((total, row) => total + row.youth + row.adults, 0);
-      };
-
-      const columns: DataTableColumn<DinerData>[] = [
-        {
-          accessorKey: 'diet',
-          header: 'Diet',
-          enableGrouping: true,
-        },
-        {
-          accessorKey: 'youth',
-          header: 'Total Diners',
-          aggregateFn: customAggregate,
-        },
-      ];
-
-      render(
-        <DataTable
-          data={dinerData}
-          columns={columns}
-          rbac={defaultRBAC}
-          features={{
-            grouping: true,
-            search: false,
-            pagination: false,
-            sorting: false,
-          }}
-          defaultGrouping={['diet']}
-          getRowId={(row) => row.id}
-        />
-      );
-
-      // 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', async () => {
-      const columns: DataTableColumn<DinerData>[] = [
-        {
-          accessorKey: 'diet',
-          header: 'Diet',
-          enableGrouping: true,
-        },
-        {
-          accessorKey: 'cost',
-          header: 'Total Cost',
-          aggregateFn: sum('cost'),
-          aggregateCell: (value) => `$${value.toFixed(2)}`,
-        },
-      ];
-
-      render(
-        <DataTable
-          data={dinerData}
-          columns={columns}
-          rbac={defaultRBAC}
-          features={{
-            grouping: true,
-            search: false,
-            pagination: false,
-            sorting: false,
-          }}
-          defaultGrouping={['diet']}
-          getRowId={(row) => row.id}
-        />
-      );
-
-      // 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', async () => {
-      const emptyData: DinerData[] = [];
-
-      const columns: DataTableColumn<DinerData>[] = [
-        {
-          accessorKey: 'diet',
-          header: 'Diet',
-          enableGrouping: true,
-        },
-        {
-          accessorKey: 'youth',
-          header: 'Youth',
-          aggregateFn: sum('youth'),
-        },
-      ];
-
-      render(
-        <DataTable
-          data={emptyData}
-          columns={columns}
-          rbac={defaultRBAC}
-          features={{
-            grouping: true,
-            search: false,
-            pagination: false,
-            sorting: false,
-          }}
-          defaultGrouping={['diet']}
-          getRowId={(row) => row.id}
-        />
-      );
-
-      // Should render without errors
-      expect(screen.queryByText(/items/)).not.toBeInTheDocument();
-    });
-
-    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 },
-        { id: '3', diet: 'Standard', youth: 20, adults: undefined as any, cost: 200 },
-      ];
-
-      const columns: DataTableColumn<DinerData>[] = [
-        {
-          accessorKey: 'diet',
-          header: 'Diet',
-          enableGrouping: true,
-        },
-        {
-          accessorKey: 'youth',
-          header: 'Youth',
-          aggregateFn: sum('youth'),
-        },
-        {
-          accessorKey: 'adults',
-          header: 'Adults',
-          aggregateFn: sum('adults'),
-        },
-      ];
-
-      render(
-        <DataTable
-          data={dataWithNulls}
-          columns={columns}
-          rbac={defaultRBAC}
-          features={{
-            grouping: true,
-            search: false,
-            pagination: false,
-            sorting: false,
-          }}
-          defaultGrouping={['diet']}
-          getRowId={(row) => row.id}
-        />
-      );
-
-      // 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', async () => {
-      const columns: DataTableColumn<DinerData>[] = [
-        {
-          accessorKey: 'diet',
-          header: 'Diet',
-          enableGrouping: true,
-        },
-        {
-          accessorKey: 'youth',
-          header: 'Youth',
-          aggregateFn: sum('youth'),
-        },
-        {
-          accessorKey: 'adults',
-          header: 'Adults',
-          // No aggregateFn - should show empty
-        },
-      ];
-
-      render(
-        <DataTable
-          data={dinerData}
-          columns={columns}
-          rbac={defaultRBAC}
-          features={{
-            grouping: true,
-            search: false,
-            pagination: false,
-            sorting: false,
-          }}
-          defaultGrouping={['diet']}
-          getRowId={(row) => row.id}
-        />
-      );
-
-      // 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', async () => {
-      const columns: DataTableColumn<DinerData>[] = [
-        {
-          accessorKey: 'diet',
-          header: 'Diet',
-          enableGrouping: true,
-        },
-        {
-          accessorKey: 'youth',
-          header: 'Total Youth',
-          aggregateFn: sum('youth'),
-        },
-        {
-          accessorKey: 'adults',
-          header: 'Total Adults',
-          aggregateFn: sum('adults'),
-        },
-        {
-          accessorKey: 'cost',
-          header: 'Avg Cost',
-          aggregateFn: average('cost'),
-        },
-        {
-          accessorKey: 'cost',
-          header: 'Min Cost',
-          aggregateFn: min('cost'),
-        },
-        {
-          accessorKey: 'cost',
-          header: 'Max Cost',
-          aggregateFn: max('cost'),
-        },
-      ];
-
-      render(
-        <DataTable
-          data={dinerData}
-          columns={columns}
-          rbac={defaultRBAC}
-          features={{
-            grouping: true,
-            search: false,
-            pagination: false,
-            sorting: false,
-          }}
-          defaultGrouping={['diet']}
-          getRowId={(row) => row.id}
-        />
-      );
-
-      // 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', async () => {
-      const columns: DataTableColumn<DinerData>[] = [
-        {
-          accessorKey: 'diet',
-          header: 'Diet',
-          enableGrouping: true,
-        },
-        {
-          accessorKey: 'youth',
-          header: 'Youth',
-          aggregateFn: sum('youth'),
-        },
-      ];
-
-      render(
-        <DataTable
-          data={dinerData}
-          columns={columns}
-          rbac={defaultRBAC}
-          features={{
-            grouping: true,
-            search: false,
-            pagination: false,
-            sorting: true,
-          }}
-          defaultGrouping={['diet']}
-          getRowId={(row) => row.id}
-        />
-      );
-
-      // 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', async () => {
-      const columns: DataTableColumn<DinerData>[] = [
-        {
-          accessorKey: 'diet',
-          header: 'Diet',
-          enableGrouping: true,
-        },
-        {
-          accessorKey: 'youth',
-          header: 'Youth',
-          aggregateFn: sum('youth'),
-        },
-      ];
-
-      render(
-        <DataTable
-          data={dinerData}
-          columns={columns}
-          rbac={defaultRBAC}
-          features={{
-            grouping: true,
-            search: false,
-            pagination: false,
-            sorting: false,
-            filtering: true,
-          }}
-          defaultGrouping={['diet']}
-          getRowId={(row) => row.id}
-        />
-      );
-
-      // Wait for table to render
-      await waitFor(() => {
-        expect(screen.getByRole('table')).toBeInTheDocument();
-      });
-
-      expect(await screen.findByText('Standard (3 items)')).toBeInTheDocument();
-    });
-  });
-});
-