49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
|
import { render, screen } from '@testing-library/react';
|
||
|
|
|
||
|
|
import { DotStrip } from '@/components/DotStrip';
|
||
|
|
|
||
|
|
describe('DotStrip', () => {
|
||
|
|
it('enumerates anchor and school values in the aria-label', () => {
|
||
|
|
render(
|
||
|
|
<DotStrip
|
||
|
|
label="Reading"
|
||
|
|
values={[91, 92, 87]}
|
||
|
|
schoolNames={['Barclay', 'Elmhurst', 'Plumcroft']}
|
||
|
|
anchor={{ value: 75, label: 'England 75%' }}
|
||
|
|
/>,
|
||
|
|
);
|
||
|
|
const strip = screen.getByRole('img');
|
||
|
|
expect(strip).toHaveAccessibleName(
|
||
|
|
'Reading: England 75%, Barclay 91%, Elmhurst 92%, Plumcroft 87%',
|
||
|
|
);
|
||
|
|
});
|
||
|
|
|
||
|
|
it('renders the anchor tick when provided and not otherwise', () => {
|
||
|
|
const { rerender } = render(
|
||
|
|
<DotStrip
|
||
|
|
label="Reading"
|
||
|
|
values={[91]}
|
||
|
|
schoolNames={['Barclay']}
|
||
|
|
anchor={{ value: 75, label: 'England 75%' }}
|
||
|
|
/>,
|
||
|
|
);
|
||
|
|
expect(screen.getByText('England 75%')).toBeInTheDocument();
|
||
|
|
|
||
|
|
rerender(
|
||
|
|
<DotStrip label="Science" values={[95]} schoolNames={['Barclay']} anchor={null} />,
|
||
|
|
);
|
||
|
|
expect(screen.queryByText(/England/)).not.toBeInTheDocument();
|
||
|
|
});
|
||
|
|
|
||
|
|
it('skips schools without a value', () => {
|
||
|
|
render(
|
||
|
|
<DotStrip
|
||
|
|
label="Maths"
|
||
|
|
values={[91, null]}
|
||
|
|
schoolNames={['Barclay', 'Elmhurst']}
|
||
|
|
/>,
|
||
|
|
);
|
||
|
|
expect(screen.getByRole('img')).toHaveAccessibleName('Maths: Barclay 91%');
|
||
|
|
});
|
||
|
|
});
|