@jmruthers/pace-core 0.2.7 → 0.5.1

package/src/components/Select/__tests__/Select.unit.test.tsx

@@ -1,647 +0,0 @@
-import React from 'react';
-import { screen, fireEvent, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { renderWithProviders } from '../../../__tests__/shared';
-import {
-  Select,
-  SelectGroup,
-  SelectValue,
-  SelectTrigger,
-  SelectContent,
-  SelectLabel,
-  SelectItem,
-  SelectSeparator,
-} from '../Select';
-
-// --- CONTEXT-BASED MOCK FOR RADIX SELECT ---
-const SelectValueChangeContext = React.createContext<((value: string) => void) | undefined>(undefined);
-
-vi.mock('@radix-ui/react-select', async () => {
-  const actual = await vi.importActual('@radix-ui/react-select');
-  return {
-    ...actual,
-    Root: ({ children, onValueChange, ...props }: any) => (
-      <SelectValueChangeContext.Provider value={onValueChange}>
-        <div data-testid="select-root" {...props}>{children}</div>
-      </SelectValueChangeContext.Provider>
-    ),
-    Trigger: React.forwardRef(({ children, ...props }: any, ref) => (
-      <button
-        ref={ref}
-        data-testid="select-trigger"
-        onClick={() => props.onClick?.()}
-        {...props}
-      >
-        {children}
-      </button>
-    )),
-    Content: ({ children, ...props }: any) => (
-      <div data-testid="select-content" {...props}>
-        {children}
-      </div>
-    ),
-    Viewport: ({ children, ...props }: any) => (
-      <div data-testid="select-viewport" {...props}>
-        {children}
-      </div>
-    ),
-    Item: ({ children, value, onClick, ...props }: any) => {
-      const onValueChange = React.useContext(SelectValueChangeContext);
-      return (
-        <div
-          data-testid="select-item"
-          data-value={value}
-          onClick={() => {
-            onClick?.();
-            if (onValueChange) onValueChange(value);
-          }}
-          {...props}
-        >
-          {children}
-        </div>
-      );
-    },
-    ItemText: ({ children, ...props }: any) => (
-      <span data-testid="select-item-text" {...props}>
-        {children}
-      </span>
-    ),
-    ItemIndicator: ({ children, ...props }: any) => (
-      <span data-testid="select-item-indicator" {...props}>
-        {children}
-      </span>
-    ),
-    Value: ({ children, ...props }: any) => (
-      <span data-testid="select-value" {...props}>
-        {children}
-      </span>
-    ),
-    Label: ({ children, ...props }: any) => (
-      <div data-testid="select-label" {...props}>
-        {children}
-      </div>
-    ),
-    Group: ({ children, ...props }: any) => (
-      <div data-testid="select-group" {...props}>
-        {children}
-      </div>
-    ),
-    Separator: ({ ...props }: any) => (
-      <div data-testid="select-separator" {...props} />
-    ),
-    Icon: ({ children, ...props }: any) => (
-      <span data-testid="select-icon" {...props}>
-        {children}
-      </span>
-    ),
-    Portal: ({ children }: any) => <>{children}</>,
-  };
-});
-
-describe('Select Component', () => {
-  const user = userEvent.setup();
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('Select Root', () => {
-    it('renders with default props', () => {
-    renderWithProviders(
-      <Select>
-        <SelectTrigger>
-          <SelectValue placeholder="Select an option" />
-        </SelectTrigger>
-      </Select>
-    );
-      
-      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
-    });
-
-    it('handles value changes', async () => {
-      const onValueChange = vi.fn();
-      renderWithProviders(
-        <Select onValueChange={onValueChange}>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      const options = screen.getAllByTestId('select-item');
-      await user.click(options[0]);
-      
-      expect(onValueChange).toHaveBeenCalledWith('option1');
-    });
-
-    it('applies custom props', () => {
-      renderWithProviders(
-        <Select data-testid="custom-select" disabled>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-        </Select>
-      );
-      
-      const select = screen.getByTestId('custom-select');
-      expect(select).toBeInTheDocument();
-      // The disabled state is handled by the trigger being disabled, not a data attribute
-      const trigger = screen.getByTestId('select-trigger');
-      expect(trigger).toBeDisabled();
-    });
-  });
-
-  describe('SelectTrigger', () => {
-    it('renders with default styling', () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-        </Select>
-      );
-      
-      const trigger = screen.getByTestId('select-trigger');
-      expect(trigger).toBeInTheDocument();
-      expect(trigger).toHaveClass('inline-flex', 'items-center', 'gap-2');
-    });
-
-    it('applies custom className', () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger className="custom-trigger-class">
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-        </Select>
-      );
-      
-      const trigger = screen.getByTestId('select-trigger');
-      expect(trigger).toHaveClass('custom-trigger-class');
-    });
-
-    it('forwards ref correctly', () => {
-      const ref = React.createRef<HTMLButtonElement>();
-      renderWithProviders(
-        <Select>
-          <SelectTrigger ref={ref}>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-        </Select>
-      );
-      
-      expect(ref.current).toBeInstanceOf(HTMLButtonElement);
-    });
-
-    it('handles disabled state', () => {
-      renderWithProviders(
-        <Select disabled>
-          <SelectTrigger disabled>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-        </Select>
-      );
-      
-      const trigger = screen.getByTestId('select-trigger');
-      expect(trigger).toBeDisabled();
-      expect(trigger).toHaveClass('disabled:pointer-events-none', 'disabled:opacity-50');
-    });
-
-    it('renders with children and icon', () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-        </Select>
-      );
-      
-      expect(screen.getByTestId('select-value')).toBeInTheDocument();
-      // The chevron icon is rendered as an SVG, not with a test ID
-      expect(screen.getByRole('combobox')).toBeInTheDocument();
-    });
-  });
-
-  describe('SelectContent', () => {
-    it('renders with default styling', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-      
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      const content = screen.getByTestId('select-content');
-      expect(content).toBeInTheDocument();
-      expect(content).toHaveClass('absolute', 'z-[99999]');
-    });
-
-    it('applies custom className', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent className="custom-content-class">
-            <SelectItem value="option1">Option 1</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-      
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      const content = screen.getByTestId('select-content');
-      expect(content).toHaveClass('custom-content-class');
-    });
-
-    it('handles position prop', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent position="item-aligned">
-            <SelectItem value="option1">Option 1</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-      
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      const content = screen.getByTestId('select-content');
-      // The position is handled by CSS classes in our mock, not data attributes
-      expect(content).toBeInTheDocument();
-    });
-
-    it('renders viewport with children', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-      
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      // The viewport is part of the content in our mock
-      expect(screen.getByTestId('select-content')).toBeInTheDocument();
-      expect(screen.getByTestId('select-item')).toBeInTheDocument();
-    });
-  });
-
-  describe('SelectItem', () => {
-    it('renders with default styling', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-      
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      const item = screen.getByTestId('select-item');
-      expect(item).toBeInTheDocument();
-      expect(item).toHaveClass('relative', 'flex', 'cursor-pointer');
-      expect(item).toHaveAttribute('data-value', 'option1');
-    });
-
-    it('applies custom className', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1" className="custom-item-class">
-              Option 1
-            </SelectItem>
-          </SelectContent>
-        </Select>
-      );
-      
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      const item = screen.getByTestId('select-item');
-      expect(item).toHaveClass('custom-item-class');
-    });
-
-    it('handles disabled state', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1" disabled>
-              Option 1
-            </SelectItem>
-          </SelectContent>
-        </Select>
-      );
-      
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      const item = screen.getByTestId('select-item');
-      expect(item).toHaveAttribute('data-disabled', 'true');
-    });
-
-    it('renders item text and indicator', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-      
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      // The item text is directly in the select-item element, not a separate test ID
-      expect(screen.getByTestId('select-item')).toBeInTheDocument();
-      expect(screen.getByText('Option 1')).toBeInTheDocument();
-    });
-
-    it('handles click events', async () => {
-      const onValueChange = vi.fn();
-      renderWithProviders(
-        <Select onValueChange={onValueChange}>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">
-              Option 1
-            </SelectItem>
-          </SelectContent>
-        </Select>
-      );
-      
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      const item = screen.getByTestId('select-item');
-      await user.click(item);
-      
-      expect(onValueChange).toHaveBeenCalledWith('option1');
-    });
-  });
-
-  describe('SelectValue', () => {
-    it('renders placeholder when no value', () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-        </Select>
-      );
-      
-      const value = screen.getByTestId('select-value');
-      expect(value).toHaveTextContent('Select an option');
-    });
-
-    it('renders with custom className', () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" className="custom-value-class" />
-          </SelectTrigger>
-        </Select>
-      );
-      
-      const value = screen.getByTestId('select-value');
-      expect(value).toBeInTheDocument();
-      // The className is applied to the span element in our mock, but may not be visible in test
-      expect(value).toBeInTheDocument();
-    });
-  });
-
-  describe('SelectLabel', () => {
-    it('renders with default styling', () => {
-      renderWithProviders(<SelectLabel>Select Label</SelectLabel>);
-      
-      const label = screen.getByTestId('select-label');
-      expect(label).toBeInTheDocument();
-      expect(label).toHaveClass('px-2', 'py-1.5', 'text-sm', 'font-semibold');
-    });
-
-    it('applies custom className', () => {
-      renderWithProviders(
-        <SelectLabel className="custom-label-class">Select Label</SelectLabel>
-      );
-      
-      const label = screen.getByTestId('select-label');
-      expect(label).toHaveClass('custom-label-class');
-    });
-  });
-
-  describe('SelectGroup', () => {
-    it('renders with children', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectGroup>
-              <SelectItem value="option1">Option 1</SelectItem>
-              <SelectItem value="option2">Option 2</SelectItem>
-            </SelectGroup>
-          </SelectContent>
-        </Select>
-      );
-      
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      expect(screen.getByTestId('select-group')).toBeInTheDocument();
-      expect(screen.getAllByTestId('select-item')).toHaveLength(2);
-    });
-
-    it('applies custom props', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectGroup data-testid="custom-group">
-              <SelectItem value="option1">Option 1</SelectItem>
-            </SelectGroup>
-          </SelectContent>
-        </Select>
-      );
-      
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      expect(screen.getByTestId('select-group')).toBeInTheDocument();
-    });
-  });
-
-  describe('SelectSeparator', () => {
-    it('renders with default styling', () => {
-      renderWithProviders(<SelectSeparator />);
-      
-      const separator = screen.getByTestId('select-separator');
-      expect(separator).toBeInTheDocument();
-      expect(separator).toHaveClass('my-1', 'h-px', 'bg-sec-200');
-    });
-
-    it('applies custom className', () => {
-      renderWithProviders(<SelectSeparator className="custom-separator-class" />);
-      
-      const separator = screen.getByTestId('select-separator');
-      expect(separator).toHaveClass('custom-separator-class');
-    });
-  });
-
-  describe('Integration', () => {
-    it('renders complete select component', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectLabel>Options</SelectLabel>
-            <SelectGroup>
-              <SelectItem value="option1">Option 1</SelectItem>
-              <SelectItem value="option2">Option 2</SelectItem>
-            </SelectGroup>
-            <SelectSeparator />
-            <SelectItem value="option3">Option 3</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-      
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
-      expect(screen.getByTestId('select-content')).toBeInTheDocument();
-      // The viewport is part of the content in our mock
-      expect(screen.getByTestId('select-content')).toBeInTheDocument();
-      expect(screen.getByTestId('select-label')).toBeInTheDocument();
-      expect(screen.getByTestId('select-group')).toBeInTheDocument();
-      expect(screen.getAllByTestId('select-item')).toHaveLength(3);
-      expect(screen.getByTestId('select-separator')).toBeInTheDocument();
-    });
-
-    it('handles keyboard navigation', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="option1">Option 1</SelectItem>
-            <SelectItem value="option2">Option 2</SelectItem>
-          </SelectContent>
-        </Select>
-      );
-
-      const trigger = screen.getByTestId('select-trigger');
-      trigger.focus();
-      
-      expect(trigger).toHaveFocus();
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles empty children', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            {/* Empty content */}
-          </SelectContent>
-        </Select>
-      );
-      
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      expect(screen.getByTestId('select-content')).toBeInTheDocument();
-    });
-
-    it('handles null children', async () => {
-      renderWithProviders(
-        <Select>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-          <SelectContent>
-            {null}
-          </SelectContent>
-        </Select>
-      );
-      
-      // Click trigger to open the select
-      const trigger = screen.getByTestId('select-trigger');
-      await user.click(trigger);
-      
-      expect(screen.getByTestId('select-content')).toBeInTheDocument();
-    });
-
-    it('handles undefined value', () => {
-      renderWithProviders(
-        <Select value={undefined}>
-          <SelectTrigger>
-            <SelectValue placeholder="Select an option" />
-          </SelectTrigger>
-        </Select>
-      );
-      
-      expect(screen.getByTestId('select-trigger')).toBeInTheDocument();
-    });
-  });
-});