school_compare/nextjs-app/__tests__/components/DotStrip.test.tsx

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%');
  });
});