@jmruthers/pace-core 0.5.115 → 0.5.116

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

@@ -0,0 +1,423 @@
+/**
+ * @file Filter Row Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components/__tests__
+ * @since 0.4.0
+ * 
+ * Comprehensive test suite for FilterRow component following testing guidelines.
+ * Tests cover all major functionality, edge cases, and user interactions.
+ */
+
+import React from 'react';
+import { render, screen, renderHook } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { createColumnHelper, useReactTable, getCoreRowModel, getFilteredRowModel } from '@tanstack/react-table';
+import { FilterRow } from '../FilterRow';
+import type { DataRecord } from '../../types';
+
+// Mock ColumnFilter component
+vi.mock('../ColumnFilter', () => ({
+  ColumnFilter: ({ column, filterType, options, placeholder }: any) => (
+    <div
+      data-testid="column-filter"
+      data-column-id={column.id}
+      data-filter-type={filterType}
+      data-options-count={options?.length || 0}
+      data-placeholder={placeholder}
+    >
+      Filter: {column.id}
+    </div>
+  ),
+}));
+
+interface TestData extends DataRecord {
+  id: string;
+  name: string;
+  email: string;
+  age: number;
+  status: string;
+  createdAt: Date;
+  createdDate?: Date; // For date filter test
+}
+
+describe('[component] FilterRow', () => {
+  const columnHelper = createColumnHelper<TestData>();
+  
+  const defaultColumns = [
+    columnHelper.accessor('name', {
+      header: 'Name',
+    }),
+    columnHelper.accessor('email', {
+      header: 'Email',
+    }),
+    columnHelper.accessor('age', {
+      header: 'Age',
+    }),
+    columnHelper.accessor('status', {
+      header: 'Status',
+      filterSelectOptions: [
+        { value: 'active', label: 'Active' },
+        { value: 'inactive', label: 'Inactive' },
+      ],
+    }),
+  ];
+
+  const defaultData: TestData[] = [
+    { id: '1', name: 'John', email: 'john@example.com', age: 30, status: 'active', createdAt: new Date() },
+    { id: '2', name: 'Jane', email: 'jane@example.com', age: 25, status: 'inactive', createdAt: new Date() },
+    { id: '3', name: 'Bob', email: 'bob@example.com', age: 35, status: 'active', createdAt: new Date() },
+  ];
+
+  const createTable = (columns = defaultColumns, data = defaultData) => {
+    // Use renderHook to call useReactTable hook properly
+    // Import the row model functions from TanStack Table
+    const { result } = renderHook(() => {
+      return useReactTable({
+        data,
+        columns,
+        enableFiltering: true,
+        // Use the actual row model functions from TanStack Table
+        getCoreRowModel: getCoreRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        // Provide minimal state to avoid errors
+        initialState: {
+          columnFilters: [],
+          sorting: [],
+          columnVisibility: {},
+          globalFilter: '',
+          pagination: { pageIndex: 0, pageSize: 10 },
+          grouping: [],
+          expanded: {},
+        },
+      });
+    });
+    return result.current;
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders filter row with all visible columns', () => {
+      const table = createTable();
+      const visibleColumns = table.getHeaderGroups()[0]?.headers || [];
+      
+      render(<FilterRow table={table} visibleColumns={visibleColumns} />);
+      
+      const filterRow = screen.getByRole('row');
+      expect(filterRow).toBeInTheDocument();
+    });
+
+    it('renders ColumnFilter for each filterable column', () => {
+      const table = createTable();
+      const visibleColumns = table.getHeaderGroups()[0]?.headers || [];
+      
+      render(<FilterRow table={table} visibleColumns={visibleColumns} />);
+      
+      const filters = screen.getAllByTestId('column-filter');
+      expect(filters.length).toBeGreaterThan(0);
+    });
+
+    it('displays "No filter" for non-filterable columns', () => {
+      const columns = [
+        columnHelper.accessor('name', {
+          header: 'Name',
+          enableColumnFilter: false,
+        }),
+      ];
+      const table = createTable(columns);
+      const visibleColumns = table.getHeaderGroups()[0]?.headers || [];
+      
+      render(<FilterRow table={table} visibleColumns={visibleColumns} />);
+      
+      expect(screen.getByText('No filter')).toBeInTheDocument();
+    });
+
+    it('renders filter with correct placeholder', () => {
+      const table = createTable();
+      const visibleColumns = table.getHeaderGroups()[0]?.headers || [];
+      
+      render(<FilterRow table={table} visibleColumns={visibleColumns} />);
+      
+      const filters = screen.getAllByTestId('column-filter');
+      expect(filters[0]).toHaveAttribute('data-placeholder', expect.stringContaining('Filter'));
+    });
+  });
+
+  describe('Filter Type Detection', () => {
+    it('uses explicit filterType when provided', () => {
+      const columns = [
+        columnHelper.accessor('status', {
+          header: 'Status',
+          filterType: 'text',
+        }),
+      ];
+      const table = createTable(columns);
+      const visibleColumns = table.getHeaderGroups()[0]?.headers || [];
+      
+      render(<FilterRow table={table} visibleColumns={visibleColumns} />);
+      
+      const filter = screen.getByTestId('column-filter');
+      expect(filter).toHaveAttribute('data-filter-type', 'text');
+    });
+
+    it('auto-detects select filter when filterSelectOptions provided', () => {
+      const columns = [
+        columnHelper.accessor('status', {
+          header: 'Status',
+          filterSelectOptions: [
+            { value: 'active', label: 'Active' },
+            { value: 'inactive', label: 'Inactive' },
+          ],
+        }),
+      ];
+      const table = createTable(columns);
+      const visibleColumns = table.getHeaderGroups()[0]?.headers || [];
+      
+      render(<FilterRow table={table} visibleColumns={visibleColumns} />);
+      
+      const filter = screen.getByTestId('column-filter');
+      expect(filter).toHaveAttribute('data-filter-type', 'select');
+    });
+
+    it('auto-detects date filter for date columns', () => {
+      // Column ID must include 'date' or 'time' for auto-detection
+      const columns = [
+        columnHelper.accessor('createdDate', {
+          header: 'Created Date',
+        }),
+      ];
+      // Use data with Date values - need to match the column accessor
+      const dateData: TestData[] = [
+        { id: '1', name: 'John', email: 'john@example.com', age: 30, status: 'active', createdAt: new Date('2024-01-01'), createdDate: new Date('2024-01-01') },
+      ];
+      const table = createTable(columns, dateData);
+      const visibleColumns = table.getHeaderGroups()[0]?.headers || [];
+      
+      render(<FilterRow table={table} visibleColumns={visibleColumns} />);
+      
+      const filter = screen.getByTestId('column-filter');
+      // Column ID includes 'date', so it should detect as 'date'
+      expect(filter).toHaveAttribute('data-filter-type', 'date');
+    });
+
+    it('auto-detects number filter for numeric columns', () => {
+      const columns = [
+        columnHelper.accessor('age', {
+          header: 'Age',
+        }),
+      ];
+      const table = createTable(columns);
+      const visibleColumns = table.getHeaderGroups()[0]?.headers || [];
+      
+      render(<FilterRow table={table} visibleColumns={visibleColumns} />);
+      
+      const filter = screen.getByTestId('column-filter');
+      expect(filter).toHaveAttribute('data-filter-type', 'number');
+    });
+
+    it('auto-detects select filter when unique values ≤ 10', () => {
+      const limitedData: TestData[] = Array.from({ length: 5 }, (_, i) => ({
+        id: String(i),
+        name: `User ${i}`,
+        email: `user${i}@example.com`,
+        age: 20 + i,
+        status: ['active', 'inactive', 'pending'][i % 3],
+        createdAt: new Date(),
+      }));
+      
+      const columns = [
+        columnHelper.accessor('status', {
+          header: 'Status',
+        }),
+      ];
+      const table = createTable(columns, limitedData);
+      const visibleColumns = table.getHeaderGroups()[0]?.headers || [];
+      
+      render(<FilterRow table={table} visibleColumns={visibleColumns} />);
+      
+      const filter = screen.getByTestId('column-filter');
+      expect(filter).toHaveAttribute('data-filter-type', 'select');
+    });
+
+    it('defaults to text filter when no auto-detection matches', () => {
+      // Use data with many unique values (>10) to avoid auto-detection as select
+      const manyUniqueData: TestData[] = Array.from({ length: 15 }, (_, i) => ({
+        id: String(i),
+        name: `Unique Name ${i}`,
+        email: `user${i}@example.com`,
+        age: 20 + i,
+        status: 'active',
+        createdAt: new Date(),
+      }));
+      
+      const columns = [
+        columnHelper.accessor('name', {
+          header: 'Name',
+        }),
+      ];
+      const table = createTable(columns, manyUniqueData);
+      const visibleColumns = table.getHeaderGroups()[0]?.headers || [];
+      
+      render(<FilterRow table={table} visibleColumns={visibleColumns} />);
+      
+      const filter = screen.getByTestId('column-filter');
+      // With >10 unique values, it should default to 'text' filter
+      expect(filter).toHaveAttribute('data-filter-type', 'text');
+    });
+  });
+
+  describe('Filter Options Generation', () => {
+    it('uses filterSelectOptions when provided', () => {
+      const columns = [
+        columnHelper.accessor('status', {
+          header: 'Status',
+          filterSelectOptions: [
+            { value: 'active', label: 'Active' },
+            { value: 'inactive', label: 'Inactive' },
+          ],
+        }),
+      ];
+      const table = createTable(columns);
+      const visibleColumns = table.getHeaderGroups()[0]?.headers || [];
+      
+      render(<FilterRow table={table} visibleColumns={visibleColumns} />);
+      
+      const filter = screen.getByTestId('column-filter');
+      expect(filter).toHaveAttribute('data-options-count', '2');
+    });
+
+    it('generates options from unique values when filterSelectOptions not provided', () => {
+      const columns = [
+        columnHelper.accessor('status', {
+          header: 'Status',
+        }),
+      ];
+      const table = createTable(columns);
+      const visibleColumns = table.getHeaderGroups()[0]?.headers || [];
+      
+      render(<FilterRow table={table} visibleColumns={visibleColumns} />);
+      
+      const filter = screen.getByTestId('column-filter');
+      // Should have generated options from unique values
+      expect(filter).toBeInTheDocument();
+    });
+
+    it('handles columns with no data', () => {
+      const columns = [
+        columnHelper.accessor('name', {
+          header: 'Name',
+        }),
+      ];
+      const table = createTable(columns, []);
+      const visibleColumns = table.getHeaderGroups()[0]?.headers || [];
+      
+      render(<FilterRow table={table} visibleColumns={visibleColumns} />);
+      
+      const filter = screen.getByTestId('column-filter');
+      expect(filter).toHaveAttribute('data-options-count', '0');
+    });
+
+    it('filters out null and undefined values when generating options', () => {
+      const dataWithNulls: TestData[] = [
+        { id: '1', name: 'John', email: 'john@example.com', age: 30, status: 'active', createdAt: new Date() },
+        { id: '2', name: 'Jane', email: 'jane@example.com', age: 25, status: null as any, createdAt: new Date() },
+        { id: '3', name: 'Bob', email: 'bob@example.com', age: 35, status: undefined as any, createdAt: new Date() },
+      ];
+      
+      const columns = [
+        columnHelper.accessor('status', {
+          header: 'Status',
+        }),
+      ];
+      const table = createTable(columns, dataWithNulls);
+      const visibleColumns = table.getHeaderGroups()[0]?.headers || [];
+      
+      render(<FilterRow table={table} visibleColumns={visibleColumns} />);
+      
+      const filter = screen.getByTestId('column-filter');
+      expect(filter).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty visibleColumns array', () => {
+      const table = createTable();
+      
+      render(<FilterRow table={table} visibleColumns={[]} />);
+      
+      const filterRow = screen.getByRole('row');
+      expect(filterRow).toBeInTheDocument();
+    });
+
+    it('handles columns with missing column definitions', () => {
+      const table = createTable();
+      const visibleColumns = table.getHeaderGroups()[0]?.headers || [];
+      
+      // This should not throw
+      expect(() => {
+        render(<FilterRow table={table} visibleColumns={visibleColumns} />);
+      }).not.toThrow();
+    });
+
+    it('handles columns with very long names', () => {
+      const longName = 'a'.repeat(100);
+      const columns = [
+        columnHelper.accessor('name', {
+          header: longName,
+        }),
+      ];
+      const table = createTable(columns);
+      const visibleColumns = table.getHeaderGroups()[0]?.headers || [];
+      
+      render(<FilterRow table={table} visibleColumns={visibleColumns} />);
+      
+      const filter = screen.getByTestId('column-filter');
+      expect(filter).toBeInTheDocument();
+    });
+
+    it('handles columns with special characters in IDs', () => {
+      const columns = [
+        columnHelper.accessor('name', {
+          id: 'column-with-special-chars!@#',
+          header: 'Name',
+        }),
+      ];
+      const table = createTable(columns);
+      const visibleColumns = table.getHeaderGroups()[0]?.headers || [];
+      
+      render(<FilterRow table={table} visibleColumns={visibleColumns} />);
+      
+      const filter = screen.getByTestId('column-filter');
+      expect(filter).toHaveAttribute('data-column-id', 'column-with-special-chars!@#');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('renders as table row with proper structure', () => {
+      const table = createTable();
+      const visibleColumns = table.getHeaderGroups()[0]?.headers || [];
+      
+      render(<FilterRow table={table} visibleColumns={visibleColumns} />);
+      
+      const filterRow = screen.getByRole('row');
+      expect(filterRow).toBeInTheDocument();
+    });
+
+    it('renders filter cells with proper structure', () => {
+      const table = createTable();
+      const visibleColumns = table.getHeaderGroups()[0]?.headers || [];
+      
+      render(<FilterRow table={table} visibleColumns={visibleColumns} />);
+      
+      const filters = screen.getAllByTestId('column-filter');
+      expect(filters.length).toBeGreaterThan(0);
+    });
+  });
+});
+