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

import { render, screen } from '@testing-library/react';
import { DestinationsSection } from '@/components/school/DestinationsSection';
import type { DestinationPhase } from '@/lib/types';
import type { DestinationCategory, DestinationStatus } from '@/lib/destinations';

const cell = (
  category: DestinationCategory,
  pupils: number | null,
  status: DestinationStatus = 'published',
) => ({
  category, pupils,
  percentage: pupils === null ? null : (pupils / 180) * 100,
  status,
});

const ALL_PUBLISHED = [
  cell('school_sixth_form', 75), cell('sixth_form_college', 21),
  cell('further_education', 55), cell('other_education', 6),
  cell('apprenticeship', 8), cell('employment', 6),
  cell('not_sustained', 5), cell('not_captured', 4),
];

const fullPhase: DestinationPhase = {
  cohort_year: '2022/23',
  groups: { all: { cohort: 180, categories: ALL_PUBLISHED, aggregates: {} } },
};

const suppressedPhase: DestinationPhase = {
  cohort_year: '2022/23',
  groups: {
    all: {
      cohort: 180,
      categories: [
        cell('school_sixth_form', 75), cell('sixth_form_college', null, 'suppressed'),
        cell('further_education', 55), cell('other_education', 6),
        cell('apprenticeship', 8), cell('employment', 6),
        cell('not_sustained', 5), cell('not_captured', 4),
      ],
      aggregates: {},
    },
  },
};

describe('DestinationsSection', () => {
  it('dates its own cohort so it is not read as stale next to the GCSE section', () => {
    render(<DestinationsSection destinations={fullPhase} />);
    expect(screen.getByText(/2022\/23/)).toBeInTheDocument();
  });

  it('renders one bar segment per published category', () => {
    const { container } = render(<DestinationsSection destinations={fullPhase} />);
    expect(container.querySelectorAll('[data-destination-segment]')).toHaveLength(8);
  });

  it('renders NO bar at all when a category is withheld', () => {
    const { container } = render(<DestinationsSection destinations={suppressedPhase} />);
    // R1: a bar with a gap in it publishes the withheld figure by its width.
    expect(container.querySelectorAll('[data-destination-segment]')).toHaveLength(0);
    expect(screen.getAllByText(/withheld/i).length).toBeGreaterThan(0);
  });

  it('never states the remainder for a partially suppressed group', () => {
    const { container } = render(<DestinationsSection destinations={suppressedPhase} />);
    // 180 cohort - 159 published = 21, the withheld figure. It must appear nowhere.
    expect(container.textContent).not.toMatch(/\b21\b/);
  });

  it('shows a card value for a group whose components are all published', () => {
    render(<DestinationsSection destinations={fullPhase} />);
    // academic route = 75 + 21 = 96 of 180 = 53%
    expect(screen.getByText('53%')).toBeInTheDocument();
  });

  it('refuses a card value when one of its components is withheld', () => {
    render(<DestinationsSection destinations={suppressedPhase} />);
    // academic route needs sixth_form_college, which is suppressed.
    expect(screen.getByText(/not published/i)).toBeInTheDocument();
    expect(screen.queryByText('53%')).not.toBeInTheDocument();
  });

  it('never claims a pupil stayed at this school', () => {
    const { container } = render(<DestinationsSection destinations={fullPhase} />);
    // The published file reports destination TYPE, never destination institution.
    expect(container.textContent).not.toMatch(/stayed on (here|at this school)/i);
  });

  it('renders nothing when no group carries categories', () => {
    const empty: DestinationPhase = { cohort_year: '2022/23', groups: {} };
    const { container } = render(<DestinationsSection destinations={empty} />);
    expect(container.firstChild).toBeNull();
  });
});