@jmruthers/pace-core 0.5.115 → 0.5.117

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

@@ -0,0 +1,708 @@
+/**
+ * @file ColumnVisibilityDropdown Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components/__tests__
+ * @since 0.4.0
+ * 
+ * Comprehensive test suite for ColumnVisibilityDropdown component following testing guidelines.
+ * Tests cover all major functionality, edge cases, and user interactions.
+ */
+
+import React from '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 { ColumnVisibilityDropdown } from '../ColumnVisibilityDropdown';
+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,
+    Settings2: ({ className }: { className?: string }) => (
+      <div data-testid="settings-2-icon" className={className}>Settings</div>
+    ),
+    Eye: ({ className }: { className?: string }) => (
+      <div data-testid="eye-icon" className={className}>Eye</div>
+    ),
+    EyeOff: ({ className }: { className?: string }) => (
+      <div data-testid="eye-off-icon" className={className}>EyeOff</div>
+    ),
+  };
+});
+
+// Mock Button component
+vi.mock('../../Button/Button', () => ({
+  Button: ({ children, onClick, variant, size, className, ...props }: any) => (
+    <button
+      onClick={onClick}
+      data-variant={variant}
+      data-size={size}
+      className={className}
+      {...props}
+    >
+      {children}
+    </button>
+  ),
+}));
+
+// Mock Checkbox component
+vi.mock('../../Checkbox/Checkbox', () => ({
+  Checkbox: ({ id, checked, onCheckedChange, ...props }: any) => (
+    <input
+      type="checkbox"
+      id={id}
+      checked={checked}
+      onChange={(e) => onCheckedChange && onCheckedChange(e.target.checked)}
+      {...props}
+    />
+  ),
+}));
+
+// Mock Select components - use importActual to avoid missing ChevronDown
+vi.mock('../../Select/Select', async () => {
+  const actual = await vi.importActual('../../Select/Select');
+  return {
+    ...actual,
+    Select: ({ children, className }: any) => (
+      <form data-testid="select-root" className={className}>
+        {children}
+      </form>
+    ),
+    SelectTrigger: ({ children, asChild, className }: any) => 
+      asChild ? children : <button data-testid="select-trigger" role="combobox" className={className}>{children}</button>,
+    SelectContent: ({ children }: any) => (
+      <ul data-testid="select-content" role="listbox">{children}</ul>
+    ),
+    SelectItem: ({ children, onClick, value, className, ...props }: any) => (
+      <li
+        data-testid="select-item"
+        data-value={value}
+        onClick={onClick}
+        role="option"
+        className={className}
+        {...props}
+      >
+        {children}
+      </li>
+    ),
+    SelectSeparator: () => <div data-testid="select-separator" />,
+  };
+});
+
+const createMockColumn = (overrides: Partial<Column<any, unknown>> = {}): Column<any, unknown> => ({
+  id: 'test-column',
+  getCanHide: vi.fn(() => true),
+  getIsVisible: vi.fn(() => true),
+  columnDef: {
+    header: 'Test Column',
+  },
+  ...overrides,
+} as unknown as Column<any, unknown>);
+
+describe('[component] ColumnVisibilityDropdown', () => {
+  let mockColumns: Column<any, unknown>[];
+  let handleVisibilityChange: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    handleVisibilityChange = vi.fn();
+    
+    mockColumns = [
+      createMockColumn({ id: 'col1', columnDef: { header: 'Column 1' } }),
+      createMockColumn({ id: 'col2', columnDef: { header: 'Column 2' } }),
+      createMockColumn({ id: 'col3', columnDef: { header: 'Column 3' } }),
+    ];
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders dropdown with trigger button', () => {
+      render(
+        <ColumnVisibilityDropdown
+          columns={mockColumns}
+          onColumnVisibilityChange={handleVisibilityChange}
+        />
+      );
+
+      expect(screen.getByTestId('select-root')).toBeInTheDocument();
+      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
+    });
+
+    it('renders Settings2 icon', () => {
+      render(
+        <ColumnVisibilityDropdown
+          columns={mockColumns}
+          onColumnVisibilityChange={handleVisibilityChange}
+        />
+      );
+
+      expect(screen.getByTestId('settings-2-icon')).toBeInTheDocument();
+    });
+
+    it('renders "Columns" text in trigger', () => {
+      render(
+        <ColumnVisibilityDropdown
+          columns={mockColumns}
+          onColumnVisibilityChange={handleVisibilityChange}
+        />
+      );
+
+      expect(screen.getByText('Columns')).toBeInTheDocument();
+    });
+
+    it('renders Show All and Hide All buttons', async () => {
+      const user = userEvent.setup();
+      render(
+        <ColumnVisibilityDropdown
+          columns={mockColumns}
+          onColumnVisibilityChange={handleVisibilityChange}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        expect(screen.getByText('Show All')).toBeInTheDocument();
+        expect(screen.getByText('Hide All')).toBeInTheDocument();
+      });
+    });
+
+    it('renders Eye icon in Show All button', async () => {
+      const user = userEvent.setup();
+      render(
+        <ColumnVisibilityDropdown
+          columns={mockColumns}
+          onColumnVisibilityChange={handleVisibilityChange}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        expect(screen.getByTestId('eye-icon')).toBeInTheDocument();
+      });
+    });
+
+    it('renders EyeOff icon in Hide All button', async () => {
+      const user = userEvent.setup();
+      render(
+        <ColumnVisibilityDropdown
+          columns={mockColumns}
+          onColumnVisibilityChange={handleVisibilityChange}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        expect(screen.getByTestId('eye-off-icon')).toBeInTheDocument();
+      });
+    });
+
+    it('renders separator between buttons and columns', async () => {
+      const user = userEvent.setup();
+      render(
+        <ColumnVisibilityDropdown
+          columns={mockColumns}
+          onColumnVisibilityChange={handleVisibilityChange}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        expect(screen.getByTestId('select-separator')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Column List', () => {
+    it('renders all toggleable columns', async () => {
+      const user = userEvent.setup();
+      render(
+        <ColumnVisibilityDropdown
+          columns={mockColumns}
+          onColumnVisibilityChange={handleVisibilityChange}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        expect(screen.getByText('Column 1')).toBeInTheDocument();
+        expect(screen.getByText('Column 2')).toBeInTheDocument();
+        expect(screen.getByText('Column 3')).toBeInTheDocument();
+      });
+    });
+
+    it('filters out non-hideable columns', async () => {
+      const user = userEvent.setup();
+      const columnsWithNonHideable = [
+        ...mockColumns,
+        createMockColumn({
+          id: 'actions',
+          getCanHide: vi.fn(() => false),
+          columnDef: { header: 'Actions' },
+        }),
+      ];
+
+      render(
+        <ColumnVisibilityDropdown
+          columns={columnsWithNonHideable}
+          onColumnVisibilityChange={handleVisibilityChange}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        expect(screen.queryByText('Actions')).not.toBeInTheDocument();
+      });
+    });
+
+    it('filters out actions column', async () => {
+      const user = userEvent.setup();
+      const columnsWithActions = [
+        ...mockColumns,
+        createMockColumn({
+          id: 'actions',
+          getCanHide: vi.fn(() => true),
+          columnDef: { header: 'Actions' },
+        }),
+      ];
+
+      render(
+        <ColumnVisibilityDropdown
+          columns={columnsWithActions}
+          onColumnVisibilityChange={handleVisibilityChange}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        expect(screen.queryByText('Actions')).not.toBeInTheDocument();
+      });
+    });
+
+    it('uses column header as label when available', async () => {
+      const user = userEvent.setup();
+      render(
+        <ColumnVisibilityDropdown
+          columns={mockColumns}
+          onColumnVisibilityChange={handleVisibilityChange}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        expect(screen.getByText('Column 1')).toBeInTheDocument();
+      });
+    });
+
+    it('uses column id as label when header is not a string', async () => {
+      const user = userEvent.setup();
+      const columnsWithComplexHeader = [
+        createMockColumn({
+          id: 'col-complex',
+          columnDef: { header: () => <span>Complex Header</span> },
+        }),
+      ];
+
+      render(
+        <ColumnVisibilityDropdown
+          columns={columnsWithComplexHeader}
+          onColumnVisibilityChange={handleVisibilityChange}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        expect(screen.getByText('col-complex')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Checkbox States', () => {
+    it('renders checked checkbox for visible columns', async () => {
+      const user = userEvent.setup();
+      const visibleColumn = createMockColumn({
+        id: 'visible-col',
+        getIsVisible: vi.fn(() => true),
+        columnDef: { header: 'Visible Column' },
+      });
+
+      render(
+        <ColumnVisibilityDropdown
+          columns={[visibleColumn]}
+          onColumnVisibilityChange={handleVisibilityChange}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        const checkbox = screen.getByRole('checkbox', { name: /Visible Column/i });
+        expect(checkbox).toBeChecked();
+      });
+    });
+
+    it('renders unchecked checkbox for hidden columns', async () => {
+      const user = userEvent.setup();
+      const hiddenColumn = createMockColumn({
+        id: 'hidden-col',
+        getIsVisible: vi.fn(() => false),
+        columnDef: { header: 'Hidden Column' },
+      });
+
+      render(
+        <ColumnVisibilityDropdown
+          columns={[hiddenColumn]}
+          onColumnVisibilityChange={handleVisibilityChange}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        const checkbox = screen.getByRole('checkbox', { name: /Hidden Column/i });
+        expect(checkbox).not.toBeChecked();
+      });
+    });
+  });
+
+  describe('User Interactions', () => {
+    it('calls onColumnVisibilityChange when checkbox is toggled', 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);
+
+      expect(handleVisibilityChange).toHaveBeenCalledTimes(1);
+      expect(handleVisibilityChange).toHaveBeenCalledWith('toggle-col', false);
+    });
+
+    it('calls onColumnVisibilityChange with true when hidden column is checked', async () => {
+      const user = userEvent.setup();
+      const column = createMockColumn({
+        id: 'hidden-col',
+        getIsVisible: vi.fn(() => false),
+        columnDef: { header: 'Hidden 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: /Hidden Column/i });
+        expect(checkbox).toBeInTheDocument();
+      });
+
+      const checkbox = screen.getByRole('checkbox', { name: /Hidden Column/i });
+      await user.click(checkbox);
+
+      expect(handleVisibilityChange).toHaveBeenCalledWith('hidden-col', true);
+    });
+
+    it('calls onColumnVisibilityChange for all hidden columns when Show All is clicked', async () => {
+      const user = userEvent.setup();
+      const columns = [
+        createMockColumn({
+          id: 'col1',
+          getIsVisible: vi.fn(() => false),
+          columnDef: { header: 'Column 1' },
+        }),
+        createMockColumn({
+          id: 'col2',
+          getIsVisible: vi.fn(() => false),
+          columnDef: { header: 'Column 2' },
+        }),
+      ];
+
+      render(
+        <ColumnVisibilityDropdown
+          columns={columns}
+          onColumnVisibilityChange={handleVisibilityChange}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        const showAllButton = screen.getByText('Show All');
+        expect(showAllButton).toBeInTheDocument();
+      });
+
+      const showAllButton = screen.getByText('Show All');
+      await user.click(showAllButton);
+
+      expect(handleVisibilityChange).toHaveBeenCalledTimes(2);
+      expect(handleVisibilityChange).toHaveBeenCalledWith('col1', true);
+      expect(handleVisibilityChange).toHaveBeenCalledWith('col2', true);
+    });
+
+    it('calls onColumnVisibilityChange for all visible columns when Hide All is clicked', async () => {
+      const user = userEvent.setup();
+      const columns = [
+        createMockColumn({
+          id: 'col1',
+          getIsVisible: vi.fn(() => true),
+          columnDef: { header: 'Column 1' },
+        }),
+        createMockColumn({
+          id: 'col2',
+          getIsVisible: vi.fn(() => true),
+          columnDef: { header: 'Column 2' },
+        }),
+      ];
+
+      render(
+        <ColumnVisibilityDropdown
+          columns={columns}
+          onColumnVisibilityChange={handleVisibilityChange}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        const hideAllButton = screen.getByText('Hide All');
+        expect(hideAllButton).toBeInTheDocument();
+      });
+
+      const hideAllButton = screen.getByText('Hide All');
+      await user.click(hideAllButton);
+
+      expect(handleVisibilityChange).toHaveBeenCalledTimes(2);
+      expect(handleVisibilityChange).toHaveBeenCalledWith('col1', false);
+      expect(handleVisibilityChange).toHaveBeenCalledWith('col2', false);
+    });
+
+    it('only shows visible columns when Show All is clicked', async () => {
+      const user = userEvent.setup();
+      const columns = [
+        createMockColumn({
+          id: 'visible-col',
+          getIsVisible: vi.fn(() => true),
+          columnDef: { header: 'Visible Column' },
+        }),
+        createMockColumn({
+          id: 'hidden-col',
+          getIsVisible: vi.fn(() => false),
+          columnDef: { header: 'Hidden Column' },
+        }),
+      ];
+
+      render(
+        <ColumnVisibilityDropdown
+          columns={columns}
+          onColumnVisibilityChange={handleVisibilityChange}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        const showAllButton = screen.getByText('Show All');
+        expect(showAllButton).toBeInTheDocument();
+      });
+
+      const showAllButton = screen.getByText('Show All');
+      await user.click(showAllButton);
+
+      // 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 () => {
+      const user = userEvent.setup();
+      const columns = [
+        createMockColumn({
+          id: 'visible-col',
+          getIsVisible: vi.fn(() => true),
+          columnDef: { header: 'Visible Column' },
+        }),
+        createMockColumn({
+          id: 'hidden-col',
+          getIsVisible: vi.fn(() => false),
+          columnDef: { header: 'Hidden Column' },
+        }),
+      ];
+
+      render(
+        <ColumnVisibilityDropdown
+          columns={columns}
+          onColumnVisibilityChange={handleVisibilityChange}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        const hideAllButton = screen.getByText('Hide All');
+        expect(hideAllButton).toBeInTheDocument();
+      });
+
+      const hideAllButton = screen.getByText('Hide All');
+      await user.click(hideAllButton);
+
+      // Only visible column should be hidden
+      expect(handleVisibilityChange).toHaveBeenCalledTimes(1);
+      expect(handleVisibilityChange).toHaveBeenCalledWith('visible-col', false);
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty columns array', () => {
+      render(
+        <ColumnVisibilityDropdown
+          columns={[]}
+          onColumnVisibilityChange={handleVisibilityChange}
+        />
+      );
+
+      expect(screen.getByTestId('select-root')).toBeInTheDocument();
+    });
+
+    it('handles columns with no toggleable columns', async () => {
+      const user = userEvent.setup();
+      const nonToggleableColumns = [
+        createMockColumn({
+          id: 'col1',
+          getCanHide: vi.fn(() => false),
+          columnDef: { header: 'Column 1' },
+        }),
+      ];
+
+      render(
+        <ColumnVisibilityDropdown
+          columns={nonToggleableColumns}
+          onColumnVisibilityChange={handleVisibilityChange}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        expect(screen.queryByText('Column 1')).not.toBeInTheDocument();
+      });
+    });
+
+    it('handles columns with undefined header', async () => {
+      const user = userEvent.setup();
+      const columnWithUndefinedHeader = createMockColumn({
+        id: 'col-undefined',
+        columnDef: { header: undefined },
+      });
+
+      render(
+        <ColumnVisibilityDropdown
+          columns={[columnWithUndefinedHeader]}
+          onColumnVisibilityChange={handleVisibilityChange}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        expect(screen.getByText('col-undefined')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('provides checkbox labels for screen readers', async () => {
+      const user = userEvent.setup();
+      render(
+        <ColumnVisibilityDropdown
+          columns={mockColumns}
+          onColumnVisibilityChange={handleVisibilityChange}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        const checkboxes = screen.getAllByRole('checkbox');
+        expect(checkboxes.length).toBeGreaterThan(0);
+      });
+    });
+
+    it('associates labels with checkboxes', async () => {
+      const user = userEvent.setup();
+      const column = createMockColumn({
+        id: 'test-col',
+        columnDef: { header: 'Test 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: /Test Column/i });
+        expect(checkbox).toBeInTheDocument();
+      });
+    });
+  });
+});
+