@jmruthers/pace-core 0.5.126 → 0.5.128

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

@@ -0,0 +1,702 @@
+/**
+ * @file DataTable Export Functionality Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/__tests__
+ * @since 0.5.76
+ * 
+ * Comprehensive tests for DataTable export functionality, including:
+ * - Default export behavior (visible columns)
+ * - Custom onExport handler with ExportOptions
+ * - Custom column selection
+ * - Export with different columns than visible
+ */
+
+import React from 'react';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { DataTable } from '../DataTable';
+import type { DataTableColumn, ExportOptions } from '../types';
+import { exportToCSVWithTableRows } from '../utils/exportUtils';
+import { createTestData, createTestColumns } from './test-utils/dataFactories';
+import { createDefaultFeatures } from './test-utils';
+
+// Mock the export utilities
+vi.mock('../utils/exportUtils', () => ({
+  exportToCSVWithTableRows: vi.fn().mockResolvedValue(undefined),
+  exportToCSV: vi.fn().mockResolvedValue(undefined),
+  generateCSVContent: vi.fn(),
+}));
+
+// Mock the toast hook
+const mockToast = vi.fn();
+vi.mock('../../../hooks/useToast', () => ({
+  toast: (...args: any[]) => mockToast(...args),
+}));
+
+// Mock 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'
+    }
+  }))
+}));
+
+// Mock auth provider
+vi.mock('../../../providers/UnifiedAuthProvider', () => ({
+  useUnifiedAuth: vi.fn(() => ({
+    user: { id: 'test-user', email: 'test@example.com' },
+    isAuthenticated: true,
+    isLoading: false,
+    error: null,
+    selectedOrganisationId: 'test-org-id',
+    selectedEventId: 'test-event-id',
+    supabase: null,
+  })),
+}));
+
+// Mock DataTableCore to test the wrapper logic
+vi.mock('../components/DataTableCore', async () => {
+  const React = await import('react');
+  const { exportToCSVWithTableRows } = await import('../utils/exportUtils');
+  const { toast } = await import('../../../hooks/useToast');
+  
+  return {
+    DataTableCore: React.forwardRef(({ onExport, data, columns, title, ...props }: any, ref: any) => {
+      // Simulate export button click
+      const handleExport = async () => {
+        try {
+          // Create mock table rows with getValue method
+          const tableRows = (data || []).map((row: any, index: number) => ({
+            original: row,
+            getValue: (columnId: string) => {
+              const col = columns?.find((c: any) => (c.id || c.accessorKey) === columnId);
+              if (col && 'accessorFn' in col && col.accessorFn) {
+                return col.accessorFn(row);
+              }
+              return row[col?.accessorKey || columnId];
+            },
+            id: String(row.id || index),
+          }));
+
+          // Get visible columns (all columns for simplicity in tests)
+          const visibleColumns = columns || [];
+          
+          // Create column mapping
+          const columnIdToTableColumn = new Map();
+          visibleColumns.forEach((col: any) => {
+            const colId = col.id || col.accessorKey;
+            if (colId) {
+              columnIdToTableColumn.set(String(colId), { id: String(colId) });
+            }
+          });
+
+          // Generate filename
+          const timestamp = new Date().toISOString().split('T')[0];
+          const filename = title 
+            ? `${title.replace(/[^a-z0-9]/gi, '_').toLowerCase()}_${timestamp}.csv` 
+            : `data_export_${timestamp}.csv`;
+
+          // Create export options
+          const exportOptions = {
+            tableRows,
+            allColumns: columns || [],
+            visibleColumns,
+            columnIdToTableColumn,
+            data: data || [],
+            filename,
+            table: {}, // Mock table instance
+          };
+
+          // If custom handler provided, call it with options
+          if (onExport) {
+            await onExport(exportOptions);
+            return;
+          }
+
+          // Default export behavior
+          const exportColumns = visibleColumns.map((col: any) => ({
+            header: col.header || col.accessorKey,
+            id: col.id || col.accessorKey,
+            accessorKey: col.accessorKey,
+            accessorFn: 'accessorFn' in col ? col.accessorFn : undefined,
+          }));
+
+          await exportToCSVWithTableRows(
+            tableRows,
+            exportColumns,
+            columnIdToTableColumn,
+            filename
+          );
+
+          toast({
+            title: "Export Successful",
+            description: `Data exported to ${filename}`,
+            variant: "default"
+          });
+        } catch (error) {
+          const errorMessage = error instanceof Error ? error.message : 'Unknown error occurred';
+          toast({
+            title: "Export Failed",
+            description: `Failed to export data: ${errorMessage}`,
+            variant: "destructive"
+          });
+        }
+      };
+
+      return (
+        <div data-testid="data-table-core">
+          {props.features?.export && (
+            <button
+              data-testid="export-button"
+              onClick={handleExport}
+            >
+              Export
+            </button>
+          )}
+          <div data-testid="table-content">{props.children}</div>
+        </div>
+      );
+    }),
+  };
+});
+
+interface TestData {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+  status: 'active' | 'inactive';
+  createdAt: string;
+}
+
+describe('DataTable Export Functionality', () => {
+  const mockData: TestData[] = [
+    { id: '1', name: 'John Doe', email: 'john@example.com', role: 'Admin', status: 'active', createdAt: '2024-01-01' },
+    { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'User', status: 'active', createdAt: '2024-01-02' },
+    { id: '3', name: 'Bob Johnson', email: 'bob@example.com', role: 'User', status: 'inactive', createdAt: '2024-01-03' },
+  ];
+
+  const mockColumns: DataTableColumn<TestData>[] = [
+    { id: 'id', accessorKey: 'id', header: 'ID' },
+    { id: 'name', accessorKey: 'name', header: 'Name' },
+    { id: 'email', accessorKey: 'email', header: 'Email' },
+    { id: 'role', accessorKey: 'role', header: 'Role' },
+    { id: 'status', accessorKey: 'status', header: 'Status' },
+    { id: 'createdAt', accessorKey: 'createdAt', header: 'Created At' },
+  ];
+
+  const mockRBAC = { pageId: 'test-page' };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    delete (window as any).__testOnExport;
+  });
+
+  describe('Default Export Behavior', () => {
+    it('exports visible columns when no custom handler is provided', async () => {
+      const features = createDefaultFeatures();
+      features.export = true;
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={features}
+          title="Test Table"
+        />
+      );
+
+      const exportButton = screen.getByTestId('export-button');
+      await userEvent.click(exportButton);
+
+      await waitFor(() => {
+        expect(exportToCSVWithTableRows).toHaveBeenCalled();
+      });
+
+      // Verify default export was called with visible columns
+      const callArgs = vi.mocked(exportToCSVWithTableRows).mock.calls[0];
+      expect(callArgs).toBeDefined();
+      expect(callArgs[2]).toBeDefined(); // columnIdToTableColumn
+      expect(callArgs[3]).toMatch(/test_table_\d{4}-\d{2}-\d{2}\.csv/); // filename
+    });
+
+    it('generates filename from title', async () => {
+      const features = createDefaultFeatures();
+      features.export = true;
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={features}
+          title="My Custom Table"
+        />
+      );
+
+      const exportButton = screen.getByTestId('export-button');
+      await userEvent.click(exportButton);
+
+      await waitFor(() => {
+        expect(exportToCSVWithTableRows).toHaveBeenCalled();
+      });
+
+      const callArgs = vi.mocked(exportToCSVWithTableRows).mock.calls[0];
+      expect(callArgs[3]).toMatch(/my_custom_table_\d{4}-\d{2}-\d{2}\.csv/);
+    });
+
+    it('uses default filename when no title is provided', async () => {
+      const features = createDefaultFeatures();
+      features.export = true;
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={features}
+        />
+      );
+
+      const exportButton = screen.getByTestId('export-button');
+      await userEvent.click(exportButton);
+
+      await waitFor(() => {
+        expect(exportToCSVWithTableRows).toHaveBeenCalled();
+      });
+
+      const callArgs = vi.mocked(exportToCSVWithTableRows).mock.calls[0];
+      expect(callArgs[3]).toMatch(/data_export_\d{4}-\d{2}-\d{2}\.csv/);
+    });
+  });
+
+  describe('Custom onExport Handler', () => {
+    it('calls custom onExport handler with ExportOptions', async () => {
+      const features = createDefaultFeatures();
+      features.export = true;
+      const mockOnExport = vi.fn().mockResolvedValue(undefined);
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={features}
+          onExport={mockOnExport}
+        />
+      );
+
+      const exportButton = screen.getByTestId('export-button');
+      await userEvent.click(exportButton);
+
+      await waitFor(() => {
+        expect(mockOnExport).toHaveBeenCalled();
+      });
+
+      // Verify ExportOptions structure
+      const exportOptions = mockOnExport.mock.calls[0][0] as ExportOptions<TestData>;
+      expect(exportOptions).toBeDefined();
+      expect(exportOptions.tableRows).toBeDefined();
+      expect(exportOptions.allColumns).toEqual(mockColumns);
+      expect(exportOptions.visibleColumns).toBeDefined();
+      expect(exportOptions.columnIdToTableColumn).toBeDefined();
+      expect(exportOptions.data).toEqual(mockData);
+      expect(exportOptions.filename).toBeDefined();
+      expect(exportOptions.table).toBeDefined();
+    });
+
+    it('provides all columns in ExportOptions.allColumns', async () => {
+      const features = createDefaultFeatures();
+      features.export = true;
+      const mockOnExport = vi.fn().mockResolvedValue(undefined);
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={features}
+          onExport={mockOnExport}
+        />
+      );
+
+      const exportButton = screen.getByTestId('export-button');
+      await userEvent.click(exportButton);
+
+      await waitFor(() => {
+        expect(mockOnExport).toHaveBeenCalled();
+      });
+
+      const exportOptions = mockOnExport.mock.calls[0][0] as ExportOptions<TestData>;
+      expect(exportOptions.allColumns).toHaveLength(mockColumns.length);
+      expect(exportOptions.allColumns).toEqual(mockColumns);
+    });
+
+    it('provides visible columns in ExportOptions.visibleColumns', async () => {
+      const features = createDefaultFeatures();
+      features.export = true;
+      const mockOnExport = vi.fn().mockResolvedValue(undefined);
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={features}
+          onExport={mockOnExport}
+        />
+      );
+
+      const exportButton = screen.getByTestId('export-button');
+      await userEvent.click(exportButton);
+
+      await waitFor(() => {
+        expect(mockOnExport).toHaveBeenCalled();
+      });
+
+      const exportOptions = mockOnExport.mock.calls[0][0] as ExportOptions<TestData>;
+      expect(exportOptions.visibleColumns).toBeDefined();
+      expect(Array.isArray(exportOptions.visibleColumns)).toBe(true);
+      // Visible columns should be a subset of all columns
+      expect(exportOptions.visibleColumns.length).toBeLessThanOrEqual(exportOptions.allColumns.length);
+    });
+
+    it('provides tableRows with getValue method', async () => {
+      const features = createDefaultFeatures();
+      features.export = true;
+      const mockOnExport = vi.fn().mockResolvedValue(undefined);
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={features}
+          onExport={mockOnExport}
+        />
+      );
+
+      const exportButton = screen.getByTestId('export-button');
+      await userEvent.click(exportButton);
+
+      await waitFor(() => {
+        expect(mockOnExport).toHaveBeenCalled();
+      });
+
+      const exportOptions = mockOnExport.mock.calls[0][0] as ExportOptions<TestData>;
+      expect(exportOptions.tableRows).toBeDefined();
+      expect(Array.isArray(exportOptions.tableRows)).toBe(true);
+      expect(exportOptions.tableRows.length).toBeGreaterThan(0);
+      
+      // Verify tableRows have getValue method
+      const firstRow = exportOptions.tableRows[0];
+      expect(firstRow).toHaveProperty('getValue');
+      expect(firstRow).toHaveProperty('original');
+      expect(firstRow).toHaveProperty('id');
+      expect(typeof firstRow.getValue).toBe('function');
+    });
+
+    it('provides columnIdToTableColumn mapping', async () => {
+      const features = createDefaultFeatures();
+      features.export = true;
+      const mockOnExport = vi.fn().mockResolvedValue(undefined);
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={features}
+          onExport={mockOnExport}
+        />
+      );
+
+      const exportButton = screen.getByTestId('export-button');
+      await userEvent.click(exportButton);
+
+      await waitFor(() => {
+        expect(mockOnExport).toHaveBeenCalled();
+      });
+
+      const exportOptions = mockOnExport.mock.calls[0][0] as ExportOptions<TestData>;
+      expect(exportOptions.columnIdToTableColumn).toBeDefined();
+      expect(exportOptions.columnIdToTableColumn instanceof Map).toBe(true);
+    });
+  });
+
+  describe('Custom Column Selection', () => {
+    it('allows exporting different columns than visible', async () => {
+      const features = createDefaultFeatures();
+      features.export = true;
+      const mockOnExport = vi.fn(async (options: ExportOptions<TestData>) => {
+        // Export only name and email columns (different from all visible columns)
+        const exportColumns = options.allColumns
+          .filter(col => ['name', 'email'].includes(col.accessorKey || ''))
+          .map(col => ({
+            header: col.header || col.accessorKey,
+            id: col.id || col.accessorKey,
+            accessorKey: col.accessorKey,
+            accessorFn: 'accessorFn' in col ? col.accessorFn : undefined,
+          }));
+
+        await exportToCSVWithTableRows(
+          options.tableRows,
+          exportColumns,
+          options.columnIdToTableColumn,
+          'custom-export.csv'
+        );
+      });
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={features}
+          onExport={mockOnExport}
+        />
+      );
+
+      const exportButton = screen.getByTestId('export-button');
+      await userEvent.click(exportButton);
+
+      await waitFor(() => {
+        expect(mockOnExport).toHaveBeenCalled();
+        expect(exportToCSVWithTableRows).toHaveBeenCalled();
+      });
+
+      // Verify custom export was called with only name and email columns
+      const callArgs = vi.mocked(exportToCSVWithTableRows).mock.calls[0];
+      const exportedColumns = callArgs[1];
+      expect(exportedColumns).toHaveLength(2);
+      expect(exportedColumns.map((c: any) => c.accessorKey)).toEqual(['name', 'email']);
+      expect(callArgs[3]).toBe('custom-export.csv');
+    });
+
+    it('allows exporting all columns including hidden ones', async () => {
+      const features = createDefaultFeatures();
+      features.export = true;
+      const mockOnExport = vi.fn(async (options: ExportOptions<TestData>) => {
+        // Export all columns (including potentially hidden ones)
+        const exportColumns = options.allColumns.map(col => ({
+          header: col.header || col.accessorKey,
+          id: col.id || col.accessorKey,
+          accessorKey: col.accessorKey,
+          accessorFn: 'accessorFn' in col ? col.accessorFn : undefined,
+        }));
+
+        await exportToCSVWithTableRows(
+          options.tableRows,
+          exportColumns,
+          options.columnIdToTableColumn,
+          'all-columns-export.csv'
+        );
+      });
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={features}
+          onExport={mockOnExport}
+        />
+      );
+
+      const exportButton = screen.getByTestId('export-button');
+      await userEvent.click(exportButton);
+
+      await waitFor(() => {
+        expect(mockOnExport).toHaveBeenCalled();
+        expect(exportToCSVWithTableRows).toHaveBeenCalled();
+      });
+
+      // Verify all columns were exported
+      const callArgs = vi.mocked(exportToCSVWithTableRows).mock.calls[0];
+      const exportedColumns = callArgs[1];
+      expect(exportedColumns).toHaveLength(mockColumns.length);
+    });
+
+    it('allows custom filename in export handler', async () => {
+      const features = createDefaultFeatures();
+      features.export = true;
+      const customFilename = 'my-custom-export-2024.csv';
+      const mockOnExport = vi.fn(async (options: ExportOptions<TestData>) => {
+        const exportColumns = options.visibleColumns.map(col => ({
+          header: col.header || col.accessorKey,
+          id: col.id || col.accessorKey,
+          accessorKey: col.accessorKey,
+          accessorFn: 'accessorFn' in col ? col.accessorFn : undefined,
+        }));
+
+        await exportToCSVWithTableRows(
+          options.tableRows,
+          exportColumns,
+          options.columnIdToTableColumn,
+          customFilename
+        );
+      });
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={features}
+          onExport={mockOnExport}
+          title="Test Table"
+        />
+      );
+
+      const exportButton = screen.getByTestId('export-button');
+      await userEvent.click(exportButton);
+
+      await waitFor(() => {
+        expect(mockOnExport).toHaveBeenCalled();
+        expect(exportToCSVWithTableRows).toHaveBeenCalled();
+      });
+
+      const callArgs = vi.mocked(exportToCSVWithTableRows).mock.calls[0];
+      expect(callArgs[3]).toBe(customFilename);
+    });
+  });
+
+  describe('Export with accessorFn', () => {
+    it('handles columns with accessorFn in custom export', async () => {
+      const columnsWithAccessorFn: DataTableColumn<TestData>[] = [
+        { id: 'name', accessorKey: 'name', header: 'Name' },
+        {
+          id: 'fullInfo',
+          header: 'Full Info',
+          accessorFn: (row) => `${row.name} (${row.email})`,
+        },
+      ];
+
+      const features = createDefaultFeatures();
+      features.export = true;
+      const mockOnExport = vi.fn(async (options: ExportOptions<TestData>) => {
+        const exportColumns = options.allColumns.map(col => ({
+          header: col.header || col.accessorKey,
+          id: col.id || col.accessorKey,
+          accessorKey: col.accessorKey,
+          accessorFn: 'accessorFn' in col ? col.accessorFn : undefined,
+        }));
+
+        await exportToCSVWithTableRows(
+          options.tableRows,
+          exportColumns,
+          options.columnIdToTableColumn,
+          'export-with-accessorfn.csv'
+        );
+      });
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={columnsWithAccessorFn}
+          rbac={mockRBAC}
+          features={features}
+          onExport={mockOnExport}
+        />
+      );
+
+      const exportButton = screen.getByTestId('export-button');
+      await userEvent.click(exportButton);
+
+      await waitFor(() => {
+        expect(mockOnExport).toHaveBeenCalled();
+        expect(exportToCSVWithTableRows).toHaveBeenCalled();
+      });
+
+      // Verify export was called with columns including accessorFn
+      const callArgs = vi.mocked(exportToCSVWithTableRows).mock.calls[0];
+      const exportedColumns = callArgs[1];
+      const fullInfoColumn = exportedColumns.find((c: any) => c.id === 'fullInfo');
+      expect(fullInfoColumn).toBeDefined();
+      expect(fullInfoColumn.accessorFn).toBeDefined();
+    });
+  });
+
+  describe('Error Handling', () => {
+    it('handles errors in custom export handler gracefully', async () => {
+      const features = createDefaultFeatures();
+      features.export = true;
+      const mockOnExport = vi.fn().mockRejectedValue(new Error('Export failed'));
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={features}
+          onExport={mockOnExport}
+        />
+      );
+
+      const exportButton = screen.getByTestId('export-button');
+      await userEvent.click(exportButton);
+
+      await waitFor(() => {
+        expect(mockOnExport).toHaveBeenCalled();
+      });
+
+      // Verify error toast was shown
+      await waitFor(() => {
+        expect(mockToast).toHaveBeenCalledWith(
+          expect.objectContaining({
+            title: 'Export Failed',
+            variant: 'destructive',
+          })
+        );
+      });
+    });
+
+    it('handles errors in default export gracefully', async () => {
+      vi.mocked(exportToCSVWithTableRows).mockRejectedValueOnce(new Error('Export failed'));
+
+      const features = createDefaultFeatures();
+      features.export = true;
+
+      render(
+        <DataTable
+          data={mockData}
+          columns={mockColumns}
+          rbac={mockRBAC}
+          features={features}
+        />
+      );
+
+      const exportButton = screen.getByTestId('export-button');
+      await userEvent.click(exportButton);
+
+      await waitFor(() => {
+        expect(mockToast).toHaveBeenCalledWith(
+          expect.objectContaining({
+            title: 'Export Failed',
+            variant: 'destructive',
+          })
+        );
+      });
+    });
+  });
+
+  describe('RBAC Integration', () => {
+    it('skips RBAC test - tested in DataTableCore tests', () => {
+      // RBAC integration is tested in DataTableCore.test.tsx
+      // This test file focuses on the export functionality itself
+      // The mock DataTableCore doesn't implement RBAC checks, so we skip here
+      expect(true).toBe(true);
+    });
+  });
+});
+