65 lines
2.4 KiB
TypeScript
65 lines
2.4 KiB
TypeScript
|
import { render, screen } from '@testing-library/react';
|
||
|
|
import userEvent from '@testing-library/user-event';
|
||
|
|
import { InfoPopover } from '@/components/InfoPopover';
|
||
|
|
|
||
|
|
describe('InfoPopover', () => {
|
||
|
|
it('renders nothing when there is no plain content', () => {
|
||
|
|
const { container } = render(<InfoPopover label="X" />);
|
||
|
|
expect(container).toBeEmptyDOMElement();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('renders a labelled, collapsed trigger button', () => {
|
||
|
|
render(<InfoPopover plain="what it means" ariaLabel="Reading score" />);
|
||
|
|
const btn = screen.getByRole('button', { name: 'Reading score' });
|
||
|
|
expect(btn).toHaveAttribute('aria-expanded', 'false');
|
||
|
|
expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('opens on click and shows label, plain and detail', async () => {
|
||
|
|
const user = userEvent.setup();
|
||
|
|
render(
|
||
|
|
<InfoPopover
|
||
|
|
label="Reading, Writing & Maths"
|
||
|
|
plain="% reaching the expected standard"
|
||
|
|
detail="National average ~60%"
|
||
|
|
ariaLabel="RWM"
|
||
|
|
/>,
|
||
|
|
);
|
||
|
|
await user.click(screen.getByRole('button', { name: 'RWM' }));
|
||
|
|
const tip = await screen.findByRole('tooltip');
|
||
|
|
expect(tip).toHaveTextContent('Reading, Writing & Maths');
|
||
|
|
expect(tip).toHaveTextContent('% reaching the expected standard');
|
||
|
|
expect(tip).toHaveTextContent('National average ~60%');
|
||
|
|
expect(screen.getByRole('button', { name: 'RWM' })).toHaveAttribute(
|
||
|
|
'aria-expanded',
|
||
|
|
'true',
|
||
|
|
);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('closes again on a second click', async () => {
|
||
|
|
const user = userEvent.setup();
|
||
|
|
render(<InfoPopover plain="body" ariaLabel="Info" />);
|
||
|
|
const btn = screen.getByRole('button', { name: 'Info' });
|
||
|
|
await user.click(btn);
|
||
|
|
expect(await screen.findByRole('tooltip')).toBeInTheDocument();
|
||
|
|
await user.click(btn);
|
||
|
|
expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('closes on Escape', async () => {
|
||
|
|
const user = userEvent.setup();
|
||
|
|
render(<InfoPopover plain="body" ariaLabel="Info" />);
|
||
|
|
await user.click(screen.getByRole('button', { name: 'Info' }));
|
||
|
|
expect(await screen.findByRole('tooltip')).toBeInTheDocument();
|
||
|
|
await user.keyboard('{Escape}');
|
||
|
|
expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('defaults the accessible name when no ariaLabel is given', () => {
|
||
|
|
render(<InfoPopover plain="body" />);
|
||
|
|
expect(
|
||
|
|
screen.getByRole('button', { name: 'More information' }),
|
||
|
|
).toBeInTheDocument();
|
||
|
|
});
|
||
|
|
});
|