@jmruthers/pace-core 0.6.6 → 0.6.8

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

@@ -1,393 +0,0 @@
-/**
- * @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 baseProps = {
-    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 {...baseProps} />);
-
-      const container = screen.getByText(/Category A/i).closest('div');
-      expect(container).toBeInTheDocument();
-    });
-
-    it('displays group value', () => {
-      render(<GroupHeader {...baseProps} />);
-
-      expect(screen.getByText(/Category A/i)).toBeInTheDocument();
-    });
-
-    it('displays subRowsCount', () => {
-      render(<GroupHeader {...baseProps} subRowsCount={10} />);
-
-      expect(screen.getByText(/\(10 items\)/i)).toBeInTheDocument();
-    });
-
-    it('renders ChevronRight icon when not expanded', () => {
-      render(<GroupHeader {...baseProps} 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 {...baseProps} isExpanded={true} />);
-
-      expect(screen.getByTestId('chevron-down-icon')).toBeInTheDocument();
-      expect(screen.queryByTestId('chevron-right-icon')).not.toBeInTheDocument();
-    });
-
-    it('renders toggle button', () => {
-      render(<GroupHeader {...baseProps} />);
-
-      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
-          {...baseProps}
-          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
-          {...baseProps}
-          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
-          {...baseProps}
-          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
-          {...baseProps}
-          row={row}
-        />
-      );
-
-      expect(screen.getByText(/undefined/i)).toBeInTheDocument();
-    });
-  });
-
-  describe('SubRows Count Display', () => {
-    it('displays correct count for single item', () => {
-      render(<GroupHeader {...baseProps} subRowsCount={1} />);
-
-      expect(screen.getByText(/\(1 items\)/i)).toBeInTheDocument();
-    });
-
-    it('displays correct count for multiple items', () => {
-      render(<GroupHeader {...baseProps} subRowsCount={25} />);
-
-      expect(screen.getByText(/\(25 items\)/i)).toBeInTheDocument();
-    });
-
-    it('displays zero count', () => {
-      render(<GroupHeader {...baseProps} 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
-          {...baseProps}
-          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
-          {...baseProps}
-          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
-          {...baseProps}
-          isExpanded={false}
-        />
-      );
-
-      expect(screen.getByTestId('chevron-right-icon')).toBeInTheDocument();
-
-      rerender(
-        <GroupHeader
-          {...baseProps}
-          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
-          {...baseProps}
-          row={row}
-        />
-      );
-
-      expect(screen.getByText(/\(5 items\)/i)).toBeInTheDocument();
-    });
-
-    it('handles very large subRowsCount', () => {
-      render(<GroupHeader {...baseProps} 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
-          {...baseProps}
-          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
-          {...baseProps}
-          row={row}
-        />
-      );
-
-      expect(screen.getByText(/Category & Type \(Special\)/i)).toBeInTheDocument();
-    });
-  });
-
-  describe('Styling', () => {
-    it('has proper container styling', () => {
-      render(<GroupHeader {...baseProps} />);
-
-      const container = screen.getByText(/Category A/i).closest('div');
-      expect(container).toHaveClass('flex', 'items-center');
-    });
-
-    it('applies background and border styling', () => {
-      render(<GroupHeader {...baseProps} />);
-
-      const container = screen.getByText(/Category A/i).closest('div');
-      expect(container).toHaveClass('bg-muted/50', 'border-b');
-    });
-
-    it('applies font styling', () => {
-      render(<GroupHeader {...baseProps} />);
-
-      const container = screen.getByText(/Category A/i).closest('div');
-      expect(container).toHaveClass('font-medium');
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('has accessible button for toggling', () => {
-      render(<GroupHeader {...baseProps} />);
-
-      const button = screen.getByRole('button');
-      expect(button).toBeInTheDocument();
-    });
-
-    it('displays group information clearly', () => {
-      render(<GroupHeader {...baseProps} />);
-
-      expect(screen.getByText(/Category A/i)).toBeInTheDocument();
-      expect(screen.getByText(/\(5 items\)/i)).toBeInTheDocument();
-    });
-  });
-});
-