carmanagement/apps/homepage/tests/unit/components/controls.test.tsx

import { Accordion } from '@/components/controls/Accordion';
import { Tabs } from '@/components/controls/Tabs';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { describe, expect, it } from 'vitest';

describe('selection and disclosure controls', () => {
  it('moves tab focus and selection with arrow keys', async () => {
    const user = userEvent.setup();
    render(
      <Tabs
        label="Views"
        items={[
          { id: 'one', label: 'One', content: 'Panel one' },
          { id: 'two', label: 'Two', content: 'Panel two' },
        ]}
      />,
    );
    const first = screen.getByRole('tab', { name: 'One' });
    await user.click(first);
    await user.keyboard('{ArrowRight}');
    expect(screen.getByRole('tab', { name: 'Two' })).toHaveAttribute('aria-selected', 'true');
    expect(screen.getByRole('tabpanel', { name: 'Two' })).toHaveTextContent('Panel two');
  });

  it('uses native disclosure semantics for accordion items', () => {
    render(<Accordion items={[{ id: 'faq', title: 'Question', content: 'Answer' }]} />);
    expect(screen.getByText('Question').closest('summary')).toBeInTheDocument();
    expect(screen.getByText('Answer').closest('details')).not.toHaveAttribute('open');
  });
});