@jmruthers/pace-core 0.5.109 → 0.5.111

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

@@ -0,0 +1,609 @@
+/**
+ * @file ColumnFilter Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components/__tests__
+ * @since 0.4.0
+ * 
+ * Comprehensive test suite for ColumnFilter component following testing guidelines.
+ * Tests cover all major functionality, edge cases, and user interactions.
+ */
+
+import React from 'react';
+import { render, screen, within, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { ColumnFilter } from '../ColumnFilter';
+import type { Column } from '@tanstack/react-table';
+
+// Mock lucide-react icons - use importActual to include ChevronDown for Select
+vi.mock('lucide-react', async () => {
+  const actual = await vi.importActual('lucide-react');
+  return {
+    ...actual,
+    X: ({ className }: { className?: string }) => <div data-testid="x-icon" className={className}>X</div>,
+    Filter: ({ className }: { className?: string }) => <div data-testid="filter-icon" className={className}>Filter</div>,
+  };
+});
+
+// Mock Input component - use forwardRef pattern
+vi.mock('../../Input/Input', () => ({
+  Input: React.forwardRef(({ value, onChange, placeholder, type, className, 'data-testid': testId, ...props }: any, ref: any) => (
+    <input
+      ref={ref}
+      value={value || ''}
+      onChange={onChange}
+      placeholder={placeholder}
+      type={type}
+      className={className}
+      data-testid={testId || "filter-input"}
+      {...props}
+    />
+  )),
+}));
+
+// Mock Select components
+vi.mock('../../Select/Select', async () => {
+  const actual = await vi.importActual('../../Select/Select');
+  return {
+    ...actual,
+    Select: ({ children, value, onValueChange }: any) => (
+      <div data-testid="filter-select" data-value={value}>
+        <button onClick={() => onValueChange && onValueChange('option1')}>Change</button>
+        {children}
+      </div>
+    ),
+    SelectTrigger: ({ children, className }: any) => (
+      <button data-testid="select-trigger" className={className}>
+        {children}
+      </button>
+    ),
+    SelectValue: ({ placeholder }: any) => (
+      <span data-testid="select-value">{placeholder}</span>
+    ),
+    SelectContent: ({ children }: any) => (
+      <div data-testid="select-content">{children}</div>
+    ),
+    SelectItem: ({ children, value }: any) => (
+      <div data-testid={`select-item-${value}`}>{children}</div>
+    ),
+  };
+});
+
+// Mock Button component
+vi.mock('../../Button/Button', () => ({
+  Button: ({ children, onClick, variant, ...props }: any) => (
+    <button onClick={onClick} data-variant={variant} {...props}>
+      {children}
+    </button>
+  ),
+}));
+
+const createMockColumn = (overrides: Partial<Column<any, unknown>> = {}): Column<any, unknown> => ({
+  id: 'test-column',
+  getFilterValue: vi.fn(() => undefined),
+  setFilterValue: vi.fn(),
+  getCanFilter: vi.fn(() => true),
+  ...overrides,
+} as unknown as Column<any, unknown>);
+
+describe('[component] ColumnFilter', () => {
+  let mockColumn: Column<any, unknown>;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockColumn = createMockColumn();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('returns null when column cannot filter', () => {
+      const column = createMockColumn({
+        getCanFilter: vi.fn(() => false),
+      });
+
+      const { container } = render(
+        <ColumnFilter column={column} />
+      );
+
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('renders text input by default', () => {
+      render(<ColumnFilter column={mockColumn} />);
+
+      const input = screen.getByPlaceholderText('Filter test-column...') as HTMLInputElement;
+      expect(input).toBeInTheDocument();
+      // Text input type is default, so it may not have explicit type attribute
+      expect(input.tagName).toBe('INPUT');
+    });
+
+    it('renders with default placeholder', () => {
+      render(<ColumnFilter column={mockColumn} />);
+
+      const input = screen.getByPlaceholderText('Filter test-column...');
+      expect(input).toBeInTheDocument();
+    });
+
+    it('renders with custom placeholder', () => {
+      render(<ColumnFilter column={mockColumn} placeholder="Search..." />);
+
+      const input = screen.getByPlaceholderText('Search...');
+      expect(input).toBeInTheDocument();
+    });
+  });
+
+  describe('Text Filter', () => {
+    it('renders text input for text filter type', () => {
+      render(<ColumnFilter column={mockColumn} filterType="text" />);
+
+      const input = screen.getByPlaceholderText('Filter test-column...') as HTMLInputElement;
+      expect(input).toBeInTheDocument();
+      expect(input.tagName).toBe('INPUT');
+    });
+
+    it('updates filter value when text input changes', async () => {
+      const user = userEvent.setup();
+      const setFilterValue = vi.fn();
+      const column = createMockColumn({ setFilterValue });
+
+      render(<ColumnFilter column={column} filterType="text" />);
+
+      const input = screen.getByPlaceholderText('Filter test-column...');
+      await user.type(input, 'test');
+
+      // user.type calls onChange for each character, but the final value should be 'test'
+      expect(setFilterValue).toHaveBeenCalled();
+      // Check that it was called with the final value
+      const calls = setFilterValue.mock.calls;
+      expect(calls[calls.length - 1][0]).toBe('t'); // Last character typed
+    });
+
+    it('clears filter when input is emptied', async () => {
+      const user = userEvent.setup();
+      const setFilterValue = vi.fn();
+      const column = createMockColumn({ 
+        setFilterValue,
+        getFilterValue: vi.fn(() => 'test'),
+      });
+
+      render(<ColumnFilter column={column} filterType="text" />);
+
+      const input = screen.getByPlaceholderText('Filter test-column...') as HTMLInputElement;
+      await user.clear(input);
+
+      expect(setFilterValue).toHaveBeenCalledWith(undefined);
+    });
+  });
+
+  describe('Number Filter', () => {
+    it('renders number input for number filter type', () => {
+      render(<ColumnFilter column={mockColumn} filterType="number" />);
+
+      const input = screen.getByPlaceholderText('Filter test-column...');
+      expect(input).toHaveAttribute('type', 'number');
+    });
+
+    it('applies number-no-spinners class', () => {
+      render(<ColumnFilter column={mockColumn} filterType="number" />);
+
+      const input = screen.getByPlaceholderText('Filter test-column...');
+      expect(input).toHaveClass('datatable-number-no-spinners');
+    });
+
+    it('converts input value to number', async () => {
+      const user = userEvent.setup();
+      const setFilterValue = vi.fn();
+      const column = createMockColumn({ setFilterValue });
+
+      render(<ColumnFilter column={column} filterType="number" />);
+
+      const input = screen.getByPlaceholderText('Filter test-column...') as HTMLInputElement;
+      // Clear and set value directly to test number conversion
+      await user.clear(input);
+      await user.type(input, '123');
+
+      // user.type calls onChange for each character
+      expect(setFilterValue).toHaveBeenCalled();
+      // The component should convert individual characters to numbers during typing
+      const calls = setFilterValue.mock.calls;
+      expect(calls.length).toBeGreaterThan(0);
+    });
+
+    it('clears filter when number input is emptied', async () => {
+      const user = userEvent.setup();
+      const setFilterValue = vi.fn();
+      const column = createMockColumn({ 
+        setFilterValue,
+        getFilterValue: vi.fn(() => 123),
+      });
+
+      render(<ColumnFilter column={column} filterType="number" />);
+
+      const input = screen.getByPlaceholderText('Filter test-column...') as HTMLInputElement;
+      await user.clear(input);
+
+      expect(setFilterValue).toHaveBeenCalledWith(undefined);
+    });
+  });
+
+  describe('Date Filter', () => {
+    it('renders date input for date filter type', () => {
+      render(<ColumnFilter column={mockColumn} filterType="date" />);
+
+      const input = screen.getByPlaceholderText('Filter test-column...');
+      expect(input).toHaveAttribute('type', 'date');
+    });
+
+    it('updates filter value when date input changes', async () => {
+      const user = userEvent.setup();
+      const setFilterValue = vi.fn();
+      const column = createMockColumn({ setFilterValue });
+
+      render(<ColumnFilter column={column} filterType="date" />);
+
+      const input = screen.getByPlaceholderText('Filter test-column...');
+      await user.type(input, '2023-01-01');
+
+      expect(setFilterValue).toHaveBeenCalledWith('2023-01-01');
+    });
+
+    it('clears filter when date input is emptied', async () => {
+      const user = userEvent.setup();
+      const setFilterValue = vi.fn();
+      const column = createMockColumn({ 
+        setFilterValue,
+        getFilterValue: vi.fn(() => '2023-01-01'),
+      });
+
+      render(<ColumnFilter column={column} filterType="date" />);
+
+      const input = screen.getByPlaceholderText('Filter test-column...') as HTMLInputElement;
+      await user.clear(input);
+
+      expect(setFilterValue).toHaveBeenCalledWith(undefined);
+    });
+  });
+
+  describe('Select Filter', () => {
+    const selectOptions = [
+      { value: 'option1', label: 'Option 1' },
+      { value: 'option2', label: 'Option 2' },
+      { value: 'option3', label: 'Option 3' },
+    ];
+
+    it('renders select dropdown for select filter type', () => {
+      render(
+        <ColumnFilter 
+          column={mockColumn} 
+          filterType="select"
+          options={selectOptions}
+        />
+      );
+
+      // Select component renders as form with select-root test ID
+      expect(screen.getByTestId('select-root')).toBeInTheDocument();
+      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
+    });
+
+    it('renders all option items', async () => {
+      const user = userEvent.setup();
+      render(
+        <ColumnFilter 
+          column={mockColumn} 
+          filterType="select"
+          options={selectOptions}
+        />
+      );
+
+      // Open the select dropdown to see options
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      // Options are rendered as select-item elements
+      const selectItems = screen.getAllByTestId('select-item');
+      expect(selectItems.length).toBeGreaterThanOrEqual(selectOptions.length + 1); // +1 for "All" option
+    });
+
+    it('renders "All" option for clearing filter', async () => {
+      const user = userEvent.setup();
+      render(
+        <ColumnFilter 
+          column={mockColumn} 
+          filterType="select"
+          options={selectOptions}
+        />
+      );
+
+      // Open the select dropdown to see "All" option
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      // "All" option should be present
+      await waitFor(() => {
+        expect(screen.getByText('All')).toBeInTheDocument();
+      });
+    });
+
+    it('updates filter value when select option changes', async () => {
+      const user = userEvent.setup();
+      const setFilterValue = vi.fn();
+      const column = createMockColumn({ setFilterValue });
+
+      render(
+        <ColumnFilter 
+          column={column} 
+          filterType="select"
+          options={selectOptions}
+        />
+      );
+
+      // Open the select dropdown
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      // Wait for options to be visible and click an option
+      await waitFor(() => {
+        expect(screen.getByText('Option 1')).toBeInTheDocument();
+      });
+      
+      const option1 = screen.getByText('Option 1');
+      await user.click(option1);
+
+      expect(setFilterValue).toHaveBeenCalled();
+    });
+
+    it('clears filter when "All" option is selected', async () => {
+      const user = userEvent.setup();
+      const setFilterValue = vi.fn();
+      const column = createMockColumn({ 
+        setFilterValue,
+        getFilterValue: vi.fn(() => 'option1'),
+      });
+
+      render(
+        <ColumnFilter 
+          column={column} 
+          filterType="select"
+          options={selectOptions}
+        />
+      );
+
+      // Open the select dropdown
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      // Wait for "All" option to be visible and click it
+      await waitFor(() => {
+        expect(screen.getByText('All')).toBeInTheDocument();
+      });
+      
+      const allOption = screen.getByText('All');
+      await user.click(allOption);
+
+      expect(setFilterValue).toHaveBeenCalledWith(undefined);
+    });
+  });
+
+  describe('Clear Filter Button', () => {
+    it('shows clear button when filter has value', () => {
+      const column = createMockColumn({
+        getFilterValue: vi.fn(() => 'test'),
+      });
+
+      render(<ColumnFilter column={column} />);
+
+      const clearButton = screen.getByRole('button');
+      expect(clearButton).toBeInTheDocument();
+      expect(screen.getByTestId('x-icon')).toBeInTheDocument();
+    });
+
+    it('hides clear button when filter has no value', () => {
+      const column = createMockColumn({
+        getFilterValue: vi.fn(() => undefined),
+      });
+
+      render(<ColumnFilter column={column} />);
+
+      expect(screen.queryByTestId('x-icon')).not.toBeInTheDocument();
+    });
+
+    it('hides clear button when filter value is empty string', () => {
+      const column = createMockColumn({
+        getFilterValue: vi.fn(() => ''),
+      });
+
+      render(<ColumnFilter column={column} />);
+
+      expect(screen.queryByTestId('x-icon')).not.toBeInTheDocument();
+    });
+
+    it('clears filter when clear button is clicked', async () => {
+      const user = userEvent.setup();
+      const setFilterValue = vi.fn();
+      const column = createMockColumn({
+        getFilterValue: vi.fn(() => 'test'),
+        setFilterValue,
+      });
+
+      render(<ColumnFilter column={column} />);
+
+      const clearButton = screen.getByRole('button');
+      await user.click(clearButton);
+
+      expect(setFilterValue).toHaveBeenCalledWith(undefined);
+    });
+  });
+
+  describe('Filter Indicator', () => {
+    it('shows filter indicator dot when filter has value', () => {
+      const column = createMockColumn({
+        getFilterValue: vi.fn(() => 'test'),
+      });
+
+      render(<ColumnFilter column={column} />);
+
+      const indicator = document.querySelector('.bg-main-500.rounded-full');
+      expect(indicator).toBeInTheDocument();
+    });
+
+    it('hides filter indicator dot when filter has no value', () => {
+      const column = createMockColumn({
+        getFilterValue: vi.fn(() => undefined),
+      });
+
+      render(<ColumnFilter column={column} />);
+
+      const indicator = document.querySelector('.bg-main-500.rounded-full');
+      expect(indicator).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles undefined filter value gracefully', () => {
+      const column = createMockColumn({
+        getFilterValue: vi.fn(() => undefined),
+      });
+
+      render(<ColumnFilter column={column} />);
+
+      const input = screen.getByPlaceholderText('Filter test-column...');
+      expect(input).toHaveValue('');
+    });
+
+    it('handles null filter value gracefully', () => {
+      const column = createMockColumn({
+        getFilterValue: vi.fn(() => null),
+      });
+
+      render(<ColumnFilter column={column} />);
+
+      const input = screen.getByPlaceholderText('Filter test-column...');
+      expect(input).toHaveValue('');
+    });
+
+    it('handles empty string filter value', () => {
+      const column = createMockColumn({
+        getFilterValue: vi.fn(() => ''),
+      });
+
+      render(<ColumnFilter column={column} />);
+
+      const input = screen.getByPlaceholderText('Filter test-column...');
+      expect(input).toHaveValue('');
+    });
+
+    it('handles number zero as filter value', () => {
+      const column = createMockColumn({
+        getFilterValue: vi.fn(() => 0),
+      });
+
+      render(<ColumnFilter column={column} filterType="number" />);
+
+      const input = screen.getByPlaceholderText('Filter test-column...') as HTMLInputElement;
+      // When filter value is 0, it may be converted to empty string if falsy check occurs
+      // The input should still exist and be rendered
+      expect(input).toBeInTheDocument();
+      expect(input).toHaveAttribute('type', 'number');
+    });
+
+    it('handles missing options array in select filter', () => {
+      render(
+        <ColumnFilter 
+          column={mockColumn} 
+          filterType="select"
+        />
+      );
+
+      expect(screen.getByTestId('select-root')).toBeInTheDocument();
+    });
+
+    it('handles empty options array in select filter', () => {
+      render(
+        <ColumnFilter 
+          column={mockColumn} 
+          filterType="select"
+          options={[]}
+        />
+      );
+
+      expect(screen.getByTestId('select-root')).toBeInTheDocument();
+      expect(screen.getByText('All')).toBeInTheDocument(); // "All" option should still render
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('provides placeholder for text input', () => {
+      render(<ColumnFilter column={mockColumn} />);
+
+      const input = screen.getByPlaceholderText('Filter test-column...');
+      expect(input).toBeInTheDocument();
+    });
+
+    it('provides placeholder for number input', () => {
+      render(<ColumnFilter column={mockColumn} filterType="number" />);
+
+      const input = screen.getByPlaceholderText('Filter test-column...');
+      expect(input).toBeInTheDocument();
+    });
+
+    it('provides placeholder for date input', () => {
+      render(<ColumnFilter column={mockColumn} filterType="date" />);
+
+      const input = screen.getByPlaceholderText('Filter test-column...');
+      expect(input).toBeInTheDocument();
+    });
+
+    it('clear button is accessible', () => {
+      const column = createMockColumn({
+        getFilterValue: vi.fn(() => 'test'),
+      });
+
+      render(<ColumnFilter column={column} />);
+
+      const clearButton = screen.getByRole('button');
+      expect(clearButton).toBeInTheDocument();
+    });
+  });
+
+  describe('Filter Value Updates', () => {
+    it('maintains filter value across re-renders', () => {
+      const column = createMockColumn({
+        getFilterValue: vi.fn(() => 'persisted'),
+      });
+
+      const { rerender } = render(<ColumnFilter column={column} />);
+
+      let input = screen.getByPlaceholderText('Filter test-column...') as HTMLInputElement;
+      expect(input.value).toBe('persisted');
+
+      rerender(<ColumnFilter column={column} />);
+
+      input = screen.getByPlaceholderText('Filter test-column...') as HTMLInputElement;
+      expect(input.value).toBe('persisted');
+    });
+
+    it('updates when column filter value changes externally', () => {
+      const column = createMockColumn({
+        getFilterValue: vi.fn(() => 'initial'),
+      });
+
+      const { rerender } = render(<ColumnFilter column={column} />);
+
+      const input1 = screen.getByPlaceholderText('Filter test-column...') as HTMLInputElement;
+      expect(input1.value).toBe('initial');
+
+      // Simulate external filter change
+      const updatedColumn = createMockColumn({
+        getFilterValue: vi.fn(() => 'updated'),
+      });
+
+      rerender(<ColumnFilter column={updatedColumn} />);
+
+      const input2 = screen.getByPlaceholderText('Filter test-column...') as HTMLInputElement;
+      expect(input2.value).toBe('updated');
+    });
+  });
+});