veza/apps/web/src/components/ui/collapsible.test.tsx

import { describe, it, expect, vi } from 'vitest';
import { render, screen, fireEvent } from '@testing-library/react';
import { Collapsible } from './collapsible';

describe('Collapsible', () => {
  it('renders trigger content', () => {
    render(
      <Collapsible trigger={<span>Click me</span>}>
        <p>Hidden content</p>
      </Collapsible>
    );
    expect(screen.getByText('Click me')).toBeInTheDocument();
  });

  it('starts collapsed by default', () => {
    render(
      <Collapsible trigger={<span>Toggle</span>}>
        <p>Content</p>
      </Collapsible>
    );
    const button = screen.getByRole('button');
    expect(button).toHaveAttribute('aria-expanded', 'false');
  });

  it('toggles on click', () => {
    render(
      <Collapsible trigger={<span>Toggle</span>}>
        <p>Content</p>
      </Collapsible>
    );
    const button = screen.getByRole('button');
    fireEvent.click(button);
    expect(button).toHaveAttribute('aria-expanded', 'true');
  });

  it('calls onOpenChange when toggled', () => {
    const onOpenChange = vi.fn();
    render(
      <Collapsible trigger={<span>Toggle</span>} onOpenChange={onOpenChange}>
        <p>Content</p>
      </Collapsible>
    );
    fireEvent.click(screen.getByRole('button'));
    expect(onOpenChange).toHaveBeenCalledWith(true);
  });

  it('respects defaultOpen prop', () => {
    render(
      <Collapsible trigger={<span>Toggle</span>} defaultOpen>
        <p>Content</p>
      </Collapsible>
    );
    expect(screen.getByRole('button')).toHaveAttribute('aria-expanded', 'true');
  });

  it('hides chevron when showChevron is false', () => {
    const { container } = render(
      <Collapsible trigger={<span>Toggle</span>} showChevron={false}>
        <p>Content</p>
      </Collapsible>
    );
    // No SVG icon should be rendered
    expect(container.querySelector('svg')).toBeNull();
  });
});