@jmruthers/pace-core 0.5.115 → 0.5.116

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

@@ -0,0 +1,393 @@
+/**
+ * @file GroupHeader Component Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components/__tests__
+ * @since 0.4.0
+ * 
+ * Comprehensive test suite for GroupHeader component following testing guidelines.
+ * Tests cover all major functionality, edge cases, and user interactions.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { GroupHeader } from '../GroupHeader';
+import type { Row } from '@tanstack/react-table';
+
+// Mock lucide-react icons
+vi.mock('lucide-react', () => ({
+  ChevronDown: ({ className }: { className?: string }) => (
+    <div data-testid="chevron-down-icon" className={className}>ChevronDown</div>
+  ),
+  ChevronRight: ({ className }: { className?: string }) => (
+    <div data-testid="chevron-right-icon" className={className}>ChevronRight</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>
+  ),
+}));
+
+interface TestData {
+  id: string;
+  name: string;
+  category: string;
+}
+
+const createMockRow = (overrides: Partial<Row<TestData>> = {}): Row<TestData> => ({
+  id: 'row-1',
+  index: 0,
+  depth: 0,
+  original: { id: '1', name: 'Test', category: 'Category A' } as TestData,
+  getValue: vi.fn((columnId: string) => {
+    if (columnId === 'category') return 'Category A';
+    return 'value';
+  }),
+  renderValue: vi.fn(),
+  getUniqueValues: vi.fn(),
+  toggleSelected: vi.fn(),
+  getIsSelected: vi.fn(() => false),
+  getIsSomeSelected: vi.fn(() => false),
+  getIsAllSubRowsSelected: vi.fn(() => false),
+  getCanSelect: vi.fn(() => true),
+  getCanSelectSubRows: vi.fn(() => false),
+  getCanMultiSelect: vi.fn(() => true),
+  getToggleSelectedHandler: vi.fn(),
+  getParentRow: vi.fn(),
+  getParentRows: vi.fn(),
+  subRows: [],
+  getLeafValues: vi.fn(),
+  getAllCells: vi.fn(),
+  getLeftVisibleCells: vi.fn(),
+  getRightVisibleCells: vi.fn(),
+  getVisibleCells: vi.fn(),
+  getCenterVisibleCells: vi.fn(),
+  ...overrides,
+} as unknown as Row<TestData>);
+
+describe('[component] GroupHeader', () => {
+  const defaultProps = {
+    row: createMockRow(),
+    groupByColumn: 'category',
+    isExpanded: false,
+    onToggle: vi.fn(),
+    subRowsCount: 5,
+  };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('Rendering', () => {
+    it('renders group header container', () => {
+      render(<GroupHeader {...defaultProps} />);
+
+      const container = screen.getByText(/Category A/i).closest('div');
+      expect(container).toBeInTheDocument();
+    });
+
+    it('displays group value', () => {
+      render(<GroupHeader {...defaultProps} />);
+
+      expect(screen.getByText(/Category A/i)).toBeInTheDocument();
+    });
+
+    it('displays subRowsCount', () => {
+      render(<GroupHeader {...defaultProps} subRowsCount={10} />);
+
+      expect(screen.getByText(/\(10 items\)/i)).toBeInTheDocument();
+    });
+
+    it('renders ChevronRight icon when not expanded', () => {
+      render(<GroupHeader {...defaultProps} isExpanded={false} />);
+
+      expect(screen.getByTestId('chevron-right-icon')).toBeInTheDocument();
+      expect(screen.queryByTestId('chevron-down-icon')).not.toBeInTheDocument();
+    });
+
+    it('renders ChevronDown icon when expanded', () => {
+      render(<GroupHeader {...defaultProps} isExpanded={true} />);
+
+      expect(screen.getByTestId('chevron-down-icon')).toBeInTheDocument();
+      expect(screen.queryByTestId('chevron-right-icon')).not.toBeInTheDocument();
+    });
+
+    it('renders toggle button', () => {
+      render(<GroupHeader {...defaultProps} />);
+
+      const button = screen.getByRole('button');
+      expect(button).toBeInTheDocument();
+    });
+  });
+
+  describe('Group Value Display', () => {
+    it('displays correct group value from row', () => {
+      const row = createMockRow({
+        getValue: vi.fn((columnId: string) => {
+          if (columnId === 'category') return 'Electronics';
+          return 'value';
+        }),
+      });
+
+      render(
+        <GroupHeader
+          {...defaultProps}
+          row={row}
+        />
+      );
+
+      expect(screen.getByText(/Electronics/i)).toBeInTheDocument();
+    });
+
+    it('converts group value to string', () => {
+      const row = createMockRow({
+        getValue: vi.fn((columnId: string) => {
+          if (columnId === 'category') return 123;
+          return 'value';
+        }),
+      });
+
+      render(
+        <GroupHeader
+          {...defaultProps}
+          row={row}
+        />
+      );
+
+      expect(screen.getByText(/123/i)).toBeInTheDocument();
+    });
+
+    it('handles null group value', () => {
+      const row = createMockRow({
+        getValue: vi.fn((columnId: string) => {
+          if (columnId === 'category') return null;
+          return 'value';
+        }),
+      });
+
+      render(
+        <GroupHeader
+          {...defaultProps}
+          row={row}
+        />
+      );
+
+      expect(screen.getByText(/null/i)).toBeInTheDocument();
+    });
+
+    it('handles undefined group value', () => {
+      const row = createMockRow({
+        getValue: vi.fn((columnId: string) => {
+          if (columnId === 'category') return undefined;
+          return 'value';
+        }),
+      });
+
+      render(
+        <GroupHeader
+          {...defaultProps}
+          row={row}
+        />
+      );
+
+      expect(screen.getByText(/undefined/i)).toBeInTheDocument();
+    });
+  });
+
+  describe('SubRows Count Display', () => {
+    it('displays correct count for single item', () => {
+      render(<GroupHeader {...defaultProps} subRowsCount={1} />);
+
+      expect(screen.getByText(/\(1 items\)/i)).toBeInTheDocument();
+    });
+
+    it('displays correct count for multiple items', () => {
+      render(<GroupHeader {...defaultProps} subRowsCount={25} />);
+
+      expect(screen.getByText(/\(25 items\)/i)).toBeInTheDocument();
+    });
+
+    it('displays zero count', () => {
+      render(<GroupHeader {...defaultProps} subRowsCount={0} />);
+
+      expect(screen.getByText(/\(0 items\)/i)).toBeInTheDocument();
+    });
+  });
+
+  describe('User Interactions', () => {
+    it('calls onToggle when button is clicked', async () => {
+      const user = userEvent.setup();
+      const handleToggle = vi.fn();
+
+      render(
+        <GroupHeader
+          {...defaultProps}
+          onToggle={handleToggle}
+        />
+      );
+
+      const button = screen.getByRole('button');
+      await user.click(button);
+
+      expect(handleToggle).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onToggle multiple times on rapid clicks', async () => {
+      const user = userEvent.setup();
+      const handleToggle = vi.fn();
+
+      render(
+        <GroupHeader
+          {...defaultProps}
+          onToggle={handleToggle}
+        />
+      );
+
+      const button = screen.getByRole('button');
+      await user.click(button);
+      await user.click(button);
+      await user.click(button);
+
+      expect(handleToggle).toHaveBeenCalledTimes(3);
+    });
+
+    it('updates icon when expanded state changes', () => {
+      const { rerender } = render(
+        <GroupHeader
+          {...defaultProps}
+          isExpanded={false}
+        />
+      );
+
+      expect(screen.getByTestId('chevron-right-icon')).toBeInTheDocument();
+
+      rerender(
+        <GroupHeader
+          {...defaultProps}
+          isExpanded={true}
+        />
+      );
+
+      expect(screen.getByTestId('chevron-down-icon')).toBeInTheDocument();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles empty group value', () => {
+      const row = createMockRow({
+        getValue: vi.fn((columnId: string) => {
+          if (columnId === 'category') return '';
+          return 'value';
+        }),
+      });
+
+      render(
+        <GroupHeader
+          {...defaultProps}
+          row={row}
+        />
+      );
+
+      expect(screen.getByText(/\(5 items\)/i)).toBeInTheDocument();
+    });
+
+    it('handles very large subRowsCount', () => {
+      render(<GroupHeader {...defaultProps} subRowsCount={999999} />);
+
+      expect(screen.getByText(/\(999999 items\)/i)).toBeInTheDocument();
+    });
+
+    it('handles different groupByColumn values', () => {
+      const row = createMockRow({
+        getValue: vi.fn((columnId: string) => {
+          if (columnId === 'status') return 'Active';
+          return 'value';
+        }),
+      });
+
+      render(
+        <GroupHeader
+          {...defaultProps}
+          row={row}
+          groupByColumn="status"
+        />
+      );
+
+      expect(screen.getByText(/Active/i)).toBeInTheDocument();
+    });
+
+    it('handles special characters in group value', () => {
+      const row = createMockRow({
+        getValue: vi.fn((columnId: string) => {
+          if (columnId === 'category') return 'Category & Type (Special)';
+          return 'value';
+        }),
+      });
+
+      render(
+        <GroupHeader
+          {...defaultProps}
+          row={row}
+        />
+      );
+
+      expect(screen.getByText(/Category & Type \(Special\)/i)).toBeInTheDocument();
+    });
+  });
+
+  describe('Styling', () => {
+    it('has proper container styling', () => {
+      render(<GroupHeader {...defaultProps} />);
+
+      const container = screen.getByText(/Category A/i).closest('div');
+      expect(container).toHaveClass('flex', 'items-center');
+    });
+
+    it('applies background and border styling', () => {
+      render(<GroupHeader {...defaultProps} />);
+
+      const container = screen.getByText(/Category A/i).closest('div');
+      expect(container).toHaveClass('bg-muted/50', 'border-b');
+    });
+
+    it('applies font styling', () => {
+      render(<GroupHeader {...defaultProps} />);
+
+      const container = screen.getByText(/Category A/i).closest('div');
+      expect(container).toHaveClass('font-medium');
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has accessible button for toggling', () => {
+      render(<GroupHeader {...defaultProps} />);
+
+      const button = screen.getByRole('button');
+      expect(button).toBeInTheDocument();
+    });
+
+    it('displays group information clearly', () => {
+      render(<GroupHeader {...defaultProps} />);
+
+      expect(screen.getByText(/Category A/i)).toBeInTheDocument();
+      expect(screen.getByText(/\(5 items\)/i)).toBeInTheDocument();
+    });
+  });
+});
+