@jmruthers/pace-core 0.2.7 → 0.5.1

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

@@ -1,470 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import '@testing-library/jest-dom';
-import { DataTable } from '../../DataTable';
-import type { SimpleColumn } from '../../types';
-import { createDefaultFeatures, createFeaturesWithEnabled } from '../../__tests__/test-utils';
-
-// Mock TanStack Table to avoid complex dependencies
-vi.mock('@tanstack/react-table', () => ({
-  useReactTable: vi.fn(() => ({
-    getCoreRowModel: () => (rows: any[]) => rows,
-    getFilteredRowModel: () => (rows: any[]) => rows,
-    getSortedRowModel: () => (rows: any[]) => rows,
-    getPaginationRowModel: () => (rows: any[]) => rows,
-    getGroupedRowModel: () => (rows: any[]) => rows,
-    getExpandedRowModel: () => (rows: any[]) => rows,
-    getAllColumns: () => [
-      {
-        id: 'name',
-        columnDef: { header: 'Name' },
-        getCanSort: () => true,
-        getIsSorted: () => false,
-        getToggleSortingHandler: () => () => {},
-        getIsVisible: () => true,
-        getCanFilter: () => true
-      },
-      {
-        id: 'email',
-        columnDef: { header: 'Email' },
-        getCanSort: () => true,
-        getIsSorted: () => false,
-        getToggleSortingHandler: () => () => {},
-        getIsVisible: () => true,
-        getCanFilter: () => true
-      },
-      {
-        id: 'role',
-        columnDef: { header: 'Role' },
-        getCanSort: () => false,
-        getIsSorted: () => false,
-        getToggleSortingHandler: () => () => {},
-        getIsVisible: () => true,
-        getCanFilter: () => true
-      }
-    ],
-    getVisibleFlatColumns: () => [
-      {
-        id: 'name',
-        columnDef: { header: 'Name' },
-        getCanSort: () => true,
-        getIsSorted: () => false,
-        getToggleSortingHandler: () => () => {},
-        getIsVisible: () => true,
-        getCanFilter: () => true
-      },
-      {
-        id: 'email',
-        columnDef: { header: 'Email' },
-        getCanSort: () => true,
-        getIsSorted: () => false,
-        getToggleSortingHandler: () => () => {},
-        getIsVisible: () => true,
-        getCanFilter: () => true
-      },
-      {
-        id: 'role',
-        columnDef: { header: 'Role' },
-        getCanSort: () => false,
-        getIsSorted: () => false,
-        getToggleSortingHandler: () => () => {},
-        getIsVisible: () => true,
-        getCanFilter: () => true
-      }
-    ],
-    getHeaderGroups: () => [{
-      id: 'headerGroup',
-      headers: [
-        {
-          id: 'name',
-          isPlaceholder: false,
-          column: { 
-            columnDef: { header: 'Name' },
-            getCanSort: () => true,
-            getIsSorted: () => false,
-            getToggleSortingHandler: () => () => {},
-            getIsVisible: () => true,
-            getCanFilter: () => true
-          },
-          getContext: () => ({}),
-        },
-        {
-          id: 'email', 
-          isPlaceholder: false,
-          column: { 
-            columnDef: { header: 'Email' },
-            getCanSort: () => true,
-            getIsSorted: () => false,
-            getToggleSortingHandler: () => () => {},
-            getIsVisible: () => true,
-            getCanFilter: () => true
-          },
-          getContext: () => ({}),
-        },
-        {
-          id: 'role',
-          isPlaceholder: false,
-          column: { 
-            columnDef: { header: 'Role' },
-            getCanSort: () => false,
-            getIsSorted: () => false,
-            getToggleSortingHandler: () => () => {},
-            getIsVisible: () => true,
-            getCanFilter: () => true
-          },
-          getContext: () => ({}),
-        },
-      ],
-    }],
-    getRowModel: () => ({ 
-      rows: [
-        {
-          id: '1',
-          getIsSelected: () => false,
-          getVisibleCells: () => [
-            {
-              id: 'cell-1-name',
-              column: { columnDef: { cell: 'John Doe' } },
-              getContext: () => ({}),
-            },
-            {
-              id: 'cell-1-email',
-              column: { columnDef: { cell: 'john@example.com' } },
-              getContext: () => ({}),
-            },
-            {
-              id: 'cell-1-role',
-              column: { columnDef: { cell: 'admin' } },
-              getContext: () => ({}),
-            },
-          ],
-        },
-      ],
-    }),
-    getRowCount: () => 1,
-    getPageCount: () => 1,
-    getCanPreviousPage: () => false,
-    getCanNextPage: () => false,
-    previousPage: vi.fn(),
-    nextPage: vi.fn(),
-    setPageIndex: vi.fn(),
-    setPageSize: vi.fn(),
-    getState: () => ({
-      sorting: [],
-      columnFilters: [],
-      columnVisibility: {},
-      globalFilter: '',
-      pagination: { pageIndex: 0, pageSize: 10 },
-      grouping: [],
-      expanded: {}
-    }),
-    setGlobalFilter: vi.fn(),
-    setColumnVisibility: vi.fn(),
-    setSorting: vi.fn(),
-    setColumnFilters: vi.fn(),
-    setPagination: vi.fn(),
-    setGrouping: vi.fn(),
-    setExpanded: vi.fn(),
-    toggleAllRowsExpanded: vi.fn(),
-    getIsAllRowsExpanded: () => false,
-    getIsSomeRowsExpanded: () => false,
-    resetExpanded: vi.fn(),
-  })),
-  getCoreRowModel: vi.fn(),
-  getFilteredRowModel: vi.fn(),
-  getSortedRowModel: vi.fn(),
-  getPaginationRowModel: vi.fn(),
-  getGroupedRowModel: vi.fn(),
-  getExpandedRowModel: vi.fn(),
-  flexRender: vi.fn((cell, context) => cell || 'Mocked Cell'),
-}));
-
-// Mock the DataTable context
-vi.mock('../../core/DataTableContext', () => ({
-  DataTableProvider: ({ children }: any) => <div data-testid="data-table-provider">{children}</div>,
-  useDataTableContext: () => ({
-    stateManager: {
-      getState: () => ({
-        data: [],
-        columns: [],
-        columnVisibility: {},
-        ui: {
-          sorting: [],
-          columnFilters: [],
-          globalFilter: '',
-          pagination: { pageIndex: 0, pageSize: 10 },
-          grouping: [],
-          editing: { rowId: null, data: {}, isCreating: false, creationData: {} },
-          modals: { import: false, view: false, viewData: null }
-        }
-      }),
-      subscribe: vi.fn(() => vi.fn()), // Add subscribe method that returns unsubscribe function
-      updateSorting: vi.fn(),
-      updateColumnFilters: vi.fn(),
-      updateGlobalFilter: vi.fn(),
-      updatePagination: vi.fn(),
-      updateGrouping: vi.fn(),
-      updateEditing: vi.fn(),
-      updateModals: vi.fn(),
-      setState: vi.fn(),
-    },
-    dataManager: {
-      getData: () => [],
-      setData: vi.fn(),
-      addRow: vi.fn(),
-      updateRow: vi.fn(),
-      deleteRow: vi.fn(),
-    },
-    columnManager: {
-      getColumns: () => [],
-      setColumns: vi.fn(),
-      addColumn: vi.fn(),
-      removeColumn: vi.fn(),
-    },
-    actionManager: {
-      getActions: () => [],
-      addAction: vi.fn(),
-      removeAction: vi.fn(),
-    },
-  }),
-}));
-
-// Mock individual components
-
-vi.mock('../DataTableToolbar', () => ({
-  DataTableToolbar: () => <div data-testid="data-table-toolbar">Toolbar</div>,
-}));
-
-vi.mock('../DataTableBody', () => ({
-  DataTableBody: () => <div data-testid="data-table-body">Body</div>,
-}));
-
-vi.mock('../DataTableModals', () => ({
-  DataTableModals: () => <div data-testid="data-table-modals">Modals</div>,
-}));
-
-vi.mock('../PaginationControls', () => ({
-  PaginationControls: () => <div data-testid="pagination-controls">Pagination</div>,
-}));
-
-vi.mock('../LoadingState', () => ({
-  LoadingState: () => <div data-testid="loading-state">Loading...</div>,
-}));
-
-vi.mock('../DataTableErrorBoundary', () => ({
-  DataTableErrorBoundary: ({ children }: any) => <div data-testid="error-boundary">{children}</div>,
-}));
-
-// Mock utils
-vi.mock('../../../utils/cn', () => ({
-  cn: (...classes: any[]) => classes.filter(Boolean).join(' '),
-}));
-
-// Mock the performance hook
-vi.mock('../../../../hooks/useDataTablePerformance', () => ({
-  useDataTablePerformance: vi.fn(() => ({
-    paginationMode: 'client',
-    isVirtualized: false,
-    pageSizeOptions: [10, 25, 50, 100],
-    processedData: [],
-    totalCount: 0,
-    isLoading: false,
-    searchQuery: '',
-    setSearchQuery: vi.fn(),
-    fetchServerData: vi.fn(),
-    serverData: null,
-    memoryUsage: 0,
-    cleanup: vi.fn(),
-  })),
-}));
-
-// Mock performance components
-vi.mock('../EnhancedVirtualizedDataTable', () => ({
-  EnhancedVirtualizedDataTable: () => <div data-testid="virtualized-table">Virtualized Table</div>,
-}));
-
-vi.mock('../EnhancedPaginationControls', () => ({
-  EnhancedPaginationControls: () => <div data-testid="enhanced-pagination">Enhanced Pagination</div>,
-}));
-
-vi.mock('../EmptyState', () => ({
-  EmptyState: () => <div data-testid="empty-state">No data</div>,
-}));
-
-// Test utilities
-const createTestData = (count: number) => {
-  return Array.from({ length: count }, (_, i) => ({
-    id: i + 1,
-    name: `User ${i + 1}`,
-    email: `user${i + 1}@example.com`,
-    role: i % 2 === 0 ? 'admin' : 'user'
-  }));
-};
-
-const createTestColumns = (): SimpleColumn[] => [
-  { key: 'name', label: 'Name' },
-  { key: 'email', label: 'Email' },
-  { key: 'role', label: 'Role' }
-];
-
-const createTestActions = () => [];
-
-describe('DataTable Integration Tests', () => {
-  const user = userEvent.setup();
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('User Workflows', () => {
-    it('completes full CRUD workflow', async () => {
-      const onEditRow = vi.fn();
-      const onDeleteRow = vi.fn();
-      const onCreateRow = vi.fn();
-      
-      const columns = createTestColumns();
-      const data = createTestData(3);
-
-      render(
-        <DataTable 
-          columns={columns} 
-          data={data}
-          features={createFeaturesWithEnabled(['editing', 'deletion', 'creation'])}
-          onEditRow={onEditRow}
-          onDeleteRow={onDeleteRow}
-          onCreateRow={onCreateRow}
-        />
-      );
-
-      expect(screen.getByRole('table')).toBeInTheDocument();
-    });
-
-    it('handles search and filter workflow', async () => {
-      const columns = createTestColumns();
-      const data = createTestData(5);
-
-      render(
-        <DataTable 
-          columns={columns} 
-          data={data}
-          features={createFeaturesWithEnabled(['search'])}
-        />
-      );
-
-      expect(screen.getByRole('table')).toBeInTheDocument();
-    });
-
-    it('handles pagination workflow', async () => {
-      const columns = createTestColumns();
-      const data = createTestData(25);
-
-      render(
-        <DataTable 
-          columns={columns} 
-          data={data}
-          features={createFeaturesWithEnabled(['pagination'])}
-        />
-      );
-
-      expect(screen.getByRole('table')).toBeInTheDocument();
-    });
-  });
-
-  describe('Component Integration', () => {
-    it('integrates with toolbar components', () => {
-      const columns = createTestColumns();
-      const data = createTestData(3);
-
-      render(
-        <DataTable 
-          columns={columns} 
-          data={data}
-          features={createFeaturesWithEnabled(['search', 'columnVisibility', 'grouping'])}
-        />
-      );
-
-      expect(screen.getByRole('table')).toBeInTheDocument();
-    });
-
-    it('integrates with action components', () => {
-      const columns = createTestColumns();
-      const data = createTestData(3);
-      const actions = createTestActions();
-
-      render(
-        <DataTable 
-          columns={columns} 
-          data={data}
-          actions={actions}
-          features={createDefaultFeatures()}
-        />
-      );
-
-      expect(screen.getByRole('table')).toBeInTheDocument();
-    });
-
-    it('integrates with modal components', () => {
-      const columns = createTestColumns();
-      const data = createTestData(3);
-
-      render(
-        <DataTable 
-          columns={columns} 
-          data={data}
-          features={createFeaturesWithEnabled(['import'])}
-        />
-      );
-
-      expect(screen.getByRole('table')).toBeInTheDocument();
-    });
-  });
-
-  describe('State Management Integration', () => {
-    it('handles loading states', () => {
-      const columns = createTestColumns();
-      const data = createTestData(3);
-
-      render(
-        <DataTable 
-          columns={createTestColumns()} 
-          data={createTestData(3)}
-          isLoading={true}
-          features={createDefaultFeatures()}
-        />
-      );
-
-      expect(screen.getByTestId('loading-state')).toBeInTheDocument();
-    });
-
-    it('handles empty states', () => {
-      const columns = createTestColumns();
-
-      render(
-        <DataTable 
-          columns={createTestColumns()} 
-          data={[]}
-          features={createDefaultFeatures()}
-        />
-      );
-
-      expect(screen.getByRole('table')).toBeInTheDocument();
-    });
-
-    it('handles error states', () => {
-      const columns = createTestColumns();
-      const data = createTestData(3);
-
-      render(
-        <DataTable 
-          columns={createTestColumns()} 
-          data={createTestData(3)}
-          features={createDefaultFeatures()}
-        />
-      );
-
-      expect(screen.getByRole('table')).toBeInTheDocument();
-    });
-  });
-}); 

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

@@ -1,160 +0,0 @@
-import React from 'react';
-import { screen } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import '@testing-library/jest-dom';
-import { renderWithProviders } from '../../../../__tests__/shared';
-import { DataTable } from '../../DataTable';
-import type { SimpleColumn } from '../../types';
-import { createDefaultFeatures, createFeaturesWithEnabled } from '../../__tests__/test-utils';
-
-// Mock TanStack Table
-vi.mock('@tanstack/react-table', () => ({
-  useReactTable: vi.fn(() => ({
-    getCoreRowModel: () => (rows: any[]) => rows,
-    getFilteredRowModel: () => (rows: any[]) => rows,
-    getSortedRowModel: () => (rows: any[]) => rows,
-    getPaginationRowModel: () => (rows: any[]) => rows,
-    getGroupedRowModel: () => (rows: any[]) => rows,
-    getExpandedRowModel: () => (rows: any[]) => rows,
-    getAllColumns: () => [],
-    getVisibleFlatColumns: () => [],
-    getHeaderGroups: () => [],
-    getRowModel: () => ({ rows: [] }),
-    getRowCount: () => 0,
-    getPageCount: () => 1,
-    getCanPreviousPage: () => false,
-    getCanNextPage: () => false,
-    previousPage: vi.fn(),
-    nextPage: vi.fn(),
-    setPageIndex: vi.fn(),
-    setPageSize: vi.fn(),
-    getState: () => ({
-      sorting: [],
-      columnFilters: [],
-      columnVisibility: {},
-      globalFilter: '',
-      pagination: { pageIndex: 0, pageSize: 10 },
-      grouping: [],
-      expanded: {}
-    }),
-    setGlobalFilter: vi.fn(),
-    setColumnVisibility: vi.fn(),
-    setSorting: vi.fn(),
-    setColumnFilters: vi.fn(),
-    setPagination: vi.fn(),
-    setGrouping: vi.fn(),
-    setExpanded: vi.fn(),
-    toggleAllRowsExpanded: vi.fn(),
-    getIsAllRowsExpanded: () => false,
-    getIsSomeRowsExpanded: () => false,
-    resetExpanded: vi.fn(),
-  })),
-  getCoreRowModel: vi.fn(),
-  getFilteredRowModel: vi.fn(),
-  getSortedRowModel: vi.fn(),
-  getPaginationRowModel: vi.fn(),
-  getGroupedRowModel: vi.fn(),
-  getExpandedRowModel: vi.fn(),
-  flexRender: vi.fn((cell, context) => cell || 'Mocked Cell'),
-}));
-
-// Mock DataTable context with complete state structure
-vi.mock('../../core/DataTableContext', () => ({
-  DataTableProvider: ({ children }: any) => <div data-testid="data-table-provider">{children}</div>,
-  useDataTableContext: () => ({
-    stateManager: { 
-      getState: () => ({ 
-        data: [], 
-        columns: [], 
-        ui: {
-          sorting: [],
-          columnFilters: [],
-          globalFilter: '',
-          pagination: { pageIndex: 0, pageSize: 10 },
-          grouping: [],
-          editing: { 
-            rowId: null, 
-            data: {}, 
-            isCreating: false, 
-            creationData: {} 
-          },
-          modals: { 
-            import: false, 
-            view: false, 
-            viewData: null 
-          }
-        }
-      }), 
-      subscribe: vi.fn(() => vi.fn()), // Add subscribe method that returns unsubscribe function
-      updateSorting: vi.fn(),
-      updateColumnFilters: vi.fn(),
-      updateGlobalFilter: vi.fn(),
-      updatePagination: vi.fn(),
-      updateGrouping: vi.fn(),
-      updateEditing: vi.fn(),
-      updateModals: vi.fn(),
-      setState: vi.fn(),
-    },
-    dataManager: { getData: () => [], setData: vi.fn() },
-    columnManager: { getColumns: () => [], setColumns: vi.fn() },
-    actionManager: { getActions: () => [], addAction: vi.fn() },
-  }),
-}));
-
-// Mock components
-vi.mock('../DataTableToolbar', () => ({ DataTableToolbar: () => <div data-testid="toolbar">Toolbar</div> }));
-vi.mock('../DataTableBody', () => ({ DataTableBody: () => <div data-testid="body">Body</div> }));
-vi.mock('../DataTableModals', () => ({ DataTableModals: () => <div data-testid="modals">Modals</div> }));
-vi.mock('../PaginationControls', () => ({ PaginationControls: () => <div data-testid="pagination">Pagination</div> }));
-vi.mock('../LoadingState', () => ({ LoadingState: () => <div data-testid="loading">Loading</div> }));
-vi.mock('../DataTableErrorBoundary', () => ({ DataTableErrorBoundary: ({ children }: any) => <div data-testid="error-boundary">{children}</div> }));
-vi.mock('../../../utils/cn', () => ({ cn: (...classes: any[]) => classes.filter(Boolean).join(' ') }));
-
-const createTestData = (count: number) => Array.from({ length: count }, (_, i) => ({
-  id: i + 1,
-  name: `User ${i + 1}`,
-  email: `user${i + 1}@example.com`,
-  role: i % 2 === 0 ? 'admin' : 'user'
-}));
-
-const createTestColumns = (): SimpleColumn[] => [
-  { key: 'name', label: 'Name' },
-  { key: 'email', label: 'Email' },
-  { key: 'role', label: 'Role' }
-];
-
-describe('DataTable Performance Tests', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('renders small datasets efficiently', () => {
-    const startTime = performance.now();
-    
-    renderWithProviders(<DataTable columns={createTestColumns()} data={createTestData(10)} features={createDefaultFeatures()} />);
-    
-    const endTime = performance.now();
-    expect(endTime - startTime).toBeLessThan(400); // Increased for CI environments
-    expect(screen.getByRole('table')).toBeInTheDocument();
-  });
-
-  it('renders large datasets efficiently', () => {
-    const startTime = performance.now();
-    
-    renderWithProviders(<DataTable columns={createTestColumns()} data={createTestData(1000)} features={createFeaturesWithEnabled(['virtualization'])} />);
-    
-    const endTime = performance.now();
-    expect(endTime - startTime).toBeLessThan(500);
-    expect(screen.getByRole('table')).toBeInTheDocument();
-  });
-
-  it('handles search performance efficiently', () => {
-    const startTime = performance.now();
-    
-    renderWithProviders(<DataTable columns={createTestColumns()} data={createTestData(500)} features={createFeaturesWithEnabled(['search'])} />);
-    
-    const endTime = performance.now();
-    expect(endTime - startTime).toBeLessThan(200);
-    expect(screen.getByRole('table')).toBeInTheDocument();
-  });
-});