@jmruthers/pace-core 0.5.135 → 0.5.136

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

@@ -0,0 +1,562 @@
+/**
+ * @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 })),
+  useResolvedScope: vi.fn(() => ({
+    resolvedScope: {
+      organisationId: 'test-org-id',
+      eventId: 'test-event-id',
+      appId: 'test-app-id'
+    }
+  }))
+}));
+
+vi.mock('../../../providers/UnifiedAuthProvider', () => ({
+  useUnifiedAuth: vi.fn(() => ({
+    user: {
+      id: 'test-user',
+      user_metadata: { organisationId: 'test-org' },
+      app_metadata: { organisationId: 'test-org' },
+    },
+    selectedOrganisationId: 'test-org-id',
+    selectedEventId: 'test-event-id',
+    supabase: null,
+  })),
+}));
+
+// 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', () => {
+      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}
+        />
+      );
+
+      // 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();
+      // 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', () => {
+      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}
+        />
+      );
+
+      expect(screen.getByText('Standard (3 items)')).toBeInTheDocument();
+    });
+
+    it('should display count aggregation in grouped rows', () => {
+      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}
+        />
+      );
+
+      expect(screen.getByText('Standard (3 items)')).toBeInTheDocument();
+    });
+
+    it('should display min aggregation in grouped rows', () => {
+      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}
+        />
+      );
+
+      expect(screen.getByText('Standard (3 items)')).toBeInTheDocument();
+    });
+
+    it('should display max aggregation in grouped rows', () => {
+      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}
+        />
+      );
+
+      expect(screen.getByText('Standard (3 items)')).toBeInTheDocument();
+    });
+  });
+
+  describe('Custom Aggregation Functions', () => {
+    it('should use custom aggregation function', () => {
+      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}
+        />
+      );
+
+      expect(screen.getByText('Standard (3 items)')).toBeInTheDocument();
+    });
+  });
+
+  describe('Custom Aggregate Cell Renderer', () => {
+    it('should use custom aggregateCell renderer', () => {
+      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}
+        />
+      );
+
+      expect(screen.getByText('Standard (3 items)')).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('should handle empty groups gracefully', () => {
+      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', () => {
+      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}
+        />
+      );
+
+      expect(screen.getByText('Standard (3 items)')).toBeInTheDocument();
+    });
+
+    it('should show empty cells for columns without aggregateFn', () => {
+      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}
+        />
+      );
+
+      expect(screen.getByText('Standard (3 items)')).toBeInTheDocument();
+    });
+  });
+
+  describe('Multiple Aggregations', () => {
+    it('should display multiple columns with different aggregation functions', () => {
+      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}
+        />
+      );
+
+      expect(screen.getByText('Standard (3 items)')).toBeInTheDocument();
+      expect(screen.getByText('Gluten Free (2 items)')).toBeInTheDocument();
+    });
+  });
+
+  describe('Integration with Existing Features', () => {
+    it('should work with sorting', () => {
+      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}
+        />
+      );
+
+      expect(screen.getByText('Standard (3 items)')).toBeInTheDocument();
+    });
+
+    it('should work with filtering', () => {
+      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}
+        />
+      );
+
+      expect(screen.getByText('Standard (3 items)')).toBeInTheDocument();
+    });
+  });
+});
+

package/src/components/DataTable/__tests__/styles.test.ts

@@ -229,12 +229,12 @@ describe('DataTable Styles', () => {
 
     it('returns compact variant classes', () => {
       const result = getTableClasses({ variant: 'compact' });
-      expect(result).toBe('w-full caption-top text-sm text-sm');
+      expect(result).toBe('w-full caption-top text-sm');
     });
 
     it('returns spacious variant classes', () => {
       const result = getTableClasses({ variant: 'spacious' });
-      expect(result).toBe('w-full caption-top text-sm text-base');
+      expect(result).toBe('w-full caption-top text-base');
     });
 
     it('adds custom className', () => {

package/src/components/DataTable/components/ActionButtons.tsx

@@ -9,7 +9,6 @@ import {
   SelectItem,
   SelectTrigger,
 } from '../../Select/Select';
-import { createLogger } from '../../../utils/logger';
 import type { ActionCondition, DataRecord, DataTableAction } from '../types';
 
 interface ActionButtonsProps<TData extends DataRecord = DataRecord> {
@@ -61,7 +60,6 @@ function ActionButtonsComponent<TData extends DataRecord = DataRecord>({
   hierarchical = false,
   permissions,
 }: ActionButtonsProps<TData>) {
-  const logger = createLogger('ActionButtons');
   const rowData = row.original;
 
   if (actions.length === 0) {
@@ -130,13 +128,6 @@ function ActionButtonsComponent<TData extends DataRecord = DataRecord>({
               variant={action.variant === 'destructive' ? 'destructive' : 'ghost'}
               size="sm"
               onClick={() => {
-                if (import.meta.env.MODE === 'development' && !isDisabled) {
-                  logger.debug('Action clicked:', {
-                    actionLabel: action.label,
-                    rowOriginal: rowData,
-                    actionOnClick: typeof action.onClick
-                  });
-                }
                 if (!isDisabled) {
                   action.onClick(rowData);
                 }
@@ -173,12 +164,6 @@ function ActionButtonsComponent<TData extends DataRecord = DataRecord>({
               key={actionIndex}
               value={`action-${actionIndex}`}
               onClick={() => {
-                if (import.meta.env.MODE === 'development' && !isDisabled) {
-                  logger.debug('Action clicked from dropdown:', {
-                    actionLabel: action.label,
-                    rowOriginal: rowData
-                  });
-                }
                 if (!isDisabled) {
                   action.onClick(rowData);
                 }