@jmruthers/pace-core 0.5.114 → 0.5.116

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

@@ -0,0 +1,617 @@
+/**
+ * @file GroupingDropdown Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components/__tests__
+ * @since 0.4.0
+ * 
+ * Comprehensive test suite for GroupingDropdown 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 { GroupingDropdown } from '../GroupingDropdown';
+import type { DataTableColumn, DataRecord, SimpleColumn } from '../../types';
+
+// 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,
+    Group: ({ className }: { className?: string }) => (
+      <div data-testid="group-icon" className={className}>Group</div>
+    ),
+  };
+});
+
+// Mock Button component
+vi.mock('../../Button/Button', () => ({
+  Button: ({ children, onClick, variant, className, ...props }: any) => (
+    <button
+      onClick={onClick}
+      data-variant={variant}
+      className={className}
+      {...props}
+    >
+      {children}
+    </button>
+  ),
+}));
+
+// 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) => (
+      <div data-testid="select" className={className}>
+        {children}
+      </div>
+    ),
+    SelectTrigger: ({ children, asChild, className }: any) => 
+      asChild ? children : <button data-testid="select-trigger" className={className}>{children}</button>,
+    SelectContent: ({ children }: any) => (
+      <div data-testid="select-content">{children}</div>
+    ),
+    SelectItem: ({ children, onClick, value, className }: any) => (
+      <button
+        data-testid={`select-item-${value}`}
+        onClick={onClick}
+        value={value}
+        className={className}
+      >
+        {children}
+      </button>
+    ),
+    SelectValue: ({ placeholder }: any) => (
+      <span data-testid="select-value">{placeholder}</span>
+    ),
+  };
+});
+
+interface TestData extends DataRecord {
+  id: string;
+  name: string;
+  category: string;
+}
+
+describe('[component] GroupingDropdown', () => {
+  let handleGroupByChange: ReturnType<typeof vi.fn>;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    handleGroupByChange = vi.fn();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('returns null when no groupable columns', () => {
+      const columns: DataTableColumn<TestData>[] = [
+        {
+          accessorKey: 'name',
+          header: 'Name',
+          enableGrouping: false,
+        },
+      ];
+
+      const { container } = render(
+        <GroupingDropdown
+          columns={columns}
+          currentGroupBy={null}
+          onGroupByChange={handleGroupByChange}
+        />
+      );
+
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('renders dropdown when groupable columns exist', () => {
+      const columns: DataTableColumn<TestData>[] = [
+        {
+          accessorKey: 'category',
+          header: 'Category',
+          enableGrouping: true,
+        },
+      ];
+
+      render(
+        <GroupingDropdown
+          columns={columns}
+          currentGroupBy={null}
+          onGroupByChange={handleGroupByChange}
+        />
+      );
+
+      expect(screen.getByTestId('select-root')).toBeInTheDocument();
+      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
+    });
+
+    it('renders Group icon', () => {
+      const columns: DataTableColumn<TestData>[] = [
+        {
+          accessorKey: 'category',
+          header: 'Category',
+          enableGrouping: true,
+        },
+      ];
+
+      render(
+        <GroupingDropdown
+          columns={columns}
+          currentGroupBy={null}
+          onGroupByChange={handleGroupByChange}
+        />
+      );
+
+      expect(screen.getByTestId('group-icon')).toBeInTheDocument();
+    });
+
+    it('renders "Grouping" text in trigger', () => {
+      const columns: DataTableColumn<TestData>[] = [
+        {
+          accessorKey: 'category',
+          header: 'Category',
+          enableGrouping: true,
+        },
+      ];
+
+      render(
+        <GroupingDropdown
+          columns={columns}
+          currentGroupBy={null}
+          onGroupByChange={handleGroupByChange}
+        />
+      );
+
+      expect(screen.getByText('Grouping')).toBeInTheDocument();
+    });
+
+    it('renders "No grouping" option', async () => {
+      const user = userEvent.setup();
+      const columns: DataTableColumn<TestData>[] = [
+        {
+          accessorKey: 'category',
+          header: 'Category',
+          enableGrouping: true,
+        },
+      ];
+
+      render(
+        <GroupingDropdown
+          columns={columns}
+          currentGroupBy={null}
+          onGroupByChange={handleGroupByChange}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        expect(screen.getByText('No grouping')).toBeInTheDocument();
+      });
+    });
+
+    it('renders all groupable columns', async () => {
+      const user = userEvent.setup();
+      const columns: DataTableColumn<TestData>[] = [
+        {
+          accessorKey: 'category',
+          header: 'Category',
+          enableGrouping: true,
+        },
+        {
+          accessorKey: 'name',
+          header: 'Name',
+          enableGrouping: false,
+        },
+        {
+          accessorKey: 'status',
+          header: 'Status',
+          enableGrouping: true,
+        },
+      ];
+
+      render(
+        <GroupingDropdown
+          columns={columns}
+          currentGroupBy={null}
+          onGroupByChange={handleGroupByChange}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        expect(screen.getByText('Category')).toBeInTheDocument();
+        expect(screen.getByText('Status')).toBeInTheDocument();
+        expect(screen.queryByText('Name')).not.toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('User Interactions', () => {
+    it('calls onGroupByChange with null when "No grouping" is clicked', async () => {
+      const user = userEvent.setup();
+      const columns: DataTableColumn<TestData>[] = [
+        {
+          accessorKey: 'category',
+          header: 'Category',
+          enableGrouping: true,
+        },
+      ];
+
+      render(
+        <GroupingDropdown
+          columns={columns}
+          currentGroupBy="category"
+          onGroupByChange={handleGroupByChange}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        const items = screen.getAllByTestId('select-item');
+        const noGroupingItem = items.find(item => item.getAttribute('data-value') === 'no-grouping');
+        expect(noGroupingItem).toBeInTheDocument();
+      });
+
+      const items = screen.getAllByTestId('select-item');
+      const noGroupingItem = items.find(item => item.getAttribute('data-value') === 'no-grouping');
+      await user.click(noGroupingItem);
+
+      expect(handleGroupByChange).toHaveBeenCalledTimes(1);
+      expect(handleGroupByChange).toHaveBeenCalledWith(null);
+    });
+
+    it('calls onGroupByChange with column ID when column is clicked', async () => {
+      const user = userEvent.setup();
+      const columns: DataTableColumn<TestData>[] = [
+        {
+          accessorKey: 'category',
+          header: 'Category',
+          enableGrouping: true,
+        },
+      ];
+
+      render(
+        <GroupingDropdown
+          columns={columns}
+          currentGroupBy={null}
+          onGroupByChange={handleGroupByChange}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        const items = screen.getAllByTestId('select-item');
+        const categoryItem = items.find(item => item.getAttribute('data-value') === 'category');
+        expect(categoryItem).toBeInTheDocument();
+      });
+
+      const items = screen.getAllByTestId('select-item');
+      const categoryItem = items.find(item => item.getAttribute('data-value') === 'category');
+      await user.click(categoryItem);
+
+      expect(handleGroupByChange).toHaveBeenCalledTimes(1);
+      expect(handleGroupByChange).toHaveBeenCalledWith('category');
+    });
+
+    it('highlights selected grouping option', async () => {
+      const user = userEvent.setup();
+      const columns: DataTableColumn<TestData>[] = [
+        {
+          accessorKey: 'category',
+          header: 'Category',
+          enableGrouping: true,
+        },
+      ];
+
+      render(
+        <GroupingDropdown
+          columns={columns}
+          currentGroupBy="category"
+          onGroupByChange={handleGroupByChange}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        const items = screen.getAllByTestId('select-item');
+        const categoryItem = items.find(item => item.getAttribute('data-value') === 'category');
+        expect(categoryItem).toBeInTheDocument();
+        expect(categoryItem?.className).toContain('bg-main-50');
+        expect(categoryItem?.className).toContain('text-main-700');
+      });
+    });
+
+    it('highlights "No grouping" when currentGroupBy is null', async () => {
+      const user = userEvent.setup();
+      const columns: DataTableColumn<TestData>[] = [
+        {
+          accessorKey: 'category',
+          header: 'Category',
+          enableGrouping: true,
+        },
+      ];
+
+      render(
+        <GroupingDropdown
+          columns={columns}
+          currentGroupBy={null}
+          onGroupByChange={handleGroupByChange}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        const items = screen.getAllByTestId('select-item');
+        const noGroupingItem = items.find(item => item.getAttribute('data-value') === 'no-grouping');
+        expect(noGroupingItem).toBeInTheDocument();
+        expect(noGroupingItem?.className).toContain('bg-main-50');
+        expect(noGroupingItem?.className).toContain('text-main-700');
+      });
+    });
+  });
+
+  describe('SimpleColumn Support', () => {
+    it('handles SimpleColumn format', () => {
+      const columns: SimpleColumn<TestData>[] = [
+        {
+          key: 'category',
+          label: 'Category',
+        },
+      ];
+
+      const { container } = render(
+        <GroupingDropdown
+          columns={columns}
+          currentGroupBy={null}
+          onGroupByChange={handleGroupByChange}
+        />
+      );
+
+      // SimpleColumn doesn't support grouping by default, so should return null
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('uses SimpleColumn key as accessorKey', () => {
+      const columns: (DataTableColumn<TestData> | SimpleColumn<TestData>)[] = [
+        {
+          key: 'category',
+          label: 'Category',
+        } as SimpleColumn<TestData>,
+        {
+          accessorKey: 'status',
+          header: 'Status',
+          enableGrouping: true,
+        },
+      ];
+
+      render(
+        <GroupingDropdown
+          columns={columns}
+          currentGroupBy={null}
+          onGroupByChange={handleGroupByChange}
+        />
+      );
+
+      // Only the DataTableColumn with enableGrouping should be shown
+      expect(screen.getByTestId('select-root')).toBeInTheDocument();
+    });
+  });
+
+  describe('Column Display Names', () => {
+    it('uses column header as display name', async () => {
+      const user = userEvent.setup();
+      const columns: DataTableColumn<TestData>[] = [
+        {
+          accessorKey: 'category',
+          header: 'Product Category',
+          enableGrouping: true,
+        },
+      ];
+
+      render(
+        <GroupingDropdown
+          columns={columns}
+          currentGroupBy={null}
+          onGroupByChange={handleGroupByChange}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        expect(screen.getByText('Product Category')).toBeInTheDocument();
+      });
+    });
+
+    it('uses accessorKey as display name when header is not available', async () => {
+      const user = userEvent.setup();
+      const columns: DataTableColumn<TestData>[] = [
+        {
+          accessorKey: 'category',
+          header: undefined, // Explicitly no header
+          enableGrouping: true,
+        },
+      ];
+
+      render(
+        <GroupingDropdown
+          columns={columns}
+          currentGroupBy={null}
+          onGroupByChange={handleGroupByChange}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        expect(screen.getByText('category')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty columns array', () => {
+      const { container } = render(
+        <GroupingDropdown
+          columns={[]}
+          currentGroupBy={null}
+          onGroupByChange={handleGroupByChange}
+        />
+      );
+
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('handles columns with undefined accessorKey', () => {
+      const columns: any[] = [
+        {
+          header: 'Test',
+          enableGrouping: true,
+        },
+      ];
+
+      const { container } = render(
+        <GroupingDropdown
+          columns={columns}
+          currentGroupBy={null}
+          onGroupByChange={handleGroupByChange}
+        />
+      );
+
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('handles unknown column format gracefully', () => {
+      const columns: any[] = [
+        {
+          unknown: 'format',
+        },
+      ];
+
+      const { container } = render(
+        <GroupingDropdown
+          columns={columns}
+          currentGroupBy={null}
+          onGroupByChange={handleGroupByChange}
+        />
+      );
+
+      expect(container.firstChild).toBeNull();
+    });
+
+    it('handles multiple groupable columns', async () => {
+      const user = userEvent.setup();
+      const columns: DataTableColumn<TestData>[] = [
+        {
+          accessorKey: 'category',
+          header: 'Category',
+          enableGrouping: true,
+        },
+        {
+          accessorKey: 'status',
+          header: 'Status',
+          enableGrouping: true,
+        },
+        {
+          accessorKey: 'type',
+          header: 'Type',
+          enableGrouping: true,
+        },
+      ];
+
+      render(
+        <GroupingDropdown
+          columns={columns}
+          currentGroupBy={null}
+          onGroupByChange={handleGroupByChange}
+        />
+      );
+
+      const trigger = screen.getByTestId('select-trigger');
+      await user.click(trigger);
+
+      await waitFor(() => {
+        expect(screen.getByText('Category')).toBeInTheDocument();
+        expect(screen.getByText('Status')).toBeInTheDocument();
+        expect(screen.getByText('Type')).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('Custom Styling', () => {
+    it('applies custom className', () => {
+      const columns: DataTableColumn<TestData>[] = [
+        {
+          accessorKey: 'category',
+          header: 'Category',
+          enableGrouping: true,
+        },
+      ];
+
+      render(
+        <GroupingDropdown
+          columns={columns}
+          currentGroupBy={null}
+          onGroupByChange={handleGroupByChange}
+          className="custom-class"
+        />
+      );
+
+      // The className is passed to Button, which is wrapped by SelectTrigger with asChild
+      // When SelectTrigger uses asChild, it clones the Button element
+      // The Button component should receive the className prop and merge it
+      // Note: SelectTrigger may need to preserve the child's className when using asChild
+      const button = screen.getByRole('combobox');
+      
+      // Check if the custom class is present in the button's className
+      // If SelectTrigger properly merges, it should be there
+      // If not, this test documents the current behavior
+      const classNames = button.className || '';
+      expect(classNames).toContain('custom-class');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('provides accessible button structure', () => {
+      const columns: DataTableColumn<TestData>[] = [
+        {
+          accessorKey: 'category',
+          header: 'Category',
+          enableGrouping: true,
+        },
+      ];
+
+      render(
+        <GroupingDropdown
+          columns={columns}
+          currentGroupBy={null}
+          onGroupByChange={handleGroupByChange}
+        />
+      );
+
+      const button = screen.getByRole('combobox');
+      expect(button).toBeInTheDocument();
+    });
+  });
+});
+