root
32 lines
1.3 KiB
TypeScript
32 lines
1.3 KiB
TypeScript
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');
|
|
});
|
|
});
|