@jmruthers/pace-core 0.6.9 → 0.6.11

package/src/components/DataTable/styles.ts

@@ -48,7 +48,6 @@ export const tableStyles = {
   // Empty state
   emptyState: 'flex items-center justify-center py-12',
   emptyStateContent: 'text-center',
-  emptyStateIcon: 'text-sec-400 text-lg mb-2',
   emptyStateText: 'text-sec-500',
 } as const;
 

package/src/components/DataTable/test-utils/MockDataTableComponents.tsx

@@ -0,0 +1,55 @@
+/**
+ * @file Mock DataTable Components
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Tests/MockComponents
+ * @since 0.3.0
+ *
+ * React components only; used by sharedTestUtils for DataTable test mocks.
+ * This file exports only components to satisfy react-refresh/only-export-components.
+ */
+
+import React from 'react';
+
+export function MockEditIcon({ className }: { className?: string }) {
+  return (
+    <span className={className} data-testid="edit-icon">
+      Edit
+    </span>
+  );
+}
+
+export function MockDeleteIcon({ className }: { className?: string }) {
+  return (
+    <span className={className} data-testid="delete-icon">
+      Delete
+    </span>
+  );
+}
+
+export function MockDataTableContext({ children }: { children?: React.ReactNode }) {
+  return <section data-testid="data-table-context">{children}</section>;
+}
+
+export function MockDataTableToolbar() {
+  return <nav data-testid="data-table-toolbar">Toolbar</nav>;
+}
+
+export function MockUnifiedTableBody() {
+  return <main data-testid="unified-table-body">Body</main>;
+}
+
+export function MockDataTableModals() {
+  return <section data-testid="data-table-modals">Modals</section>;
+}
+
+export function MockPaginationControls() {
+  return <nav data-testid="pagination-controls">Pagination</nav>;
+}
+
+export function MockLoadingState() {
+  return <section data-testid="loading-state">Loading</section>;
+}
+
+export function MockDataTableErrorBoundary({ children }: { children?: React.ReactNode }) {
+  return <section data-testid="error-boundary">{children}</section>;
+}

package/src/components/DataTable/test-utils/dataFactories.ts

@@ -0,0 +1,103 @@
+/**
+ * @file DataTable Test Data Factories
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/test-utils
+ * @since 0.3.0
+ */
+
+import type { DataRecord, DataTableAction, DataTableColumn } from '../types';
+
+export interface TestData extends DataRecord {
+  id: string;
+  name: string;
+  age?: number | null;
+  email?: string | null;
+  active: boolean;
+  createdAt: string;
+  department?: string | null;
+  salary?: number | null;
+}
+
+/**
+ * Create test data with specified count
+ */
+export function createTestData(count: number = 10): TestData[] {
+  return Array.from({ length: count }, (_, index) => ({
+    id: `user-${index + 1}`,
+    name: `User ${index + 1}`,
+    age: 20 + (index % 50),
+    email: `user${index + 1}@example.com`,
+    active: index % 3 !== 0,
+    createdAt: new Date(2023, 0, index + 1).toISOString(),
+    department: ['Engineering', 'Marketing', 'Sales', 'HR'][index % 4],
+    salary: 50000 + (index * 1000),
+  }));
+}
+
+/**
+ * Create test columns
+ */
+export function createTestColumns(): DataTableColumn<TestData>[] {
+  return [
+    { id: 'name', header: 'Name', accessorKey: 'name' },
+    { id: 'age', header: 'Age', accessorKey: 'age' },
+    { id: 'email', header: 'Email', accessorKey: 'email' },
+    { id: 'active', header: 'Active', accessorKey: 'active' },
+    { id: 'department', header: 'Department', accessorKey: 'department' },
+    { id: 'salary', header: 'Salary', accessorKey: 'salary' },
+  ];
+}
+
+/**
+ * Create test actions
+ */
+export function createTestActions(): DataTableAction<TestData>[] {
+  return [
+    { label: 'Edit', onClick: () => {}, testId: 'edit' },
+    { label: 'Delete', onClick: () => {}, testId: 'delete' },
+    { label: 'View', onClick: () => {}, testId: 'view' },
+  ];
+}
+
+/**
+ * Create large dataset for performance testing
+ */
+export function createLargeTestData(count: number = 1000): TestData[] {
+  return createTestData(count);
+}
+
+/**
+ * Create test data with specific properties
+ */
+export function createTestDataWithProps(props: Partial<TestData>[]): TestData[] {
+  return props.map((prop, index) => ({
+    id: `user-${index + 1}`,
+    name: `User ${index + 1}`,
+    age: 20 + (index % 50),
+    email: `user${index + 1}@example.com`,
+    active: index % 3 !== 0,
+    createdAt: new Date(2023, 0, index + 1).toISOString(),
+    department: ['Engineering', 'Marketing', 'Sales', 'HR'][index % 4],
+    salary: 50000 + (index * 1000),
+    ...prop,
+  }));
+}
+
+/**
+ * Create test data for specific scenarios
+ */
+export const testDataScenarios = {
+  empty: [] as TestData[],
+  single: createTestData(1),
+  small: createTestData(5),
+  medium: createTestData(25),
+  large: createTestData(100),
+  withNulls: [
+    { id: '1', name: 'John', age: 30, email: 'john@example.com', active: true, createdAt: '2023-01-01', department: null, salary: null },
+    { id: '2', name: 'Jane', age: null, email: null, active: false, createdAt: '2023-01-02', department: 'Engineering', salary: 60000 },
+  ] as TestData[],
+  withSpecialChars: [
+    { id: '1', name: 'John & Doe', age: 30, email: 'john.doe@example.com', active: true, createdAt: '2023-01-01' },
+    { id: '2', name: 'Jane "Smith"', age: 25, email: 'jane.smith@example.com', active: false, createdAt: '2023-01-02' },
+  ] as TestData[],
+}; 

package/src/components/DataTable/test-utils/featureConfig.ts

@@ -0,0 +1,10 @@
+/**
+ * Re-export feature config helpers from sibling test-utils.ts
+ * so components subfolder can import without path ambiguity.
+ */
+export {
+  createDefaultFeatures,
+  createFullFeatures,
+  createFeaturesWithEnabled,
+  createReadOnlyFeatures,
+} from '../test-utils';

package/src/components/DataTable/test-utils/sharedTestUtils.ts

@@ -0,0 +1,419 @@
+/// <reference types="vitest/globals" />
+/**
+ * @file Shared Test Utilities
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Tests/Utilities
+ * @since 0.3.0
+ *
+ * Shared utilities and helpers for DataTable tests to reduce duplication
+ * and provide consistent testing patterns across the test suite.
+ */
+
+import type { DataTableAction, DataTableFeatureConfig, DataRecord } from '../types';
+import '@testing-library/jest-dom';
+import {
+  MockDataTableContext,
+  MockDataTableErrorBoundary,
+  MockDataTableModals,
+  MockDataTableToolbar,
+  MockDeleteIcon,
+  MockEditIcon,
+  MockLoadingState,
+  MockPaginationControls,
+  MockUnifiedTableBody,
+} from './MockDataTableComponents';
+
+/** Overrides for TanStack table mock (partial shape). */
+type TanStackTableMockOverrides = Record<string, unknown>;
+
+/**
+ * Common mock implementations for DataTable components
+ */
+export const mockComponents = {
+  DataTableContext: vi.fn(MockDataTableContext),
+  DataTableToolbar: vi.fn(MockDataTableToolbar),
+  UnifiedTableBody: vi.fn(MockUnifiedTableBody),
+  DataTableModals: vi.fn(MockDataTableModals),
+  PaginationControls: vi.fn(MockPaginationControls),
+  LoadingState: vi.fn(MockLoadingState),
+  DataTableErrorBoundary: vi.fn(MockDataTableErrorBoundary),
+};
+
+/**
+ * Common TanStack Table mock configuration
+ */
+export const createTanStackTableMock = (overrides: TanStackTableMockOverrides = {}) => ({
+  getHeaderGroups: vi.fn(() => [
+    {
+      id: 'header-group-1',
+      headers: [
+        {
+          id: 'name',
+          isPlaceholder: false,
+          column: { columnDef: { header: 'Name' } },
+          getContext: vi.fn(() => ({})),
+        },
+        {
+          id: 'email',
+          isPlaceholder: false,
+          column: { columnDef: { header: 'Email' } },
+          getContext: vi.fn(() => ({})),
+        },
+        {
+          id: 'role',
+          isPlaceholder: false,
+          column: { columnDef: { header: 'Role' } },
+          getContext: vi.fn(() => ({})),
+        },
+      ],
+    },
+  ]),
+  getRowModel: vi.fn(() => ({
+    rows: [
+      {
+        id: '1',
+        original: { id: '1', name: 'John Doe', email: 'john@example.com', role: 'admin' },
+        getVisibleCells: vi.fn(() => [
+          { id: 'name', getValue: vi.fn(() => 'John Doe'), column: { columnDef: { header: 'Name' } }, getContext: vi.fn(() => ({})) },
+          { id: 'email', getValue: vi.fn(() => 'john@example.com'), column: { columnDef: { header: 'Email' } }, getContext: vi.fn(() => ({})) },
+          { id: 'role', getValue: vi.fn(() => 'admin'), column: { columnDef: { header: 'Role' } }, getContext: vi.fn(() => ({})) },
+        ]),
+      },
+      {
+        id: '2',
+        original: { id: '2', name: 'Jane Smith', email: 'jane@example.com', role: 'user' },
+        getVisibleCells: vi.fn(() => [
+          { id: 'name', getValue: vi.fn(() => 'Jane Smith'), column: { columnDef: { header: 'Name' } }, getContext: vi.fn(() => ({})) },
+          { id: 'email', getValue: vi.fn(() => 'jane@example.com'), column: { columnDef: { header: 'Email' } }, getContext: vi.fn(() => ({})) },
+          { id: 'role', getValue: vi.fn(() => 'user'), column: { columnDef: { header: 'Role' } }, getContext: vi.fn(() => ({})) },
+        ]),
+      },
+    ],
+  })),
+  getRowCount: vi.fn(() => 2),
+  getPageCount: vi.fn(() => 1),
+  getCanPreviousPage: vi.fn(() => false),
+  getCanNextPage: vi.fn(() => false),
+  previousPage: vi.fn(),
+  nextPage: vi.fn(),
+  setPageIndex: vi.fn(),
+  setPageSize: vi.fn(),
+  getState: vi.fn(() => ({
+    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: vi.fn(() => false),
+  getIsSomeRowsExpanded: vi.fn(() => false),
+  resetExpanded: vi.fn(),
+  ...overrides,
+});
+
+/**
+ * Common mock for TanStack Table module
+ */
+export const createTanStackTableModuleMock = (tableMock: TanStackTableMockOverrides = {}) => ({
+  useReactTable: vi.fn(() => createTanStackTableMock(tableMock)),
+  getCoreRowModel: vi.fn(),
+  getFilteredRowModel: vi.fn(),
+  getSortedRowModel: vi.fn(),
+  getPaginationRowModel: vi.fn(),
+  getGroupedRowModel: vi.fn(),
+  getExpandedRowModel: vi.fn(),
+  flexRender: vi.fn((_component: unknown, _props: unknown) => 'Mocked Cell'),
+  createColumnHelper: vi.fn(),
+});
+
+/**
+ * Common mock for performance utilities
+ */
+export const createPerformanceUtilsMock = () => ({
+  DataChunkManager: class MockDataChunkManager {
+    constructor(_config: unknown) {
+      // Mock constructor - config parameter kept for API compatibility
+    }
+    getChunk = vi.fn(() => []);
+    getMemoryUsage = vi.fn(() => 5);
+    clear = vi.fn();
+  },
+  SearchIndex: class MockSearchIndex {
+    constructor(_config: unknown) {
+      // Mock constructor - config parameter kept for API compatibility
+    }
+    buildIndex = vi.fn();
+    search = vi.fn(() => [{ id: '1', name: 'Test User' }]);
+  },
+  PerformanceMonitor: class MockPerformanceMonitor {
+    constructor() {
+      // Mock constructor - no initialization needed
+    }
+    startRender = vi.fn();
+    endRender = vi.fn();
+  },
+  VisibilityTracker: class MockVisibilityTracker {
+    constructor() {
+      // Mock constructor - no initialization needed
+    }
+    observe = vi.fn();
+    unobserve = vi.fn();
+    disconnect = vi.fn();
+    destroy = vi.fn();
+    onVisibilityChange = vi.fn(() => vi.fn());
+  },
+  determinePaginationMode: vi.fn((size: number) => {
+    if (size < 1000) return 'client';
+    if (size < 5000) return 'client';
+    if (size < 15000) return 'hybrid';
+    return 'server';
+  }),
+  getOptimalPageSizeOptions: vi.fn(() => [10, 25, 50, 100]),
+  debounce: vi.fn((fn: (() => void) | (() => Promise<void>)) => fn),
+});
+
+/**
+ * Common mock for utils
+ */
+export const createUtilsMock = () => ({
+  cn: vi.fn((...classes: Array<string | undefined | null | false>) => classes.filter(Boolean).join(' ')),
+});
+
+/** User-like record for test data generators */
+interface TestUserRecord extends DataRecord {
+  id: string;
+  name: string;
+  email: string;
+  role: string;
+}
+
+/** Column-like shape for test data generators */
+interface TestColumnShape extends DataRecord {
+  id: string;
+  header: string;
+  accessorKey: string;
+}
+
+/**
+ * Common test data generators
+ */
+export const testDataGenerators = {
+  createUser: (id: number, overrides: Partial<TestUserRecord> = {}): TestUserRecord => ({
+    id: `user-${id}`,
+    name: `User ${id}`,
+    email: `user${id}@example.com`,
+    role: 'user',
+    ...overrides,
+  }),
+
+  createUsers: (count: number): TestUserRecord[] =>
+    Array.from({ length: count }, (_, i) => testDataGenerators.createUser(i + 1)),
+
+  createColumn: (id: string, overrides: Partial<TestColumnShape> = {}): TestColumnShape => ({
+    id,
+    header: id.charAt(0).toUpperCase() + id.slice(1),
+    accessorKey: id,
+    ...overrides,
+  }),
+
+  createColumns: (fields: string[] = ['name', 'email', 'role']): TestColumnShape[] =>
+    fields.map((field) => testDataGenerators.createColumn(field)),
+};
+
+/**
+ * Common test features
+ */
+export const testFeatures = {
+  createDefault: (): DataTableFeatureConfig => ({
+    search: false,
+    pagination: false,
+    sorting: false,
+    filtering: false,
+    import: false,
+    export: false,
+    selection: false,
+    creation: false,
+    editing: false,
+    deletion: false,
+    deleteSelected: false,
+    grouping: false,
+    columnVisibility: false,
+    columnReordering: false,
+    hierarchical: false,
+  }),
+
+  createWithEnabled: (features: string[]): DataTableFeatureConfig => {
+    const defaultFeatures = testFeatures.createDefault();
+    features.forEach((feature) => {
+      const key = feature as keyof DataTableFeatureConfig;
+      if (key in defaultFeatures) {
+        (defaultFeatures as Record<keyof DataTableFeatureConfig, boolean>)[key] = true;
+      }
+    });
+    return defaultFeatures;
+  },
+};
+
+/**
+ * Common test actions
+ */
+export const testActions: DataTableAction<DataRecord>[] = [
+  {
+    label: 'Edit',
+    icon: MockEditIcon,
+    onClick: vi.fn(),
+    testId: 'edit-action',
+  },
+  {
+    label: 'Delete',
+    icon: MockDeleteIcon,
+    onClick: vi.fn(),
+    testId: 'delete-action',
+  },
+];
+
+/**
+ * Common RBAC permissions for testing
+ */
+export const testPermissions = {
+  readOnly: { 'read:users': true },
+  readWrite: { 'read:users': true, 'edit:users': true },
+  admin: { 'read:users': true, 'edit:users': true, 'delete:users': true },
+  none: {},
+};
+
+/**
+ * Common test scenarios
+ */
+export const testScenarios = {
+  emptyData: [] as DataRecord[],
+  singleRow: [testDataGenerators.createUser(1)],
+  multipleRows: testDataGenerators.createUsers(5),
+  largeDataset: testDataGenerators.createUsers(1000),
+  invalidData: null as unknown as DataRecord[],
+  malformedData: [{ invalid: 'data' }] as DataRecord[],
+};
+
+/**
+ * Common test assertions
+ */
+export const testAssertions = {
+  rendersTable: () => {
+    const table = document.querySelector('table');
+    expect(table).toBeInTheDocument();
+  },
+
+  rendersMockedCells: (expectedCount: number) => {
+    const cells = document.querySelectorAll('text:contains("Mocked Cell")');
+    expect(cells).toHaveLength(expectedCount);
+  },
+
+  hasCorrectStructure: () => {
+    expect(document.querySelector('[data-testid="data-table-context"]')).toBeInTheDocument();
+    expect(document.querySelector('[data-testid="data-table-toolbar"]')).toBeInTheDocument();
+    expect(document.querySelector('[data-testid="data-table-modals"]')).toBeInTheDocument();
+  },
+};
+
+/**
+ * Common test cleanup utilities
+ */
+export const testCleanup = {
+  clearAllMocks: () => {
+    vi.clearAllMocks();
+  },
+
+  resetModules: () => {
+    vi.resetModules();
+  },
+
+  restoreAllMocks: () => {
+    vi.restoreAllMocks();
+  },
+};
+
+/**
+ * Common test error handling.
+ * Test utility: intentionally mocks console for suppressed error/warning/log output in tests.
+ */
+/* eslint-disable no-console */
+export const testErrorHandling = {
+  suppressConsoleErrors: () => {
+    const originalError = console.error;
+    console.error = vi.fn();
+    return () => {
+      console.error = originalError;
+    };
+  },
+
+  suppressConsoleWarnings: () => {
+    const originalWarn = console.warn;
+    console.warn = vi.fn();
+    return () => {
+      console.warn = originalWarn;
+    };
+  },
+
+  suppressAllConsole: () => {
+    const originalError = console.error;
+    const originalWarn = console.warn;
+    const originalLog = console.log;
+
+    console.error = vi.fn();
+    console.warn = vi.fn();
+    console.log = vi.fn();
+
+    return () => {
+      console.error = originalError;
+      console.warn = originalWarn;
+      console.log = originalLog;
+    };
+  },
+};
+/* eslint-enable no-console */
+
+/** Non-standard Performance with memory (Chrome DevTools). */
+interface PerformanceWithMemory extends Performance {
+  memory?: { usedJSHeapSize: number };
+}
+
+/**
+ * Common test performance utilities
+ */
+export const testPerformance = {
+  measureRenderTime: async (renderFn: () => void) => {
+    const start = performance.now();
+    renderFn();
+    const end = performance.now();
+    return end - start;
+  },
+
+  measureMemoryUsage: () => {
+    const perf = performance as PerformanceWithMemory;
+    return perf.memory?.usedJSHeapSize ?? 0;
+  },
+
+  waitForStableRender: async (maxWait = 1000) => {
+    return new Promise<void>((resolve) => {
+      const start = performance.now();
+      const check = () => {
+        if (performance.now() - start > maxWait) {
+          resolve();
+        } else {
+          requestAnimationFrame(check);
+        }
+      };
+      check();
+    });
+  },
+};

package/src/components/DataTable/test-utils.ts

@@ -0,0 +1,94 @@
+/**
+ * @file DataTable Test Utilities
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Tests/Utils
+ * @since 0.4.0
+ * 
+ * Test utilities for DataTable component tests, providing helper functions
+ * for creating feature configurations and test data.
+ */
+
+import type { DataTableFeatureConfig } from './types';
+
+/**
+ * Creates a default feature configuration for testing
+ * All features are disabled by default for security
+ */
+export function createDefaultFeatures(): DataTableFeatureConfig {
+  return {
+    // Core Features
+    search: false,
+    pagination: false,
+    sorting: false,
+    filtering: false,
+    
+    // Data Management
+    import: false,
+    export: false,
+    
+    // Row Operations
+    selection: false,
+    creation: false,
+    editing: false,
+    deletion: false,
+    deleteSelected: false,
+    
+    // Table Customization
+    grouping: false,
+    columnVisibility: false,
+    columnReordering: false,
+    hierarchical: false,
+    
+    // Performance - virtualization is now handled automatically
+    
+  };
+}
+
+/**
+ * Creates a feature configuration with specific features enabled
+ */
+export function createFeaturesWithEnabled(
+  enabledFeatures: Partial<DataTableFeatureConfig>
+): DataTableFeatureConfig {
+  return {
+    ...createDefaultFeatures(),
+    ...enabledFeatures,
+  };
+}
+
+/**
+ * Creates a read-only feature configuration (search, pagination, sorting, filtering)
+ */
+export function createReadOnlyFeatures(): DataTableFeatureConfig {
+  return createFeaturesWithEnabled({
+    search: true,
+    pagination: true,
+    sorting: true,
+    filtering: true,
+    columnVisibility: true,
+  });
+}
+
+/**
+ * Creates a full-featured configuration for comprehensive testing
+ */
+export function createFullFeatures(): DataTableFeatureConfig {
+  return createFeaturesWithEnabled({
+    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, // Disabled by default in full features
+    // Virtualization is automatically enabled for large datasets
+  });
+}