@jmruthers/pace-core 0.6.8 → 0.6.10

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

@@ -3,19 +3,19 @@
  * @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.
+ *
+ * Tests focus on behavior: filter input interactions, filter type handling, and value updates.
+ * Removed redundant placeholder tests and implementation detail checks.
  */
 
 import React from 'react';
-import { render, screen, within, waitFor } from '@testing-library/react';
+import { render, screen, 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
+// Mock lucide-react icons
 vi.mock('lucide-react', async () => {
   const actual = await vi.importActual('lucide-react');
   return {
@@ -25,7 +25,7 @@ vi.mock('lucide-react', async () => {
   };
 });
 
-// Mock Input component - use forwardRef pattern
+// Mock Input component
 vi.mock('../../Input/Input', () => ({
   Input: React.forwardRef(({ value, onChange, placeholder, type, className, 'data-testid': testId, ...props }: any, ref: any) => (
     <input
@@ -120,24 +120,9 @@ describe('[component] ColumnFilter', () => {
 
       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();
-    });
-
     it('uses column header text for placeholder when header is a string', () => {
       const column = createMockColumn({
         columnDef: {
@@ -180,32 +165,9 @@ describe('[component] ColumnFilter', () => {
       const input = screen.getByPlaceholderText('Filter fallback-column...');
       expect(input).toBeInTheDocument();
     });
-
-    it('falls back to accessorKey when header is a function', () => {
-      const column = createMockColumn({
-        columnDef: {
-          header: () => 'Function Header',
-          accessorKey: 'unit_name',
-        },
-      });
-
-      render(<ColumnFilter column={column} />);
-
-      // When header is a function, should fall back to accessorKey
-      const input = screen.getByPlaceholderText('Filter unit_name...');
-      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();
@@ -216,11 +178,9 @@ describe('[component] ColumnFilter', () => {
       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
+      expect(calls[calls.length - 1][0]).toBe('t');
     });
 
     it('clears filter when input is emptied', async () => {
@@ -263,15 +223,10 @@ describe('[component] ColumnFilter', () => {
       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 () => {
@@ -345,7 +300,6 @@ describe('[component] ColumnFilter', () => {
         />
       );
 
-      // Select component renders as form with select-root test ID
       expect(screen.getByTestId('select-root')).toBeInTheDocument();
       expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
     });
@@ -360,13 +314,11 @@ describe('[component] ColumnFilter', () => {
         />
       );
 
-      // 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
+      expect(selectItems.length).toBeGreaterThanOrEqual(selectOptions.length + 1);
     });
 
     it('renders "All" option for clearing filter', async () => {
@@ -379,11 +331,9 @@ describe('[component] ColumnFilter', () => {
         />
       );
 
-      // 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();
       });
@@ -402,11 +352,9 @@ describe('[component] ColumnFilter', () => {
         />
       );
 
-      // 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();
       });
@@ -433,11 +381,9 @@ describe('[component] ColumnFilter', () => {
         />
       );
 
-      // 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();
       });
@@ -449,7 +395,6 @@ describe('[component] ColumnFilter', () => {
     });
   });
 
-
   describe('Edge Cases', () => {
     it('handles undefined filter value gracefully', () => {
       const column = createMockColumn({
@@ -473,17 +418,6 @@ describe('[component] ColumnFilter', () => {
       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),
@@ -492,23 +426,10 @@ describe('[component] ColumnFilter', () => {
       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 
@@ -519,55 +440,7 @@ describe('[component] ColumnFilter', () => {
       );
 
       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('renders Filter icon in select filter', () => {
-      render(
-        <ColumnFilter 
-          column={mockColumn} 
-          filterType="select"
-          options={[{ value: 'option1', label: 'Option 1' }]}
-        />
-      );
-
-      expect(screen.getByTestId('filter-icon')).toBeInTheDocument();
-    });
-
-    it('renders column name in select filter value', () => {
-      render(
-        <ColumnFilter 
-          column={mockColumn} 
-          filterType="select"
-          options={[{ value: 'option1', label: 'Option 1' }]}
-        />
-      );
-
-      const selectValue = screen.getByTestId('select-value');
-      expect(selectValue).toHaveTextContent('test-column...');
+      expect(screen.getByText('All')).toBeInTheDocument();
     });
   });
 
@@ -598,7 +471,6 @@ describe('[component] ColumnFilter', () => {
       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'),
       });

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

@@ -525,7 +525,7 @@ describe('[component] ColumnVisibilityDropdown', () => {
       expect(handleVisibilityChange).toHaveBeenCalledWith('col2', false);
     });
 
-    it('only shows visible columns when Show All is clicked', async () => {
+    it('only affects relevant columns when Show All is clicked', async () => {
       const user = userEvent.setup();
       const columns = [
         createMockColumn({
@@ -551,19 +551,17 @@ describe('[component] ColumnVisibilityDropdown', () => {
       await user.click(trigger);
 
       await waitFor(() => {
-        const showAllButton = screen.getByText('Show All');
-        expect(showAllButton).toBeInTheDocument();
+        expect(screen.getByText('Show All')).toBeInTheDocument();
       });
 
-      const showAllButton = screen.getByText('Show All');
-      await user.click(showAllButton);
+      await user.click(screen.getByText('Show All'));
 
       // Only hidden column should be shown
       expect(handleVisibilityChange).toHaveBeenCalledTimes(1);
       expect(handleVisibilityChange).toHaveBeenCalledWith('hidden-col', true);
     });
 
-    it('only hides visible columns when Hide All is clicked', async () => {
+    it('only affects relevant columns when Hide All is clicked', async () => {
       const user = userEvent.setup();
       const columns = [
         createMockColumn({
@@ -589,12 +587,10 @@ describe('[component] ColumnVisibilityDropdown', () => {
       await user.click(trigger);
 
       await waitFor(() => {
-        const hideAllButton = screen.getByText('Hide All');
-        expect(hideAllButton).toBeInTheDocument();
+        expect(screen.getByText('Hide All')).toBeInTheDocument();
       });
 
-      const hideAllButton = screen.getByText('Hide All');
-      await user.click(hideAllButton);
+      await user.click(screen.getByText('Hide All'));
 
       // Only visible column should be hidden
       expect(handleVisibilityChange).toHaveBeenCalledTimes(1);
@@ -614,7 +610,7 @@ describe('[component] ColumnVisibilityDropdown', () => {
       expect(screen.getByTestId('select-root')).toBeInTheDocument();
     });
 
-    it('handles columns with no toggleable columns', async () => {
+    it('filters out non-toggleable columns correctly', async () => {
       const user = userEvent.setup();
       const nonToggleableColumns = [
         createMockColumn({
@@ -622,6 +618,11 @@ describe('[component] ColumnVisibilityDropdown', () => {
           getCanHide: vi.fn(() => false),
           columnDef: { header: 'Column 1' },
         }),
+        createMockColumn({
+          id: 'col2',
+          getCanHide: vi.fn(() => true),
+          columnDef: { header: 'Column 2' },
+        }),
       ];
 
       render(
@@ -636,19 +637,26 @@ describe('[component] ColumnVisibilityDropdown', () => {
 
       await waitFor(() => {
         expect(screen.queryByText('Column 1')).not.toBeInTheDocument();
+        expect(screen.getByText('Column 2')).toBeInTheDocument();
       });
     });
 
-    it('handles columns with undefined header', async () => {
+    it('handles columns with undefined or complex headers', async () => {
       const user = userEvent.setup();
-      const columnWithUndefinedHeader = createMockColumn({
-        id: 'col-undefined',
-        columnDef: { header: undefined },
-      });
+      const columns = [
+        createMockColumn({
+          id: 'col-undefined',
+          columnDef: { header: undefined },
+        }),
+        createMockColumn({
+          id: 'col-complex',
+          columnDef: { header: () => <span>Complex Header</span> },
+        }),
+      ];
 
       render(
         <ColumnVisibilityDropdown
-          columns={[columnWithUndefinedHeader]}
+          columns={columns}
           onColumnVisibilityChange={handleVisibilityChange}
         />
       );
@@ -658,7 +666,39 @@ describe('[component] ColumnVisibilityDropdown', () => {
 
       await waitFor(() => {
         expect(screen.getByText('col-undefined')).toBeInTheDocument();
+        expect(screen.getByText('col-complex')).toBeInTheDocument();
+      });
+    });
+
+    it('handles checkbox toggle correctly', async () => {
+      const user = userEvent.setup();
+      const column = createMockColumn({
+        id: 'toggle-col',
+        getIsVisible: vi.fn(() => true),
+        columnDef: { header: 'Toggle Column' },
+      });
+
+      render(
+        <ColumnVisibilityDropdown
+          columns={[column]}
+          onColumnVisibilityChange={handleVisibilityChange}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        const checkbox = screen.getByRole('checkbox', { name: /Toggle Column/i });
+        expect(checkbox).toBeInTheDocument();
       });
+
+      const checkbox = screen.getByRole('checkbox', { name: /Toggle Column/i });
+      await user.click(checkbox);
+
+      // Each click toggles the state, so we expect one call per click
+      expect(handleVisibilityChange).toHaveBeenCalledTimes(1);
+      expect(handleVisibilityChange).toHaveBeenCalledWith('toggle-col', false);
     });
   });