@jmruthers/pace-core 0.6.10 → 0.6.11

package/src/components/DataTable/ui/toolbar/GroupingDropdown.test.tsx

@@ -0,0 +1,621 @@
+/**
+ * @file GroupingDropdown Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components
+ * @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
+// When asChild, clone child and add data-testid/role so tests can find the trigger
+vi.mock('../../Select/Select', async () => {
+  const actual = await vi.importActual('../../Select/Select');
+  const React = await import('react');
+  return {
+    ...actual,
+    Select: ({ children, className }: any) => (
+      <div data-testid="select-root" className={className}>
+        {children}
+      </div>
+    ),
+    SelectTrigger: ({ children, asChild, className }: any) => {
+      if (asChild && React.isValidElement(children)) {
+        return React.cloneElement(children as React.ReactElement<any>, {
+          'data-testid': 'select-trigger',
+          role: 'combobox',
+          className: [className, (children as React.ReactElement<any>).props?.className].filter(Boolean).join(' '),
+        });
+      }
+      return <button data-testid="select-trigger" role="combobox" 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"
+        data-value={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');
+      if (noGroupingItem) {
+        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');
+      if (categoryItem) {
+        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');
+      });
+    });
+
+    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');
+      });
+    });
+  });
+
+  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 to button', () => {
+      const columns: DataTableColumn<TestData>[] = [
+        {
+          accessorKey: 'category',
+          header: 'Category',
+          enableGrouping: true,
+        },
+      ];
+
+      render(
+        <GroupingDropdown
+          columns={columns}
+          currentGroupBy={null}
+          onGroupByChange={handleGroupByChange}
+          className="custom-class"
+        />
+      );
+
+      const button = screen.getByTestId('select-trigger');
+      expect(button.className).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();
+    });
+  });
+});
+