Compare commits
38
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
41d3f3b971 | ||
|
|
c013265cb4 | ||
|
|
ad9d3b67f7 | ||
|
|
ca47d08186 | ||
|
|
62a6bfaf0c | ||
|
|
e344298440 | ||
|
|
8020191832 | ||
|
|
5f9caad7f4 | ||
|
|
e65c93b68e | ||
|
|
e3f21a5bc7 | ||
|
|
dea435a906 | ||
|
|
dd5b48e612 | ||
|
|
a88139a539 | ||
|
|
9b765125ad | ||
|
|
ccf0892a0e | ||
|
|
0450f8ecd6 | ||
|
|
27d83f9bd0 | ||
|
|
19c574edb0 | ||
|
|
e78ec14e2e | ||
|
|
fb3ef7d2b9 | ||
|
|
49ac96b487 | ||
|
|
214c80663e | ||
|
|
84caee9f72 | ||
|
|
c992d7f3b9 | ||
|
|
17bfb4a3f7 | ||
|
|
15b8923e60 | ||
|
|
354244f755 | ||
|
|
3e2fa4a419 | ||
|
|
50546ecf22 | ||
|
|
99d62ef748 | ||
|
|
68452681f8 | ||
|
|
0cc4f52816 | ||
|
|
eb13ab0b5e | ||
|
|
fa49164143 | ||
|
|
cf3c773f86 | ||
|
|
4b54c25943 | ||
|
|
e7645d1ba5 | ||
|
|
29b5f85952 |
No files matched your search
+105
-15
@@ -40,7 +40,15 @@ from .data_loader import (
|
||||
from .data_loader import get_data_info as get_db_info
|
||||
from . import flags
|
||||
from .places import build_place_index, build_place_registry, places_for_urn
|
||||
from .schemas import METRIC_DEFINITIONS, PHASE_GROUPS, RANKING_COLUMNS, SCHOOL_COLUMNS
|
||||
from .schemas import METRIC_DEFINITIONS, PHASE_GROUPS, PHASE_ORDER, RANKING_COLUMNS, SCHOOL_COLUMNS
|
||||
from .school_groups import (
|
||||
FAITH_GROUPS,
|
||||
FAITH_KEYS,
|
||||
TYPE_GROUPS,
|
||||
faith_groups_for,
|
||||
type_group_for,
|
||||
type_group_key,
|
||||
)
|
||||
from .nearby_schools import select_nearby
|
||||
from .utils import clean_for_json, convert_to_native
|
||||
|
||||
@@ -373,6 +381,12 @@ def clean_filter_values(series: pd.Series) -> list[str]:
|
||||
)
|
||||
|
||||
|
||||
def order_phases(phases: list[str]) -> list[str]:
|
||||
"""Phases in the order a child meets them; any GIAS adds later follow, A-Z."""
|
||||
rank = {p: i for i, p in enumerate(PHASE_ORDER)}
|
||||
return sorted(phases, key=lambda p: (rank.get(p.lower(), len(rank)), p))
|
||||
|
||||
|
||||
# =============================================================================
|
||||
# SECURITY MIDDLEWARE & HELPERS
|
||||
# =============================================================================
|
||||
@@ -607,7 +621,41 @@ def verify_admin_api_key(x_api_key: str = Header(None)) -> bool:
|
||||
return True
|
||||
|
||||
|
||||
def _with_whole_school_pupils(rows: pd.DataFrame, source: pd.DataFrame) -> pd.DataFrame:
|
||||
"""Set total_pupils to the size of the school.
|
||||
|
||||
fact_performance's total_pupils is the cohort a year's results were
|
||||
measured on. For a secondary that is the GCSE year group alone (Burntwood:
|
||||
245 against 1,462 on roll). Cards, map popups and place rows label it
|
||||
"pupils", so they take the register's whole-school count instead, and
|
||||
nothing when the register has none.
|
||||
"""
|
||||
whole = source["gias_total_pupils"] if "gias_total_pupils" in source.columns else None
|
||||
return rows.assign(total_pupils=whole)
|
||||
|
||||
|
||||
def _with_type_group(rows: pd.DataFrame) -> pd.DataFrame:
|
||||
"""Name each row's search-filter type group, or None for a type in no group.
|
||||
|
||||
The school page and the search rows print it ("State school") in place of
|
||||
the GIAS establishment type, and an independent school gets a Fee-paying
|
||||
flag from it.
|
||||
"""
|
||||
if "school_type" not in rows.columns:
|
||||
return rows
|
||||
return rows.assign(type_group=rows["school_type"].map(type_group_for))
|
||||
|
||||
|
||||
# Input validation helpers
|
||||
def _names_in_group(names: pd.Series, in_group) -> set:
|
||||
"""The distinct names in a column that a group predicate accepts.
|
||||
|
||||
Evaluated once per distinct name rather than per row, so a filter over
|
||||
every school costs a few dozen lookups.
|
||||
"""
|
||||
return {n for n in names.dropna().unique() if in_group(n)}
|
||||
|
||||
|
||||
def sanitize_search_input(value: Optional[str], max_length: int = 100) -> Optional[str]:
|
||||
"""Sanitize search input to prevent injection attacks."""
|
||||
if value is None:
|
||||
@@ -744,6 +792,7 @@ async def get_schools(
|
||||
gender: Optional[str] = Query(None, description="Filter by gender (Mixed/Boys/Girls)", max_length=50),
|
||||
admissions_policy: Optional[str] = Query(None, description="Filter by admissions policy", max_length=100),
|
||||
has_sixth_form: Optional[str] = Query(None, description="Filter by sixth form presence: yes/no", max_length=3),
|
||||
faith: Optional[str] = Query(None, description="Filter by faith group key", max_length=40),
|
||||
):
|
||||
"""
|
||||
Get list of schools with pagination.
|
||||
@@ -756,6 +805,7 @@ async def get_schools(
|
||||
local_authority = sanitize_search_input(local_authority)
|
||||
school_type = sanitize_search_input(school_type)
|
||||
phase = sanitize_search_input(phase)
|
||||
faith = sanitize_search_input(faith)
|
||||
postcode = validate_postcode(postcode)
|
||||
|
||||
# Load the pre-computed latest-year snapshot (cached after first request / startup).
|
||||
@@ -796,6 +846,22 @@ async def get_schools(
|
||||
flag = df_latest["age_range"].str.contains("18", na=False)
|
||||
df_latest = df_latest[flag if has_sixth_form == "yes" else ~flag]
|
||||
|
||||
# Faith group (backend/school_groups.py). A joint school is in every faith
|
||||
# its label names; a missing religious character is "none". An unknown key
|
||||
# matches nothing rather than being ignored, so a typo cannot show all.
|
||||
if faith:
|
||||
faith_key = faith.lower()
|
||||
if faith_key in FAITH_KEYS and "religious_denomination" in df_latest.columns:
|
||||
column = df_latest["religious_denomination"]
|
||||
matches = column.isin(_names_in_group(column, lambda n: faith_key in faith_groups_for(n)))
|
||||
# _names_in_group skips missing names; a missing religious
|
||||
# character is "No religious character".
|
||||
if faith_key == "none":
|
||||
matches = matches | column.isna()
|
||||
df_latest = df_latest[matches]
|
||||
else:
|
||||
df_latest = df_latest.iloc[0:0]
|
||||
|
||||
# Include key result metrics for display on cards
|
||||
location_cols = ["latitude", "longitude"]
|
||||
result_cols = [
|
||||
@@ -818,7 +884,7 @@ async def get_schools(
|
||||
if c in df_latest.columns
|
||||
]
|
||||
# fact_performance guarantees one row per (urn, year); df_latest has one row per urn.
|
||||
schools_df = df_latest[available_cols]
|
||||
schools_df = _with_whole_school_pupils(df_latest[available_cols], df_latest)
|
||||
|
||||
# Location-based search (uses pre-geocoded data from database)
|
||||
search_coords = None
|
||||
@@ -883,10 +949,17 @@ async def get_schools(
|
||||
schools_df["local_authority"].str.lower() == local_authority.lower()
|
||||
]
|
||||
|
||||
# A type group key (backend/school_groups.py), old keys included, or for
|
||||
# an old link a raw GIAS type label, matched exactly as before.
|
||||
if school_type:
|
||||
schools_df = schools_df[
|
||||
schools_df["school_type"].str.lower() == school_type.lower()
|
||||
]
|
||||
type_key = type_group_key(school_type)
|
||||
if type_key:
|
||||
column = schools_df["school_type"]
|
||||
schools_df = schools_df[
|
||||
column.isin(_names_in_group(column, lambda n: type_group_for(n) == type_key))
|
||||
]
|
||||
else:
|
||||
schools_df = schools_df[schools_df["school_type"].str.lower() == school_type.lower()]
|
||||
|
||||
# Compute result-scoped filter values (before pagination).
|
||||
# Gender and admissions are secondary-only filters — scope them to schools
|
||||
@@ -895,7 +968,7 @@ async def get_schools(
|
||||
result_filters = {
|
||||
"local_authorities": clean_filter_values(schools_df["local_authority"]) if "local_authority" in schools_df.columns else [],
|
||||
"school_types": clean_filter_values(schools_df["school_type"]) if "school_type" in schools_df.columns else [],
|
||||
"phases": clean_filter_values(schools_df["phase"]) if "phase" in schools_df.columns else [],
|
||||
"phases": order_phases(clean_filter_values(schools_df["phase"])) if "phase" in schools_df.columns else [],
|
||||
"genders": clean_filter_values(schools_df.loc[_sec_mask, "gender"]) if "gender" in schools_df.columns and _sec_mask.any() else [],
|
||||
"admissions_policies": clean_filter_values(schools_df.loc[_sec_mask, "admissions_policy"]) if "admissions_policy" in schools_df.columns and _sec_mask.any() else [],
|
||||
}
|
||||
@@ -904,7 +977,7 @@ async def get_schools(
|
||||
total = len(schools_df)
|
||||
start_idx = (page - 1) * page_size
|
||||
end_idx = start_idx + page_size
|
||||
schools_df = schools_df.iloc[start_idx:end_idx]
|
||||
schools_df = _with_type_group(schools_df.iloc[start_idx:end_idx])
|
||||
|
||||
return {
|
||||
"schools": clean_for_json(schools_df),
|
||||
@@ -968,6 +1041,7 @@ async def get_school_details(request: Request, urn: int):
|
||||
"school_name": latest.get("school_name", ""),
|
||||
"local_authority": latest.get("local_authority", ""),
|
||||
"school_type": latest.get("school_type", ""),
|
||||
"type_group": type_group_for(latest.get("school_type")),
|
||||
"address": latest.get("address", ""),
|
||||
"religious_denomination": latest.get("religious_denomination", ""),
|
||||
"age_range": latest.get("age_range", ""),
|
||||
@@ -1161,15 +1235,29 @@ async def get_filter_options(request: Request):
|
||||
"local_authorities": [],
|
||||
"school_types": [],
|
||||
"years": [],
|
||||
"school_type_groups": [],
|
||||
"faiths": [],
|
||||
}
|
||||
|
||||
# Phases: return values from data, ordered sensibly
|
||||
phases = clean_filter_values(df["phase"]) if "phase" in df.columns else []
|
||||
# Phases: the values in the data, in the order a child meets them
|
||||
phases = order_phases(clean_filter_values(df["phase"])) if "phase" in df.columns else []
|
||||
|
||||
secondary_df = df[df["attainment_8_score"].notna()] if "attainment_8_score" in df.columns else df.iloc[0:0]
|
||||
genders = clean_filter_values(secondary_df["gender"]) if "gender" in secondary_df.columns else []
|
||||
admissions_policies = clean_filter_values(secondary_df["admissions_policy"]) if "admissions_policy" in secondary_df.columns else []
|
||||
|
||||
def offered(groups, present):
|
||||
return [{"value": key, "label": label} for key, label, _ in groups if key in present]
|
||||
|
||||
type_groups_present = (
|
||||
{type_group_for(n) for n in df["school_type"].dropna().unique()} - {None}
|
||||
if "school_type" in df.columns else set()
|
||||
)
|
||||
faiths_present = (
|
||||
{f for n in df["religious_denomination"].unique() for f in faith_groups_for(n)}
|
||||
if "religious_denomination" in df.columns else set()
|
||||
)
|
||||
|
||||
return {
|
||||
"local_authorities": clean_filter_values(df["local_authority"]) if "local_authority" in df.columns else [],
|
||||
"school_types": clean_filter_values(df["school_type"]) if "school_type" in df.columns else [],
|
||||
@@ -1177,6 +1265,8 @@ async def get_filter_options(request: Request):
|
||||
"phases": phases,
|
||||
"genders": genders,
|
||||
"admissions_policies": admissions_policies,
|
||||
"school_type_groups": offered(TYPE_GROUPS, type_groups_present),
|
||||
"faiths": offered(FAITH_GROUPS, faiths_present),
|
||||
}
|
||||
|
||||
|
||||
@@ -1445,13 +1535,12 @@ async def get_place(request: Request, kind: str, slug: str,
|
||||
# warning. Ordered de-duplication keeps the column order and the warning
|
||||
# cannot come back.
|
||||
#
|
||||
# nursery_provision and parliamentary_constituency are not in
|
||||
# SCHOOL_COLUMNS and the place table shows both. The `in rows.columns`
|
||||
# guard is what keeps a mart the pipeline has not rebuilt working: those
|
||||
# two are the optional GIAS columns data_loader degrades to NULL.
|
||||
# parliamentary_constituency is not in SCHOOL_COLUMNS and the place table
|
||||
# shows it. The `in rows.columns` guard is what keeps a mart the pipeline
|
||||
# has not rebuilt working: it and nursery_provision are the optional GIAS
|
||||
# columns data_loader degrades to NULL.
|
||||
cols = [c for c in dict.fromkeys(
|
||||
SCHOOL_COLUMNS + ["latitude", "longitude", "phase",
|
||||
"nursery_provision",
|
||||
"parliamentary_constituency",
|
||||
"rwm_expected_pct", "attainment_8_score",
|
||||
"total_pupils"])
|
||||
@@ -1481,7 +1570,8 @@ async def get_place(request: Request, kind: str, slug: str,
|
||||
# variants that exist rather than 404s.
|
||||
"phases": [ph for ph in ("primary", "secondary")
|
||||
if place.publishes_phase(ph)]},
|
||||
"schools": clean_for_json(rows[cols]),
|
||||
"schools": clean_for_json(
|
||||
_with_type_group(_with_whole_school_pupils(rows[cols], rows))),
|
||||
"averages": averages,
|
||||
}
|
||||
|
||||
|
||||
@@ -544,6 +544,19 @@ PHASE_GROUPS: dict[str, set[str]] = {
|
||||
"all-through": {"all-through"},
|
||||
}
|
||||
|
||||
# GIAS phases in the order a child meets them, for the phase filter's options.
|
||||
# All-through spans the whole path, so it follows the stages. Lowercased, as
|
||||
# PHASE_GROUPS is, so a change of case in the GIAS label keeps its place.
|
||||
PHASE_ORDER: list[str] = [
|
||||
"nursery",
|
||||
"primary",
|
||||
"middle deemed primary",
|
||||
"middle deemed secondary",
|
||||
"secondary",
|
||||
"16 plus",
|
||||
"all-through",
|
||||
]
|
||||
|
||||
# School listing columns
|
||||
SCHOOL_COLUMNS = [
|
||||
"urn",
|
||||
@@ -556,6 +569,7 @@ SCHOOL_COLUMNS = [
|
||||
"religious_denomination",
|
||||
"age_range",
|
||||
"has_sixth_form",
|
||||
"nursery_provision",
|
||||
"status",
|
||||
"gender",
|
||||
"admissions_policy",
|
||||
|
||||
@@ -0,0 +1,120 @@
|
||||
"""Parent-facing groups over GIAS establishment types and religious characters.
|
||||
|
||||
The 34 GIAS establishment types describe governance and funding, which for a
|
||||
mainstream state school barely changes what a parent experiences. The search
|
||||
filter offers five groups a parent recognises instead, and a faith filter in
|
||||
place of the faith signal that "Voluntary aided" and "Voluntary controlled"
|
||||
only half carry. See
|
||||
docs/superpowers/specs/2026-10-02-school-type-groups-and-faith-filter-design.md.
|
||||
|
||||
Groups are defined over GIAS codes and looked up by the translated name,
|
||||
because the DataFrame the API filters carries names only: the codes are
|
||||
replaced at load (data_loader.translate_gias_code_columns), the legacy-name
|
||||
mart fallback never had them, and test fixtures are written in names.
|
||||
"""
|
||||
|
||||
from typing import Optional
|
||||
|
||||
import pandas as pd
|
||||
|
||||
from .gias_codes import RELIGIOUS_CHARACTER, SCHOOL_TYPE
|
||||
|
||||
# (key, label, GIAS TypeOfEstablishment codes), in the order shown.
|
||||
TYPE_GROUPS: tuple[tuple[str, str, frozenset[int]], ...] = (
|
||||
# Every mainstream state school, academy or council-run: Academy sponsor
|
||||
# led, Academy converter, Free schools, University technical college,
|
||||
# Studio schools, City technology college, Community, Voluntary aided,
|
||||
# Voluntary controlled, Foundation, LA nursery. Academy against council-run
|
||||
# was two near-halves of one pool, and did not follow the difference a
|
||||
# parent feels most, admissions: voluntary aided and foundation schools
|
||||
# set their own, as academies do. Faith, which voluntary aided mostly
|
||||
# meant, has its own filter.
|
||||
("state", "State school (free)",
|
||||
frozenset({28, 34, 35, 40, 41, 6, 1, 2, 3, 5, 15})),
|
||||
("independent", "Independent (fee-paying)", frozenset({11})),
|
||||
# Every special type, independent ones included (usually funded by the
|
||||
# council through an EHCP, so SEND provision to a parent, not private
|
||||
# school), and Special post 16 institutions.
|
||||
("special", "Special school (SEND)", frozenset({7, 8, 10, 12, 32, 33, 36, 44})),
|
||||
# Further education, Sixth form centres, the 16-19 academies and free schools.
|
||||
("post16", "Sixth form or college", frozenset({18, 31, 39, 45, 46})),
|
||||
# Pupil referral units and AP academies and free schools. Last: parents do
|
||||
# not apply to these; the local authority places children there.
|
||||
("alternative", "Alternative provision", frozenset({14, 38, 42, 43})),
|
||||
)
|
||||
|
||||
# In no group, so reachable only under "Any school type": Secure units,
|
||||
# Miscellaneous, Higher education institutions, Online provider, Institution
|
||||
# funded by other government department, Academy secure 16 to 19.
|
||||
UNOFFERED_TYPE_CODES: frozenset[int] = frozenset({24, 27, 29, 49, 56, 57})
|
||||
|
||||
# (key, label, GIAS ReligiousCharacter codes), in the order shown. A joint
|
||||
# school is in every faith its label names; a generic "Christian" beside a
|
||||
# named church adds nothing.
|
||||
FAITH_GROUPS: tuple[tuple[str, str, frozenset[int]], ...] = (
|
||||
# Does not apply, None, and 99 (a blank label).
|
||||
("none", "No religious character", frozenset({0, 6, 99})),
|
||||
("church_of_england", "Church of England",
|
||||
frozenset({2, 9, 10, 11, 12, 13, 19, 20, 30, 31, 32, 33, 34, 41, 48})),
|
||||
("roman_catholic", "Roman Catholic", frozenset({3, 11, 13, 35, 48})),
|
||||
# 28 "Inter- / non- denominational" is how GIAS files Christian schools
|
||||
# tied to no one church.
|
||||
("other_christian", "Other Christian",
|
||||
frozenset({4, 8, 9, 10, 12, 14, 15, 16, 17, 18, 19, 22, 26, 28, 30, 33,
|
||||
37, 38, 39, 40, 41, 44, 45, 46, 47})),
|
||||
("jewish", "Jewish", frozenset({5, 36, 43})),
|
||||
("muslim", "Muslim", frozenset({7, 42, 49})),
|
||||
("other_faith", "Other faith", frozenset({21, 24, 25, 29})),
|
||||
)
|
||||
|
||||
TYPE_GROUP_KEYS: frozenset[str] = frozenset(k for k, _, _ in TYPE_GROUPS)
|
||||
|
||||
# Keys a group was offered under before, so their links keep working: "state"
|
||||
# was "academy" and "council" until 2026-10-02.
|
||||
TYPE_GROUP_ALIASES: dict[str, str] = {"academy": "state", "council": "state"}
|
||||
FAITH_KEYS: frozenset[str] = frozenset(k for k, _, _ in FAITH_GROUPS)
|
||||
|
||||
|
||||
def _key(name: str) -> str:
|
||||
return name.strip().lower()
|
||||
|
||||
|
||||
_TYPE_GROUP_BY_NAME: dict[str, str] = {
|
||||
_key(SCHOOL_TYPE[code]): key
|
||||
for key, _, codes in TYPE_GROUPS
|
||||
for code in codes
|
||||
if code in SCHOOL_TYPE
|
||||
}
|
||||
|
||||
_FAITHS_BY_NAME: dict[str, tuple[str, ...]] = {}
|
||||
for _faith, _, _codes in FAITH_GROUPS:
|
||||
for _code in sorted(_codes):
|
||||
if _code in RELIGIOUS_CHARACTER:
|
||||
_name = _key(RELIGIOUS_CHARACTER[_code])
|
||||
_FAITHS_BY_NAME[_name] = _FAITHS_BY_NAME.get(_name, ()) + (_faith,)
|
||||
|
||||
|
||||
def type_group_key(value: str) -> Optional[str]:
|
||||
"""The type group a school_type URL value names, old keys included, or
|
||||
None when it names no group (an old link's raw GIAS type)."""
|
||||
v = value.strip().lower()
|
||||
v = TYPE_GROUP_ALIASES.get(v, v)
|
||||
return v if v in TYPE_GROUP_KEYS else None
|
||||
|
||||
|
||||
def type_group_for(name: object) -> Optional[str]:
|
||||
"""The type group of a GIAS establishment type name, or None."""
|
||||
if not isinstance(name, str):
|
||||
return None
|
||||
return _TYPE_GROUP_BY_NAME.get(_key(name))
|
||||
|
||||
|
||||
def faith_groups_for(name: object) -> tuple[str, ...]:
|
||||
"""The faith groups of a GIAS religious character name.
|
||||
|
||||
A missing or blank name is "No religious character". A name the
|
||||
dictionary does not know has no faith, so it matches no faith option.
|
||||
"""
|
||||
if not isinstance(name, str):
|
||||
return ("none",) if name is None or pd.isna(name) else ()
|
||||
return _FAITHS_BY_NAME.get(_key(name), ())
|
||||
@@ -82,3 +82,25 @@ def test_grouped_phases_still_take_in_their_related_phases(client):
|
||||
|
||||
def test_an_unknown_phase_returns_nothing_rather_than_everything(client):
|
||||
assert _urns(client, "kindergarten") == []
|
||||
|
||||
|
||||
def test_filters_lists_phases_in_the_order_a_child_meets_them(client):
|
||||
# Alphabetical put "16 plus" and "All-through" first and Nursery fifth.
|
||||
# All-through spans the whole path, so it comes after the stages.
|
||||
assert client.get("/api/filters").json()["phases"] == [
|
||||
"Nursery",
|
||||
"Primary",
|
||||
"Middle deemed primary",
|
||||
"Middle deemed secondary",
|
||||
"Secondary",
|
||||
"16 plus",
|
||||
"All-through",
|
||||
]
|
||||
|
||||
|
||||
def test_an_unknown_phase_follows_the_known_ones():
|
||||
from backend.app import order_phases
|
||||
|
||||
assert order_phases(["Secondary", "Zeta", "Alpha", "Nursery"]) == [
|
||||
"Nursery", "Secondary", "Alpha", "Zeta",
|
||||
]
|
||||
@@ -0,0 +1,112 @@
|
||||
"""Parent-facing groups over GIAS establishment types and religious characters.
|
||||
|
||||
Every GIAS code must be accounted for, so a new DfE code fails here instead of
|
||||
silently vanishing from the filter.
|
||||
"""
|
||||
|
||||
from pathlib import Path
|
||||
|
||||
import numpy as np
|
||||
import pytest
|
||||
import yaml
|
||||
|
||||
from backend.gias_codes import RELIGIOUS_CHARACTER, SCHOOL_TYPE
|
||||
from backend.school_groups import (
|
||||
FAITH_GROUPS,
|
||||
TYPE_GROUPS,
|
||||
UNOFFERED_TYPE_CODES,
|
||||
faith_groups_for,
|
||||
type_group_for,
|
||||
type_group_key,
|
||||
)
|
||||
|
||||
DBT_PROJECT = Path(__file__).resolve().parents[2] / "pipeline" / "transform" / "dbt_project.yml"
|
||||
|
||||
|
||||
def _non_england_codes() -> set[int]:
|
||||
return set(yaml.safe_load(DBT_PROJECT.read_text())["vars"]["non_england_school_type_codes"])
|
||||
|
||||
|
||||
def test_every_type_code_is_in_exactly_one_place():
|
||||
places = [codes for _, _, codes in TYPE_GROUPS] + [UNOFFERED_TYPE_CODES, _non_england_codes()]
|
||||
for code in SCHOOL_TYPE:
|
||||
homes = sum(code in p for p in places)
|
||||
assert homes == 1, f"type code {code} ({SCHOOL_TYPE[code]}) is in {homes} places"
|
||||
|
||||
|
||||
def test_every_religion_code_has_a_faith():
|
||||
for code, name in RELIGIOUS_CHARACTER.items():
|
||||
assert any(code in codes for _, _, codes in FAITH_GROUPS), f"{code} {name!r}"
|
||||
|
||||
|
||||
def test_type_groups_in_display_order():
|
||||
assert [k for k, _, _ in TYPE_GROUPS] == [
|
||||
"state", "independent", "special", "post16", "alternative"]
|
||||
|
||||
|
||||
def test_faiths_in_display_order():
|
||||
assert [k for k, _, _ in FAITH_GROUPS] == [
|
||||
"none", "church_of_england", "roman_catholic", "other_christian",
|
||||
"jewish", "muslim", "other_faith"]
|
||||
|
||||
|
||||
@pytest.mark.parametrize("name, group", [
|
||||
("Academy converter", "state"),
|
||||
("University technical college", "state"),
|
||||
("Voluntary aided school", "state"),
|
||||
("Local authority nursery school", "state"),
|
||||
("Other independent school", "independent"),
|
||||
("Other independent special school", "special"),
|
||||
("Special post 16 institution", "special"),
|
||||
("Further education", "post16"),
|
||||
("Pupil referral unit", "alternative"),
|
||||
("academy CONVERTER", "state"),
|
||||
])
|
||||
def test_type_group_by_name(name, group):
|
||||
assert type_group_for(name) == group
|
||||
|
||||
|
||||
@pytest.mark.parametrize("value, key", [
|
||||
("state", "state"),
|
||||
("Special", "special"),
|
||||
# The two state groups that preceded "state", kept so their links still work.
|
||||
("academy", "state"),
|
||||
("Council", "state"),
|
||||
("Community school", None),
|
||||
("", None),
|
||||
])
|
||||
def test_type_group_key_resolves_keys_and_old_keys(value, key):
|
||||
assert type_group_key(value) == key
|
||||
|
||||
|
||||
@pytest.mark.parametrize("name", [
|
||||
"Higher education institutions", "Miscellaneous", "Unknown (9999)", "Academy", "", None, np.nan,
|
||||
])
|
||||
def test_unoffered_or_unknown_types_have_no_group(name):
|
||||
assert type_group_for(name) is None
|
||||
|
||||
|
||||
@pytest.mark.parametrize("name, faiths", [
|
||||
("Roman Catholic/Church of England", ("church_of_england", "roman_catholic")),
|
||||
("Roman Catholic/Anglican", ("church_of_england", "roman_catholic")),
|
||||
("Church of England/Methodist", ("church_of_england", "other_christian")),
|
||||
("Church of England/Christian", ("church_of_england",)),
|
||||
("Catholic", ("roman_catholic",)),
|
||||
("Inter- / non- denominational", ("other_christian",)),
|
||||
("Orthodox Jewish", ("jewish",)),
|
||||
("Sunni Deobandi", ("muslim",)),
|
||||
("Hindu", ("other_faith",)),
|
||||
("Does not apply", ("none",)),
|
||||
("None", ("none",)),
|
||||
])
|
||||
def test_faiths_by_name(name, faiths):
|
||||
assert faith_groups_for(name) == faiths
|
||||
|
||||
|
||||
@pytest.mark.parametrize("missing", [None, np.nan, "", " "])
|
||||
def test_a_missing_religion_is_no_religious_character(missing):
|
||||
assert faith_groups_for(missing) == ("none",)
|
||||
|
||||
|
||||
def test_an_unknown_religion_has_no_faith():
|
||||
assert faith_groups_for("Unknown (77)") == ()
|
||||
@@ -0,0 +1,100 @@
|
||||
"""/api/schools school-type groups and faith filter, and their /api/filters lists."""
|
||||
|
||||
import numpy as np
|
||||
import pandas as pd
|
||||
import pytest
|
||||
from fastapi.testclient import TestClient
|
||||
|
||||
# urn -> (GIAS school type, GIAS religious character)
|
||||
SCHOOLS = {
|
||||
100001: ("Community school", "Does not apply"),
|
||||
100002: ("Voluntary aided school", "Roman Catholic"),
|
||||
100003: ("Academy converter", "Roman Catholic/Church of England"),
|
||||
100004: ("Community special school", None),
|
||||
100005: ("Academy special converter", "Church of England"),
|
||||
100006: ("Other independent school", "Jewish"),
|
||||
100007: ("Miscellaneous", ""),
|
||||
}
|
||||
|
||||
|
||||
def _schools_df() -> pd.DataFrame:
|
||||
base = {
|
||||
"local_authority": "Testshire", "address": "1 Test Street", "town": "Testtown",
|
||||
"postcode": "TS1 1AA", "age_range": "4-11", "has_sixth_form": None,
|
||||
"gender": "Mixed", "admissions_policy": None, "ofsted_grade": np.nan,
|
||||
"ofsted_date": None, "ofsted_framework": None, "latitude": 51.5,
|
||||
"longitude": -0.1, "year": 202425, "total_pupils": 300,
|
||||
"rwm_expected_pct": np.nan, "attainment_8_score": np.nan, "phase": "Primary",
|
||||
}
|
||||
return pd.DataFrame([
|
||||
{**base, "urn": urn, "school_name": f"School {urn}",
|
||||
"school_type": t, "religious_denomination": r}
|
||||
for urn, (t, r) in SCHOOLS.items()
|
||||
])
|
||||
|
||||
|
||||
@pytest.fixture()
|
||||
def client(monkeypatch):
|
||||
from backend import app as app_module
|
||||
|
||||
monkeypatch.setattr(app_module, "load_latest_school_data", _schools_df)
|
||||
monkeypatch.setattr(app_module, "load_school_data", _schools_df)
|
||||
return TestClient(app_module.app, raise_server_exceptions=False)
|
||||
|
||||
|
||||
def _urns(client, **params):
|
||||
resp = client.get("/api/schools", params={"page_size": 50, **params})
|
||||
assert resp.status_code == 200, resp.text
|
||||
return sorted(s["urn"] for s in resp.json()["schools"])
|
||||
|
||||
|
||||
@pytest.mark.parametrize("key, urns", [
|
||||
("state", [100001, 100002, 100003]),
|
||||
("academy", [100001, 100002, 100003]),
|
||||
("council", [100001, 100002, 100003]),
|
||||
("special", [100004, 100005]),
|
||||
("independent", [100006]),
|
||||
("Special", [100004, 100005]),
|
||||
])
|
||||
def test_a_type_group_key_filters_to_its_group(client, key, urns):
|
||||
assert _urns(client, school_type=key) == urns
|
||||
|
||||
|
||||
def test_a_raw_type_label_still_filters_exactly(client):
|
||||
assert _urns(client, school_type="Community school") == [100001]
|
||||
|
||||
|
||||
@pytest.mark.parametrize("key, urns", [
|
||||
("roman_catholic", [100002, 100003]),
|
||||
("church_of_england", [100003, 100005]),
|
||||
("none", [100001, 100004, 100007]),
|
||||
("jewish", [100006]),
|
||||
("Roman_Catholic", [100002, 100003]),
|
||||
])
|
||||
def test_faith_filters_to_its_group_joint_schools_included(client, key, urns):
|
||||
assert _urns(client, faith=key) == urns
|
||||
|
||||
|
||||
def test_an_unknown_faith_returns_nothing(client):
|
||||
assert _urns(client, faith="nonsense") == []
|
||||
|
||||
|
||||
def test_type_and_faith_combine(client):
|
||||
assert _urns(client, school_type="special", faith="church_of_england") == [100005]
|
||||
|
||||
|
||||
def test_filters_lists_only_groups_present_in_order(client):
|
||||
body = client.get("/api/filters").json()
|
||||
assert body["school_type_groups"] == [
|
||||
{"value": "state", "label": "State school (free)"},
|
||||
{"value": "independent", "label": "Independent (fee-paying)"},
|
||||
{"value": "special", "label": "Special school (SEND)"},
|
||||
]
|
||||
assert body["faiths"] == [
|
||||
{"value": "none", "label": "No religious character"},
|
||||
{"value": "church_of_england", "label": "Church of England"},
|
||||
{"value": "roman_catholic", "label": "Roman Catholic"},
|
||||
{"value": "jewish", "label": "Jewish"},
|
||||
]
|
||||
# The raw list is still there for anything that reads it.
|
||||
assert "Community school" in body["school_types"]
|
||||
@@ -0,0 +1,81 @@
|
||||
"""Payloads name each school's type group.
|
||||
|
||||
The school page and the search rows say "State school" or "Independent
|
||||
school" in the search filter's own terms, not GIAS's 34 establishment types,
|
||||
and an independent school gets a Fee-paying flag. A type in no group keeps a
|
||||
null group, and the page prints the register's own name for it. Search rows
|
||||
also carry nursery_provision, for their "Nursery class" flag.
|
||||
"""
|
||||
|
||||
import numpy as np
|
||||
import pandas as pd
|
||||
import pytest
|
||||
from fastapi.testclient import TestClient
|
||||
|
||||
|
||||
def _schools_df() -> pd.DataFrame:
|
||||
base = {
|
||||
"local_authority": "Essex", "phase": "Primary", "year": 202425,
|
||||
"ofsted_grade": 2.0, "ofsted_date": None, "attainment_8_score": np.nan,
|
||||
"town": "Brentwood", "postcode": "CM13 1AA", "status": "Open",
|
||||
"address": "1 Test Street", "latitude": 51.6, "longitude": 0.3,
|
||||
"rwm_expected_pct": 60.0, "nursery_provision": "No Nursery Classes",
|
||||
}
|
||||
rows = [
|
||||
{**base, "urn": 100001, "school_name": "Alpha Academy",
|
||||
"school_type": "Academy converter", "nursery_provision": "Has Nursery Classes"},
|
||||
{**base, "urn": 100002, "school_name": "Beta Prep",
|
||||
"school_type": "Other independent school"},
|
||||
{**base, "urn": 100003, "school_name": "Gamma Unit",
|
||||
"school_type": "Secure units"},
|
||||
]
|
||||
# Enough schools in one town for it to have a place page.
|
||||
rows += [
|
||||
{**base, "urn": 100010 + i, "school_name": f"Delta Primary {i}",
|
||||
"school_type": "Community school"}
|
||||
for i in range(3)
|
||||
]
|
||||
return pd.DataFrame(rows)
|
||||
|
||||
|
||||
@pytest.fixture()
|
||||
def client(monkeypatch):
|
||||
from backend import app as app_module
|
||||
|
||||
monkeypatch.setattr(app_module, "load_latest_school_data", _schools_df)
|
||||
monkeypatch.setattr(app_module, "load_school_data", _schools_df)
|
||||
monkeypatch.setattr(app_module, "get_supplementary_data", lambda db, urn: {})
|
||||
monkeypatch.setattr(app_module, "_place_registry", None)
|
||||
return TestClient(app_module.app, raise_server_exceptions=False)
|
||||
|
||||
|
||||
def _by_urn(schools: list[dict]) -> dict[int, dict]:
|
||||
return {s["urn"]: s for s in schools}
|
||||
|
||||
|
||||
def test_the_list_names_each_type_group(client):
|
||||
resp = client.get("/api/schools?page_size=50")
|
||||
assert resp.status_code == 200, resp.text
|
||||
schools = _by_urn(resp.json()["schools"])
|
||||
assert schools[100001]["type_group"] == "state"
|
||||
assert schools[100002]["type_group"] == "independent"
|
||||
assert schools[100003]["type_group"] is None
|
||||
|
||||
|
||||
def test_the_list_carries_nursery_provision(client):
|
||||
schools = _by_urn(client.get("/api/schools?page_size=50").json()["schools"])
|
||||
assert schools[100001]["nursery_provision"] == "Has Nursery Classes"
|
||||
|
||||
|
||||
def test_the_school_page_names_its_type_group(client):
|
||||
resp = client.get("/api/schools/100002")
|
||||
assert resp.status_code == 200, resp.text
|
||||
assert resp.json()["school_info"]["type_group"] == "independent"
|
||||
|
||||
|
||||
def test_a_place_page_names_each_type_group(client):
|
||||
resp = client.get("/api/places/town/brentwood")
|
||||
assert resp.status_code == 200, resp.text
|
||||
schools = _by_urn(resp.json()["schools"])
|
||||
assert schools[100001]["type_group"] == "state"
|
||||
assert schools[100003]["type_group"] is None
|
||||
@@ -0,0 +1,67 @@
|
||||
"""Cards, map popups and place rows label total_pupils "pupils".
|
||||
|
||||
fact_performance's total_pupils is the cohort a year's results were measured
|
||||
on. For a secondary that is the GCSE year group alone: Burntwood showed 245 in
|
||||
search against 1,462 on roll. The list and place payloads therefore carry the
|
||||
register's whole-school count, and nothing when the register has none.
|
||||
"""
|
||||
|
||||
import numpy as np
|
||||
import pandas as pd
|
||||
import pytest
|
||||
from fastapi.testclient import TestClient
|
||||
|
||||
|
||||
def _schools_df() -> pd.DataFrame:
|
||||
base = {
|
||||
"local_authority": "Essex", "school_type": "Academy converter",
|
||||
"year": 202425, "ofsted_grade": 2.0, "ofsted_date": None,
|
||||
"town": "Brentwood", "postcode": "CM13 1AA", "status": "Open",
|
||||
"address": "1 Test Street", "latitude": 51.6, "longitude": 0.3,
|
||||
"gender": "Mixed", "rwm_expected_pct": np.nan, "attainment_8_score": 50.0,
|
||||
}
|
||||
rows = [
|
||||
# Secondary: results cohort 245, register 1,462.
|
||||
{**base, "urn": 100001, "school_name": "Alpha High", "phase": "Secondary",
|
||||
"total_pupils": 245, "gias_total_pupils": 1462},
|
||||
# Register count missing: no count, never the cohort.
|
||||
{**base, "urn": 100002, "school_name": "Beta High", "phase": "Secondary",
|
||||
"total_pupils": 180, "gias_total_pupils": np.nan},
|
||||
]
|
||||
# Enough schools in one town for it to have a place page.
|
||||
rows += [
|
||||
{**base, "urn": 100010 + i, "school_name": f"Gamma High {i}", "phase": "Secondary",
|
||||
"total_pupils": 200, "gias_total_pupils": 1000 + i}
|
||||
for i in range(5)
|
||||
]
|
||||
return pd.DataFrame(rows)
|
||||
|
||||
|
||||
@pytest.fixture()
|
||||
def client(monkeypatch):
|
||||
from backend import app as app_module
|
||||
|
||||
monkeypatch.setattr(app_module, "load_latest_school_data", _schools_df)
|
||||
monkeypatch.setattr(app_module, "load_school_data", _schools_df)
|
||||
monkeypatch.setattr(app_module, "_place_registry", None)
|
||||
return TestClient(app_module.app, raise_server_exceptions=False)
|
||||
|
||||
|
||||
def _pupils(schools: list[dict]) -> dict[int, object]:
|
||||
return {s["urn"]: s.get("total_pupils") for s in schools}
|
||||
|
||||
|
||||
def test_the_list_carries_the_whole_school_count(client):
|
||||
resp = client.get("/api/schools?page_size=50")
|
||||
assert resp.status_code == 200, resp.text
|
||||
pupils = _pupils(resp.json()["schools"])
|
||||
assert pupils[100001] == 1462
|
||||
assert pupils[100002] is None
|
||||
|
||||
|
||||
def test_a_place_page_carries_the_whole_school_count(client):
|
||||
resp = client.get("/api/places/town/brentwood")
|
||||
assert resp.status_code == 200, resp.text
|
||||
pupils = _pupils(resp.json()["schools"])
|
||||
assert pupils[100001] == 1462
|
||||
assert pupils[100002] is None
|
||||
@@ -44,6 +44,7 @@ Their previous implementations remain recoverable from Git history.
|
||||
| `nextjs-app/components/SchoolCard.tsx` and its CSS | Imported by its own tests, not application code. HomeView uses SchoolRow/SecondarySchoolRow. | Decide whether to retire the card design; if removed, remove its dedicated tests as well. Passing tests do not establish runtime use. |
|
||||
| `backend/database.py: get_db`, `get_db_session` | No remaining callers after removing the importer. Current code creates SessionLocal directly. | Either adopt these helpers during session-lifecycle cleanup or remove them; do not rewrite active sessions in a documentation change. |
|
||||
| `backend/schemas.py: COLUMN_MAPPINGS`, `NULL_VALUES`, `LA_CODE_TO_NAME` | No remaining Python consumers found after importer removal. Other constants in this module are active. | Remove individual constants after checking external data utilities; retain the module. |
|
||||
| `backend/app.py: result_filters` keys `school_types`, `phases`, `genders`, `admissions_policies` | Since 2026-10-02 FilterBar offers these from `/api/filters`, because options scoped to the results left only the chosen value on offer. Only `local_authorities` is still read. | Stop computing the four keys in a focused API change; keep `local_authorities`. |
|
||||
| `backend/config.py: data_dir`, `max_page_size`, `rate_limit_burst` | No active consumers found. `default_page_size` appears only in a branch that expects None, although the route supplies a concrete default. | Reconcile settings with route validation in a focused API change. |
|
||||
|
||||
## Legacy/manual paths requiring operational verification
|
||||
|
||||
@@ -0,0 +1,911 @@
|
||||
# School Type Groups and a Faith Filter Implementation Plan
|
||||
|
||||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||||
|
||||
**Goal:** Replace the School type filter's 34 GIAS types with six parent-facing groups, and add a Faith filter with eight options.
|
||||
|
||||
**Architecture:** A new backend module `backend/school_groups.py` holds both groupings as GIAS code sets and exposes lookups by the translated *name* (the DataFrame the API filters only carries names). `/api/schools` accepts a group key for `school_type` and a new `faith` key; `/api/filters` gains `school_type_groups` and `faiths` as `{value, label}` lists. The frontend's FilterBar reads those lists for its School type select and a new Faith select.
|
||||
|
||||
**Tech Stack:** FastAPI + pandas (backend, pytest via uv), Next.js 15 / React (frontend, Jest + Testing Library), Playwright (E2E against staging).
|
||||
|
||||
**Spec:** `docs/superpowers/specs/2026-10-02-school-type-groups-and-faith-filter-design.md`
|
||||
|
||||
## Global Constraints
|
||||
|
||||
- Type group keys, labels and order, verbatim: `academy` "State school: academy or free school", `council` "State school: council-run", `independent` "Independent (fee-paying)", `special` "Special school (SEND)", `post16` "Sixth form or college", `alternative` "Alternative provision".
|
||||
- Faith keys, labels and order, verbatim: `none` "No religious character", `church_of_england` "Church of England", `roman_catholic` "Roman Catholic", `other_christian` "Other Christian", `jewish` "Jewish", `muslim` "Muslim", `other_faith` "Other faith".
|
||||
- Select defaults, verbatim: "Any school type", "Any faith or none". Faith select `aria-label="Faith"`.
|
||||
- `/api/filters` keeps `school_types` (raw list) unchanged; the new keys are additions.
|
||||
- An old raw-label `school_type` value (e.g. `Community school`) still filters by that label exactly.
|
||||
- An unknown `faith` key returns no schools.
|
||||
- Do not change `backend/gias_codes.py` or `pipeline/scripts/gias_codes.py` (their parity is tested).
|
||||
- No copy may use an em dash (`__tests__/components/noEmDashCopy.test.ts`).
|
||||
- Backend tests run from the repo root with: `uv run --with-requirements requirements.txt --with pytest --with "httpx==0.27.0" python -m pytest backend/tests -q`
|
||||
- Frontend checks run from `nextjs-app/`: `npx jest` and `npx tsc --noEmit`.
|
||||
- Do not start a local server. E2E journeys are verified against staging after merge.
|
||||
|
||||
## Review Focus
|
||||
|
||||
- A school whose `religious_denomination` is `None`/NaN or `""` (GIAS code 99) must count as "No religious character", not drop out of every faith option. Pinned in Task 1.
|
||||
- A type or religion label the dictionaries do not know (e.g. `"Unknown (9999)"`, or a test fixture's `"Academy"`) must map to no group without raising. Pinned in Task 1.
|
||||
- `/api/filters` returning no `school_type_groups`/`faiths` (API failed, or an older backend) must leave the selects out rather than render "Any…" alone. Pinned in Task 3.
|
||||
- An old bookmarked URL with `school_type=Community+school` must still return community schools and show a chip with its raw label. Pinned in Tasks 2 and 3.
|
||||
- Mixed case in a key (`?faith=Roman_Catholic`, `?school_type=Special`) must still match. Pinned in Task 2.
|
||||
|
||||
---
|
||||
|
||||
## File Structure
|
||||
|
||||
| File | Responsibility |
|
||||
|---|---|
|
||||
| `backend/school_groups.py` (new) | The two groupings as code sets, and name-based lookups. Nothing else. |
|
||||
| `backend/tests/test_school_groups.py` (new) | Coverage of every GIAS code, joint faiths, unknown/blank names. |
|
||||
| `backend/app.py` (modify) | `faith` param; group-key branch for `school_type`; two new `/api/filters` keys. |
|
||||
| `backend/tests/test_type_and_faith_filters.py` (new) | API behaviour of both filters and the new `/api/filters` keys. |
|
||||
| `nextjs-app/lib/types.ts` (modify) | `FilterOption`; optional `school_type_groups`/`faiths` on `Filters`; `faith` on `SchoolSearchParams`. |
|
||||
| `nextjs-app/app/(frontend)/page.tsx` (modify) | Read and forward `faith`. |
|
||||
| `nextjs-app/components/FilterBar.tsx` (modify) | Grouped School type options; Faith select; chips, counts, analytics. |
|
||||
| `nextjs-app/__tests__/components/FilterBarTypeFaith.test.tsx` (new) | Frontend behaviour of both selects. |
|
||||
| Existing FilterBar tests (modify) | Fixtures move from raw types to groups. |
|
||||
| `e2e/tests/journeys.spec.ts` (modify) | A journey for both filters. |
|
||||
| Spec (modify) | Architecture section: grouping is by name at filter time. |
|
||||
|
||||
---
|
||||
|
||||
### Task 1: The groupings module
|
||||
|
||||
**Files:**
|
||||
- Create: `backend/school_groups.py`
|
||||
- Test: `backend/tests/test_school_groups.py`
|
||||
- Modify: `docs/superpowers/specs/2026-10-02-school-type-groups-and-faith-filter-design.md` (Architecture)
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: `backend.gias_codes.SCHOOL_TYPE: dict[int, str]`, `backend.gias_codes.RELIGIOUS_CHARACTER: dict[int, str]` (code 99 maps to `""`).
|
||||
- Produces:
|
||||
- `TYPE_GROUPS: tuple[tuple[str, str, frozenset[int]], ...]` (key, label, codes), in display order
|
||||
- `UNOFFERED_TYPE_CODES: frozenset[int]`
|
||||
- `FAITH_GROUPS: tuple[tuple[str, str, frozenset[int]], ...]`, in display order
|
||||
- `TYPE_GROUP_KEYS: frozenset[str]`, `FAITH_KEYS: frozenset[str]`
|
||||
- `type_group_for(name: object) -> str | None`
|
||||
- `faith_groups_for(name: object) -> tuple[str, ...]`
|
||||
|
||||
- [ ] **Step 1: Write the failing tests**
|
||||
|
||||
Create `backend/tests/test_school_groups.py`:
|
||||
|
||||
```python
|
||||
"""Parent-facing groups over GIAS establishment types and religious characters.
|
||||
|
||||
Every GIAS code must be accounted for, so a new DfE code fails here instead of
|
||||
silently vanishing from the filter.
|
||||
"""
|
||||
|
||||
from pathlib import Path
|
||||
|
||||
import numpy as np
|
||||
import pytest
|
||||
import yaml
|
||||
|
||||
from backend.gias_codes import RELIGIOUS_CHARACTER, SCHOOL_TYPE
|
||||
from backend.school_groups import (
|
||||
FAITH_GROUPS,
|
||||
TYPE_GROUPS,
|
||||
UNOFFERED_TYPE_CODES,
|
||||
faith_groups_for,
|
||||
type_group_for,
|
||||
)
|
||||
|
||||
DBT_PROJECT = Path(__file__).resolve().parents[2] / "pipeline" / "transform" / "dbt_project.yml"
|
||||
|
||||
|
||||
def _non_england_codes() -> set[int]:
|
||||
return set(yaml.safe_load(DBT_PROJECT.read_text())["vars"]["non_england_school_type_codes"])
|
||||
|
||||
|
||||
def test_every_type_code_is_in_exactly_one_place():
|
||||
places = [codes for _, _, codes in TYPE_GROUPS] + [UNOFFERED_TYPE_CODES, _non_england_codes()]
|
||||
for code in SCHOOL_TYPE:
|
||||
homes = sum(code in p for p in places)
|
||||
assert homes == 1, f"type code {code} ({SCHOOL_TYPE[code]}) is in {homes} places"
|
||||
|
||||
|
||||
def test_every_religion_code_has_a_faith():
|
||||
for code, name in RELIGIOUS_CHARACTER.items():
|
||||
assert any(code in codes for _, _, codes in FAITH_GROUPS), f"{code} {name!r}"
|
||||
|
||||
|
||||
def test_type_groups_in_display_order():
|
||||
assert [k for k, _, _ in TYPE_GROUPS] == [
|
||||
"academy", "council", "independent", "special", "post16", "alternative"]
|
||||
|
||||
|
||||
def test_faiths_in_display_order():
|
||||
assert [k for k, _, _ in FAITH_GROUPS] == [
|
||||
"none", "church_of_england", "roman_catholic", "other_christian",
|
||||
"jewish", "muslim", "other_faith"]
|
||||
|
||||
|
||||
@pytest.mark.parametrize("name, group", [
|
||||
("Academy converter", "academy"),
|
||||
("University technical college", "academy"),
|
||||
("Voluntary aided school", "council"),
|
||||
("Local authority nursery school", "council"),
|
||||
("Other independent school", "independent"),
|
||||
("Other independent special school", "special"),
|
||||
("Special post 16 institution", "special"),
|
||||
("Further education", "post16"),
|
||||
("Pupil referral unit", "alternative"),
|
||||
("academy CONVERTER", "academy"),
|
||||
])
|
||||
def test_type_group_by_name(name, group):
|
||||
assert type_group_for(name) == group
|
||||
|
||||
|
||||
@pytest.mark.parametrize("name", [
|
||||
"Higher education institutions", "Miscellaneous", "Unknown (9999)", "Academy", "", None, np.nan,
|
||||
])
|
||||
def test_unoffered_or_unknown_types_have_no_group(name):
|
||||
assert type_group_for(name) is None
|
||||
|
||||
|
||||
@pytest.mark.parametrize("name, faiths", [
|
||||
("Roman Catholic/Church of England", ("church_of_england", "roman_catholic")),
|
||||
("Roman Catholic/Anglican", ("church_of_england", "roman_catholic")),
|
||||
("Church of England/Methodist", ("church_of_england", "other_christian")),
|
||||
("Church of England/Christian", ("church_of_england",)),
|
||||
("Catholic", ("roman_catholic",)),
|
||||
("Inter- / non- denominational", ("other_christian",)),
|
||||
("Orthodox Jewish", ("jewish",)),
|
||||
("Sunni Deobandi", ("muslim",)),
|
||||
("Hindu", ("other_faith",)),
|
||||
("Does not apply", ("none",)),
|
||||
("None", ("none",)),
|
||||
])
|
||||
def test_faiths_by_name(name, faiths):
|
||||
assert faith_groups_for(name) == faiths
|
||||
|
||||
|
||||
@pytest.mark.parametrize("missing", [None, np.nan, "", " "])
|
||||
def test_a_missing_religion_is_no_religious_character(missing):
|
||||
assert faith_groups_for(missing) == ("none",)
|
||||
|
||||
|
||||
def test_an_unknown_religion_has_no_faith():
|
||||
assert faith_groups_for("Unknown (77)") == ()
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Run them to see them fail**
|
||||
|
||||
Run: `uv run --with-requirements requirements.txt --with pytest --with "httpx==0.27.0" python -m pytest backend/tests/test_school_groups.py -q`
|
||||
Expected: collection error, `ModuleNotFoundError: No module named 'backend.school_groups'`.
|
||||
|
||||
- [ ] **Step 3: Write the module**
|
||||
|
||||
Create `backend/school_groups.py`:
|
||||
|
||||
```python
|
||||
"""Parent-facing groups over GIAS establishment types and religious characters.
|
||||
|
||||
The 34 GIAS establishment types describe governance and funding, which for a
|
||||
mainstream state school barely changes what a parent experiences. The search
|
||||
filter offers six groups a parent recognises instead, and a faith filter in
|
||||
place of the faith signal that "Voluntary aided" and "Voluntary controlled"
|
||||
only half carry. See
|
||||
docs/superpowers/specs/2026-10-02-school-type-groups-and-faith-filter-design.md.
|
||||
|
||||
Groups are defined over GIAS codes and looked up by the translated name,
|
||||
because the DataFrame the API filters carries names only: the codes are
|
||||
replaced at load (data_loader.translate_gias_code_columns), the legacy-name
|
||||
mart fallback never had them, and test fixtures are written in names.
|
||||
"""
|
||||
|
||||
from typing import Optional
|
||||
|
||||
import pandas as pd
|
||||
|
||||
from .gias_codes import RELIGIOUS_CHARACTER, SCHOOL_TYPE
|
||||
|
||||
# (key, label, GIAS TypeOfEstablishment codes), in the order shown.
|
||||
TYPE_GROUPS: tuple[tuple[str, str, frozenset[int]], ...] = (
|
||||
# Academy sponsor led, Academy converter, Free schools, University technical
|
||||
# college, Studio schools, City technology college. UTCs and studio schools
|
||||
# are legally academies, and a family considering one searches by name.
|
||||
("academy", "State school: academy or free school", frozenset({28, 34, 35, 40, 41, 6})),
|
||||
# Community, Voluntary aided, Voluntary controlled, Foundation, LA nursery.
|
||||
("council", "State school: council-run", frozenset({1, 2, 3, 5, 15})),
|
||||
("independent", "Independent (fee-paying)", frozenset({11})),
|
||||
# Every special type, independent ones included (usually funded by the
|
||||
# council through an EHCP, so SEND provision to a parent, not private
|
||||
# school), and Special post 16 institutions.
|
||||
("special", "Special school (SEND)", frozenset({7, 8, 10, 12, 32, 33, 36, 44})),
|
||||
# Further education, Sixth form centres, the 16-19 academies and free schools.
|
||||
("post16", "Sixth form or college", frozenset({18, 31, 39, 45, 46})),
|
||||
# Pupil referral units and AP academies and free schools. Last: parents do
|
||||
# not apply to these; the local authority places children there.
|
||||
("alternative", "Alternative provision", frozenset({14, 38, 42, 43})),
|
||||
)
|
||||
|
||||
# In no group, so reachable only under "Any school type": Secure units,
|
||||
# Miscellaneous, Higher education institutions, Online provider, Institution
|
||||
# funded by other government department, Academy secure 16 to 19.
|
||||
UNOFFERED_TYPE_CODES: frozenset[int] = frozenset({24, 27, 29, 49, 56, 57})
|
||||
|
||||
# (key, label, GIAS ReligiousCharacter codes), in the order shown. A joint
|
||||
# school is in every faith its label names; a generic "Christian" beside a
|
||||
# named church adds nothing.
|
||||
FAITH_GROUPS: tuple[tuple[str, str, frozenset[int]], ...] = (
|
||||
# Does not apply, None, and 99 (a blank label).
|
||||
("none", "No religious character", frozenset({0, 6, 99})),
|
||||
("church_of_england", "Church of England",
|
||||
frozenset({2, 9, 10, 11, 12, 13, 19, 20, 30, 31, 32, 33, 34, 41, 48})),
|
||||
("roman_catholic", "Roman Catholic", frozenset({3, 11, 13, 35, 48})),
|
||||
# 28 "Inter- / non- denominational" is how GIAS files Christian schools
|
||||
# tied to no one church.
|
||||
("other_christian", "Other Christian",
|
||||
frozenset({4, 8, 9, 10, 12, 14, 15, 16, 17, 18, 19, 22, 26, 28, 30, 33,
|
||||
37, 38, 39, 40, 41, 44, 45, 46, 47})),
|
||||
("jewish", "Jewish", frozenset({5, 36, 43})),
|
||||
("muslim", "Muslim", frozenset({7, 42, 49})),
|
||||
("other_faith", "Other faith", frozenset({21, 24, 25, 29})),
|
||||
)
|
||||
|
||||
TYPE_GROUP_KEYS: frozenset[str] = frozenset(k for k, _, _ in TYPE_GROUPS)
|
||||
FAITH_KEYS: frozenset[str] = frozenset(k for k, _, _ in FAITH_GROUPS)
|
||||
|
||||
|
||||
def _key(name: str) -> str:
|
||||
return name.strip().lower()
|
||||
|
||||
|
||||
_TYPE_GROUP_BY_NAME: dict[str, str] = {
|
||||
_key(SCHOOL_TYPE[code]): key
|
||||
for key, _, codes in TYPE_GROUPS
|
||||
for code in codes
|
||||
if code in SCHOOL_TYPE
|
||||
}
|
||||
|
||||
_FAITHS_BY_NAME: dict[str, tuple[str, ...]] = {}
|
||||
for _faith, _, _codes in FAITH_GROUPS:
|
||||
for _code in sorted(_codes):
|
||||
if _code in RELIGIOUS_CHARACTER:
|
||||
_name = _key(RELIGIOUS_CHARACTER[_code])
|
||||
_FAITHS_BY_NAME[_name] = _FAITHS_BY_NAME.get(_name, ()) + (_faith,)
|
||||
|
||||
|
||||
def type_group_for(name: object) -> Optional[str]:
|
||||
"""The type group of a GIAS establishment type name, or None."""
|
||||
if not isinstance(name, str):
|
||||
return None
|
||||
return _TYPE_GROUP_BY_NAME.get(_key(name))
|
||||
|
||||
|
||||
def faith_groups_for(name: object) -> tuple[str, ...]:
|
||||
"""The faith groups of a GIAS religious character name.
|
||||
|
||||
A missing or blank name is "No religious character". A name the
|
||||
dictionary does not know has no faith, so it matches no faith option.
|
||||
"""
|
||||
if not isinstance(name, str):
|
||||
return ("none",) if name is None or pd.isna(name) else ()
|
||||
return _FAITHS_BY_NAME.get(_key(name), ())
|
||||
```
|
||||
|
||||
- [ ] **Step 4: Run the tests to see them pass**
|
||||
|
||||
Run: `uv run --with-requirements requirements.txt --with pytest --with "httpx==0.27.0" python -m pytest backend/tests/test_school_groups.py -q`
|
||||
Expected: all pass.
|
||||
|
||||
- [ ] **Step 5: Correct the spec's architecture**
|
||||
|
||||
In the spec, replace the `### backend/data_loader.py` subsection with:
|
||||
|
||||
```markdown
|
||||
### Grouping by name, at filter time
|
||||
|
||||
The groups are defined over codes but looked up by the translated name
|
||||
(`type_group_for(name)`, `faith_groups_for(name)`), when `/api/schools` and
|
||||
`/api/filters` filter. The DataFrame those endpoints read carries names only:
|
||||
`translate_gias_code_columns` replaces the codes at load, the legacy-name
|
||||
mart fallback never had codes, and the API test fixtures are written in
|
||||
names. The names come from the same dictionaries, so the lookup is exact.
|
||||
`data_loader.py` is unchanged.
|
||||
```
|
||||
|
||||
and in `### backend/school_groups.py (new)` replace the `type_group_for(code)` / `faith_groups_for(code)` bullet with `type_group_for(name) -> str | None` and `faith_groups_for(name) -> tuple[str, ...]` (a missing or blank name gives `("none",)`).
|
||||
|
||||
- [ ] **Step 6: Commit**
|
||||
|
||||
```bash
|
||||
git add backend/school_groups.py backend/tests/test_school_groups.py docs/superpowers/specs/2026-10-02-school-type-groups-and-faith-filter-design.md
|
||||
git commit -m "feat(api): group GIAS school types and religions for parents"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 2: The API filters
|
||||
|
||||
**Files:**
|
||||
- Modify: `backend/app.py` (imports near line 43; `get_schools` params ~738-747, sanitising ~755-759, secondary filters ~782-786, `school_type` filter ~886-889; `get_filter_options` ~1155-1180)
|
||||
- Test: `backend/tests/test_type_and_faith_filters.py`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: from Task 1, `TYPE_GROUPS`, `FAITH_GROUPS`, `TYPE_GROUP_KEYS`, `FAITH_KEYS`, `type_group_for`, `faith_groups_for`.
|
||||
- Produces:
|
||||
- `GET /api/schools?school_type=<group key | raw label>&faith=<faith key>`
|
||||
- `GET /api/filters` adds `"school_type_groups": [{"value": str, "label": str}]` and `"faiths": [{"value": str, "label": str}]`, in group order, groups with no school left out.
|
||||
|
||||
- [ ] **Step 1: Write the failing tests**
|
||||
|
||||
Create `backend/tests/test_type_and_faith_filters.py`:
|
||||
|
||||
```python
|
||||
"""/api/schools school-type groups and faith filter, and their /api/filters lists."""
|
||||
|
||||
import numpy as np
|
||||
import pandas as pd
|
||||
import pytest
|
||||
from fastapi.testclient import TestClient
|
||||
|
||||
# urn -> (GIAS school type, GIAS religious character)
|
||||
SCHOOLS = {
|
||||
100001: ("Community school", "Does not apply"),
|
||||
100002: ("Voluntary aided school", "Roman Catholic"),
|
||||
100003: ("Academy converter", "Roman Catholic/Church of England"),
|
||||
100004: ("Community special school", None),
|
||||
100005: ("Academy special converter", "Church of England"),
|
||||
100006: ("Other independent school", "Jewish"),
|
||||
100007: ("Miscellaneous", ""),
|
||||
}
|
||||
|
||||
|
||||
def _schools_df() -> pd.DataFrame:
|
||||
base = {
|
||||
"local_authority": "Testshire", "address": "1 Test Street", "town": "Testtown",
|
||||
"postcode": "TS1 1AA", "age_range": "4-11", "has_sixth_form": None,
|
||||
"gender": "Mixed", "admissions_policy": None, "ofsted_grade": np.nan,
|
||||
"ofsted_date": None, "ofsted_framework": None, "latitude": 51.5,
|
||||
"longitude": -0.1, "year": 202425, "total_pupils": 300,
|
||||
"rwm_expected_pct": np.nan, "attainment_8_score": np.nan, "phase": "Primary",
|
||||
}
|
||||
return pd.DataFrame([
|
||||
{**base, "urn": urn, "school_name": f"School {urn}",
|
||||
"school_type": t, "religious_denomination": r}
|
||||
for urn, (t, r) in SCHOOLS.items()
|
||||
])
|
||||
|
||||
|
||||
@pytest.fixture()
|
||||
def client(monkeypatch):
|
||||
from backend import app as app_module
|
||||
|
||||
monkeypatch.setattr(app_module, "load_latest_school_data", _schools_df)
|
||||
monkeypatch.setattr(app_module, "load_school_data", _schools_df)
|
||||
return TestClient(app_module.app, raise_server_exceptions=False)
|
||||
|
||||
|
||||
def _urns(client, **params):
|
||||
resp = client.get("/api/schools", params={"page_size": 50, **params})
|
||||
assert resp.status_code == 200, resp.text
|
||||
return sorted(s["urn"] for s in resp.json()["schools"])
|
||||
|
||||
|
||||
@pytest.mark.parametrize("key, urns", [
|
||||
("council", [100001, 100002]),
|
||||
("academy", [100003]),
|
||||
("special", [100004, 100005]),
|
||||
("independent", [100006]),
|
||||
("Special", [100004, 100005]),
|
||||
])
|
||||
def test_a_type_group_key_filters_to_its_group(client, key, urns):
|
||||
assert _urns(client, school_type=key) == urns
|
||||
|
||||
|
||||
def test_a_raw_type_label_still_filters_exactly(client):
|
||||
assert _urns(client, school_type="Community school") == [100001]
|
||||
|
||||
|
||||
@pytest.mark.parametrize("key, urns", [
|
||||
("roman_catholic", [100002, 100003]),
|
||||
("church_of_england", [100003, 100005]),
|
||||
("none", [100001, 100004, 100007]),
|
||||
("jewish", [100006]),
|
||||
("Roman_Catholic", [100002, 100003]),
|
||||
])
|
||||
def test_faith_filters_to_its_group_joint_schools_included(client, key, urns):
|
||||
assert _urns(client, faith=key) == urns
|
||||
|
||||
|
||||
def test_an_unknown_faith_returns_nothing(client):
|
||||
assert _urns(client, faith="nonsense") == []
|
||||
|
||||
|
||||
def test_type_and_faith_combine(client):
|
||||
assert _urns(client, school_type="special", faith="church_of_england") == [100005]
|
||||
|
||||
|
||||
def test_filters_lists_only_groups_present_in_order(client):
|
||||
body = client.get("/api/filters").json()
|
||||
assert body["school_type_groups"] == [
|
||||
{"value": "academy", "label": "State school: academy or free school"},
|
||||
{"value": "council", "label": "State school: council-run"},
|
||||
{"value": "independent", "label": "Independent (fee-paying)"},
|
||||
{"value": "special", "label": "Special school (SEND)"},
|
||||
]
|
||||
assert body["faiths"] == [
|
||||
{"value": "none", "label": "No religious character"},
|
||||
{"value": "church_of_england", "label": "Church of England"},
|
||||
{"value": "roman_catholic", "label": "Roman Catholic"},
|
||||
{"value": "jewish", "label": "Jewish"},
|
||||
]
|
||||
# The raw list is still there for anything that reads it.
|
||||
assert "Community school" in body["school_types"]
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Run them to see them fail**
|
||||
|
||||
Run: `uv run --with-requirements requirements.txt --with pytest --with "httpx==0.27.0" python -m pytest backend/tests/test_type_and_faith_filters.py -q`
|
||||
Expected: the group-key, faith and `/api/filters` tests fail (`KeyError: 'school_type_groups'`, empty URN lists); `test_a_raw_type_label_still_filters_exactly` passes.
|
||||
|
||||
- [ ] **Step 3: Implement**
|
||||
|
||||
In `backend/app.py`, add beside the other local imports (after the `from .schemas import ...` line):
|
||||
|
||||
```python
|
||||
from .school_groups import (
|
||||
FAITH_GROUPS,
|
||||
FAITH_KEYS,
|
||||
TYPE_GROUP_KEYS,
|
||||
TYPE_GROUPS,
|
||||
faith_groups_for,
|
||||
type_group_for,
|
||||
)
|
||||
```
|
||||
|
||||
Add a helper just above `def sanitize_search_input`:
|
||||
|
||||
```python
|
||||
def _names_in_group(names: pd.Series, in_group) -> set:
|
||||
"""The distinct names in a column that a group predicate accepts.
|
||||
|
||||
Evaluated once per distinct name rather than per row, so a filter over
|
||||
every school costs a few dozen lookups.
|
||||
"""
|
||||
return {n for n in names.dropna().unique() if in_group(n)}
|
||||
```
|
||||
|
||||
In `get_schools`, add the parameter after `has_sixth_form`:
|
||||
|
||||
```python
|
||||
faith: Optional[str] = Query(None, description="Filter by faith group key", max_length=40),
|
||||
```
|
||||
|
||||
and after `phase = sanitize_search_input(phase)`:
|
||||
|
||||
```python
|
||||
faith = sanitize_search_input(faith)
|
||||
```
|
||||
|
||||
After the `has_sixth_form` filter block (the one ending `df_latest = df_latest[flag if has_sixth_form == "yes" else ~flag]`), add:
|
||||
|
||||
```python
|
||||
# Faith group (backend/school_groups.py). A joint school is in every faith
|
||||
# its label names; a missing religious character is "none". An unknown key
|
||||
# matches nothing rather than being ignored, so a typo cannot show all.
|
||||
if faith:
|
||||
faith_key = faith.lower()
|
||||
if faith_key in FAITH_KEYS and "religious_denomination" in df_latest.columns:
|
||||
column = df_latest["religious_denomination"]
|
||||
matches = column.isin(_names_in_group(column, lambda n: faith_key in faith_groups_for(n)))
|
||||
# _names_in_group skips missing names; a missing religious
|
||||
# character is "No religious character".
|
||||
if faith_key == "none":
|
||||
matches = matches | column.isna()
|
||||
df_latest = df_latest[matches]
|
||||
else:
|
||||
df_latest = df_latest.iloc[0:0]
|
||||
```
|
||||
|
||||
Replace the existing `school_type` filter:
|
||||
|
||||
```python
|
||||
if school_type:
|
||||
schools_df = schools_df[
|
||||
schools_df["school_type"].str.lower() == school_type.lower()
|
||||
]
|
||||
```
|
||||
|
||||
with:
|
||||
|
||||
```python
|
||||
# A type group key (backend/school_groups.py), or for an old link a raw
|
||||
# GIAS type label, matched exactly as before.
|
||||
if school_type:
|
||||
type_key = school_type.lower()
|
||||
if type_key in TYPE_GROUP_KEYS:
|
||||
column = schools_df["school_type"]
|
||||
schools_df = schools_df[
|
||||
column.isin(_names_in_group(column, lambda n: type_group_for(n) == type_key))
|
||||
]
|
||||
else:
|
||||
schools_df = schools_df[schools_df["school_type"].str.lower() == type_key]
|
||||
```
|
||||
|
||||
In `get_filter_options`, add to the early `if df.empty:` return dict:
|
||||
|
||||
```python
|
||||
"school_type_groups": [],
|
||||
"faiths": [],
|
||||
```
|
||||
|
||||
and before the final `return {`:
|
||||
|
||||
```python
|
||||
def offered(groups, present):
|
||||
return [{"value": key, "label": label} for key, label, _ in groups if key in present]
|
||||
|
||||
type_groups_present = (
|
||||
{type_group_for(n) for n in df["school_type"].dropna().unique()} - {None}
|
||||
if "school_type" in df.columns else set()
|
||||
)
|
||||
faiths_present = (
|
||||
{f for n in df["religious_denomination"].unique() for f in faith_groups_for(n)}
|
||||
if "religious_denomination" in df.columns else set()
|
||||
)
|
||||
```
|
||||
|
||||
and add to the returned dict:
|
||||
|
||||
```python
|
||||
"school_type_groups": offered(TYPE_GROUPS, type_groups_present),
|
||||
"faiths": offered(FAITH_GROUPS, faiths_present),
|
||||
```
|
||||
|
||||
- [ ] **Step 4: Run the new tests, then the whole backend suite**
|
||||
|
||||
Run: `uv run --with-requirements requirements.txt --with pytest --with "httpx==0.27.0" python -m pytest backend/tests/test_type_and_faith_filters.py -q`
|
||||
Expected: all pass.
|
||||
|
||||
Run: `uv run --with-requirements requirements.txt --with pytest --with "httpx==0.27.0" python -m pytest backend/tests pipeline/tests scripts/ci/tests -q`
|
||||
Expected: all pass (the CI command; `pyyaml` comes from requirements or add `--with pyyaml` if collection fails on `import yaml`).
|
||||
|
||||
- [ ] **Step 5: Commit**
|
||||
|
||||
```bash
|
||||
git add backend/app.py backend/tests/test_type_and_faith_filters.py
|
||||
git commit -m "feat(api): filter schools by type group and by faith"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 3: The frontend filters
|
||||
|
||||
**Files:**
|
||||
- Modify: `nextjs-app/lib/types.ts` (`Filters` ~487-494, `SchoolSearchParams` ~558-570)
|
||||
- Modify: `nextjs-app/app/(frontend)/page.tsx` (props type ~15-29, `hasSearchParams` ~79-88, `fetchSchools` call ~96-109)
|
||||
- Modify: `nextjs-app/components/FilterBar.tsx`
|
||||
- Test: `nextjs-app/__tests__/components/FilterBarTypeFaith.test.tsx` (new)
|
||||
- Modify tests: `__tests__/components/ResultsToolbar.test.tsx`, `FilterSheet.test.tsx`, `FilterSheetPending.test.tsx`, `FilterBarOptions.test.tsx`
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: `/api/filters` keys `school_type_groups`, `faiths` (Task 2); URL params `school_type` (group key) and `faith`.
|
||||
- Produces: `export interface FilterOption { value: string; label: string }`; `Filters.school_type_groups?: FilterOption[]`; `Filters.faiths?: FilterOption[]`; `SchoolSearchParams.faith?: string`. FilterBar selects named "School type" and "Faith".
|
||||
|
||||
- [ ] **Step 1: Write the failing tests**
|
||||
|
||||
Create `nextjs-app/__tests__/components/FilterBarTypeFaith.test.tsx`:
|
||||
|
||||
```tsx
|
||||
import { fireEvent, render, screen, within } from '@testing-library/react';
|
||||
import { FilterBar } from '@/components/FilterBar';
|
||||
import { track } from '@/lib/analytics';
|
||||
|
||||
/*
|
||||
* School type offers six groups a parent recognises, not GIAS's 34 types, and
|
||||
* a Faith filter sits beside it (spec 2026-10-02-school-type-groups-and-faith-
|
||||
* filter-design.md). Both lists come from /api/filters.
|
||||
*/
|
||||
|
||||
let params = new URLSearchParams('postcode=SW196AR&radius=1');
|
||||
const push = jest.fn();
|
||||
jest.mock('next/navigation', () => ({
|
||||
useSearchParams: () => params,
|
||||
usePathname: () => '/',
|
||||
useRouter: () => ({ push, replace: jest.fn(), prefetch: jest.fn() }),
|
||||
}));
|
||||
jest.mock('@/lib/analytics', () => ({ track: jest.fn() }));
|
||||
|
||||
const filters = {
|
||||
local_authorities: ['Wandsworth'], school_types: ['Community school'], years: [],
|
||||
phases: ['Primary', 'Secondary'], genders: [], admissions_policies: [],
|
||||
school_type_groups: [
|
||||
{ value: 'academy', label: 'State school: academy or free school' },
|
||||
{ value: 'council', label: 'State school: council-run' },
|
||||
{ value: 'special', label: 'Special school (SEND)' },
|
||||
],
|
||||
faiths: [
|
||||
{ value: 'none', label: 'No religious character' },
|
||||
{ value: 'roman_catholic', label: 'Roman Catholic' },
|
||||
],
|
||||
};
|
||||
|
||||
const pushedParams = () => new URLSearchParams(push.mock.calls.at(-1)![0].split('?')[1]);
|
||||
const openSheet = () => {
|
||||
fireEvent.click(screen.getByRole('button', { name: /^Filters/ }));
|
||||
return screen.getByRole('dialog', { name: 'Filters' });
|
||||
};
|
||||
const optionsOf = (scope: HTMLElement, name: string) =>
|
||||
within(within(scope).getByRole('combobox', { name })).getAllByRole('option').map((o) => o.textContent);
|
||||
|
||||
beforeEach(() => {
|
||||
params = new URLSearchParams('postcode=SW196AR&radius=1');
|
||||
push.mockClear();
|
||||
jest.mocked(track).mockClear();
|
||||
});
|
||||
|
||||
describe('School type', () => {
|
||||
it('offers the groups, not the GIAS types, on desktop and in the sheet', () => {
|
||||
render(<FilterBar filters={filters} />);
|
||||
const groups = ['Any school type', 'State school: academy or free school',
|
||||
'State school: council-run', 'Special school (SEND)'];
|
||||
expect(optionsOf(screen.getByRole('group', { name: 'Filters' }), 'School type')).toEqual(groups);
|
||||
expect(optionsOf(openSheet(), 'School type')).toEqual(groups);
|
||||
});
|
||||
|
||||
it('puts the group key in the URL and names the chip by its label', () => {
|
||||
const view = render(<FilterBar filters={filters} />);
|
||||
fireEvent.change(within(openSheet()).getByRole('combobox', { name: 'School type' }),
|
||||
{ target: { value: 'special' } });
|
||||
expect(pushedParams().get('school_type')).toBe('special');
|
||||
params = new URLSearchParams('postcode=SW196AR&radius=1&school_type=special');
|
||||
view.rerender(<FilterBar filters={filters} />);
|
||||
expect(screen.getByRole('button', { name: 'Remove filter: Special school (SEND)' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('names an old raw-label link\'s chip by that label', () => {
|
||||
params = new URLSearchParams('postcode=SW196AR&radius=1&school_type=Community+school');
|
||||
render(<FilterBar filters={filters} />);
|
||||
expect(screen.getByRole('button', { name: 'Remove filter: Community school' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('is left out when the API sends no groups', () => {
|
||||
render(<FilterBar filters={{ ...filters, school_type_groups: undefined }} />);
|
||||
expect(screen.queryByRole('combobox', { name: 'School type' })).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Faith', () => {
|
||||
it('offers its options in the More filters panel and in the sheet', () => {
|
||||
render(<FilterBar filters={filters} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: /More filters/ }));
|
||||
const faiths = ['Any faith or none', 'No religious character', 'Roman Catholic'];
|
||||
expect(optionsOf(document.body, 'Faith')).toEqual(faiths);
|
||||
expect(optionsOf(openSheet(), 'Faith')).toEqual(faiths);
|
||||
});
|
||||
|
||||
it('shows as a chip, counts on both buttons, and clears with Clear all', () => {
|
||||
params = new URLSearchParams('postcode=SW196AR&radius=1&faith=roman_catholic');
|
||||
render(<FilterBar filters={filters} />);
|
||||
expect(screen.getByRole('button', { name: 'Remove filter: Roman Catholic' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'Filters, 1 applied' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /More filters \(1\)/ })).toBeInTheDocument();
|
||||
fireEvent.click(within(screen.getByRole('group', { name: 'Applied filters' }))
|
||||
.getByRole('button', { name: 'Clear all' }));
|
||||
expect(pushedParams().get('faith')).toBeNull();
|
||||
expect(pushedParams().get('postcode')).toBe('SW196AR');
|
||||
});
|
||||
|
||||
it('goes into the search analytics event', () => {
|
||||
params = new URLSearchParams('faith=roman_catholic');
|
||||
render(<FilterBar filters={filters} />);
|
||||
const input = screen.getByRole('searchbox', { name: 'School name or postcode' });
|
||||
fireEvent.change(input, { target: { value: 'st marys' } });
|
||||
fireEvent.submit(input.closest('form')!);
|
||||
expect(track).toHaveBeenCalledWith('search_submitted',
|
||||
expect.objectContaining({ filters_active: 'faith=roman_catholic', filters_count: 1 }));
|
||||
});
|
||||
|
||||
it('is left out when the API sends no faiths', () => {
|
||||
render(<FilterBar filters={{ ...filters, faiths: [] }} />);
|
||||
expect(within(openSheet()).queryByRole('combobox', { name: 'Faith' })).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Run them to see them fail**
|
||||
|
||||
Run (from `nextjs-app/`): `npx jest __tests__/components/FilterBarTypeFaith.test.tsx`
|
||||
Expected: failures; School type still lists `Community school`, no `Faith` combobox. (`tsc` also flags `school_type_groups` on `Filters`, which Step 3 fixes.)
|
||||
|
||||
- [ ] **Step 3: Types and page plumbing**
|
||||
|
||||
In `nextjs-app/lib/types.ts`, above `export interface Filters`:
|
||||
|
||||
```ts
|
||||
/** A filter option whose URL value differs from what a parent reads. */
|
||||
export interface FilterOption {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
```
|
||||
|
||||
and add to `Filters` (after `admissions_policies`):
|
||||
|
||||
```ts
|
||||
/** Parent-facing school type groups; the URL's school_type takes their value. */
|
||||
school_type_groups?: FilterOption[];
|
||||
faiths?: FilterOption[];
|
||||
```
|
||||
|
||||
and to `SchoolSearchParams` (after `has_sixth_form`):
|
||||
|
||||
```ts
|
||||
faith?: string;
|
||||
```
|
||||
|
||||
In `nextjs-app/app/(frontend)/page.tsx`: add `faith?: string;` to the `searchParams` type after `has_sixth_form?: string;`; add `params.faith ||` to `hasSearchParams` after `params.has_sixth_form`; add `faith: params.faith,` to the `fetchSchools({...})` call after `has_sixth_form: params.has_sixth_form,`.
|
||||
|
||||
- [ ] **Step 4: FilterBar**
|
||||
|
||||
In `nextjs-app/components/FilterBar.tsx`:
|
||||
|
||||
1. Add `"faith"` to `FILTER_KEYS` directly after `"school_type"`.
|
||||
2. After `const currentHasSixthForm = ...` add:
|
||||
|
||||
```tsx
|
||||
const currentFaith = searchParams.get("faith") || "";
|
||||
```
|
||||
|
||||
3. Add `currentFaith,` to the `activeDropdownFilters` array (after `currentLA,`). Faith lives behind More filters, so it counts there.
|
||||
4. In `handleSearchSubmit`'s `filters_active` list, after the `type=` line add:
|
||||
|
||||
```tsx
|
||||
currentFaith && `faith=${currentFaith}`,
|
||||
```
|
||||
|
||||
5. Add `currentFaith ||` to `hasActiveFilters` after `currentType ||`.
|
||||
6. Replace `const typeOptions = filters.school_types;` with:
|
||||
|
||||
```tsx
|
||||
// Six groups a parent recognises, not GIAS's 34 establishment types.
|
||||
const typeOptions = filters.school_type_groups ?? [];
|
||||
const faithOptions = filters.faiths ?? [];
|
||||
```
|
||||
|
||||
7. Add `faith: currentFaith,` to the `values` record after `school_type: currentType,`.
|
||||
8. In `labelFor`, before the `// Phase, gender and admissions values…` comment, add:
|
||||
|
||||
```tsx
|
||||
// An old link may carry a raw GIAS type, which reads as itself.
|
||||
const labelled = { school_type: typeOptions, faith: faithOptions }[
|
||||
key as "school_type" | "faith"
|
||||
];
|
||||
if (labelled) return labelled.find((o) => o.value === value)?.label ?? value;
|
||||
```
|
||||
|
||||
9. In `typeSelect`, replace the options map with:
|
||||
|
||||
```tsx
|
||||
{typeOptions.map((o) => (
|
||||
<option key={o.value} value={o.value}>
|
||||
{o.label}
|
||||
</option>
|
||||
))}
|
||||
```
|
||||
|
||||
10. After `laSelect`, add:
|
||||
|
||||
```tsx
|
||||
const faithSelect = (look: Look) => (
|
||||
<SelectShell wide>
|
||||
<select
|
||||
value={currentFaith}
|
||||
onChange={(e) => handleFilterChange("faith", e.target.value)}
|
||||
className={selectClass(look, currentFaith)}
|
||||
aria-label="Faith"
|
||||
disabled={isPending && look !== "sheet"}
|
||||
>
|
||||
<option value="">Any faith or none</option>
|
||||
{faithOptions.map((o) => (
|
||||
<option key={o.value} value={o.value}>
|
||||
{o.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</SelectShell>
|
||||
);
|
||||
```
|
||||
|
||||
11. In the desktop row, change `{typeSelect("pill")}` to `{typeOptions.length > 0 && typeSelect("pill")}`.
|
||||
12. In the More filters panel, after `{laSelect("panel")}` add `{faithOptions.length > 0 && faithSelect("panel")}`.
|
||||
13. In the sheet, replace `<SheetField label="School type">{typeSelect("sheet")}</SheetField>` with:
|
||||
|
||||
```tsx
|
||||
{typeOptions.length > 0 && (
|
||||
<SheetField label="School type">{typeSelect("sheet")}</SheetField>
|
||||
)}
|
||||
{faithOptions.length > 0 && (
|
||||
<SheetField label="Faith">{faithSelect("sheet")}</SheetField>
|
||||
)}
|
||||
```
|
||||
|
||||
- [ ] **Step 5: Move the existing tests' fixtures to groups**
|
||||
|
||||
These tests used raw types as values; give each fixture the groups and use keys:
|
||||
|
||||
- `ResultsToolbar.test.tsx`: add to `filters` `school_type_groups: [{ value: 'council', label: 'State school: council-run' }],`; in 'counts only what More filters hides' change `school_type=Community+school` to `school_type=council`.
|
||||
- `FilterSheet.test.tsx`: add the same `school_type_groups` to `filters`; change both `school_type=Community+school` to `school_type=council`.
|
||||
- `FilterSheetPending.test.tsx`: add the same `school_type_groups`; change the `{ target: { value: 'Community school' } }` to `{ target: { value: 'council' } }` and `toBe('Community school')` to `toBe('council')`.
|
||||
- `FilterBarOptions.test.tsx`: add to `filters` `school_type_groups: [{ value: 'academy', label: 'State school: academy or free school' }, { value: 'council', label: 'State school: council-run' }],`; change `school_type=Community+school` (two places) to `school_type=council`; change the expected School type options to `['Any school type', 'State school: academy or free school', 'State school: council-run']`; change `toBe('Community school')` to `toBe('council')`; rename the first test to 'offer every school type group, gender and admissions policy, whatever the results hold'; and in the header comment replace "School type, gender and admissions offer the full lists" with "School type groups, gender and admissions offer the full lists".
|
||||
|
||||
- [ ] **Step 6: Run the frontend checks**
|
||||
|
||||
Run (from `nextjs-app/`): `npx jest` then `npx tsc --noEmit`
|
||||
Expected: all suites pass; no type errors.
|
||||
|
||||
- [ ] **Step 7: Commit**
|
||||
|
||||
```bash
|
||||
git add nextjs-app/lib/types.ts "nextjs-app/app/(frontend)/page.tsx" nextjs-app/components/FilterBar.tsx nextjs-app/__tests__/components/FilterBarTypeFaith.test.tsx nextjs-app/__tests__/components/ResultsToolbar.test.tsx nextjs-app/__tests__/components/FilterSheet.test.tsx nextjs-app/__tests__/components/FilterSheetPending.test.tsx nextjs-app/__tests__/components/FilterBarOptions.test.tsx
|
||||
git commit -m "feat(search): school type groups and a faith filter"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
### Task 4: E2E journey, build, PR
|
||||
|
||||
**Files:**
|
||||
- Modify: `e2e/tests/journeys.spec.ts` (insert before `test('a phase outside primary/secondary filters to that phase, not to everything'`)
|
||||
|
||||
**Interfaces:**
|
||||
- Consumes: the "School type" and "Faith" selects (Task 3); `/api/schools?school_type=&faith=` (Task 2).
|
||||
|
||||
- [ ] **Step 1: Add the journey**
|
||||
|
||||
```ts
|
||||
/*
|
||||
* School type offers six groups a parent recognises, and Faith sits beside it.
|
||||
* Data-invariant: asserts what every returned school is, never how many.
|
||||
*/
|
||||
test('school type groups and the faith filter narrow to what they name', async ({ page }) => {
|
||||
await page.goto('/?search=school');
|
||||
const type = page.getByRole('combobox', { name: 'School type', exact: true });
|
||||
await expect(type).toBeVisible({ timeout: 15_000 });
|
||||
await type.selectOption({ label: 'Special school (SEND)' });
|
||||
await expect(page).toHaveURL(/[?&]school_type=special(&|$)/);
|
||||
|
||||
await page.getByRole('button', { name: /^More filters/ }).click();
|
||||
await page.getByRole('combobox', { name: 'Faith', exact: true }).selectOption({ label: 'Roman Catholic' });
|
||||
await expect(page).toHaveURL(/[?&]faith=roman_catholic(&|$)/);
|
||||
|
||||
const res = await page.request.get(
|
||||
'/api/schools?search=school&school_type=special&faith=roman_catholic&page_size=100');
|
||||
expect(res.ok()).toBeTruthy();
|
||||
for (const s of (await res.json()).schools as { school_type: string; religious_denomination: string }[]) {
|
||||
expect(s.school_type).toMatch(/special/i);
|
||||
expect(s.religious_denomination).toMatch(/catholic/i);
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
- [ ] **Step 2: Confirm it parses, and fails on today's staging**
|
||||
|
||||
Run (from `e2e/`): `npx playwright test --list | grep "school type groups"`
|
||||
Expected: the test is listed.
|
||||
|
||||
Run: `BASE_URL=https://stx.schoolcompare.co.uk npx playwright test -g "school type groups" --retries=0 --reporter=line`
|
||||
Expected: FAIL at `selectOption({ label: 'Special school (SEND)' })`, because staging still offers the raw types. It can only pass after merge (the staging E2E gate runs post-merge).
|
||||
|
||||
- [ ] **Step 3: Build without a database**
|
||||
|
||||
Run (from `nextjs-app/`): `env -u DATABASE_URL npm run build`
|
||||
Expected: build completes.
|
||||
|
||||
- [ ] **Step 4: Commit, push, open the PR**
|
||||
|
||||
```bash
|
||||
git add e2e/tests/journeys.spec.ts
|
||||
git commit -m "test(e2e): school type groups and the faith filter"
|
||||
git push -u origin feat/school-type-groups-faith
|
||||
```
|
||||
|
||||
Open the PR on Gitea against `main` (credential-helper basic auth, as for PRs #168/#169), listing: the six groups and seven faiths, the old-link compatibility, the backend-by-name decision, test counts, and that the new journey can only pass post-merge.
|
||||
@@ -0,0 +1,233 @@
|
||||
# School Type Groups and a Faith Filter — Design
|
||||
|
||||
**Date:** 2026-10-02
|
||||
**Status:** shipped in PR #170; revised 2026-10-02 (one state group)
|
||||
**Scope:** search filters (`/` results toolbar and phone filter sheet), `/api/schools`, `/api/filters`
|
||||
|
||||
## Goal
|
||||
|
||||
Replace the School type filter's 34 GIAS establishment types with five groups a
|
||||
parent recognises, and add a Faith filter.
|
||||
|
||||
> **Revision, 2026-10-02.** PR #170 shipped six groups, with state schools
|
||||
> split into "academy or free school" and "council-run". They are now one,
|
||||
> "State school (free)". The split was two near-halves of the same pool, so it
|
||||
> rarely narrowed anything, and it did not follow the difference a parent feels
|
||||
> most, admissions: voluntary aided and foundation schools set their own
|
||||
> admissions, as academies do, while community and voluntary controlled
|
||||
> schools have theirs set by the council. Faith, which voluntary aided mostly
|
||||
> meant, has its own filter. The old keys `academy` and `council` resolve to
|
||||
> `state`, so their links keep working.
|
||||
|
||||
Since PR #169 the School type select offers the full GIAS list rather than the
|
||||
types in the results. That fixed the trap where choosing a type left only that
|
||||
type on offer, but it exposed the list itself: "Academy converter", "Academy
|
||||
sponsor led", "Free schools", "Foundation school", "Voluntary controlled
|
||||
school" and 29 more. These describe governance and funding. For a mainstream
|
||||
state school they change almost nothing a parent experiences, and parents
|
||||
cannot be expected to know the differences.
|
||||
|
||||
What parents actually ask is: is it free, is it mainstream, is it for children
|
||||
with special needs, is it a sixth form or college, and is it a faith school.
|
||||
The first four are the type groups below. The fifth is the real meaning behind
|
||||
"Voluntary aided" and "Voluntary controlled", but many academies are faith
|
||||
schools too, so it gets its own filter rather than hiding inside type.
|
||||
|
||||
## Non-goals
|
||||
|
||||
- Changing what a school page or result row shows. They keep the precise GIAS
|
||||
type ("Academy sponsor led"), where it is information, not a choice.
|
||||
- Removing the "not offered" types from search results. They stay reachable
|
||||
under "Any school type"; whether parents should see them at all is a
|
||||
separate decision.
|
||||
- Reordering the type options by phase (for example "Sixth form or college"
|
||||
first for 16 plus). Fixed order is simpler.
|
||||
- The rankings page, which has no type filter.
|
||||
- Changing `result_filters`. Its `school_types` key is already unread
|
||||
(docs/LEGACY_CODE.md).
|
||||
|
||||
## Type groups
|
||||
|
||||
Order is the order shown. Codes are GIAS `TypeOfEstablishment` codes
|
||||
(`backend/gias_codes.py: SCHOOL_TYPE`). Counts are staging schools on
|
||||
2026-10-02.
|
||||
|
||||
| Key | Label | GIAS codes | Schools |
|
||||
|---|---|---|---|
|
||||
| `state` | State school (free) | 28 Academy sponsor led, 34 Academy converter, 35 Free schools, 40 University technical college, 41 Studio schools, 6 City technology college, 1 Community school, 2 Voluntary aided school, 3 Voluntary controlled school, 5 Foundation school, 15 Local authority nursery school | 20,502 |
|
||||
| `independent` | Independent (fee-paying) | 11 Other independent school | 1,585 |
|
||||
| `special` | Special school (SEND) | 7 Community special, 12 Foundation special, 44 Academy special converter, 33 Academy special sponsor led, 36 Free schools special, 8 Non-maintained special, 10 Other independent special, 32 Special post 16 institution | 2,227 |
|
||||
| `post16` | Sixth form or college | 18 Further education, 31 Sixth form centres, 45 Academy 16-19 converter, 46 Academy 16 to 19 sponsor led, 39 Free schools 16 to 19 | 302 |
|
||||
| `alternative` | Alternative provision | 14 Pupil referral unit, 42 Academy AP converter, 43 Academy AP sponsor led, 38 Free schools AP | 331 |
|
||||
|
||||
**Not offered** (no group, reachable only under "Any school type"): 29 Higher
|
||||
education institutions, 27 Miscellaneous, 24 Secure units, 49 Online provider,
|
||||
57 Academy secure 16 to 19, 56 Institution funded by other government
|
||||
department. 238 schools.
|
||||
|
||||
**Excluded upstream** (never in the marts): 25, 26, 30, 37, per
|
||||
`non_england_school_type_codes` in `pipeline/transform/dbt_project.yml`.
|
||||
|
||||
### Judgement calls
|
||||
|
||||
- **Independent special schools are Special, not Independent.** They are
|
||||
usually funded by the local authority through a child's EHCP; to a parent
|
||||
they are SEND provision, not private school.
|
||||
- **UTCs, studio schools and city technology colleges are state schools.** They
|
||||
are legally academies, they are few (66 together), and a family considering
|
||||
one searches for it by name.
|
||||
- **Academies and council-run schools are one group.** See the revision note
|
||||
under Goal.
|
||||
- **Special post 16 institutions are Special, not Sixth form or college.** The
|
||||
defining fact for a parent is the SEND provision.
|
||||
- **Alternative provision is last.** Parents do not apply to it; the local
|
||||
authority places children there.
|
||||
|
||||
## Faith groups
|
||||
|
||||
Codes are GIAS `ReligiousCharacter` codes
|
||||
(`backend/gias_codes.py: RELIGIOUS_CHARACTER`). A joint school belongs to every
|
||||
faith its label names, so "Roman Catholic/Church of England" matches both
|
||||
Church of England and Roman Catholic. A generic "Christian" alongside a named
|
||||
denomination adds nothing ("Church of England/Christian" is Church of England
|
||||
only).
|
||||
|
||||
| Key | Label | GIAS codes |
|
||||
|---|---|---|
|
||||
| `none` | No religious character | 0 Does not apply, 6 None, 99 (blank), and a missing code |
|
||||
| `church_of_england` | Church of England | 2, 31 Anglican, 34 Anglican/Church of England, 20 CofE/Christian, 32 Anglican/Christian, and the joint codes 9, 10, 11, 12, 13, 19, 30, 33, 41, 48 |
|
||||
| `roman_catholic` | Roman Catholic | 3, 35 Catholic, and the joint codes 11, 13, 48 |
|
||||
| `other_christian` | Other Christian | 4 Methodist, 8 Seventh Day Adventist, 14 Quaker, 15 Christian, 16 United Reformed Church, 17 Congregational Church, 18 Free Church, 22 Greek Orthodox, 26 Moravian, 28 Inter- / non- denominational, 37 Christian/Evangelical, 38 Christian Science, 39 Christian/Methodist, 40 Christian/non-denominational, 44 Plymouth Brethren Christian Church, 45 Protestant, 46 Protestant/Evangelical, 47 Reformed Baptist, and the joint codes 9, 10, 12, 19, 30, 33, 41 |
|
||||
| `jewish` | Jewish | 5 Jewish, 36 Charadi Jewish, 43 Orthodox Jewish |
|
||||
| `muslim` | Muslim | 7 Muslim, 42 Islam, 49 Sunni Deobandi |
|
||||
| `other_faith` | Other faith | 21 Sikh, 24 Buddhist, 25 Hindu, 29 Multi-faith |
|
||||
|
||||
The joint codes: 9 CofE/Methodist, 10 Methodist/CofE, 11 CofE/RC, 12 CofE/URC,
|
||||
13 RC/CofE, 19 CofE/Free Church, 30 CofE/Methodist/URC/Baptist,
|
||||
33 Anglican/Evangelical, 41 CofE/Evangelical, 48 RC/Anglican.
|
||||
|
||||
28 "Inter- / non- denominational" is filed as Other Christian: GIAS uses it for
|
||||
Christian schools that are not tied to one church.
|
||||
|
||||
## Architecture
|
||||
|
||||
Grouping lives in the backend, not dbt. The API already translates GIAS codes
|
||||
to names when it loads the marts (`backend/data_loader.py:
|
||||
translate_gias_code_columns`), and every filter is applied to that DataFrame.
|
||||
Grouping there needs no mart change, so there is no Airflow run between merge
|
||||
and staging showing it.
|
||||
|
||||
### `backend/school_groups.py` (new)
|
||||
|
||||
- `TYPE_GROUPS`: ordered `(key, label, frozenset[int])` per type group.
|
||||
- `UNOFFERED_TYPE_CODES`: the not-offered codes, so that "every code is
|
||||
accounted for" is testable.
|
||||
- `FAITH_GROUPS`: ordered `(key, label, frozenset[int])` per faith group.
|
||||
- `type_group_for(name) -> str | None` and
|
||||
`faith_groups_for(name) -> tuple[str, ...]` (a missing or blank name gives
|
||||
`("none",)`).
|
||||
|
||||
No dependence on the generated GIAS dictionaries beyond their codes, so the
|
||||
backend/pipeline dictionary parity test is untouched.
|
||||
|
||||
### Grouping by name, at filter time
|
||||
|
||||
The groups are defined over codes but looked up by the translated name
|
||||
(`type_group_for(name)`, `faith_groups_for(name)`), when `/api/schools` and
|
||||
`/api/filters` filter. The DataFrame those endpoints read carries names only:
|
||||
`translate_gias_code_columns` replaces the codes at load, the legacy-name
|
||||
mart fallback never had codes, and the API test fixtures are written in
|
||||
names. The names come from the same dictionaries, so the lookup is exact.
|
||||
`data_loader.py` is unchanged.
|
||||
|
||||
### `/api/schools`
|
||||
|
||||
Both filters work on the name columns at request time. `_names_in_group`
|
||||
collects the distinct `school_type` or `religious_denomination` names the
|
||||
group accepts, once per distinct name rather than per row, and the rows are
|
||||
kept with `isin`. No group column is stored.
|
||||
|
||||
- `school_type`: if the value is a type group key (any case), keep the rows
|
||||
whose `school_type` name `type_group_for` puts in that group. Otherwise
|
||||
filter on the raw label exactly as today, so an old
|
||||
`?school_type=Community+school` link keeps working.
|
||||
- `faith` (new, optional, `max_length=40`, sanitised like the others): keep the
|
||||
rows whose `religious_denomination` name `faith_groups_for` puts in that
|
||||
faith (any case); for `none`, rows with a missing name too. An unknown key
|
||||
returns no schools rather than being ignored, so a typo does not silently
|
||||
show everything.
|
||||
|
||||
### `/api/filters`
|
||||
|
||||
Two new keys:
|
||||
|
||||
- `school_type_groups`: `[{value, label}]` in `TYPE_GROUPS` order, only groups
|
||||
with at least one school.
|
||||
- `faiths`: `[{value, label}]` in `FAITH_GROUPS` order, same rule.
|
||||
|
||||
`school_types` stays as it is (the raw list), so nothing that reads it breaks.
|
||||
|
||||
### Frontend
|
||||
|
||||
- `lib/types.ts`: `Filters` gains optional `school_type_groups` and `faiths`
|
||||
(`{ value: string; label: string }[]`). Optional, so the empty fallbacks in
|
||||
`app/(frontend)/page.tsx` and `rankings/page.tsx` stay valid.
|
||||
- `app/(frontend)/page.tsx`: reads `faith` from the search params, counts it
|
||||
in `hasSearchParams`, and passes it to `fetchSchools`. `SchoolSearchParams`
|
||||
in `lib/types.ts` gains `faith`. HomeView's load-more already forwards every
|
||||
URL param. HomeView's `isSearchActive` is left as it is: like phase and
|
||||
gender, faith narrows a search rather than starting one.
|
||||
- `components/FilterBar.tsx`:
|
||||
- The School type select's options become `filters.school_type_groups`;
|
||||
"Any school type" stays first. With no groups (the API failed), the select
|
||||
is left out, as Gender and Admissions already are.
|
||||
- A new **Faith** select (`aria-label="Faith"`, "Any faith or none" first)
|
||||
from `filters.faiths`. On desktop it goes in the More filters panel, after
|
||||
Local authority. In the phone sheet it comes after School type.
|
||||
- `faith` joins `FILTER_KEYS` (chip and Filters count) and the More filters
|
||||
count, and `faith=` joins `filters_active` in the `search_submitted`
|
||||
analytics event.
|
||||
- Chip labels come from the option lists: "Special school (SEND)",
|
||||
"Roman Catholic". An old raw-label `school_type` shows its raw label.
|
||||
- `lib/utils.ts: isSpecialSchool` is unchanged. It reads a school's raw
|
||||
`school_type`, which still arrives.
|
||||
|
||||
## Testing
|
||||
|
||||
**Backend (pytest):**
|
||||
|
||||
- Every `SCHOOL_TYPE` code is in exactly one type group, in
|
||||
`UNOFFERED_TYPE_CODES`, or in `non_england_school_type_codes`. A new DfE
|
||||
code fails this test instead of silently vanishing from the filter.
|
||||
- Every `RELIGIOUS_CHARACTER` code maps to at least one faith group.
|
||||
- The joint codes map to each faith they name (11 and 48 → CofE and RC;
|
||||
9 → CofE and Other Christian) and 20 → CofE only.
|
||||
- `/api/schools?school_type=special` returns only special-group schools;
|
||||
`?school_type=Community+school` still filters by label.
|
||||
- `/api/schools?faith=roman_catholic` returns only matching schools, a joint
|
||||
school included; `?faith=nonsense` returns none.
|
||||
- `/api/filters` lists the groups in order and leaves out an empty one.
|
||||
- Run via uv, as the backend tests always are.
|
||||
|
||||
**Frontend (Jest):**
|
||||
|
||||
- School type offers the six group labels, not raw types.
|
||||
- Faith offers its options, in the panel and in the sheet.
|
||||
- A faith filter shows as a chip, counts on Filters and More filters, and
|
||||
clears with Clear all.
|
||||
- No groups or faiths in `filters` → the select is left out.
|
||||
|
||||
**E2E (`e2e/tests/journeys.spec.ts`):**
|
||||
|
||||
- A journey that picks "Special school (SEND)" and "Roman Catholic" from the
|
||||
selects, then checks through `/api/schools` with the same params that every
|
||||
returned school's `school_type` is a special type and its
|
||||
`religious_denomination` names Catholic. Data-invariant: it asserts the
|
||||
property, not a count.
|
||||
- It can only pass after merge; the staging E2E gate runs post-merge.
|
||||
|
||||
## Rollout
|
||||
|
||||
One PR; backend and frontend deploy together on merge. The frontend tolerates
|
||||
an API without the new keys (the selects are left out), so the order the
|
||||
containers update in does not matter.
|
||||
+268
-17
@@ -53,7 +53,7 @@ async function settledScrollLeft(scroller: Locator): Promise<number> {
|
||||
* whatever primaries the environment holds.
|
||||
*/
|
||||
async function twoPrimaryUrns(page: Page): Promise<[string, string]> {
|
||||
const res = await page.request.get('/api/schools?search=primary&per_page=50');
|
||||
const res = await page.request.get('/api/schools?search=primary&page_size=50');
|
||||
expect(res.ok()).toBeTruthy();
|
||||
const body = await res.json();
|
||||
const urns: string[] = (body.schools ?? [])
|
||||
@@ -66,7 +66,7 @@ async function twoPrimaryUrns(page: Page): Promise<[string, string]> {
|
||||
}
|
||||
|
||||
async function twoSecondaryUrns(page: Page): Promise<[string, string]> {
|
||||
const res = await page.request.get('/api/schools?search=school&per_page=100');
|
||||
const res = await page.request.get('/api/schools?search=school&page_size=100');
|
||||
expect(res.ok()).toBeTruthy();
|
||||
const body = await res.json();
|
||||
const urns: string[] = (body.schools ?? [])
|
||||
@@ -286,6 +286,130 @@ test('the phase filter switches straight from secondary to primary', async ({ pa
|
||||
await expect(phase).toHaveValue('primary');
|
||||
});
|
||||
|
||||
test('the phase filter lists phases in the order a child meets them', async ({ page }) => {
|
||||
// They were alphabetical, so "16 plus" and "All-through" came before Nursery.
|
||||
const childPath = ['Nursery', 'Primary', 'Middle deemed primary',
|
||||
'Middle deemed secondary', 'Secondary', '16 plus', 'All-through'];
|
||||
await page.goto('/?search=school');
|
||||
const phase = page.getByRole('combobox', { name: 'Phase' });
|
||||
await expect(phase).toBeVisible({ timeout: 15_000 });
|
||||
const offered = (await phase.locator('option').allTextContents())
|
||||
.filter((o) => childPath.includes(o));
|
||||
expect(offered, 'no phase on offer').toContain('Primary');
|
||||
expect(offered).toEqual(childPath.filter((p) => offered.includes(p)));
|
||||
});
|
||||
|
||||
test('school type and gender switch straight to another value', async ({ page }) => {
|
||||
// Their options came from the result set, which the filter had already
|
||||
// narrowed, so with one value chosen it was the only one on offer.
|
||||
await page.goto('/?search=school&gender=girls');
|
||||
// An applied gender filter opens More filters by itself.
|
||||
const gender = page.getByRole('combobox', { name: 'Gender', exact: true });
|
||||
await expect(gender).toHaveValue('girls', { timeout: 15_000 });
|
||||
await gender.selectOption('boys');
|
||||
await expect(page).toHaveURL(/[?&]gender=boys(&|$)/);
|
||||
|
||||
// Whatever types the data holds, choosing one leaves the same list on offer.
|
||||
const type = page.getByRole('combobox', { name: 'School type', exact: true });
|
||||
const offered = await type.locator('option').allTextContents();
|
||||
expect(offered.length, 'no school type to choose').toBeGreaterThan(1);
|
||||
await type.selectOption(offered[1]);
|
||||
await expect(page).toHaveURL(/[?&]school_type=/);
|
||||
await expect.poll(() => type.locator('option').allTextContents()).toEqual(offered);
|
||||
});
|
||||
|
||||
/*
|
||||
* School type offers six groups a parent recognises, and Faith sits beside it.
|
||||
* Data-invariant: asserts what every returned school is, never how many.
|
||||
*/
|
||||
// Clear all once dropped the search with the filters, which sent desktop back
|
||||
// to the home page instead of to the unfiltered results.
|
||||
test('Clear all removes the filters and keeps the search', async ({ page }) => {
|
||||
await page.goto('/?search=school&phase=primary');
|
||||
const row = page.getByRole('group', { name: 'Filters', exact: true });
|
||||
await expect(schoolLinks(page).first()).toBeVisible({ timeout: 15_000 });
|
||||
await row.getByRole('button', { name: 'Clear all', exact: true }).click();
|
||||
await expect(page).not.toHaveURL(/[?&]phase=/);
|
||||
await expect(page).toHaveURL(/[?&]search=school(&|$)/);
|
||||
await expect(schoolLinks(page).first()).toBeVisible();
|
||||
await expect(row.getByRole('button', { name: 'Clear all', exact: true })).toHaveCount(0);
|
||||
});
|
||||
|
||||
test('school type groups and the faith filter narrow to what they name', async ({ page }) => {
|
||||
await page.goto('/?search=school');
|
||||
const type = page.getByRole('combobox', { name: 'School type', exact: true });
|
||||
await expect(type).toBeVisible({ timeout: 15_000 });
|
||||
await type.selectOption({ label: 'Special school (SEND)' });
|
||||
await expect(page).toHaveURL(/[?&]school_type=special(&|$)/);
|
||||
|
||||
await page.getByRole('button', { name: /^More filters/ }).click();
|
||||
await page.getByRole('combobox', { name: 'Faith', exact: true }).selectOption({ label: 'Roman Catholic' });
|
||||
await expect(page).toHaveURL(/[?&]faith=roman_catholic(&|$)/);
|
||||
|
||||
const res = await page.request.get(
|
||||
'/api/schools?search=school&school_type=special&faith=roman_catholic&page_size=100');
|
||||
expect(res.ok()).toBeTruthy();
|
||||
for (const s of (await res.json()).schools as { school_type: string; religious_denomination: string }[]) {
|
||||
expect(s.school_type).toMatch(/special/i);
|
||||
expect(s.religious_denomination).toMatch(/catholic/i);
|
||||
}
|
||||
});
|
||||
|
||||
/*
|
||||
* Search rows printed tags the register does not hold. Every non-selective
|
||||
* secondary was "Selective" ("non-selective" contains "selective"), and a
|
||||
* school with no religious character got "Faith priority" or a bare "None"
|
||||
* chip, because only "Does not apply" was excluded. Data-invariant: each test
|
||||
* picks its school from the API and reads only that school's row.
|
||||
*/
|
||||
async function rowTags(page: Page, school: { urn: number; school_name: string }) {
|
||||
await searchByName(page, school.school_name);
|
||||
const link = page.locator(`a[href^="/school/${school.urn}-"]`).first();
|
||||
await expect(link).toBeVisible({ timeout: 15_000 });
|
||||
return link.locator('xpath=ancestor::div[contains(@class, "__rowContent")][1]')
|
||||
.locator('[class*="__line2"]');
|
||||
}
|
||||
|
||||
test('a non-selective secondary is not tagged Selective in search', async ({ page }) => {
|
||||
const res = await page.request.get(
|
||||
'/api/schools?search=school&phase=secondary&admissions_policy=non-selective&page_size=1');
|
||||
expect(res.ok()).toBeTruthy();
|
||||
const [school] = (await res.json()).schools ?? [];
|
||||
test.skip(!school, 'no non-selective secondary in this environment');
|
||||
expect(school.admissions_policy, 'the admissions filter was ignored').toBe('Non-selective');
|
||||
|
||||
const tags = await rowTags(page, school);
|
||||
await expect(tags).toBeVisible();
|
||||
await expect(tags.getByText('Selective', { exact: true })).toHaveCount(0);
|
||||
});
|
||||
|
||||
test('a school with no religious character carries no faith tag in search', async ({ page }) => {
|
||||
const res = await page.request.get('/api/schools?search=school&faith=none&page_size=100');
|
||||
expect(res.ok()).toBeTruthy();
|
||||
// Not a selective school: the Selective tag would win and hide the bug.
|
||||
const school = ((await res.json()).schools ?? []).find(
|
||||
(s: { religious_denomination?: string; admissions_policy?: string }) =>
|
||||
s.religious_denomination === 'None' && !/selective/i.test(s.admissions_policy ?? ''));
|
||||
test.skip(!school, 'no school recorded with religious character "None" here');
|
||||
|
||||
const tags = await rowTags(page, school);
|
||||
await expect(tags).toBeVisible();
|
||||
await expect(tags.getByText('Faith priority', { exact: true })).toHaveCount(0);
|
||||
await expect(tags.getByText('None', { exact: true })).toHaveCount(0);
|
||||
});
|
||||
|
||||
test('search and the school page agree on how many pupils a secondary has', async ({ page }) => {
|
||||
// Search showed the GCSE year group as "pupils": Burntwood had 245 in
|
||||
// search and 1,462 on its page. Both now carry the register's count.
|
||||
const res = await page.request.get('/api/schools?search=school&phase=secondary&page_size=20');
|
||||
expect(res.ok()).toBeTruthy();
|
||||
const school = ((await res.json()).schools ?? []).find(
|
||||
(s: { total_pupils?: number | null }) => s.total_pupils != null);
|
||||
test.skip(!school, 'no secondary with a pupil count in this environment');
|
||||
const detail = await (await page.request.get(`/api/schools/${school.urn}`)).json();
|
||||
expect(school.total_pupils).toBe(detail.school_info.total_pupils);
|
||||
});
|
||||
|
||||
test('a phase outside primary/secondary filters to that phase, not to everything', async ({ page }) => {
|
||||
// The search page offers every GIAS phase, but the API only knew the grouped
|
||||
// ones and silently dropped the rest — so "Nursery" returned primaries.
|
||||
@@ -363,9 +487,10 @@ test('school detail page shows GIAS identity/contact details and drops the unwir
|
||||
if (info.telephone) {
|
||||
await expect(page.locator('a[href^="tel:"]').first()).toBeVisible();
|
||||
}
|
||||
if (info.parliamentary_constituency) {
|
||||
await expect(page.getByText('Constituency:').first()).toBeVisible();
|
||||
}
|
||||
// Constituency and county left the header in the facts-and-flags redesign:
|
||||
// neither helps a parent decide. The place pages keep both.
|
||||
await expect(page.getByText('Constituency:')).toHaveCount(0);
|
||||
await expect(page.getByText('County:')).toHaveCount(0);
|
||||
});
|
||||
|
||||
test('header details collapse behind a "Show all details" toggle on mobile', async ({ page }) => {
|
||||
@@ -475,7 +600,7 @@ test('school with no performance data still gets a working detail page', async (
|
||||
const candidates: number[] = [];
|
||||
for (const q of ['post 16', 'specialist college', 'sixth form']) {
|
||||
const resp = await page.request.get(
|
||||
`/api/schools?search=${encodeURIComponent(q)}&per_page=20`
|
||||
`/api/schools?search=${encodeURIComponent(q)}&page_size=20`
|
||||
);
|
||||
if (!resp.ok()) continue;
|
||||
const body = await resp.json();
|
||||
@@ -541,6 +666,13 @@ test('results map fullscreen falls back to an overlay on iOS', async ({ page })
|
||||
await expect(openFs).toBeVisible();
|
||||
});
|
||||
|
||||
/*
|
||||
* A postcode search with a list long enough to scroll. The default half mile
|
||||
* finds two schools around B1 1BB, so the page ends before the toolbar has
|
||||
* anything to stay pinned over; the scroll tests ask for a mile.
|
||||
*/
|
||||
const LONG_LIST = '/?postcode=B1%201BB&radius=1';
|
||||
|
||||
/*
|
||||
* The results toolbar: search, filters and the List/Map switch pinned under
|
||||
* the header, so none of them scroll away with the results.
|
||||
@@ -551,7 +683,7 @@ test('results map fullscreen falls back to an overlay on iOS', async ({ page })
|
||||
*/
|
||||
test('the results toolbar stays pinned with its List/Map switch', async ({ page }) => {
|
||||
await page.setViewportSize({ width: 1280, height: 800 });
|
||||
await searchByName(page, 'B1 1BB');
|
||||
await page.goto(LONG_LIST);
|
||||
await expect(schoolLinks(page).first()).toBeVisible({ timeout: 15_000 });
|
||||
|
||||
const view = page.getByRole('group', { name: 'Results view' });
|
||||
@@ -582,7 +714,7 @@ test('the results toolbar stays pinned with its List/Map switch', async ({ page
|
||||
* results and one without.
|
||||
*/
|
||||
test('the results toolbar keeps its line count whether or not there are results', async ({ page }) => {
|
||||
const withResults = '/?postcode=B1%201BB&radius=1';
|
||||
const withResults = LONG_LIST;
|
||||
// No school type matches this, so the same search returns nothing.
|
||||
const without = `${withResults}&school_type=no-such-type`;
|
||||
|
||||
@@ -643,6 +775,8 @@ test('a desktop postcode search opens on the map with the list beside it', async
|
||||
const name = (await card.locator('a').first().innerText()).trim();
|
||||
await card.click({ position: { x: 6, y: 6 } });
|
||||
await expect(page.locator('.sc-pin--selected')).toHaveCount(1);
|
||||
// Leaflet crossfades popups for 200ms, so two exist until the old one goes.
|
||||
await expect(page.locator('.sc-popup')).toHaveCount(1);
|
||||
await expect(page.locator('.sc-popup')).toContainText(name);
|
||||
// The card's View link is drawn like the list's, not in Leaflet's link blue.
|
||||
// Polled, because .btn transitions its colour.
|
||||
@@ -660,6 +794,7 @@ test('a desktop postcode search opens on the map with the list beside it', async
|
||||
await expect(show).toBeVisible();
|
||||
await page.keyboard.press('Enter');
|
||||
await expect(show).toHaveAttribute('aria-pressed', 'true');
|
||||
await expect(page.locator('.sc-popup')).toHaveCount(1);
|
||||
await expect(page.locator('.sc-popup')).toContainText(secondName);
|
||||
});
|
||||
|
||||
@@ -667,7 +802,7 @@ test('a desktop postcode search opens on the map with the list beside it', async
|
||||
for (const width of [360, 390, 402, 430]) {
|
||||
test(`a phone opens on the map, with the list a tap away, at ${width}px`, async ({ page }) => {
|
||||
await page.setViewportSize({ width, height: 800 });
|
||||
await searchByName(page, 'B1 1BB');
|
||||
await page.goto(LONG_LIST);
|
||||
|
||||
// On the map, with the floating button offering the list, clear of the
|
||||
// bottom tab bar.
|
||||
@@ -702,12 +837,13 @@ for (const width of [360, 390, 402, 430]) {
|
||||
// scrollWidth alone cannot see this page's overflow: .main clips on x, so
|
||||
// the search summary ran 40px off an iPhone 17 screen with scrollWidth
|
||||
// still equal to the viewport. Measure the toolbar's own edges instead;
|
||||
// the controls row scrolls by design, so only its box is held to the edge.
|
||||
// the applied-filter chips scroll by design, so only their line's box is
|
||||
// held to the edge.
|
||||
const offscreen = await page.evaluate(() => {
|
||||
const toolbar = document.querySelector('[class*="resultsToolbar"]');
|
||||
return [...(toolbar?.querySelectorAll('*') ?? [])]
|
||||
.filter((el) => (el as HTMLElement).offsetParent
|
||||
&& !el.parentElement?.closest('[class*="controlsRow"]'))
|
||||
&& !el.parentElement?.closest('[class*="chipsLine"]'))
|
||||
.map((el) => ({ el: (el.className?.toString() || el.tagName).slice(0, 40),
|
||||
right: Math.round(el.getBoundingClientRect().right) }))
|
||||
.filter((o) => o.right > window.innerWidth);
|
||||
@@ -739,6 +875,67 @@ for (const width of [360, 390, 402, 430]) {
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* Phones filter through one Filters button and a sheet with every filter in
|
||||
* it. The row it replaced scrolled sideways with "More filters" first, so
|
||||
* phase showed only in part, school type not at all, and the panel "More
|
||||
* filters" opened held neither.
|
||||
*/
|
||||
test('a phone filters through one sheet, and sees what it applied as chips', async ({ page }) => {
|
||||
await page.setViewportSize({ width: 390, height: 844 });
|
||||
await page.goto(LONG_LIST);
|
||||
const trigger = page.getByRole('button', { name: 'Filters', exact: true });
|
||||
await expect(trigger).toBeInViewport({ timeout: 15_000 });
|
||||
// The desktop row is gone at this width: no phase select until the sheet.
|
||||
await expect(page.getByRole('combobox', { name: 'Phase', exact: true })).toHaveCount(0);
|
||||
|
||||
await trigger.click();
|
||||
const sheet = page.getByRole('dialog', { name: 'Filters' });
|
||||
await expect(sheet).toBeVisible();
|
||||
await expect(sheet.getByRole('radio', { name: 'Within 1 mile' })).toBeChecked();
|
||||
for (const name of ['Phase', 'School type', 'Local authority']) {
|
||||
await expect(sheet.getByRole('combobox', { name, exact: true })).toBeVisible();
|
||||
}
|
||||
|
||||
// A change applies at once, and the sheet stays open for the next one.
|
||||
await sheet.getByRole('combobox', { name: 'Phase', exact: true }).selectOption('primary');
|
||||
await page.waitForURL(/[?&]phase=primary(&|$)/);
|
||||
await expect(sheet).toBeVisible();
|
||||
const show = sheet.getByRole('button', { name: /^(Show [\d,]+ schools?|No schools match)$/ });
|
||||
await expect(show).toBeVisible();
|
||||
|
||||
// MOBILE.md: the sheet clears the bottom tab bar, and its targets are 44px.
|
||||
// It slides up over 0.3s, so poll for where it comes to rest.
|
||||
await expect.poll(async () => {
|
||||
const box = (await show.boundingBox())!;
|
||||
return Math.round(box.y + box.height);
|
||||
}).toBeLessThanOrEqual(844);
|
||||
const small = await sheet.evaluate((el) =>
|
||||
[...el.querySelectorAll('button, select, label:has(input)')]
|
||||
.filter((n): n is HTMLElement => !!(n as HTMLElement).offsetParent)
|
||||
.map((n) => ({ t: n.innerText?.trim().slice(0, 24) || n.getAttribute('aria-label'),
|
||||
w: n.getBoundingClientRect().width, h: n.getBoundingClientRect().height }))
|
||||
.filter((o) => o.w < 44 || o.h < 44));
|
||||
expect(small).toEqual([]);
|
||||
|
||||
await show.click();
|
||||
await expect(sheet).toBeHidden();
|
||||
|
||||
// What was applied shows under the search, counted on the button, and comes
|
||||
// off with a tap, keeping the search.
|
||||
await expect(page.getByRole('button', { name: 'Filters, 1 applied' })).toBeInViewport();
|
||||
const chip = page.getByRole('group', { name: 'Applied filters' })
|
||||
.getByRole('button', { name: 'Remove filter: Primary' });
|
||||
await expect(chip).toBeInViewport();
|
||||
expect(await page.evaluate(() => document.documentElement.scrollWidth - window.innerWidth))
|
||||
.toBe(0);
|
||||
await chip.click();
|
||||
await expect(page).not.toHaveURL(/[?&]phase=/);
|
||||
await expect(page).toHaveURL(/[?&]postcode=B1(%20|\+)1BB/);
|
||||
await expect(page.getByRole('group', { name: 'Applied filters' })).toHaveCount(0);
|
||||
await expect(trigger).toBeInViewport();
|
||||
});
|
||||
|
||||
test('comparing two schools shows the parent-first sections side by side', async ({ page }) => {
|
||||
// Two same-phase (pure primary) schools so both stay on one tab.
|
||||
const [urn0, urn1] = await twoPrimaryUrns(page);
|
||||
@@ -982,7 +1179,7 @@ test('compare metric-help popover stays within the mobile viewport', async ({ pa
|
||||
test('admissions year/trend toggle still switches views after the server/client split', async ({ page }) => {
|
||||
// Find a school with at least two years carrying an offer rate — the toggle
|
||||
// only appears then. Data-invariant: uses whatever the environment holds.
|
||||
const res = await page.request.get('/api/schools?search=primary&per_page=50');
|
||||
const res = await page.request.get('/api/schools?search=primary&page_size=50');
|
||||
expect(res.ok()).toBeTruthy();
|
||||
const candidates: number[] = ((await res.json()).schools ?? []).map((s: { urn: number }) => s.urn);
|
||||
|
||||
@@ -1942,7 +2139,7 @@ test('English schools with Welsh postcodes are kept', async ({ page }) => {
|
||||
test('a Welsh school URL 404s while an English one still resolves', async ({ page }) => {
|
||||
// Paired on purpose: the Welsh assertion alone would also pass if the whole
|
||||
// site were down, which is the failure this test most needs to distinguish.
|
||||
const english = await page.request.get('/api/schools?search=primary&per_page=1');
|
||||
const english = await page.request.get('/api/schools?search=primary&page_size=1');
|
||||
expect(english.ok()).toBeTruthy();
|
||||
const [first] = (await english.json()).schools ?? [];
|
||||
expect(first, 'no English school available to compare against').toBeTruthy();
|
||||
@@ -2052,7 +2249,7 @@ test('a filtered homepage still canonicalises to the bare root', async ({ page }
|
||||
});
|
||||
|
||||
test('a school page canonicalises to its own slug on the www host', async ({ page }) => {
|
||||
const res = await page.request.get('/api/schools?search=primary&per_page=1');
|
||||
const res = await page.request.get('/api/schools?search=primary&page_size=1');
|
||||
expect(res.ok()).toBeTruthy();
|
||||
const [first] = (await res.json()).schools ?? [];
|
||||
expect(first, 'no school available').toBeTruthy();
|
||||
@@ -2127,7 +2324,7 @@ function blocksEverything(robots: string, agent: string): boolean {
|
||||
}
|
||||
|
||||
test('a school page on staging is noindexed too, not just the homepage', async ({ page }) => {
|
||||
const list = await page.request.get('/api/schools?search=primary&per_page=1');
|
||||
const list = await page.request.get('/api/schools?search=primary&page_size=1');
|
||||
const [first] = (await list.json()).schools ?? [];
|
||||
expect(first, 'no school available').toBeTruthy();
|
||||
|
||||
@@ -2738,7 +2935,7 @@ test('with autosuggest off, the search box is a plain input', async ({ page }) =
|
||||
async function secondaryWithDestinations(page: Page): Promise<{
|
||||
urn: string; destinations: any;
|
||||
}> {
|
||||
const res = await page.request.get('/api/schools?search=school&per_page=100');
|
||||
const res = await page.request.get('/api/schools?search=school&page_size=100');
|
||||
expect(res.ok()).toBeTruthy();
|
||||
const body = await res.json();
|
||||
const urns: string[] = (body.schools ?? [])
|
||||
@@ -2834,7 +3031,7 @@ test('switching to disadvantaged pupils never reveals a withheld figure', async
|
||||
});
|
||||
|
||||
test('a school with no sixth form has no post-16 destinations section', async ({ page }) => {
|
||||
const res = await page.request.get('/api/schools?search=school&per_page=100');
|
||||
const res = await page.request.get('/api/schools?search=school&page_size=100');
|
||||
const body = await res.json();
|
||||
const noSixthForm = (body.schools ?? [])
|
||||
.filter((s: { phase?: string; has_sixth_form?: boolean }) =>
|
||||
@@ -3145,3 +3342,57 @@ for (const width of [360, 390, 430]) {
|
||||
expect(failing).toEqual([]);
|
||||
});
|
||||
}
|
||||
|
||||
/*
|
||||
* The header's facts row read GIAS text as booleans: "Not applicable" put a
|
||||
* "Nursery" chip on secondaries aged 11–18, and "Girls" became "Girls's
|
||||
* school". Data-invariant: the chip follows whatever the API says.
|
||||
*/
|
||||
test('a girls\' secondary header names it properly and shows Nursery only when it has one', async ({ page }) => {
|
||||
const res = await page.request.get('/api/schools?search=school&phase=secondary&gender=girls&page_size=1');
|
||||
expect(res.ok()).toBeTruthy();
|
||||
const [school] = (await res.json()).schools ?? [];
|
||||
test.skip(!school, 'no girls\' secondary in this environment');
|
||||
expect(school.gender, 'the gender filter was ignored').toBe('Girls');
|
||||
const detail = await (await page.request.get(`/api/schools/${school.urn}`)).json();
|
||||
// Without the field, the Nursery assertion below would pass vacuously.
|
||||
expect(detail.school_info).toHaveProperty('nursery_provision');
|
||||
|
||||
await page.goto(`/school/${school.urn}`);
|
||||
const header = page.locator('header', { has: page.getByRole('heading', { level: 1 }) });
|
||||
await expect(header.getByText("Girls' school", { exact: true })).toBeVisible({ timeout: 15_000 });
|
||||
await expect(header.getByText(/'s school/)).toHaveCount(0);
|
||||
await expect(header.getByText('Nursery class', { exact: true }))
|
||||
.toHaveCount(detail.school_info.nursery_provision === 'Has Nursery Classes' ? 1 : 0);
|
||||
});
|
||||
|
||||
/*
|
||||
* The header states facts in fixed slots and flags only what applies: a
|
||||
* selective school is flagged Selective, and its type reads in the search
|
||||
* filter's words, not as a GIAS establishment type. The search row carries
|
||||
* the same flag. Data-invariant: the school comes from the API.
|
||||
*/
|
||||
const TYPE_GROUP_LABELS: Record<string, string> = {
|
||||
state: 'State school', independent: 'Independent school', special: 'Special school (SEND)',
|
||||
post16: 'Sixth form or college', alternative: 'Alternative provision',
|
||||
};
|
||||
|
||||
test('a selective school is flagged Selective, on its page and in search', async ({ page }) => {
|
||||
const res = await page.request.get(
|
||||
'/api/schools?search=school&phase=secondary&admissions_policy=selective&page_size=1');
|
||||
expect(res.ok()).toBeTruthy();
|
||||
const [school] = (await res.json()).schools ?? [];
|
||||
test.skip(!school, 'no selective secondary in this environment');
|
||||
expect(school.admissions_policy, 'the admissions filter was ignored').toBe('Selective');
|
||||
expect(school, 'the list must name the type group').toHaveProperty('type_group');
|
||||
|
||||
await page.goto(`/school/${school.urn}`);
|
||||
const header = page.locator('header', { has: page.getByRole('heading', { level: 1 }) });
|
||||
const flags = header.getByRole('list', { name: 'Admission and provision' });
|
||||
await expect(flags.getByText('Selective', { exact: true })).toBeVisible({ timeout: 15_000 });
|
||||
const typeLabel = TYPE_GROUP_LABELS[school.type_group] ?? school.school_type;
|
||||
await expect(header.getByText(typeLabel, { exact: true })).toBeVisible();
|
||||
|
||||
const tags = await rowTags(page, school);
|
||||
await expect(tags.getByText('Selective', { exact: true })).toBeVisible();
|
||||
});
|
||||
@@ -0,0 +1,129 @@
|
||||
import { fireEvent, render, screen, within } from '@testing-library/react';
|
||||
import { FilterBar } from '@/components/FilterBar';
|
||||
import type { ResultFilters } from '@/lib/types';
|
||||
|
||||
/*
|
||||
* A filter's options must not come from the results it is filtering, or
|
||||
* choosing one leaves only that one on offer: pick "Girls" and "Boys" is gone
|
||||
* until the filter is cleared. School type groups, gender and admissions offer the
|
||||
* full lists, as phase already did. Local authority stays scoped to the
|
||||
* results, so a postcode search offers the councils nearby rather than 153.
|
||||
*
|
||||
* Gender, sixth form and admissions show unless the phase chosen is a primary
|
||||
* one, so what the results happen to contain never decides which filters
|
||||
* there are.
|
||||
*/
|
||||
|
||||
let params = new URLSearchParams('postcode=SW196AR&radius=1');
|
||||
const push = jest.fn();
|
||||
jest.mock('next/navigation', () => ({
|
||||
useSearchParams: () => params,
|
||||
usePathname: () => '/',
|
||||
useRouter: () => ({ push, replace: jest.fn(), prefetch: jest.fn() }),
|
||||
}));
|
||||
jest.mock('@/lib/analytics', () => ({ track: jest.fn() }));
|
||||
|
||||
const filters = {
|
||||
local_authorities: ['Merton', 'Wandsworth'],
|
||||
school_types: ['Academy converter', 'Community school'], years: [],
|
||||
phases: ['Middle deemed primary', 'Nursery', 'Primary', 'Secondary', 'All-through'],
|
||||
genders: ['Boys', 'Girls', 'Mixed'],
|
||||
admissions_policies: ['Non-selective', 'Selective'],
|
||||
school_type_groups: [
|
||||
{ value: 'academy', label: 'State school: academy or free school' },
|
||||
{ value: 'council', label: 'State school: council-run' },
|
||||
],
|
||||
};
|
||||
|
||||
// What the results came back with once narrowed by the chosen filters.
|
||||
const narrowed: ResultFilters = {
|
||||
local_authorities: ['Wandsworth'], school_types: ['Community school'],
|
||||
phases: ['Secondary'], genders: ['Girls'], admissions_policies: ['Non-selective'],
|
||||
};
|
||||
|
||||
const pushedParams = () => new URLSearchParams(push.mock.calls.at(-1)![0].split('?')[1]);
|
||||
|
||||
const openSheet = () => {
|
||||
fireEvent.click(screen.getByRole('button', { name: /^Filters/ }));
|
||||
return screen.getByRole('dialog', { name: 'Filters' });
|
||||
};
|
||||
|
||||
const optionsOf = (sheet: HTMLElement, name: string) =>
|
||||
within(within(sheet).getByRole('combobox', { name }))
|
||||
.getAllByRole('option').map((o) => o.textContent);
|
||||
|
||||
beforeEach(() => {
|
||||
params = new URLSearchParams('postcode=SW196AR&radius=1');
|
||||
push.mockClear();
|
||||
});
|
||||
|
||||
describe('filter options', () => {
|
||||
it('offer every school type group, gender and admissions policy, whatever the results hold', () => {
|
||||
params = new URLSearchParams('postcode=SW196AR&radius=1&school_type=council&gender=girls');
|
||||
render(<FilterBar filters={filters} resultFilters={narrowed} />);
|
||||
const sheet = openSheet();
|
||||
expect(optionsOf(sheet, 'School type')).toEqual(['Any school type', 'State school: academy or free school', 'State school: council-run']);
|
||||
expect(optionsOf(sheet, 'Gender')).toEqual(['Boys, Girls & Mixed', 'Boys', 'Girls', 'Mixed']);
|
||||
expect(optionsOf(sheet, 'Admissions')).toEqual(['All admissions types', 'Non-selective', 'Selective']);
|
||||
});
|
||||
|
||||
it('keep local authority to the councils in the results', () => {
|
||||
render(<FilterBar filters={filters} resultFilters={narrowed} />);
|
||||
expect(optionsOf(openSheet(), 'Local authority')).toEqual(['All Local Authorities', 'Wandsworth']);
|
||||
});
|
||||
|
||||
it('offer the full school types in the desktop row too', () => {
|
||||
render(<FilterBar filters={filters} resultFilters={narrowed} />);
|
||||
const row = screen.getByRole('group', { name: 'Filters' });
|
||||
expect(within(within(row).getByRole('combobox', { name: 'School type' }))
|
||||
.getAllByRole('option')).toHaveLength(3);
|
||||
});
|
||||
});
|
||||
|
||||
describe('the secondary-only filters', () => {
|
||||
const secondaryOnly = ['Gender', 'Sixth form', 'Admissions'];
|
||||
const shown = (sheet: HTMLElement) =>
|
||||
secondaryOnly.filter((name) => within(sheet).queryByRole('combobox', { name }));
|
||||
|
||||
it('show with any phase, even when no secondary school is in the results', () => {
|
||||
const primariesOnly = { ...narrowed, phases: ['Primary'], genders: [], admissions_policies: [] };
|
||||
render(<FilterBar filters={filters} resultFilters={primariesOnly} />);
|
||||
expect(shown(openSheet())).toEqual(secondaryOnly);
|
||||
});
|
||||
|
||||
it.each(['primary', 'nursery', 'middle deemed primary', 'Middle-deemed Primary'])(
|
||||
'hide for the %s phase', (phase) => {
|
||||
params = new URLSearchParams(`postcode=SW196AR&radius=1&phase=${encodeURIComponent(phase)}`);
|
||||
render(<FilterBar filters={filters} />);
|
||||
expect(shown(openSheet())).toEqual([]);
|
||||
});
|
||||
|
||||
it('leave out a filter with no options, rather than show only its "any"', () => {
|
||||
render(<FilterBar filters={{ ...filters, genders: [], admissions_policies: [] }} />);
|
||||
expect(shown(openSheet())).toEqual(['Sixth form']);
|
||||
});
|
||||
|
||||
it.each(['secondary', 'all-through', 'middle deemed secondary', '16 plus'])('show for the %s phase', (phase) => {
|
||||
params = new URLSearchParams(`postcode=SW196AR&radius=1&phase=${phase}`);
|
||||
render(<FilterBar filters={filters} />);
|
||||
expect(shown(openSheet())).toEqual(secondaryOnly);
|
||||
});
|
||||
|
||||
it('are cleared by choosing a primary phase, rather than left applied and hidden', () => {
|
||||
params = new URLSearchParams(
|
||||
'postcode=SW196AR&radius=1&phase=secondary&gender=girls&has_sixth_form=yes&admissions_policy=selective&school_type=council');
|
||||
render(<FilterBar filters={filters} />);
|
||||
fireEvent.change(within(openSheet()).getByRole('combobox', { name: 'Phase' }), { target: { value: 'primary' } });
|
||||
const next = pushedParams();
|
||||
expect(next.get('phase')).toBe('primary');
|
||||
for (const key of ['gender', 'has_sixth_form', 'admissions_policy']) expect(next.get(key)).toBeNull();
|
||||
expect(next.get('school_type')).toBe('council');
|
||||
});
|
||||
|
||||
it('are kept when the new phase still has them', () => {
|
||||
params = new URLSearchParams('postcode=SW196AR&radius=1&phase=secondary&gender=girls');
|
||||
render(<FilterBar filters={filters} />);
|
||||
fireEvent.change(within(openSheet()).getByRole('combobox', { name: 'Phase' }), { target: { value: 'all-through' } });
|
||||
expect(pushedParams().get('gender')).toBe('girls');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,137 @@
|
||||
import { fireEvent, render, screen, within } from '@testing-library/react';
|
||||
import { FilterBar } from '@/components/FilterBar';
|
||||
import { track } from '@/lib/analytics';
|
||||
|
||||
/*
|
||||
* School type offers six groups a parent recognises, not GIAS's 34 types, and
|
||||
* a Faith filter sits beside it (spec 2026-10-02-school-type-groups-and-faith-
|
||||
* filter-design.md). Both lists come from /api/filters.
|
||||
*/
|
||||
|
||||
let params = new URLSearchParams('postcode=SW196AR&radius=1');
|
||||
const push = jest.fn();
|
||||
jest.mock('next/navigation', () => ({
|
||||
useSearchParams: () => params,
|
||||
usePathname: () => '/',
|
||||
useRouter: () => ({ push, replace: jest.fn(), prefetch: jest.fn() }),
|
||||
}));
|
||||
jest.mock('@/lib/analytics', () => ({ track: jest.fn() }));
|
||||
|
||||
const filters = {
|
||||
local_authorities: ['Wandsworth'], school_types: ['Community school'], years: [],
|
||||
phases: ['Primary', 'Secondary'], genders: [], admissions_policies: [],
|
||||
school_type_groups: [
|
||||
{ value: 'academy', label: 'State school: academy or free school' },
|
||||
{ value: 'council', label: 'State school: council-run' },
|
||||
{ value: 'special', label: 'Special school (SEND)' },
|
||||
],
|
||||
faiths: [
|
||||
{ value: 'none', label: 'No religious character' },
|
||||
{ value: 'roman_catholic', label: 'Roman Catholic' },
|
||||
],
|
||||
};
|
||||
|
||||
const pushedParams = () => new URLSearchParams(push.mock.calls.at(-1)![0].split('?')[1]);
|
||||
const openSheet = () => {
|
||||
fireEvent.click(screen.getByRole('button', { name: /^Filters/ }));
|
||||
return screen.getByRole('dialog', { name: 'Filters' });
|
||||
};
|
||||
const optionsOf = (scope: HTMLElement, name: string) =>
|
||||
within(within(scope).getByRole('combobox', { name })).getAllByRole('option').map((o) => o.textContent);
|
||||
|
||||
beforeEach(() => {
|
||||
params = new URLSearchParams('postcode=SW196AR&radius=1');
|
||||
push.mockClear();
|
||||
jest.mocked(track).mockClear();
|
||||
});
|
||||
|
||||
describe('School type', () => {
|
||||
it('offers the groups, not the GIAS types, on desktop and in the sheet', () => {
|
||||
render(<FilterBar filters={filters} />);
|
||||
const groups = ['Any school type', 'State school: academy or free school',
|
||||
'State school: council-run', 'Special school (SEND)'];
|
||||
expect(optionsOf(screen.getByRole('group', { name: 'Filters' }), 'School type')).toEqual(groups);
|
||||
expect(optionsOf(openSheet(), 'School type')).toEqual(groups);
|
||||
});
|
||||
|
||||
it('puts the group key in the URL and names the chip by its label', () => {
|
||||
const view = render(<FilterBar filters={filters} />);
|
||||
fireEvent.change(within(openSheet()).getByRole('combobox', { name: 'School type' }),
|
||||
{ target: { value: 'special' } });
|
||||
expect(pushedParams().get('school_type')).toBe('special');
|
||||
params = new URLSearchParams('postcode=SW196AR&radius=1&school_type=special');
|
||||
view.rerender(<FilterBar filters={filters} />);
|
||||
expect(screen.getByRole('button', { name: 'Remove filter: Special school (SEND)' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('names an old raw-label link\'s chip by that label', () => {
|
||||
params = new URLSearchParams('postcode=SW196AR&radius=1&school_type=Community+school');
|
||||
render(<FilterBar filters={filters} />);
|
||||
expect(screen.getByRole('button', { name: 'Remove filter: Community school' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('is left out when the API sends no groups', () => {
|
||||
render(<FilterBar filters={{ ...filters, school_type_groups: undefined }} />);
|
||||
expect(screen.queryByRole('combobox', { name: 'School type' })).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('Faith', () => {
|
||||
it('offers its options in the More filters panel and in the sheet', () => {
|
||||
render(<FilterBar filters={filters} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: /More filters/ }));
|
||||
const faiths = ['Any faith or none', 'No religious character', 'Roman Catholic'];
|
||||
expect(optionsOf(document.body, 'Faith')).toEqual(faiths);
|
||||
expect(optionsOf(openSheet(), 'Faith')).toEqual(faiths);
|
||||
});
|
||||
|
||||
it('shows as a chip, counts on both buttons, and clears with Clear all', () => {
|
||||
params = new URLSearchParams('postcode=SW196AR&radius=1&faith=roman_catholic');
|
||||
render(<FilterBar filters={filters} />);
|
||||
expect(screen.getByRole('button', { name: 'Remove filter: Roman Catholic' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'Filters, 1 applied' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: /More filters \(1\)/ })).toBeInTheDocument();
|
||||
fireEvent.click(within(screen.getByRole('group', { name: 'Applied filters' }))
|
||||
.getByRole('button', { name: 'Clear all' }));
|
||||
expect(pushedParams().get('faith')).toBeNull();
|
||||
expect(pushedParams().get('postcode')).toBe('SW196AR');
|
||||
});
|
||||
|
||||
it('goes into the search analytics event', () => {
|
||||
params = new URLSearchParams('faith=roman_catholic');
|
||||
render(<FilterBar filters={filters} />);
|
||||
const input = screen.getByRole('searchbox', { name: 'School name or postcode' });
|
||||
fireEvent.change(input, { target: { value: 'st marys' } });
|
||||
fireEvent.submit(input.closest('form')!);
|
||||
expect(track).toHaveBeenCalledWith('search_submitted',
|
||||
expect.objectContaining({ filters_active: 'faith=roman_catholic', filters_count: 1 }));
|
||||
});
|
||||
|
||||
it('is left out when the API sends no faiths', () => {
|
||||
render(<FilterBar filters={{ ...filters, faiths: [] }} />);
|
||||
expect(within(openSheet()).queryByRole('combobox', { name: 'Faith' })).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('a URL value the options do not spell the same way', () => {
|
||||
const row = () => screen.getByRole('group', { name: 'Filters' });
|
||||
|
||||
it('shows an old raw-label type in the select, and lets "Any" clear it', () => {
|
||||
params = new URLSearchParams('search=school&school_type=Community+school');
|
||||
render(<FilterBar filters={filters} />);
|
||||
const type = within(row()).getByRole('combobox', { name: 'School type' });
|
||||
expect(type).toHaveValue('Community school');
|
||||
expect(within(type).getByRole('option', { name: 'Community school' })).toBeInTheDocument();
|
||||
fireEvent.change(type, { target: { value: '' } });
|
||||
expect(pushedParams().get('school_type')).toBeNull();
|
||||
});
|
||||
|
||||
it('matches a key in another case, in the select and the chip', () => {
|
||||
params = new URLSearchParams('postcode=SW196AR&radius=1&school_type=Special&faith=Roman_Catholic');
|
||||
render(<FilterBar filters={filters} />);
|
||||
expect(within(row()).getByRole('combobox', { name: 'School type' })).toHaveValue('special');
|
||||
expect(screen.getByRole('button', { name: 'Remove filter: Special school (SEND)' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('button', { name: 'Remove filter: Roman Catholic' })).toBeInTheDocument();
|
||||
expect(screen.getByRole('combobox', { name: 'Faith' })).toHaveValue('roman_catholic');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,157 @@
|
||||
import { fireEvent, render, screen, within } from '@testing-library/react';
|
||||
import { FilterBar } from '@/components/FilterBar';
|
||||
|
||||
/*
|
||||
* Phones filter through one "Filters" button and a bottom sheet holding every
|
||||
* filter, rather than a sideways-scrolling row whose later chips (phase, type)
|
||||
* sat off-screen beside a "More filters" panel that did not contain them.
|
||||
* Which markup shows at which width is CSS and invisible to jsdom; these pin
|
||||
* the behaviour and the accessible names.
|
||||
*/
|
||||
|
||||
let params = new URLSearchParams('postcode=SW196AR&radius=1');
|
||||
const push = jest.fn();
|
||||
jest.mock('next/navigation', () => ({
|
||||
useSearchParams: () => params,
|
||||
usePathname: () => '/',
|
||||
useRouter: () => ({ push, replace: jest.fn(), prefetch: jest.fn() }),
|
||||
}));
|
||||
jest.mock('@/lib/analytics', () => ({ track: jest.fn() }));
|
||||
|
||||
const filters = {
|
||||
local_authorities: ['Wandsworth', 'Merton'], school_types: ['Community school'], years: [],
|
||||
phases: ['Primary', 'Secondary'], genders: ['Girls', 'Mixed'], admissions_policies: [],
|
||||
school_type_groups: [{ value: 'council', label: 'State school: council-run' }],
|
||||
};
|
||||
|
||||
const pushedParams = () => new URLSearchParams(push.mock.calls.at(-1)![0].split('?')[1]);
|
||||
|
||||
beforeEach(() => {
|
||||
params = new URLSearchParams('postcode=SW196AR&radius=1');
|
||||
push.mockClear();
|
||||
});
|
||||
|
||||
describe('the phone Filters button', () => {
|
||||
it('sits beside the folded search summary', () => {
|
||||
render(<FilterBar filters={filters} />);
|
||||
const summary = screen.getByRole('button', { name: /Edit search/ });
|
||||
expect(summary.parentElement).toContainElement(screen.getByRole('button', { name: 'Filters' }));
|
||||
});
|
||||
|
||||
it('counts every applied filter, phase and type included', () => {
|
||||
params = new URLSearchParams('postcode=SW196AR&radius=1&phase=primary&school_type=council');
|
||||
render(<FilterBar filters={filters} />);
|
||||
expect(screen.getByRole('button', { name: 'Filters, 2 applied' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('is still offered before anything has been searched', () => {
|
||||
params = new URLSearchParams('local_authority=Wandsworth');
|
||||
render(<FilterBar filters={filters} />);
|
||||
expect(screen.getByRole('button', { name: 'Filters, 1 applied' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('stays out of the hero', () => {
|
||||
render(<FilterBar filters={filters} isHero />);
|
||||
expect(screen.queryByRole('button', { name: /^Filters/ })).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('the filter sheet', () => {
|
||||
const openSheet = () => {
|
||||
fireEvent.click(screen.getByRole('button', { name: /^Filters/ }));
|
||||
return screen.getByRole('dialog', { name: 'Filters' });
|
||||
};
|
||||
|
||||
it('holds every filter in one place', () => {
|
||||
render(<FilterBar filters={filters} />);
|
||||
const sheet = openSheet();
|
||||
expect(within(sheet).getByRole('radiogroup', { name: 'Distance' })).toBeInTheDocument();
|
||||
for (const name of ['Phase', 'School type', 'Local authority']) {
|
||||
expect(within(sheet).getByRole('combobox', { name })).toBeInTheDocument();
|
||||
}
|
||||
});
|
||||
|
||||
it('shows the secondary-only filters once they apply', () => {
|
||||
params = new URLSearchParams('postcode=SW196AR&radius=1&phase=secondary');
|
||||
render(<FilterBar filters={filters} />);
|
||||
const sheet = openSheet();
|
||||
for (const name of ['Gender', 'Sixth form']) {
|
||||
expect(within(sheet).getByRole('combobox', { name })).toBeInTheDocument();
|
||||
}
|
||||
});
|
||||
|
||||
it('offers distance only for a postcode search', () => {
|
||||
params = new URLSearchParams('search=southmead');
|
||||
render(<FilterBar filters={filters} />);
|
||||
expect(within(openSheet()).queryByRole('radiogroup', { name: 'Distance' })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('changes the distance', () => {
|
||||
render(<FilterBar filters={filters} />);
|
||||
const distance = within(openSheet()).getByRole('radiogroup', { name: 'Distance' });
|
||||
expect(within(distance).getByRole('radio', { name: 'Within 1 mile' })).toBeChecked();
|
||||
fireEvent.click(within(distance).getByRole('radio', { name: 'Within 3 miles' }));
|
||||
expect(pushedParams().get('radius')).toBe('3');
|
||||
});
|
||||
|
||||
it('applies a change straight away and stays open for the next one', () => {
|
||||
render(<FilterBar filters={filters} />);
|
||||
const sheet = openSheet();
|
||||
fireEvent.change(within(sheet).getByRole('combobox', { name: 'Phase' }), { target: { value: 'primary' } });
|
||||
expect(pushedParams().get('phase')).toBe('primary');
|
||||
expect(screen.getByRole('dialog', { name: 'Filters' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('closes on the results button, which gives the count', () => {
|
||||
render(<FilterBar filters={filters} resultCount={12} />);
|
||||
fireEvent.click(within(openSheet()).getByRole('button', { name: 'Show 12 schools' }));
|
||||
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('says so when nothing matches', () => {
|
||||
render(<FilterBar filters={filters} resultCount={0} />);
|
||||
expect(within(openSheet()).getByRole('button', { name: 'No schools match' })).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('clears the filters but keeps the search', () => {
|
||||
params = new URLSearchParams('postcode=SW196AR&radius=1&phase=primary&local_authority=Wandsworth');
|
||||
render(<FilterBar filters={filters} />);
|
||||
fireEvent.click(within(openSheet()).getByRole('button', { name: 'Clear all' }));
|
||||
const next = pushedParams();
|
||||
expect(next.get('phase')).toBeNull();
|
||||
expect(next.get('local_authority')).toBeNull();
|
||||
expect(next.get('postcode')).toBe('SW196AR');
|
||||
expect(next.get('radius')).toBe('1');
|
||||
});
|
||||
});
|
||||
|
||||
describe('the applied-filter chips', () => {
|
||||
it('appear only when something is applied', () => {
|
||||
render(<FilterBar filters={filters} />);
|
||||
expect(screen.queryByRole('group', { name: 'Applied filters' })).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('name each filter by its label and remove it on tap', () => {
|
||||
params = new URLSearchParams('postcode=SW196AR&radius=1&phase=primary&gender=girls&has_sixth_form=no');
|
||||
render(<FilterBar filters={filters} />);
|
||||
const chips = screen.getByRole('group', { name: 'Applied filters' });
|
||||
for (const label of ['Primary', 'Girls', 'Without sixth form']) {
|
||||
expect(within(chips).getByRole('button', { name: `Remove filter: ${label}` })).toBeInTheDocument();
|
||||
}
|
||||
fireEvent.click(within(chips).getByRole('button', { name: 'Remove filter: Primary' }));
|
||||
const next = pushedParams();
|
||||
expect(next.get('phase')).toBeNull();
|
||||
expect(next.get('gender')).toBe('girls');
|
||||
expect(next.get('postcode')).toBe('SW196AR');
|
||||
});
|
||||
|
||||
it('carry a Clear all that keeps the search', () => {
|
||||
params = new URLSearchParams('search=southmead&school_type=council');
|
||||
render(<FilterBar filters={filters} />);
|
||||
fireEvent.click(within(screen.getByRole('group', { name: 'Applied filters' }))
|
||||
.getByRole('button', { name: 'Clear all' }));
|
||||
const next = pushedParams();
|
||||
expect(next.get('school_type')).toBeNull();
|
||||
expect(next.get('search')).toBe('southmead');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,81 @@
|
||||
import { act, fireEvent, render, screen, within } from '@testing-library/react';
|
||||
import { FilterBar } from '@/components/FilterBar';
|
||||
|
||||
/*
|
||||
* While a filter change is navigating, the sheet's controls stay enabled: a
|
||||
* control disabled under the user's focus drops it to <body>, and a keyboard or
|
||||
* screen-reader user is thrown out of the sheet after every change. A second
|
||||
* change made before the first lands must build on the first, not on the URL
|
||||
* useSearchParams still reports.
|
||||
*/
|
||||
|
||||
// Every transition stays pending, as a slow server render would.
|
||||
jest.mock('react', () => ({
|
||||
...jest.requireActual('react'),
|
||||
useTransition: () => [true, (fn: () => void) => fn()],
|
||||
}));
|
||||
|
||||
const params = new URLSearchParams('postcode=SW196AR&radius=1');
|
||||
const push = jest.fn();
|
||||
jest.mock('next/navigation', () => ({
|
||||
useSearchParams: () => params,
|
||||
usePathname: () => '/',
|
||||
useRouter: () => ({ push, replace: jest.fn(), prefetch: jest.fn() }),
|
||||
}));
|
||||
jest.mock('@/lib/analytics', () => ({ track: jest.fn() }));
|
||||
|
||||
const filters = {
|
||||
local_authorities: ['Wandsworth'], school_types: ['Community school'], years: [],
|
||||
phases: ['Primary', 'Secondary'], genders: [], admissions_policies: [],
|
||||
school_type_groups: [{ value: 'council', label: 'State school: council-run' }],
|
||||
};
|
||||
|
||||
const pushedParams = () => new URLSearchParams(push.mock.calls.at(-1)![0].split('?')[1]);
|
||||
|
||||
const openSheet = () => {
|
||||
fireEvent.click(screen.getByRole('button', { name: /^Filters/ }));
|
||||
return screen.getByRole('dialog', { name: 'Filters' });
|
||||
};
|
||||
|
||||
beforeEach(() => push.mockClear());
|
||||
|
||||
it('keeps the sheet usable, and says it is busy, while a change lands', () => {
|
||||
render(<FilterBar filters={filters} />);
|
||||
const sheet = openSheet();
|
||||
for (const name of ['Phase', 'School type', 'Local authority']) {
|
||||
expect(within(sheet).getByRole('combobox', { name })).toBeEnabled();
|
||||
}
|
||||
expect(within(sheet).getByRole('radio', { name: 'Within 3 miles' })).toBeEnabled();
|
||||
expect(sheet.querySelector('[aria-busy="true"]')).not.toBeNull();
|
||||
});
|
||||
|
||||
it('builds a second change on the first, not on the URL it has not reached', () => {
|
||||
render(<FilterBar filters={filters} />);
|
||||
const sheet = openSheet();
|
||||
fireEvent.change(within(sheet).getByRole('combobox', { name: 'Phase' }), { target: { value: 'primary' } });
|
||||
fireEvent.change(within(sheet).getByRole('combobox', { name: 'School type' }),
|
||||
{ target: { value: 'council' } });
|
||||
const next = pushedParams();
|
||||
expect(next.get('phase')).toBe('primary');
|
||||
expect(next.get('school_type')).toBe('council');
|
||||
expect(next.get('postcode')).toBe('SW196AR');
|
||||
});
|
||||
|
||||
describe('a screen that widens past phone width', () => {
|
||||
let listeners: ((e: { matches: boolean }) => void)[] = [];
|
||||
beforeEach(() => {
|
||||
listeners = [];
|
||||
window.matchMedia = jest.fn().mockImplementation((query: string) => ({
|
||||
matches: true, media: query,
|
||||
addEventListener: (_: string, l: (e: { matches: boolean }) => void) => listeners.push(l),
|
||||
removeEventListener: jest.fn(),
|
||||
}));
|
||||
});
|
||||
|
||||
it('closes the sheet, leaving the desktop row as the only filters', () => {
|
||||
render(<FilterBar filters={filters} />);
|
||||
openSheet();
|
||||
act(() => listeners.forEach((l) => l({ matches: false })));
|
||||
expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -361,12 +361,12 @@ describe('PlaceView school attributes', () => {
|
||||
{ urn: 1, school_name: 'Alpha Primary', phase: 'Primary',
|
||||
rwm_expected_pct: 82, attainment_8_score: null,
|
||||
age_range: '4-11', religious_denomination: 'Church of England',
|
||||
nursery_provision: true,
|
||||
nursery_provision: 'Has Nursery Classes',
|
||||
parliamentary_constituency: 'Chelmsford' } as never,
|
||||
{ urn: 2, school_name: 'Beta High', phase: 'Secondary',
|
||||
rwm_expected_pct: null, attainment_8_score: 47,
|
||||
age_range: '11-16', religious_denomination: 'Does not apply',
|
||||
nursery_provision: false,
|
||||
nursery_provision: 'No Nursery Classes',
|
||||
parliamentary_constituency: 'Witham' } as never,
|
||||
],
|
||||
averages: { rwm_expected_pct: 63, attainment_8_score: 45 },
|
||||
@@ -459,6 +459,18 @@ describe('PlaceView school attributes', () => {
|
||||
expect(cells.slice(2)).toEqual(['—', '—', '—', '—']);
|
||||
});
|
||||
|
||||
it('reads "Not applicable" as no nursery, not as a yes', () => {
|
||||
// GIAS sends text. Tested for truthiness, every value was a "Yes".
|
||||
const notApplicable: PlaceDetail = {
|
||||
...withAttributes,
|
||||
schools: [{ urn: 5, school_name: 'Epsilon Primary', phase: 'Primary',
|
||||
rwm_expected_pct: 70, nursery_provision: 'Not applicable' } as never],
|
||||
};
|
||||
const { container } = render(<PlaceView detail={notApplicable} phase="primary"
|
||||
englandAverage={61} neighbours={[]} />);
|
||||
expect(container.querySelector('tbody')!.textContent).not.toContain('Yes');
|
||||
});
|
||||
|
||||
it('gives an all-through school its nursery under primary only', () => {
|
||||
// All-through schools render in both groups. Nursery belongs to the
|
||||
// primary reading of the same school, not the secondary one.
|
||||
@@ -467,7 +479,7 @@ describe('PlaceView school attributes', () => {
|
||||
schools: [{ urn: 4, school_name: 'Delta Academy', phase: 'All-through',
|
||||
rwm_expected_pct: 66, attainment_8_score: 51,
|
||||
age_range: '4-18', religious_denomination: 'None',
|
||||
nursery_provision: true,
|
||||
nursery_provision: 'Has Nursery Classes',
|
||||
parliamentary_constituency: 'Chelmsford' } as never],
|
||||
};
|
||||
const { container } = render(<PlaceView detail={allThrough}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { act, fireEvent, render, screen } from '@testing-library/react';
|
||||
import { act, fireEvent, render, screen, within } from '@testing-library/react';
|
||||
import { HomeView } from '@/components/HomeView';
|
||||
import { FilterBar } from '@/components/FilterBar';
|
||||
import { fetchSchools } from '@/lib/api';
|
||||
@@ -35,6 +35,7 @@ jest.mock('@/components/SchoolMap', () => ({ SchoolMap: () => <div data-testid="
|
||||
const filters = {
|
||||
local_authorities: ['Wandsworth'], school_types: ['Community school'], years: [],
|
||||
phases: ['Primary', 'Secondary'], genders: [], admissions_policies: [],
|
||||
school_type_groups: [{ value: 'council', label: 'State school: council-run' }],
|
||||
};
|
||||
|
||||
function results(): SchoolsResponse {
|
||||
@@ -99,17 +100,27 @@ describe('the toolbar filters', () => {
|
||||
});
|
||||
|
||||
it('counts only what More filters hides', () => {
|
||||
params = new URLSearchParams('postcode=SW196AR&radius=1&school_type=Community+school&local_authority=Wandsworth');
|
||||
params = new URLSearchParams('postcode=SW196AR&radius=1&school_type=council&local_authority=Wandsworth');
|
||||
render(<FilterBar filters={filters} />);
|
||||
expect(screen.getByRole('button', { name: /More filters \(1\)/ })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('the phone filter row', () => {
|
||||
describe('the phone chips line', () => {
|
||||
it('drops its "more this way" fade when nothing is left to scroll', () => {
|
||||
params = new URLSearchParams('postcode=SW196AR&radius=1&phase=primary');
|
||||
render(<FilterBar filters={filters} />);
|
||||
// jsdom lays nothing out, so the row reads as not overflowing at all.
|
||||
expect(screen.getByRole('group', { name: 'Filters' }).className).toMatch(/controlsAtEnd/);
|
||||
// jsdom lays nothing out, so the line reads as not overflowing at all.
|
||||
const line = screen.getByRole('group', { name: 'Applied filters' }).parentElement!;
|
||||
expect(line.className).toMatch(/controlsAtEnd/);
|
||||
});
|
||||
});
|
||||
|
||||
describe('the phone filter sheet', () => {
|
||||
it('offers the results total', () => {
|
||||
render(<HomeView initialSchools={results()} filters={filters} />);
|
||||
fireEvent.click(screen.getByRole('button', { name: 'Filters' }));
|
||||
expect(screen.getByRole('button', { name: 'Show 1 school' })).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -155,3 +166,33 @@ describe('the folded search', () => {
|
||||
expect(screen.queryByRole('button', { name: /Edit search/ })).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('the results list', () => {
|
||||
it('repeats no applied filters above the results; the filter bar shows them', () => {
|
||||
params = new URLSearchParams('search=southmead&school_type=council&local_authority=Wandsworth');
|
||||
const { container } = render(<HomeView initialSchools={results()} filters={filters} />);
|
||||
expect(container.querySelector('[class*="activeFilters"]')).toBeNull();
|
||||
expect(screen.queryByText('Search: southmead')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('the desktop Clear all', () => {
|
||||
const row = () => screen.getByRole('group', { name: 'Filters' });
|
||||
|
||||
it('removes the filters and keeps the search, rather than going home', () => {
|
||||
params = new URLSearchParams('postcode=SW196AR&radius=3&phase=primary&school_type=council&local_authority=Wandsworth');
|
||||
render(<FilterBar filters={filters} />);
|
||||
fireEvent.click(within(row()).getByRole('button', { name: 'Clear all' }));
|
||||
const pushed = push.mock.calls.at(-1)![0] as string;
|
||||
const next = new URLSearchParams(pushed.split('?')[1]);
|
||||
expect(next.get('postcode')).toBe('SW196AR');
|
||||
expect(next.get('radius')).toBe('3');
|
||||
for (const key of ['phase', 'school_type', 'local_authority']) expect(next.get(key)).toBeNull();
|
||||
});
|
||||
|
||||
it('is not offered when only a search is applied', () => {
|
||||
params = new URLSearchParams('search=southmead');
|
||||
render(<FilterBar filters={filters} />);
|
||||
expect(within(row()).queryByRole('button', { name: /^Clear/ })).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,54 @@
|
||||
/**
|
||||
* SchoolRow (primary search results): line 2 prints the religious character
|
||||
* only when the school has one. The register's "None" was printed as a chip.
|
||||
*/
|
||||
|
||||
import '@testing-library/jest-dom';
|
||||
import { render, screen } from '@testing-library/react';
|
||||
import { SchoolRow } from '@/components/SchoolRow';
|
||||
import type { School } from '@/lib/types';
|
||||
|
||||
const base = {
|
||||
urn: 100001,
|
||||
school_name: 'Alpha Primary School',
|
||||
local_authority: 'Testshire',
|
||||
school_type: 'Free schools',
|
||||
phase: 'Primary',
|
||||
gender: 'Mixed',
|
||||
age_range: '4-11',
|
||||
rwm_expected_pct: 70,
|
||||
} as unknown as School;
|
||||
|
||||
describe('SchoolRow religious character', () => {
|
||||
it.each(['None', 'Does not apply', ''])(
|
||||
'prints nothing when the register says %p',
|
||||
(religious_denomination) => {
|
||||
render(<SchoolRow school={{ ...base, religious_denomination }} />);
|
||||
expect(screen.queryByText('None')).not.toBeInTheDocument();
|
||||
expect(screen.queryByText('Does not apply')).not.toBeInTheDocument();
|
||||
},
|
||||
);
|
||||
|
||||
it('prints a religious character the school has', () => {
|
||||
render(<SchoolRow school={{ ...base, religious_denomination: 'Church of England' }} />);
|
||||
expect(screen.getByText('Church of England')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('SchoolRow shares the school page flags', () => {
|
||||
it("prints the type in the search filter's terms", () => {
|
||||
render(<SchoolRow school={{ ...base, type_group: 'state' }} />);
|
||||
expect(screen.getByText('State school')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Free schools')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('flags a nursery class', () => {
|
||||
render(<SchoolRow school={{ ...base, nursery_provision: 'Has Nursery Classes' }} />);
|
||||
expect(screen.getByText('Nursery class')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("flags a boys' school", () => {
|
||||
render(<SchoolRow school={{ ...base, gender: 'Boys' }} />);
|
||||
expect(screen.getByText("Boys' school")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -65,3 +65,54 @@ describe('SecondarySchoolRow proposed-to-close tag', () => {
|
||||
expect(screen.queryByText(/Proposed to close/)).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('SecondarySchoolRow admissions tag', () => {
|
||||
it('tags a selective school', () => {
|
||||
render(<SecondarySchoolRow school={{ ...base, admissions_policy: 'Selective' }} />);
|
||||
expect(screen.getByText('Selective')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('does not tag a non-selective school as selective', () => {
|
||||
// "Non-selective" contains "selective": a substring test tagged every
|
||||
// comprehensive (Burntwood, Graveney) as Selective.
|
||||
render(<SecondarySchoolRow school={{ ...base, admissions_policy: 'Non-selective' }} />);
|
||||
expect(screen.queryByText('Selective')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it.each(['None', 'Does not apply'])(
|
||||
'gives no faith tag when the religious character is %p',
|
||||
(religious_denomination) => {
|
||||
render(
|
||||
<SecondarySchoolRow
|
||||
school={{ ...base, admissions_policy: 'Not applicable', religious_denomination }}
|
||||
/>,
|
||||
);
|
||||
expect(screen.queryByText(religious_denomination)).not.toBeInTheDocument();
|
||||
expect(screen.queryByText('Faith priority')).not.toBeInTheDocument();
|
||||
},
|
||||
);
|
||||
|
||||
it('tags the religious character the register records, not "Faith priority"', () => {
|
||||
render(
|
||||
<SecondarySchoolRow
|
||||
school={{ ...base, admissions_policy: 'Not applicable', religious_denomination: 'Church of England' }}
|
||||
/>,
|
||||
);
|
||||
expect(screen.getByText('Church of England')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Faith priority')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('SecondarySchoolRow shares the school page flags', () => {
|
||||
it("prints the type in the search filter's terms", () => {
|
||||
render(<SecondarySchoolRow school={{ ...base, type_group: 'state' }} />);
|
||||
expect(screen.getByText('State school')).toBeInTheDocument();
|
||||
expect(screen.queryByText('Academy')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("flags a girls' school and fees", () => {
|
||||
render(<SecondarySchoolRow school={{ ...base, type_group: 'independent', gender: 'Girls' }} />);
|
||||
expect(screen.getByText("Girls' school")).toBeInTheDocument();
|
||||
expect(screen.getByText('Fee-paying')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,141 @@
|
||||
/**
|
||||
* The school header: one fact line (phase, ages, type, pupils), then flags
|
||||
* only for what applies, then the address and the details.
|
||||
*
|
||||
* nursery_provision is GIAS text, not a boolean: "Has Nursery Classes",
|
||||
* "No Nursery Classes" or "Not applicable". Tested for truthiness, every one
|
||||
* of those read as a nursery, so secondaries aged 11–18 showed "Nursery".
|
||||
*/
|
||||
|
||||
import { screen, within } from '@testing-library/react';
|
||||
import type { School } from '@/lib/types';
|
||||
import { primaryFixture, secondaryFixture } from '../support/schoolFixtures';
|
||||
import { renderSchoolDetail, renderSecondarySchoolDetail } from '../support/renderSchoolDetail';
|
||||
|
||||
jest.mock('@/lib/analytics', () => ({
|
||||
track: jest.fn(),
|
||||
getNavigationSource: () => 'direct',
|
||||
}));
|
||||
jest.mock('@/components/PerformanceChart', () => ({
|
||||
PerformanceChart: () => <div data-testid="performance-chart" />,
|
||||
}));
|
||||
jest.mock('@/components/SatsChart', () => ({
|
||||
__esModule: true,
|
||||
default: () => <div data-testid="sats-chart" />,
|
||||
}));
|
||||
jest.mock('@/components/AdmissionsTrendChart', () => ({
|
||||
__esModule: true,
|
||||
default: () => <div data-testid="admissions-trend-chart" />,
|
||||
}));
|
||||
jest.mock('@/components/SchoolHeroMap', () => ({
|
||||
SchoolHeroMap: () => <div data-testid="hero-map" />,
|
||||
__esModule: true,
|
||||
}));
|
||||
|
||||
function withSchool<T extends { schoolInfo: School }>(fixture: T, info: Partial<School>): T {
|
||||
return { ...fixture, schoolInfo: { ...fixture.schoolInfo, ...info } };
|
||||
}
|
||||
|
||||
const flagList = () => screen.queryByRole('list', { name: 'Admission and provision' });
|
||||
const flagLabels = () => within(flagList()!).getAllByRole('listitem').map((li) => li.textContent);
|
||||
|
||||
describe('school header fact line', () => {
|
||||
it('states phase, ages, type and pupils, in that order', () => {
|
||||
renderSchoolDetail(withSchool(primaryFixture, { type_group: 'state' }));
|
||||
const line = screen.getByText('Ages 4–11').parentElement!;
|
||||
expect(line).toHaveTextContent(/^PrimaryAges 4–11State school420 pupils$/);
|
||||
});
|
||||
|
||||
it("prints the register's type name for a type in no group", () => {
|
||||
renderSchoolDetail(withSchool(primaryFixture, { type_group: null, school_type: 'Secure units' }));
|
||||
expect(screen.getByText('Secure units')).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('no longer prints the GIAS establishment type', () => {
|
||||
renderSecondarySchoolDetail(withSchool(secondaryFixture, { type_group: 'state' }));
|
||||
expect(screen.queryByText('Academy converter')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('school header flags', () => {
|
||||
it('shows no flag list for a school with nothing to flag', () => {
|
||||
renderSchoolDetail(withSchool(primaryFixture, { type_group: 'state' }));
|
||||
expect(flagList()).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('lists who-can-apply flags, then what the school offers', () => {
|
||||
renderSecondarySchoolDetail(withSchool(secondaryFixture, {
|
||||
type_group: 'independent', admissions_policy: 'Selective', gender: 'Girls',
|
||||
religious_denomination: 'Church of England', has_sixth_form: true,
|
||||
}));
|
||||
expect(flagLabels()).toEqual(['Fee-paying', 'Selective', "Girls' school", 'Church of England', 'Sixth form']);
|
||||
});
|
||||
|
||||
it('shows Nursery class when GIAS says the school has nursery classes', () => {
|
||||
renderSchoolDetail(withSchool(primaryFixture, { nursery_provision: 'Has Nursery Classes' }));
|
||||
expect(flagLabels()).toEqual(['Nursery class']);
|
||||
});
|
||||
|
||||
it.each(['No Nursery Classes', 'Not applicable', null])(
|
||||
'shows no nursery flag when GIAS says %p',
|
||||
(value) => {
|
||||
renderSecondarySchoolDetail(withSchool(secondaryFixture, { nursery_provision: value }));
|
||||
expect(screen.queryByText(/^Nursery/)).not.toBeInTheDocument();
|
||||
},
|
||||
);
|
||||
|
||||
it.each([['Girls', "Girls' school"], ['Boys', "Boys' school"]])(
|
||||
'labels a %s school with a plural possessive',
|
||||
(gender, label) => {
|
||||
renderSecondarySchoolDetail(withSchool(secondaryFixture, { gender }));
|
||||
expect(screen.getByText(label)).toBeInTheDocument();
|
||||
expect(screen.queryByText(/'s school/)).not.toBeInTheDocument();
|
||||
},
|
||||
);
|
||||
|
||||
it('says nothing for a mixed school', () => {
|
||||
renderSecondarySchoolDetail(withSchool(secondaryFixture, { gender: 'Mixed' }));
|
||||
expect(screen.queryByText(/^(Girls|Boys|Mixed)'s? school$/)).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('school header address', () => {
|
||||
it('names the council after the postcode', () => {
|
||||
renderSchoolDetail(primaryFixture);
|
||||
expect(screen.getByText(/TE1 1ST · Westshire/)).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('leaves the council out when the address already names it', () => {
|
||||
renderSchoolDetail(withSchool(primaryFixture, { local_authority: 'Testville' }));
|
||||
expect(screen.queryByText(/· Testville/)).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
describe('school header details', () => {
|
||||
const detailed = {
|
||||
headteacher_name: 'Mrs A Head', capacity: 426, county: 'Surrey',
|
||||
parliamentary_constituency: 'Putney', religious_denomination: 'Church of England',
|
||||
};
|
||||
|
||||
it('drops county, constituency and religious character', () => {
|
||||
renderSchoolDetail(withSchool(primaryFixture, detailed));
|
||||
expect(screen.queryByText('County:')).not.toBeInTheDocument();
|
||||
expect(screen.queryByText('Constituency:')).not.toBeInTheDocument();
|
||||
expect(screen.queryByText('Religious character:')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows the capacity', () => {
|
||||
renderSchoolDetail(withSchool(primaryFixture, detailed));
|
||||
expect(screen.getByText('Capacity:').parentElement).toHaveTextContent('Capacity: 426');
|
||||
});
|
||||
|
||||
it('names an academy trust', () => {
|
||||
renderSchoolDetail(withSchool(primaryFixture, { trust_name: 'BURNTWOOD TRUST' }));
|
||||
expect(screen.getByText('Academy trust:').parentElement).toHaveTextContent('BURNTWOOD TRUST');
|
||||
});
|
||||
|
||||
it("hides a trust that has the school's own name", () => {
|
||||
renderSchoolDetail(withSchool(primaryFixture, { trust_name: 'TEST PRIMARY SCHOOL' }));
|
||||
expect(screen.queryByText('Academy trust:')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,55 @@
|
||||
/**
|
||||
* "Pupils" on a school page is the size of the school.
|
||||
*
|
||||
* A year's results row carries the cohort its figures were measured on. For a
|
||||
* secondary that is the GCSE year group alone (Burntwood: 245, against 1,462
|
||||
* on roll), so it must never stand in for the whole-school count.
|
||||
*/
|
||||
|
||||
import { screen } from '@testing-library/react';
|
||||
import { secondaryFixture } from '../support/schoolFixtures';
|
||||
import { renderSecondarySchoolDetail } from '../support/renderSchoolDetail';
|
||||
|
||||
jest.mock('@/lib/analytics', () => ({
|
||||
track: jest.fn(),
|
||||
getNavigationSource: () => 'direct',
|
||||
}));
|
||||
jest.mock('@/components/PerformanceChart', () => ({
|
||||
PerformanceChart: () => <div data-testid="performance-chart" />,
|
||||
}));
|
||||
jest.mock('@/components/SatsChart', () => ({
|
||||
__esModule: true,
|
||||
default: () => <div data-testid="sats-chart" />,
|
||||
}));
|
||||
jest.mock('@/components/AdmissionsTrendChart', () => ({
|
||||
__esModule: true,
|
||||
default: () => <div data-testid="admissions-trend-chart" />,
|
||||
}));
|
||||
jest.mock('@/components/SchoolHeroMap', () => ({
|
||||
SchoolHeroMap: () => <div data-testid="hero-map" />,
|
||||
__esModule: true,
|
||||
}));
|
||||
|
||||
function withoutCensus(schoolTotal: number | null) {
|
||||
const yearlyData = secondaryFixture.yearlyData.map((r) => ({ ...r, total_pupils: 245 }));
|
||||
return {
|
||||
...secondaryFixture,
|
||||
census: null,
|
||||
yearlyData,
|
||||
schoolInfo: { ...secondaryFixture.schoolInfo, total_pupils: schoolTotal },
|
||||
};
|
||||
}
|
||||
|
||||
describe('pupil count without a census record', () => {
|
||||
it('uses the register count in the header, not the results cohort', () => {
|
||||
renderSecondarySchoolDetail(withoutCensus(1462));
|
||||
expect(screen.getByText('1,462 pupils')).toBeInTheDocument();
|
||||
expect(screen.queryByText('245 pupils')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows no count rather than the results cohort when the register has none', () => {
|
||||
renderSecondarySchoolDetail(withoutCensus(null));
|
||||
expect(screen.queryByText(/^[\d,]+ pupils$/)).not.toBeInTheDocument();
|
||||
expect(screen.queryByText('Total pupils')).not.toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,72 @@
|
||||
/**
|
||||
* The facts the school header and the search rows print: a type in the search
|
||||
* filter's terms, and flags only for what applies.
|
||||
*/
|
||||
|
||||
import { schoolFlags, schoolTypeLabel } from '@/lib/schoolFacts';
|
||||
import type { School } from '@/lib/types';
|
||||
|
||||
const school = (over: Partial<School>): School =>
|
||||
({ urn: 1, school_name: 'Test School', ...over }) as School;
|
||||
|
||||
const labels = (over: Partial<School>) => schoolFlags(school(over)).map((f) => f.label);
|
||||
|
||||
describe('schoolTypeLabel', () => {
|
||||
it.each([
|
||||
['state', 'State school'],
|
||||
['independent', 'Independent school'],
|
||||
['special', 'Special school (SEND)'],
|
||||
['post16', 'Sixth form or college'],
|
||||
['alternative', 'Alternative provision'],
|
||||
])("names the %s group in the search filter's terms", (type_group, label) => {
|
||||
expect(schoolTypeLabel(school({ type_group, school_type: 'Academy converter' }))).toBe(label);
|
||||
});
|
||||
|
||||
it("prints the register's own name for a type in no group", () => {
|
||||
expect(schoolTypeLabel(school({ type_group: null, school_type: 'Secure units' }))).toBe('Secure units');
|
||||
});
|
||||
|
||||
it('returns null when there is no type at all', () => {
|
||||
expect(schoolTypeLabel(school({}))).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('schoolFlags', () => {
|
||||
it('flags nothing for a mixed, non-faith, non-selective state school', () => {
|
||||
expect(labels({
|
||||
type_group: 'state', gender: 'Mixed', admissions_policy: 'Non-selective',
|
||||
religious_denomination: 'None', nursery_provision: 'No Nursery Classes',
|
||||
has_sixth_form: false, phase: 'Secondary',
|
||||
})).toEqual([]);
|
||||
});
|
||||
|
||||
it('lists who-can-apply flags first, then what the school offers, in a fixed order', () => {
|
||||
expect(labels({
|
||||
type_group: 'independent', admissions_policy: 'Selective', gender: 'Boys',
|
||||
religious_denomination: 'Christian', nursery_provision: 'Has Nursery Classes',
|
||||
has_sixth_form: true, phase: 'All-through',
|
||||
})).toEqual(['Fee-paying', 'Selective', "Boys' school", 'Christian', 'Nursery class', 'Sixth form']);
|
||||
});
|
||||
|
||||
it('marks who-can-apply flags as conditions and offers as provision', () => {
|
||||
const kinds = Object.fromEntries(
|
||||
schoolFlags(school({ admissions_policy: 'Selective', has_sixth_form: true, phase: 'Secondary' }))
|
||||
.map((f) => [f.label, f.kind]),
|
||||
);
|
||||
expect(kinds).toEqual({ Selective: 'condition', 'Sixth form': 'provision' });
|
||||
});
|
||||
|
||||
it('never prints Non-selective, and never a no-faith value', () => {
|
||||
expect(labels({ admissions_policy: 'Non-selective', religious_denomination: 'Does not apply' })).toEqual([]);
|
||||
expect(labels({ admissions_policy: 'Not applicable', religious_denomination: 'None' })).toEqual([]);
|
||||
});
|
||||
|
||||
it('prints the religious character as the register records it', () => {
|
||||
expect(labels({ religious_denomination: 'Church of England/Methodist' })).toEqual(['Church of England/Methodist']);
|
||||
});
|
||||
|
||||
it('does not flag a nursery class on a nursery school, or a sixth form on a post-16 one', () => {
|
||||
expect(labels({ phase: 'Nursery', nursery_provision: 'Has Nursery Classes' })).toEqual([]);
|
||||
expect(labels({ phase: '16 plus', has_sixth_form: true })).toEqual([]);
|
||||
});
|
||||
});
|
||||
@@ -15,6 +15,8 @@ import {
|
||||
computeYBounds,
|
||||
formatAgeRange,
|
||||
formatAgeSpan,
|
||||
hasNurseryClasses,
|
||||
singleSexLabel,
|
||||
} from '@/lib/utils';
|
||||
|
||||
describe('formatPercentage', () => {
|
||||
@@ -346,3 +348,32 @@ describe('formatAgeRange', () => {
|
||||
expect(formatAgeRange('4-11')).toBe('Ages 4–11');
|
||||
});
|
||||
});
|
||||
|
||||
describe('hasNurseryClasses', () => {
|
||||
it('is true only for the GIAS value that means it', () => {
|
||||
// GIAS sends text, and two of its three values mean no nursery.
|
||||
expect(hasNurseryClasses('Has Nursery Classes')).toBe(true);
|
||||
expect(hasNurseryClasses('No Nursery Classes')).toBe(false);
|
||||
expect(hasNurseryClasses('Not applicable')).toBe(false);
|
||||
expect(hasNurseryClasses(null)).toBe(false);
|
||||
expect(hasNurseryClasses(undefined)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('singleSexLabel', () => {
|
||||
it('uses the plural possessive GIAS values need', () => {
|
||||
expect(singleSexLabel('Girls')).toBe("Girls' school");
|
||||
expect(singleSexLabel('Boys')).toBe("Boys' school");
|
||||
});
|
||||
|
||||
it('ignores case, as hasNurseryClasses does', () => {
|
||||
expect(singleSexLabel(' girls ')).toBe("Girls' school");
|
||||
expect(singleSexLabel('BOYS')).toBe("Boys' school");
|
||||
});
|
||||
|
||||
it('returns null for a mixed or unknown school', () => {
|
||||
expect(singleSexLabel('Mixed')).toBeNull();
|
||||
expect(singleSexLabel(null)).toBeNull();
|
||||
expect(singleSexLabel(undefined)).toBeNull();
|
||||
});
|
||||
});
|
||||
@@ -39,7 +39,6 @@ export function renderSchoolDetail(fixture: any) {
|
||||
withProviders(
|
||||
<SchoolDetailShell
|
||||
schoolInfo={fixture.schoolInfo}
|
||||
yearlyData={fixture.yearlyData}
|
||||
census={fixture.census}
|
||||
navItems={navItems}
|
||||
>
|
||||
@@ -67,7 +66,6 @@ export function renderSecondarySchoolDetail(fixture: any) {
|
||||
withProviders(
|
||||
<SchoolDetailShell
|
||||
schoolInfo={fixture.schoolInfo}
|
||||
yearlyData={fixture.yearlyData}
|
||||
census={fixture.census}
|
||||
navItems={navItems}
|
||||
>
|
||||
|
||||
@@ -25,6 +25,7 @@ interface HomePageProps {
|
||||
gender?: string;
|
||||
admissions_policy?: string;
|
||||
has_sixth_form?: string;
|
||||
faith?: string;
|
||||
}>;
|
||||
}
|
||||
|
||||
@@ -84,7 +85,8 @@ export default async function HomePage({ searchParams }: HomePageProps) {
|
||||
params.postcode ||
|
||||
params.gender ||
|
||||
params.admissions_policy ||
|
||||
params.has_sixth_form
|
||||
params.has_sixth_form ||
|
||||
params.faith
|
||||
);
|
||||
|
||||
// Failures propagate to the retryable error boundary.
|
||||
@@ -105,6 +107,7 @@ export default async function HomePage({ searchParams }: HomePageProps) {
|
||||
gender: params.gender,
|
||||
admissions_policy: params.admissions_policy,
|
||||
has_sixth_form: params.has_sixth_form,
|
||||
faith: params.faith,
|
||||
});
|
||||
} else {
|
||||
// Empty state by default
|
||||
|
||||
@@ -249,7 +249,6 @@ export default async function SchoolPage({ params }: SchoolPageProps) {
|
||||
{isSecondary ? (
|
||||
<SchoolDetailShell
|
||||
schoolInfo={school_info}
|
||||
yearlyData={yearly_data}
|
||||
census={census ?? null}
|
||||
navItems={secondaryNavItems}
|
||||
>
|
||||
@@ -273,7 +272,6 @@ export default async function SchoolPage({ params }: SchoolPageProps) {
|
||||
) : (
|
||||
<SchoolDetailShell
|
||||
schoolInfo={school_info}
|
||||
yearlyData={yearly_data}
|
||||
census={census ?? null}
|
||||
navItems={primaryNavItems}
|
||||
>
|
||||
|
||||
@@ -95,8 +95,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* Only phones fold the form away; see the 640px block. */
|
||||
.searchSummary {
|
||||
/* Only phones fold the form away and filter through the sheet; see the
|
||||
640px block. */
|
||||
.summaryRow,
|
||||
.chipsLine {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -348,6 +350,11 @@
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* In the phone sheet a select is a full-width field and a whole touch target. */
|
||||
.sheetSelect {
|
||||
min-height: 2.75rem;
|
||||
}
|
||||
|
||||
/* A pill, 44px tall: these are the page's main controls now, not fine print,
|
||||
and a phone needs the full touch target. */
|
||||
.controlSelect {
|
||||
@@ -553,16 +560,16 @@
|
||||
/*
|
||||
* Phones: the results toolbar is pinned, so it is held to two short lines.
|
||||
*
|
||||
* After a search the form folds into a one-line summary ("SW196AR · within
|
||||
* 1 mile Edit") and the controls become a single row that scrolls sideways.
|
||||
* "More filters" leads the row there: it is the one control that opens
|
||||
* everything else, so it must never be the chip scrolled out of sight.
|
||||
* After a search the form folds into a one-line summary ("SW196AR · 1 mi
|
||||
* Edit") with the Filters button beside it, and every filter lives in
|
||||
* the sheet that button opens. A second line, of the applied filters as
|
||||
* chips, appears only once something is applied.
|
||||
*/
|
||||
@media (max-width: 640px) {
|
||||
/*
|
||||
* nowrap matters as much as column. The desktop rule wraps, and in a
|
||||
* wrapping flex container each line is as wide as its widest item's content,
|
||||
* not the container: the search summary ("SW196AR · within 1 mile Edit",
|
||||
* not the container: the search summary (then "SW196AR · within 1 mile Edit",
|
||||
* about 410px) stretched the line, and the controls row with it, 40px past a
|
||||
* 402px iPhone 17 screen. Single-line, stretch means the container's width.
|
||||
*/
|
||||
@@ -622,13 +629,73 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* The desktop row and its panel give way to the Filters button, the
|
||||
applied-filter chips and the sheet. */
|
||||
.filterBar:not(.heroMode) .controlsRow,
|
||||
.filterBar:not(.heroMode) .filters {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.summaryRow {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.summaryRow .searchSummary {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sheetTrigger {
|
||||
flex: 0 0 auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
min-height: 2.75rem;
|
||||
padding: 0 0.875rem;
|
||||
background: var(--bg-card);
|
||||
border: 1px solid var(--text-secondary);
|
||||
border-radius: var(--radius-md);
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--step--1);
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* The same brand chip as "More filters" on desktop: the list is narrowed. */
|
||||
.sheetTriggerActive {
|
||||
border-color: var(--brand);
|
||||
background: var(--brand-bg);
|
||||
color: var(--brand);
|
||||
}
|
||||
|
||||
.sheetTriggerCount {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
padding: 0 0.3rem;
|
||||
border-radius: 999px;
|
||||
background: var(--brand);
|
||||
color: var(--bg-card);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Bleeds to the screen edge so a chip scrolls out from under it, rather than
|
||||
being cut off at the toolbar's padding. The toolbar's inline padding is
|
||||
1rem at this width (HomeView.module.css, .resultsToolbar). The 4px of
|
||||
block padding is room for focus rings, which the scroll clip would
|
||||
otherwise cut off above and below the chips. */
|
||||
.controlsRow {
|
||||
flex-wrap: nowrap;
|
||||
.chipsLine {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
overflow-x: auto;
|
||||
margin: -4px -1rem;
|
||||
padding: 4px 1rem;
|
||||
@@ -640,15 +707,50 @@
|
||||
mask-image: none;
|
||||
}
|
||||
|
||||
.controlsRow::-webkit-scrollbar {
|
||||
.chipsLine::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.controlsRow > * {
|
||||
.chipsLine > *,
|
||||
.chips > * {
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.controlsRow .advancedToggle {
|
||||
order: -1;
|
||||
.chips {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
min-height: 2.75rem;
|
||||
padding: 0 0.75rem 0 1rem;
|
||||
background: rgba(var(--sage-rgb), 0.38);
|
||||
border: 1px solid var(--brand);
|
||||
border-radius: 999px;
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--step--1);
|
||||
font-weight: 600;
|
||||
line-height: 1;
|
||||
color: var(--brand-strong);
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* A school type can run to "Academy special sponsor led". */
|
||||
.chipLabel {
|
||||
max-width: 11rem;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.chipsClear {
|
||||
min-height: 2.75rem;
|
||||
padding: 0 0.75rem;
|
||||
font-size: var(--step--1);
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
+458
-176
@@ -7,8 +7,9 @@ import { DEFAULT_RADIUS_MILES, isValidPostcode, schoolUrl } from "@/lib/utils";
|
||||
import { track } from "@/lib/analytics";
|
||||
import { useSchoolSuggest } from "@/hooks/useSchoolSuggest";
|
||||
import { SuggestList, suggestOptionId } from "./SuggestList";
|
||||
import { FilterSheet, SheetField, RADIUS_OPTIONS, radiusLabel as milesLabel } from "./FilterSheet";
|
||||
import type { Suggestion } from "@/lib/suggest";
|
||||
import type { Filters, ResultFilters } from "@/lib/types";
|
||||
import type { FilterOption, Filters, ResultFilters } from "@/lib/types";
|
||||
import styles from "./FilterBar.module.css";
|
||||
|
||||
interface FilterBarProps {
|
||||
@@ -28,6 +29,8 @@ interface FilterBarProps {
|
||||
* runs the full width instead of stopping short of the switch.
|
||||
*/
|
||||
viewSwitch?: ReactNode;
|
||||
/** The results' total, for the phone filter sheet's "Show N schools". */
|
||||
resultCount?: number;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -52,6 +55,76 @@ function SelectShell({
|
||||
);
|
||||
}
|
||||
|
||||
/** The filters a phone sees as chips and counts on its Filters button. */
|
||||
const FILTER_KEYS = [
|
||||
"phase",
|
||||
"school_type",
|
||||
"faith",
|
||||
"local_authority",
|
||||
"gender",
|
||||
"has_sixth_form",
|
||||
"admissions_policy",
|
||||
] as const;
|
||||
type FilterKey = (typeof FILTER_KEYS)[number];
|
||||
|
||||
/** Filters that only mean something for schools teaching beyond primary. */
|
||||
const SECONDARY_ONLY_KEYS = ["gender", "has_sixth_form", "admissions_policy"] as const;
|
||||
|
||||
/**
|
||||
* False for a phase with no secondary-age pupils, for which those filters are
|
||||
* hidden: Primary, Nursery and Middle deemed primary. Matched on the words,
|
||||
* not exact labels, so a change of case, hyphen or spacing in the GIAS label
|
||||
* cannot leave them showing. The same reading of "primary" as
|
||||
* compareGroups in lib/compareLogic.ts. The API's PHASE_GROUPS answers a
|
||||
* different question (which phases a phase filter returns: primary includes
|
||||
* all-through), so it is not this list.
|
||||
*/
|
||||
function hasSecondaryFilters(phase: string): boolean {
|
||||
const p = phase.toLowerCase().replace(/[^a-z]+/g, " ").trim();
|
||||
return !(p === "nursery" || (p.includes("primary") && !p.includes("secondary")));
|
||||
}
|
||||
|
||||
/**
|
||||
* The option a URL value names, ignoring case as the API does. An old link's
|
||||
* raw GIAS type names none, and is shown as itself.
|
||||
*/
|
||||
function optionFor(options: FilterOption[], value: string) {
|
||||
const v = value.toLowerCase();
|
||||
return options.find((o) => o.value.toLowerCase() === v);
|
||||
}
|
||||
|
||||
/**
|
||||
* A select's value and, when the URL holds something no option spells, an
|
||||
* extra option for it, so the select shows what is applied and "Any" can be
|
||||
* chosen to clear it. Without one, React shows the first option, "Any",
|
||||
* while the list is still filtered, and choosing it changes nothing.
|
||||
*/
|
||||
function selectedOf(options: FilterOption[], value: string) {
|
||||
if (!value) return { value, unlisted: null };
|
||||
const match = optionFor(options, value);
|
||||
return match ? { value: match.value, unlisted: null } : { value, unlisted: value };
|
||||
}
|
||||
|
||||
function SlidersIcon() {
|
||||
return (
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12" />
|
||||
<circle cx="16" cy="6" r="2" />
|
||||
<circle cx="10" cy="12" r="2" />
|
||||
<circle cx="18" cy="18" r="2" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
export function FilterBar({
|
||||
filters,
|
||||
isHero,
|
||||
@@ -61,6 +134,7 @@ export function FilterBar({
|
||||
geoError,
|
||||
autosuggest = false,
|
||||
viewSwitch,
|
||||
resultCount,
|
||||
}: FilterBarProps) {
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
@@ -134,12 +208,14 @@ export function FilterBar({
|
||||
const currentGender = searchParams.get("gender") || "";
|
||||
const currentAdmissionsPolicy = searchParams.get("admissions_policy") || "";
|
||||
const currentHasSixthForm = searchParams.get("has_sixth_form") || "";
|
||||
const currentFaith = searchParams.get("faith") || "";
|
||||
|
||||
// Count the filters behind "More filters". Search, postcode, distance, phase
|
||||
// and school type each have their own control in the toolbar, so they are
|
||||
// visible without opening anything and are not counted here.
|
||||
const activeDropdownFilters = [
|
||||
currentLA,
|
||||
currentFaith,
|
||||
currentGender,
|
||||
currentAdmissionsPolicy,
|
||||
currentHasSixthForm,
|
||||
@@ -172,9 +248,9 @@ export function FilterBar({
|
||||
setOmniValue(currentQuery);
|
||||
}
|
||||
|
||||
// The phone row's right-edge fade says "more this way"; once there is no
|
||||
// more, it only dims the last chip. Same rule as the school page's section
|
||||
// nav (MOBILE.md, "Right-edge scroll-fade").
|
||||
// The phone chips line's right-edge fade says "more this way"; once there is
|
||||
// no more, it only dims the last chip. Same rule as the school page's
|
||||
// section nav (MOBILE.md, "Right-edge scroll-fade").
|
||||
const controlsRowRef = useRef<HTMLDivElement>(null);
|
||||
const [controlsAtEnd, setControlsAtEnd] = useState(false);
|
||||
const updateControlsAtEnd = useCallback(() => {
|
||||
@@ -187,8 +263,8 @@ export function FilterBar({
|
||||
window.addEventListener("resize", updateControlsAtEnd);
|
||||
return () => window.removeEventListener("resize", updateControlsAtEnd);
|
||||
}, [updateControlsAtEnd]);
|
||||
// Chips come and go with the search (distance, Clear), so re-measure after
|
||||
// every render rather than only on resize.
|
||||
// Chips come and go with the filters, so re-measure after every render
|
||||
// rather than only on resize.
|
||||
useEffect(updateControlsAtEnd);
|
||||
const openSearch = () => {
|
||||
setSearchOpen(true);
|
||||
@@ -212,9 +288,21 @@ export function FilterBar({
|
||||
return () => document.removeEventListener("keydown", handleKeyDown);
|
||||
}, []);
|
||||
|
||||
/*
|
||||
* Where the navigation in flight is headed. useSearchParams only catches up
|
||||
* once a navigation lands, so a second change made before then (the phone
|
||||
* sheet stays usable while one lands) would otherwise be built on the old
|
||||
* URL and undo the first. Dropped once nothing is pending, when
|
||||
* searchParams is current again.
|
||||
*/
|
||||
const pendingQueryRef = useRef<string | null>(null);
|
||||
useEffect(() => {
|
||||
if (!isPending) pendingQueryRef.current = null;
|
||||
}, [isPending]);
|
||||
|
||||
const updateURL = useCallback(
|
||||
(updates: Record<string, string>) => {
|
||||
const params = new URLSearchParams(searchParams);
|
||||
const params = new URLSearchParams(pendingQueryRef.current ?? searchParams);
|
||||
|
||||
Object.entries(updates).forEach(([key, value]) => {
|
||||
if (value && value !== "") {
|
||||
@@ -225,6 +313,7 @@ export function FilterBar({
|
||||
});
|
||||
|
||||
params.delete("page");
|
||||
pendingQueryRef.current = params.toString();
|
||||
|
||||
startTransition(() => {
|
||||
router.push(`${pathname}?${params.toString()}`);
|
||||
@@ -253,6 +342,7 @@ export function FilterBar({
|
||||
currentPhase && `phase=${currentPhase}`,
|
||||
currentLA && `la=${currentLA}`,
|
||||
currentType && `type=${currentType}`,
|
||||
currentFaith && `faith=${currentFaith}`,
|
||||
currentGender && `gender=${currentGender}`,
|
||||
currentAdmissionsPolicy && `admissions=${currentAdmissionsPolicy}`,
|
||||
currentHasSixthForm && `sixth_form=${currentHasSixthForm}`,
|
||||
@@ -278,52 +368,280 @@ export function FilterBar({
|
||||
};
|
||||
|
||||
const handleFilterChange = (key: string, value: string) => {
|
||||
updateURL({ [key]: value });
|
||||
// A primary phase hides the secondary-only filters, so it clears them
|
||||
// too: left applied, they would empty the list with no control showing.
|
||||
const cleared =
|
||||
key === "phase" && !hasSecondaryFilters(value)
|
||||
? Object.fromEntries(SECONDARY_ONLY_KEYS.map((k) => [k, ""]))
|
||||
: {};
|
||||
updateURL({ ...cleared, [key]: value });
|
||||
};
|
||||
|
||||
const handleClearFilters = () => {
|
||||
setOmniValue("");
|
||||
startTransition(() => {
|
||||
router.push(pathname);
|
||||
});
|
||||
// Every filter at once, keeping the search and its distance. The search is
|
||||
// what the results answer, not a filter on them: clearing it too used to
|
||||
// send desktop back to the home page.
|
||||
const handleClearFilterValues = () => {
|
||||
updateURL(Object.fromEntries(FILTER_KEYS.map((k) => [k, ""])));
|
||||
};
|
||||
|
||||
const hasActiveFilters =
|
||||
currentSearch ||
|
||||
currentLA ||
|
||||
currentType ||
|
||||
currentPhase ||
|
||||
currentPostcode ||
|
||||
currentGender ||
|
||||
currentAdmissionsPolicy ||
|
||||
currentHasSixthForm;
|
||||
|
||||
// Use result-scoped filter values when available, fall back to global
|
||||
/*
|
||||
* A filter's options come from the full lists, not from the results: the
|
||||
* results have already been narrowed by that filter, so scoping to them
|
||||
* would leave only the chosen value on offer, and switching (Girls to Boys,
|
||||
* one school type to another) would need clearing first.
|
||||
*
|
||||
* Local authority is the exception, scoped to the results so a postcode
|
||||
* search offers the councils nearby rather than all of England's.
|
||||
*/
|
||||
const laOptions =
|
||||
resultFilters?.local_authorities ?? filters.local_authorities;
|
||||
const typeOptions = resultFilters?.school_types ?? filters.school_types;
|
||||
// Phase is the exception: always the full list. The result set has already
|
||||
// been narrowed by the phase filter, so scoping to it would leave only the
|
||||
// chosen phase on offer and switching phase would need "Any phase" first.
|
||||
// Five groups a parent recognises, not GIAS's 34 establishment types.
|
||||
const typeOptions = filters.school_type_groups ?? [];
|
||||
const faithOptions = filters.faiths ?? [];
|
||||
const phaseOptions = filters.phases ?? [];
|
||||
const genderOptions = resultFilters?.genders ?? filters.genders ?? [];
|
||||
const admissionsPolicyOptions =
|
||||
resultFilters?.admissions_policies ?? filters.admissions_policies ?? [];
|
||||
const genderOptions = filters.genders ?? [];
|
||||
const admissionsPolicyOptions = filters.admissions_policies ?? [];
|
||||
|
||||
const isSecondaryMode =
|
||||
currentPhase === "secondary" || genderOptions.length > 0;
|
||||
// Set by the phase chosen, never by what the results happen to contain.
|
||||
const isSecondaryMode = hasSecondaryFilters(currentPhase);
|
||||
|
||||
// A select that is narrowing the results carries a sage tint; the class is
|
||||
// only ever additive, so the control's behaviour is untouched.
|
||||
const activeIf = (value: string) => (value ? ` ${styles.selectActive}` : "");
|
||||
|
||||
const radiusLabel = `${currentRadius} mile${currentRadius === "1" ? "" : "s"}`;
|
||||
const radiusLabel = milesLabel(currentRadius);
|
||||
|
||||
/*
|
||||
* Phones filter through one button and a sheet holding every filter. The
|
||||
* desktop row's phone version scrolled sideways with "More filters" first,
|
||||
* so phase showed only in part and school type not at all, and the panel
|
||||
* "More filters" opened did not contain either of them.
|
||||
*/
|
||||
const [sheetOpen, setSheetOpen] = useState(false);
|
||||
// The sheet is phone furniture: if the screen widens past phone width while
|
||||
// it is open (rotation, a resized window), close it, or its selects and the
|
||||
// desktop row's would both be showing.
|
||||
useEffect(() => {
|
||||
if (!sheetOpen || typeof window.matchMedia !== "function") return;
|
||||
const phone = window.matchMedia("(max-width: 640px)");
|
||||
const onChange = (e: { matches: boolean }) => {
|
||||
if (!e.matches) setSheetOpen(false);
|
||||
};
|
||||
phone.addEventListener("change", onChange);
|
||||
return () => phone.removeEventListener("change", onChange);
|
||||
}, [sheetOpen]);
|
||||
const values: Record<FilterKey, string> = {
|
||||
phase: currentPhase,
|
||||
school_type: currentType,
|
||||
faith: currentFaith,
|
||||
local_authority: currentLA,
|
||||
gender: currentGender,
|
||||
has_sixth_form: currentHasSixthForm,
|
||||
admissions_policy: currentAdmissionsPolicy,
|
||||
};
|
||||
const labelFor = (key: FilterKey, value: string) => {
|
||||
if (key === "has_sixth_form") {
|
||||
return value === "yes" ? "With sixth form" : "Without sixth form";
|
||||
}
|
||||
// An old link may carry a raw GIAS type, which reads as itself.
|
||||
const labelled = { school_type: typeOptions, faith: faithOptions }[
|
||||
key as "school_type" | "faith"
|
||||
];
|
||||
if (labelled) return optionFor(labelled, value)?.label ?? value;
|
||||
// Phase, gender and admissions values are lowercased option names; the
|
||||
// rest are the names themselves.
|
||||
const named: Partial<Record<FilterKey, string[]>> = {
|
||||
phase: phaseOptions,
|
||||
gender: genderOptions,
|
||||
admissions_policy: admissionsPolicyOptions,
|
||||
};
|
||||
return (named[key] ?? []).find((o) => o.toLowerCase() === value.toLowerCase()) ?? value;
|
||||
};
|
||||
const applied = FILTER_KEYS.filter((k) => values[k]).map((key) => ({
|
||||
key,
|
||||
label: labelFor(key, values[key]),
|
||||
}));
|
||||
const appliedCount = applied.length;
|
||||
|
||||
/*
|
||||
* Each select is built here once and drawn twice: as a pill in the desktop
|
||||
* row or panel, and as a full-width labelled field in the phone sheet. Only
|
||||
* one copy is ever showing; the sheet's is mounted only while it is open.
|
||||
* The sheet's stay enabled while a change lands: disabling the control
|
||||
* under the user's focus would drop focus to <body>, out of the dialog.
|
||||
*/
|
||||
type Look = "pill" | "panel" | "sheet";
|
||||
const selectClass = (look: Look, value: string) =>
|
||||
`${look === "pill" ? styles.controlSelect : styles.filterSelect}${look === "sheet" ? ` ${styles.sheetSelect}` : ""}${activeIf(value)}`;
|
||||
|
||||
const phaseSelect = (look: Look) => (
|
||||
<SelectShell wide={look !== "pill"}>
|
||||
<select
|
||||
value={currentPhase}
|
||||
onChange={(e) => handleFilterChange("phase", e.target.value)}
|
||||
className={selectClass(look, currentPhase)}
|
||||
aria-label="Phase"
|
||||
disabled={isPending && look !== "sheet"}
|
||||
>
|
||||
<option value="">Any phase</option>
|
||||
{phaseOptions.map((p) => (
|
||||
<option key={p} value={p.toLowerCase()}>
|
||||
{p}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</SelectShell>
|
||||
);
|
||||
|
||||
const typeSelected = selectedOf(typeOptions, currentType);
|
||||
const faithSelected = selectedOf(faithOptions, currentFaith);
|
||||
|
||||
const typeSelect = (look: Look) => (
|
||||
<SelectShell wide={look !== "pill"}>
|
||||
<select
|
||||
value={typeSelected.value}
|
||||
onChange={(e) => handleFilterChange("school_type", e.target.value)}
|
||||
className={selectClass(look, currentType)}
|
||||
aria-label="School type"
|
||||
disabled={isPending && look !== "sheet"}
|
||||
>
|
||||
<option value="">Any school type</option>
|
||||
{typeSelected.unlisted && (
|
||||
<option value={typeSelected.unlisted}>{typeSelected.unlisted}</option>
|
||||
)}
|
||||
{typeOptions.map((o) => (
|
||||
<option key={o.value} value={o.value}>
|
||||
{o.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</SelectShell>
|
||||
);
|
||||
|
||||
const laSelect = (look: Look) => (
|
||||
<SelectShell wide>
|
||||
<select
|
||||
value={currentLA}
|
||||
onChange={(e) => handleFilterChange("local_authority", e.target.value)}
|
||||
className={selectClass(look, currentLA)}
|
||||
aria-label="Local authority"
|
||||
disabled={isPending && look !== "sheet"}
|
||||
>
|
||||
<option value="">All Local Authorities</option>
|
||||
{laOptions.map((la) => (
|
||||
<option key={la} value={la}>
|
||||
{la}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</SelectShell>
|
||||
);
|
||||
|
||||
const faithSelect = (look: Look) => (
|
||||
<SelectShell wide>
|
||||
<select
|
||||
value={faithSelected.value}
|
||||
onChange={(e) => handleFilterChange("faith", e.target.value)}
|
||||
className={selectClass(look, currentFaith)}
|
||||
aria-label="Faith"
|
||||
disabled={isPending && look !== "sheet"}
|
||||
>
|
||||
<option value="">Any faith or none</option>
|
||||
{faithSelected.unlisted && (
|
||||
<option value={faithSelected.unlisted}>{faithSelected.unlisted}</option>
|
||||
)}
|
||||
{faithOptions.map((o) => (
|
||||
<option key={o.value} value={o.value}>
|
||||
{o.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</SelectShell>
|
||||
);
|
||||
|
||||
const genderSelect = (look: Look) => (
|
||||
<SelectShell wide>
|
||||
<select
|
||||
value={currentGender}
|
||||
onChange={(e) => handleFilterChange("gender", e.target.value)}
|
||||
className={selectClass(look, currentGender)}
|
||||
aria-label="Gender"
|
||||
disabled={isPending && look !== "sheet"}
|
||||
>
|
||||
<option value="">Boys, Girls & Mixed</option>
|
||||
{genderOptions.map((g) => (
|
||||
<option key={g} value={g.toLowerCase()}>
|
||||
{g}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</SelectShell>
|
||||
);
|
||||
|
||||
const sixthFormSelect = (look: Look) => (
|
||||
<SelectShell wide>
|
||||
<select
|
||||
value={currentHasSixthForm}
|
||||
onChange={(e) => handleFilterChange("has_sixth_form", e.target.value)}
|
||||
className={selectClass(look, currentHasSixthForm)}
|
||||
aria-label="Sixth form"
|
||||
disabled={isPending && look !== "sheet"}
|
||||
>
|
||||
<option value="">With or without sixth form</option>
|
||||
<option value="yes">With sixth form</option>
|
||||
<option value="no">Without sixth form</option>
|
||||
</select>
|
||||
</SelectShell>
|
||||
);
|
||||
|
||||
const admissionsSelect = (look: Look) => (
|
||||
<SelectShell wide>
|
||||
<select
|
||||
value={currentAdmissionsPolicy}
|
||||
onChange={(e) => handleFilterChange("admissions_policy", e.target.value)}
|
||||
className={selectClass(look, currentAdmissionsPolicy)}
|
||||
aria-label="Admissions"
|
||||
disabled={isPending && look !== "sheet"}
|
||||
>
|
||||
<option value="">All admissions types</option>
|
||||
{admissionsPolicyOptions.map((p) => (
|
||||
<option key={p} value={p.toLowerCase()}>
|
||||
{p}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</SelectShell>
|
||||
);
|
||||
|
||||
const sheetTrigger = (
|
||||
<button
|
||||
type="button"
|
||||
className={`${styles.sheetTrigger}${appliedCount ? ` ${styles.sheetTriggerActive}` : ""}`}
|
||||
onClick={() => setSheetOpen(true)}
|
||||
aria-haspopup="dialog"
|
||||
aria-label={appliedCount ? `Filters, ${appliedCount} applied` : "Filters"}
|
||||
>
|
||||
<SlidersIcon />
|
||||
Filters
|
||||
{appliedCount > 0 && (
|
||||
<span className={styles.sheetTriggerCount} aria-hidden="true">
|
||||
{appliedCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
// Beside the folded search summary; on the chips line when there is no
|
||||
// summary to sit beside. While the search is being edited it steps aside,
|
||||
// and comes back when the form folds.
|
||||
const triggerBesideSummary = canFold && !searchOpen;
|
||||
const triggerOnChipsLine = !canFold;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`${styles.filterBar} ${isPending ? styles.isLoading : ""} ${isHero ? styles.heroMode : ""}`}
|
||||
>
|
||||
{canFold && !searchOpen && (
|
||||
{triggerBesideSummary && (
|
||||
<div className={styles.summaryRow}>
|
||||
<button
|
||||
type="button"
|
||||
className={styles.searchSummary}
|
||||
@@ -345,10 +663,14 @@ export function FilterBar({
|
||||
</svg>
|
||||
<span className={styles.summaryText}>
|
||||
<strong>{currentQuery}</strong>
|
||||
{currentPostcode && <span> · within {radiusLabel}</span>}
|
||||
{/* Short, so the distance survives beside the Filters button on a
|
||||
360px screen; the button's name carries the long form. */}
|
||||
{currentPostcode && <span> · {currentRadius} mi</span>}
|
||||
</span>
|
||||
<span className={styles.summaryEdit} aria-hidden="true">Edit</span>
|
||||
</button>
|
||||
{sheetTrigger}
|
||||
</div>
|
||||
)}
|
||||
<form
|
||||
onSubmit={handleSearchSubmit}
|
||||
@@ -462,16 +784,10 @@ export function FilterBar({
|
||||
{viewSwitch && (
|
||||
<div className={styles.viewSwitchSlot}>{viewSwitch}</div>
|
||||
)}
|
||||
{/* Every control here is a real <select> or <button>, drawn as a
|
||||
pill. On phones the row scrolls sideways rather than wrapping, so
|
||||
the pinned toolbar stays two lines tall. */}
|
||||
<div
|
||||
ref={controlsRowRef}
|
||||
className={`${styles.controlsRow}${controlsAtEnd ? ` ${styles.controlsAtEnd}` : ""}`}
|
||||
role="group"
|
||||
aria-label="Filters"
|
||||
onScroll={updateControlsAtEnd}
|
||||
>
|
||||
{/* Desktop and tablet. Every control here is a real <select> or
|
||||
<button>, drawn as a pill. Phones hide the row and use the
|
||||
Filters button and sheet instead. */}
|
||||
<div className={styles.controlsRow} role="group" aria-label="Filters">
|
||||
{currentPostcode && (
|
||||
<SelectShell>
|
||||
<select
|
||||
@@ -481,52 +797,18 @@ export function FilterBar({
|
||||
aria-label="Distance"
|
||||
disabled={isPending}
|
||||
>
|
||||
<option value="0.25">Within 0.25 miles</option>
|
||||
<option value="0.5">Within 0.5 miles</option>
|
||||
<option value="1">Within 1 mile</option>
|
||||
<option value="3">Within 3 miles</option>
|
||||
<option value="5">Within 5 miles</option>
|
||||
</select>
|
||||
</SelectShell>
|
||||
)}
|
||||
|
||||
{phaseOptions.length > 0 && (
|
||||
<SelectShell>
|
||||
<select
|
||||
value={currentPhase}
|
||||
onChange={(e) => handleFilterChange("phase", e.target.value)}
|
||||
className={`${styles.controlSelect}${activeIf(currentPhase)}`}
|
||||
aria-label="Phase"
|
||||
disabled={isPending}
|
||||
>
|
||||
<option value="">Any phase</option>
|
||||
{phaseOptions.map((p) => (
|
||||
<option key={p} value={p.toLowerCase()}>
|
||||
{p}
|
||||
{RADIUS_OPTIONS.map((r) => (
|
||||
<option key={r} value={r}>
|
||||
Within {milesLabel(r)}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</SelectShell>
|
||||
)}
|
||||
|
||||
<SelectShell>
|
||||
<select
|
||||
value={currentType}
|
||||
onChange={(e) =>
|
||||
handleFilterChange("school_type", e.target.value)
|
||||
}
|
||||
className={`${styles.controlSelect}${activeIf(currentType)}`}
|
||||
aria-label="School type"
|
||||
disabled={isPending}
|
||||
>
|
||||
<option value="">Any school type</option>
|
||||
{typeOptions.map((type) => (
|
||||
<option key={type} value={type}>
|
||||
{type}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</SelectShell>
|
||||
{phaseOptions.length > 0 && phaseSelect("pill")}
|
||||
|
||||
{typeOptions.length > 0 && typeSelect("pill")}
|
||||
|
||||
<button
|
||||
type="button"
|
||||
@@ -534,21 +816,7 @@ export function FilterBar({
|
||||
onClick={() => setFiltersOpen((v) => !v)}
|
||||
aria-expanded={filtersOpen}
|
||||
>
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2"
|
||||
strokeLinecap="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12" />
|
||||
<circle cx="16" cy="6" r="2" />
|
||||
<circle cx="10" cy="12" r="2" />
|
||||
<circle cx="18" cy="18" r="2" />
|
||||
</svg>
|
||||
<SlidersIcon />
|
||||
More filters
|
||||
{hasActiveDropdownFilters
|
||||
? ` (${activeDropdownFilters.length})`
|
||||
@@ -558,99 +826,113 @@ export function FilterBar({
|
||||
/>
|
||||
</button>
|
||||
|
||||
{hasActiveFilters && (
|
||||
{appliedCount > 0 && (
|
||||
<button
|
||||
onClick={handleClearFilters}
|
||||
onClick={handleClearFilterValues}
|
||||
className={`btn btn-tertiary ${styles.clearButton}`}
|
||||
type="button"
|
||||
disabled={isPending}
|
||||
>
|
||||
Clear
|
||||
Clear all
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{filtersOpen && (
|
||||
<div className={styles.filters}>
|
||||
<SelectShell wide>
|
||||
<select
|
||||
value={currentLA}
|
||||
onChange={(e) =>
|
||||
handleFilterChange("local_authority", e.target.value)
|
||||
}
|
||||
className={`${styles.filterSelect}${activeIf(currentLA)}`}
|
||||
aria-label="Local authority"
|
||||
disabled={isPending}
|
||||
>
|
||||
<option value="">All Local Authorities</option>
|
||||
{laOptions.map((la) => (
|
||||
<option key={la} value={la}>
|
||||
{la}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</SelectShell>
|
||||
{laSelect("panel")}
|
||||
{faithOptions.length > 0 && faithSelect("panel")}
|
||||
|
||||
{isSecondaryMode && (
|
||||
<>
|
||||
{genderOptions.length > 0 && (
|
||||
<SelectShell wide>
|
||||
<select
|
||||
value={currentGender}
|
||||
onChange={(e) =>
|
||||
handleFilterChange("gender", e.target.value)
|
||||
}
|
||||
className={`${styles.filterSelect}${activeIf(currentGender)}`}
|
||||
disabled={isPending}
|
||||
>
|
||||
<option value="">Boys, Girls & Mixed</option>
|
||||
{genderOptions.map((g) => (
|
||||
<option key={g} value={g.toLowerCase()}>
|
||||
{g}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</SelectShell>
|
||||
)}
|
||||
|
||||
<SelectShell wide>
|
||||
<select
|
||||
value={currentHasSixthForm}
|
||||
onChange={(e) =>
|
||||
handleFilterChange("has_sixth_form", e.target.value)
|
||||
}
|
||||
className={`${styles.filterSelect}${activeIf(currentHasSixthForm)}`}
|
||||
disabled={isPending}
|
||||
>
|
||||
<option value="">With or without sixth form</option>
|
||||
<option value="yes">With sixth form</option>
|
||||
<option value="no">Without sixth form</option>
|
||||
</select>
|
||||
</SelectShell>
|
||||
|
||||
{admissionsPolicyOptions.length > 0 && (
|
||||
<SelectShell wide>
|
||||
<select
|
||||
value={currentAdmissionsPolicy}
|
||||
onChange={(e) =>
|
||||
handleFilterChange("admissions_policy", e.target.value)
|
||||
}
|
||||
className={`${styles.filterSelect}${activeIf(currentAdmissionsPolicy)}`}
|
||||
disabled={isPending}
|
||||
>
|
||||
<option value="">All admissions types</option>
|
||||
{admissionsPolicyOptions.map((p) => (
|
||||
<option key={p} value={p.toLowerCase()}>
|
||||
{p}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</SelectShell>
|
||||
)}
|
||||
{genderOptions.length > 0 && genderSelect("panel")}
|
||||
{sixthFormSelect("panel")}
|
||||
{admissionsPolicyOptions.length > 0 && admissionsSelect("panel")}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Phones: what is applied, each removable with a tap. The line
|
||||
scrolls sideways if it overflows, under the same right-edge fade
|
||||
as the school page's section nav. */}
|
||||
{(appliedCount > 0 || triggerOnChipsLine) && (
|
||||
<div
|
||||
ref={controlsRowRef}
|
||||
className={`${styles.chipsLine}${controlsAtEnd ? ` ${styles.controlsAtEnd}` : ""}`}
|
||||
onScroll={updateControlsAtEnd}
|
||||
>
|
||||
{triggerOnChipsLine && sheetTrigger}
|
||||
{appliedCount > 0 && (
|
||||
<div className={styles.chips} role="group" aria-label="Applied filters">
|
||||
{applied.map(({ key, label }) => (
|
||||
<button
|
||||
key={key}
|
||||
type="button"
|
||||
className={styles.chip}
|
||||
onClick={() => handleFilterChange(key, "")}
|
||||
aria-label={`Remove filter: ${label}`}
|
||||
disabled={isPending}
|
||||
>
|
||||
<span className={styles.chipLabel}>{label}</span>
|
||||
<svg
|
||||
width="14"
|
||||
height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.5"
|
||||
strokeLinecap="round"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M18 6 6 18M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-tertiary ${styles.chipsClear}`}
|
||||
onClick={handleClearFilterValues}
|
||||
disabled={isPending}
|
||||
>
|
||||
Clear all
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<FilterSheet
|
||||
open={sheetOpen}
|
||||
onClose={() => setSheetOpen(false)}
|
||||
radius={currentPostcode ? currentRadius : null}
|
||||
onRadiusChange={(r) => updateURL({ radius: r })}
|
||||
onClearAll={appliedCount > 0 ? handleClearFilterValues : undefined}
|
||||
resultCount={resultCount}
|
||||
isPending={isPending}
|
||||
>
|
||||
{phaseOptions.length > 0 && (
|
||||
<SheetField label="Phase">{phaseSelect("sheet")}</SheetField>
|
||||
)}
|
||||
{typeOptions.length > 0 && (
|
||||
<SheetField label="School type">{typeSelect("sheet")}</SheetField>
|
||||
)}
|
||||
{faithOptions.length > 0 && (
|
||||
<SheetField label="Faith">{faithSelect("sheet")}</SheetField>
|
||||
)}
|
||||
<SheetField label="Local authority">{laSelect("sheet")}</SheetField>
|
||||
{isSecondaryMode && (
|
||||
<>
|
||||
{genderOptions.length > 0 && (
|
||||
<SheetField label="Gender">{genderSelect("sheet")}</SheetField>
|
||||
)}
|
||||
<SheetField label="Sixth form">{sixthFormSelect("sheet")}</SheetField>
|
||||
{admissionsPolicyOptions.length > 0 && (
|
||||
<SheetField label="Admissions">{admissionsSelect("sheet")}</SheetField>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</FilterSheet>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,92 @@
|
||||
/* ── Phone filter sheet ───────────────────────────────────────────── */
|
||||
|
||||
.body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.fieldLabel {
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--step--1);
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Distance: five joined segments, a full-width row. At 360px each is about
|
||||
65px wide, clear of the 44px minimum. */
|
||||
.segments {
|
||||
display: flex;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: var(--radius-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.segment {
|
||||
position: relative;
|
||||
flex: 1 1 0;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.segment + .segment {
|
||||
border-left: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* The real radio stays in the tree for keyboard and screen readers; the span
|
||||
is what is drawn. */
|
||||
.segment input {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.segment span {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 2.75rem;
|
||||
font-family: var(--font-ui);
|
||||
font-size: var(--step--1);
|
||||
font-weight: 500;
|
||||
color: var(--text-primary);
|
||||
background: var(--bg-card);
|
||||
white-space: nowrap;
|
||||
transition: background-color var(--transition), color var(--transition);
|
||||
}
|
||||
|
||||
.segment input:checked + span {
|
||||
background: rgba(var(--sage-rgb), 0.38);
|
||||
color: var(--brand-strong);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.segment input:focus-visible + span {
|
||||
box-shadow: inset 0 0 0 2px var(--brand);
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.clearAll {
|
||||
min-height: 2.75rem;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.show {
|
||||
flex: 1;
|
||||
min-height: 2.75rem;
|
||||
justify-content: center;
|
||||
}
|
||||
@@ -0,0 +1,121 @@
|
||||
"use client";
|
||||
|
||||
import { useId } from "react";
|
||||
import type { ReactNode } from "react";
|
||||
import { Modal } from "./Modal";
|
||||
import styles from "./FilterSheet.module.css";
|
||||
|
||||
export const RADIUS_OPTIONS = ["0.25", "0.5", "1", "3", "5"] as const;
|
||||
|
||||
export const radiusLabel = (r: string) => `${r} mile${r === "1" ? "" : "s"}`;
|
||||
|
||||
interface FilterSheetProps {
|
||||
open: boolean;
|
||||
onClose: () => void;
|
||||
/** The current distance, or null when the search is not by postcode. */
|
||||
radius: string | null;
|
||||
onRadiusChange: (radius: string) => void;
|
||||
/** The filter selects, each already labelled; FilterBar owns their state. */
|
||||
children: ReactNode;
|
||||
/** Shown only when something is applied. */
|
||||
onClearAll?: () => void;
|
||||
resultCount?: number;
|
||||
isPending: boolean;
|
||||
}
|
||||
|
||||
/*
|
||||
* Every filter in one place, for phones. A change applies at once, as it does
|
||||
* in the desktop toolbar, so the results behind the sheet are already the
|
||||
* filtered ones and the footer button only has to close it.
|
||||
*/
|
||||
export function FilterSheet({
|
||||
open,
|
||||
onClose,
|
||||
radius,
|
||||
onRadiusChange,
|
||||
children,
|
||||
onClearAll,
|
||||
resultCount,
|
||||
isPending,
|
||||
}: FilterSheetProps) {
|
||||
const distanceId = useId();
|
||||
|
||||
const showLabel = isPending
|
||||
? "Updating…"
|
||||
: resultCount === undefined
|
||||
? "Show schools"
|
||||
: resultCount === 0
|
||||
? "No schools match"
|
||||
: `Show ${resultCount.toLocaleString()} school${resultCount === 1 ? "" : "s"}`;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
isOpen={open}
|
||||
onClose={onClose}
|
||||
title="Filters"
|
||||
size="small"
|
||||
footer={
|
||||
<div className={styles.footer}>
|
||||
{onClearAll && (
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-tertiary ${styles.clearAll}`}
|
||||
onClick={onClearAll}
|
||||
>
|
||||
Clear all
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className={`btn btn-action ${styles.show}`}
|
||||
onClick={onClose}
|
||||
>
|
||||
{showLabel}
|
||||
</button>
|
||||
</div>
|
||||
}
|
||||
>
|
||||
{/* Controls stay enabled while a change lands, so focus is never
|
||||
dropped out of the dialog; aria-busy says the results are updating. */}
|
||||
<div className={styles.body} aria-busy={isPending}>
|
||||
{radius !== null && (
|
||||
<div className={styles.field}>
|
||||
<span id={distanceId} className={styles.fieldLabel}>
|
||||
Distance
|
||||
</span>
|
||||
<div
|
||||
className={styles.segments}
|
||||
role="radiogroup"
|
||||
aria-labelledby={distanceId}
|
||||
>
|
||||
{RADIUS_OPTIONS.map((r) => (
|
||||
<label key={r} className={styles.segment}>
|
||||
<input
|
||||
type="radio"
|
||||
name={`${distanceId}-radius`}
|
||||
value={r}
|
||||
checked={r === radius}
|
||||
onChange={() => onRadiusChange(r)}
|
||||
aria-label={`Within ${radiusLabel(r)}`}
|
||||
/>
|
||||
<span>{r} mi</span>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{children}
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
/** One labelled row of the sheet. */
|
||||
export function SheetField({ label, children }: { label: string; children: ReactNode }) {
|
||||
return (
|
||||
<label className={styles.field}>
|
||||
<span className={styles.fieldLabel}>{label}</span>
|
||||
{children}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
@@ -1533,37 +1533,6 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.activeFilters {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.filterChip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.25rem 0.625rem;
|
||||
background: var(--bg-secondary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 999px;
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.chipRemove {
|
||||
color: var(--text-muted);
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1;
|
||||
transition: color var(--transition, 0.2s ease);
|
||||
}
|
||||
|
||||
.chipRemove:hover {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.loadMoreSection {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@@ -712,6 +712,7 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
|
||||
filters={filters}
|
||||
isHero={false}
|
||||
resultFilters={initialSchools.result_filters}
|
||||
resultCount={initialSchools.total}
|
||||
onNearMe={handleNearMe}
|
||||
geoState={geoState}
|
||||
geoError={geoError}
|
||||
@@ -806,14 +807,6 @@ export function HomeView({ initialSchools, filters, totalSchools, howItWorks, ed
|
||||
|
||||
{hasSearch && !isMapView && resultsHeader}
|
||||
|
||||
{isSearchActive && !isMapView && (
|
||||
<div className={styles.activeFilters}>
|
||||
{searchParams.get('search') && <span className={styles.filterChip}>Search: {searchParams.get('search')}<a href="/" className={styles.chipRemove} onClick={e => { e.preventDefault(); }}>×</a></span>}
|
||||
{searchParams.get('local_authority') && <span className={styles.filterChip}>{searchParams.get('local_authority')}</span>}
|
||||
{searchParams.get('school_type') && <span className={styles.filterChip}>{searchParams.get('school_type')}</span>}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{initialSchools.schools.length === 0 && isSearchActive ? (
|
||||
<EmptyState
|
||||
title="No schools found"
|
||||
|
||||
@@ -5,7 +5,9 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
/* Above the pinned results toolbar (1001), the floating List/Map button
|
||||
(1002) and the comparison toast (2000): a modal covers the page. */
|
||||
z-index: 2100;
|
||||
padding: 1rem;
|
||||
animation: fadeIn 0.2s ease;
|
||||
}
|
||||
@@ -31,6 +33,10 @@
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.modal:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateY(-20px);
|
||||
@@ -73,7 +79,11 @@
|
||||
font-family: var(--font-display);
|
||||
}
|
||||
|
||||
/* 44px, the MOBILE.md touch-target minimum: the 24px icon and its padding
|
||||
came to 40, and the phone filter sheet journey caught it. */
|
||||
.closeButton {
|
||||
min-width: 2.75rem;
|
||||
min-height: 2.75rem;
|
||||
padding: 0.5rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
@@ -96,6 +106,14 @@
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Clears the iPhone home indicator when the modal is a bottom sheet. */
|
||||
.footer {
|
||||
flex-shrink: 0;
|
||||
padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--bg-card);
|
||||
}
|
||||
|
||||
/* Scrollbar styles */
|
||||
.content::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
|
||||
'use client';
|
||||
|
||||
import { useEffect, useCallback, useRef } from 'react';
|
||||
import { useEffect, useCallback, useId, useRef } from 'react';
|
||||
import { createPortal } from 'react-dom';
|
||||
import styles from './Modal.module.css';
|
||||
|
||||
@@ -15,10 +15,14 @@ interface ModalProps {
|
||||
children: React.ReactNode;
|
||||
title?: string;
|
||||
size?: 'small' | 'medium' | 'large';
|
||||
/** Pinned below the scrolling content, so its actions stay in reach. */
|
||||
footer?: React.ReactNode;
|
||||
}
|
||||
|
||||
export function Modal({ isOpen, onClose, children, title, size = 'medium' }: ModalProps) {
|
||||
export function Modal({ isOpen, onClose, children, title, size = 'medium', footer }: ModalProps) {
|
||||
const overlayRef = useRef<HTMLDivElement>(null);
|
||||
const dialogRef = useRef<HTMLDivElement>(null);
|
||||
const titleId = useId();
|
||||
|
||||
const handleEscape = useCallback((e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
@@ -41,6 +45,17 @@ export function Modal({ isOpen, onClose, children, title, size = 'medium' }: Mod
|
||||
};
|
||||
}, [isOpen, handleEscape]);
|
||||
|
||||
// Focus moves into the dialog when it opens and back to whatever opened it
|
||||
// when it closes. A child that has already taken focus (an autoFocus input)
|
||||
// keeps it: children's effects run before this one.
|
||||
useEffect(() => {
|
||||
if (!isOpen) return;
|
||||
const opener = document.activeElement as HTMLElement | null;
|
||||
const dialog = dialogRef.current;
|
||||
if (dialog && !dialog.contains(document.activeElement)) dialog.focus();
|
||||
return () => opener?.focus?.();
|
||||
}, [isOpen]);
|
||||
|
||||
// Pin the overlay to the VISUAL viewport, not the layout viewport. On mobile
|
||||
// the on-screen keyboard shrinks the visual viewport but not the layout one,
|
||||
// so a `position: fixed; inset: 0` overlay keeps full height — leaving the
|
||||
@@ -77,9 +92,16 @@ export function Modal({ isOpen, onClose, children, title, size = 'medium' }: Mod
|
||||
|
||||
return createPortal(
|
||||
<div ref={overlayRef} className={styles.overlay} onClick={handleOverlayClick}>
|
||||
<div className={`${styles.modal} ${styles[size]}`}>
|
||||
<div
|
||||
ref={dialogRef}
|
||||
className={`${styles.modal} ${styles[size]}`}
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby={title ? titleId : undefined}
|
||||
tabIndex={-1}
|
||||
>
|
||||
<div className={styles.header}>
|
||||
{title && <h2 className={styles.title}>{title}</h2>}
|
||||
{title && <h2 id={titleId} className={styles.title}>{title}</h2>}
|
||||
<button
|
||||
className={styles.closeButton}
|
||||
onClick={onClose}
|
||||
@@ -103,6 +125,7 @@ export function Modal({ isOpen, onClose, children, title, size = 'medium' }: Mod
|
||||
<div className={styles.content}>
|
||||
{children}
|
||||
</div>
|
||||
{footer && <div className={styles.footer}>{footer}</div>}
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
|
||||
@@ -100,6 +100,19 @@
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
/* Changes who can apply or what it costs. Outlined, not tinted: a fact, not
|
||||
a verdict. An inset ring keeps the box the size of its neighbours. */
|
||||
.conditionTag {
|
||||
display: inline-block;
|
||||
padding: 0.0625rem 0.4rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), 0.4);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Line 3: stats */
|
||||
.line3 {
|
||||
display: flex;
|
||||
|
||||
@@ -3,13 +3,14 @@
|
||||
* Four-line row for primary school search results
|
||||
*
|
||||
* Line 1: School name · Ofsted badge (framework-aware)
|
||||
* Line 2: School type · Age range · Denomination · Gender
|
||||
* Line 2: Phase · Type · Age range · the school page's flags (lib/schoolFacts)
|
||||
* Line 3: Reading, Writing & Maths % · trend arrow · vs-national delta · Pupils
|
||||
* Line 4: Local authority · Distance
|
||||
*/
|
||||
|
||||
import type { School } from '@/lib/types';
|
||||
import { formatPercentage, calculateTrend, getPhaseStyle, schoolUrl, buildOfstedListBadge, formatAgeRange, isProposedToClose, isSpecialSchool, listRwmValue } from '@/lib/utils';
|
||||
import { schoolFlags, schoolTypeLabel } from '@/lib/schoolFacts';
|
||||
import styles from './SchoolRow.module.css';
|
||||
|
||||
interface SchoolRowProps {
|
||||
@@ -33,10 +34,8 @@ export function SchoolRow({
|
||||
const phase = getPhaseStyle(school.phase);
|
||||
const ofstedBadge = buildOfstedListBadge(school);
|
||||
|
||||
const showGender = school.gender && school.gender.toLowerCase() !== 'mixed';
|
||||
const showDenomination =
|
||||
school.religious_denomination &&
|
||||
school.religious_denomination !== 'Does not apply';
|
||||
const typeLabel = schoolTypeLabel(school);
|
||||
const flags = schoolFlags(school);
|
||||
|
||||
// The school's OWN figure and its year-over-year trend are same-school
|
||||
// measures — shown whenever there's a real value (not the all-zero
|
||||
@@ -79,10 +78,16 @@ export function SchoolRow({
|
||||
{phase.label}
|
||||
</span>
|
||||
)}
|
||||
{school.school_type && <span className={styles.attr}>{school.school_type}</span>}
|
||||
{typeLabel && <span className={styles.attr}>{typeLabel}</span>}
|
||||
{school.age_range && <span className={styles.attr}>{formatAgeRange(school.age_range)}</span>}
|
||||
{showDenomination && <span className={styles.attr}>{school.religious_denomination}</span>}
|
||||
{showGender && <span className={styles.attr}>{school.gender}</span>}
|
||||
{flags.map((flag) => (
|
||||
<span
|
||||
key={flag.label}
|
||||
className={flag.kind === 'condition' ? styles.conditionTag : styles.attr}
|
||||
>
|
||||
{flag.label}
|
||||
</span>
|
||||
))}
|
||||
{isProposedToClose(school) && (
|
||||
<span className={`${styles.attr} ${styles.attrClosing}`}>⚠ Proposed to close</span>
|
||||
)}
|
||||
|
||||
@@ -183,9 +183,17 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.selectiveTag {
|
||||
background: rgba(var(--status-below-rgb), 0.1);
|
||||
color: var(--status-below);
|
||||
/* Changes who can apply or what it costs. Outlined, not tinted: a fact, not
|
||||
a verdict. An inset ring keeps the box the size of its neighbours. */
|
||||
.conditionTag {
|
||||
display: inline-block;
|
||||
padding: 0.0625rem 0.4rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
border-radius: 4px;
|
||||
box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), 0.4);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* ── Ofsted badge ────────────────────────────────────── */
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
* Four-line row for secondary school search results
|
||||
*
|
||||
* Line 1: School name · Ofsted badge
|
||||
* Line 2: School type · Age range · Gender · Sixth form · Admissions tag
|
||||
* Line 2: Phase · Type · Age range · the school page's flags (lib/schoolFacts)
|
||||
* Line 3: Attainment 8 (large) · ±LA avg delta · Pupils
|
||||
* Line 4: LA name · distance
|
||||
*/
|
||||
@@ -12,21 +12,9 @@
|
||||
|
||||
import type { School } from '@/lib/types';
|
||||
import { buildOfstedListBadge, getPhaseStyle, schoolUrl, formatAgeRange, isProposedToClose, isSpecialSchool } from '@/lib/utils';
|
||||
import { schoolFlags, schoolTypeLabel } from '@/lib/schoolFacts';
|
||||
import styles from './SecondarySchoolRow.module.css';
|
||||
|
||||
function detectAdmissionsTag(school: School): string | null {
|
||||
const policy = school.admissions_policy?.toLowerCase() ?? '';
|
||||
if (policy.includes('selective')) return 'Selective';
|
||||
const denom = school.religious_denomination ?? '';
|
||||
if (denom && denom !== 'Does not apply') return 'Faith priority';
|
||||
return null;
|
||||
}
|
||||
|
||||
function hasSixthForm(school: School): boolean {
|
||||
// GIAS OfficialSixthForm flag; missing (pipeline not yet re-run) => false.
|
||||
return school.has_sixth_form ?? false;
|
||||
}
|
||||
|
||||
interface SecondarySchoolRowProps {
|
||||
school: School;
|
||||
isLocationSearch?: boolean;
|
||||
@@ -64,9 +52,8 @@ export function SecondarySchoolRow({
|
||||
? att8 - laAvgAttainment8
|
||||
: null;
|
||||
|
||||
const admissionsTag = detectAdmissionsTag(school);
|
||||
const sixthForm = hasSixthForm(school);
|
||||
const showGender = school.gender && school.gender.toLowerCase() !== 'mixed';
|
||||
const typeLabel = schoolTypeLabel(school);
|
||||
const flags = schoolFlags(school);
|
||||
|
||||
return (
|
||||
<div className={`${styles.row} ${phase.key ? styles[`phase${phase.key}`] : ''} ${isInCompare ? styles.rowInCompare : ''}`}>
|
||||
@@ -90,19 +77,16 @@ export function SecondarySchoolRow({
|
||||
{phase.label}
|
||||
</span>
|
||||
)}
|
||||
{school.school_type && <span className={styles.attr}>{school.school_type}</span>}
|
||||
{typeLabel && <span className={styles.attr}>{typeLabel}</span>}
|
||||
{school.age_range && <span className={styles.attr}>{formatAgeRange(school.age_range)}</span>}
|
||||
{showGender && (
|
||||
<span className={styles.provisionTag}>{school.gender}</span>
|
||||
)}
|
||||
{sixthForm && (
|
||||
<span className={styles.provisionTag}>Sixth form</span>
|
||||
)}
|
||||
{admissionsTag && (
|
||||
<span className={`${styles.provisionTag} ${admissionsTag === 'Selective' ? styles.selectiveTag : ''}`}>
|
||||
{admissionsTag}
|
||||
{flags.map((flag) => (
|
||||
<span
|
||||
key={flag.label}
|
||||
className={flag.kind === 'condition' ? styles.conditionTag : styles.provisionTag}
|
||||
>
|
||||
{flag.label}
|
||||
</span>
|
||||
)}
|
||||
))}
|
||||
{isProposedToClose(school) && (
|
||||
<span className={`${styles.provisionTag} ${styles.closingTag}`}>⚠ Proposed to close</span>
|
||||
)}
|
||||
|
||||
@@ -13,7 +13,7 @@ import Link from 'next/link';
|
||||
import type { PlaceDetail, PlaceSummary } from '@/lib/places';
|
||||
import { placeUrl, authoritySlug } from '@/lib/places';
|
||||
import type { School } from '@/lib/types';
|
||||
import { schoolUrl, formatAgeSpan } from '@/lib/utils';
|
||||
import { schoolUrl, formatAgeSpan, hasNurseryClasses } from '@/lib/utils';
|
||||
import { absoluteUrl } from '@/lib/site';
|
||||
import { TrackPlaceView } from './TrackPlaceView';
|
||||
import styles from './PlaceView.module.css';
|
||||
@@ -131,9 +131,10 @@ function SchoolTable({ schools, phase }: { schools: School[]; phase: PhaseKey })
|
||||
{showNursery && (
|
||||
<td className={styles.attr}>
|
||||
{/* Undefined is a mart the pipeline has not rebuilt, and
|
||||
false is a school without one. Neither is a "Yes", and
|
||||
neither is worth two different words. */}
|
||||
{s.nursery_provision ? 'Yes' : NO_VALUE}
|
||||
"No Nursery Classes" or "Not applicable" is a school
|
||||
without one. None is a "Yes", and none is worth a
|
||||
different word. */}
|
||||
{hasNurseryClasses(s.nursery_provision) ? 'Yes' : NO_VALUE}
|
||||
</td>
|
||||
)}
|
||||
<td className={styles.attrWide}>
|
||||
|
||||
@@ -145,20 +145,90 @@
|
||||
}
|
||||
|
||||
|
||||
.meta {
|
||||
/* Fact line: the phase pill, then plain register values joined by dots.
|
||||
The line starts 1.125rem left of the column and clips that strip, so a
|
||||
value that wraps to the start of a line loses the dot in front of it
|
||||
instead of opening the line with one. */
|
||||
.facts {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
align-items: center;
|
||||
row-gap: 0.25rem;
|
||||
margin: 0 0 0.5rem -1.125rem;
|
||||
clip-path: inset(0 0 0 1.125rem);
|
||||
font-size: 0.875rem;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
|
||||
.metaItem {
|
||||
font-size: 0.8125rem;
|
||||
.facts > * {
|
||||
margin-left: 1.125rem;
|
||||
}
|
||||
|
||||
|
||||
.fact {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.fact::before {
|
||||
content: "·";
|
||||
position: absolute;
|
||||
left: -0.75rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
|
||||
/* The search rows' phase pill, in the same phase colours. */
|
||||
.phasePill {
|
||||
padding: 0.0625rem 0.4rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.phasePillPrimary { background: var(--phase-primary-bg); color: var(--phase-primary-text); }
|
||||
.phasePillSecondary { background: var(--phase-secondary-bg); color: var(--phase-secondary-text); }
|
||||
.phasePillAllThrough { background: var(--phase-all-through-bg); color: var(--phase-all-through-text); }
|
||||
.phasePillPost16 { background: var(--phase-post16-bg); color: var(--phase-post16-text); }
|
||||
.phasePillNursery { background: var(--phase-nursery-bg); color: var(--phase-nursery-text); }
|
||||
|
||||
|
||||
/* Flags are facts, not verdicts, so they carry no hue. Outlined changes who
|
||||
can apply or what it costs; filled is what the school offers. Text may
|
||||
wrap: the longest religious character runs past a 360px line. */
|
||||
.flags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.375rem;
|
||||
margin: 0 0 0.625rem;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
|
||||
.flagCondition,
|
||||
.flagProvision {
|
||||
padding: 0.0625rem 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.4;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
|
||||
.flagCondition {
|
||||
border-color: rgba(var(--ink-rgb), 0.4);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
|
||||
.flagProvision {
|
||||
background: rgba(var(--ink-rgb), 0.07);
|
||||
color: var(--text-secondary);
|
||||
padding: 0.125rem 0.5rem;
|
||||
background: var(--bg-secondary);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
||||
@@ -703,17 +773,8 @@
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
/* Pills wrap horizontally instead of stacking — short tokens like
|
||||
"Manchester" / "Voluntary aided" fit 2 per row instead of 3 full
|
||||
rows of empty horizontal space. */
|
||||
.meta {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
/* Secondary header info (headteacher, website, pupil count, trust,
|
||||
contact, area) isn't needed above the fold on phones/tablets, so it's
|
||||
/* Secondary header info (headteacher, website, phone, trust, capacity)
|
||||
isn't needed above the fold on phones/tablets, so it's
|
||||
collapsed by default and revealed on demand via the "Show all details"
|
||||
link — reclaiming the vertical space so the metrics surface sooner. */
|
||||
.detailsToggle {
|
||||
|
||||
@@ -20,8 +20,9 @@ import { useEffect, useRef, useState, type ReactNode } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { useComparison } from '@/hooks/useComparison';
|
||||
import { SchoolHeroMap, type SchoolHeroMapHandle } from '../SchoolHeroMap';
|
||||
import type { School, SchoolResult, SchoolCensus } from '@/lib/types';
|
||||
import { formatAgeRange, isProposedToClose } from '@/lib/utils';
|
||||
import type { School, SchoolCensus } from '@/lib/types';
|
||||
import { formatAgeRange, getPhaseStyle, isProposedToClose } from '@/lib/utils';
|
||||
import { schoolFlags, schoolTypeLabel } from '@/lib/schoolFacts';
|
||||
import type { NavItem } from '@/lib/schoolSections';
|
||||
import { track, getNavigationSource } from '@/lib/analytics';
|
||||
import styles from './SchoolDetailShell.module.css';
|
||||
@@ -34,8 +35,6 @@ import styles from './SchoolDetailShell.module.css';
|
||||
*/
|
||||
export interface SchoolDetailShellProps {
|
||||
schoolInfo: School;
|
||||
/** Only for the header's pupil-count fallback. */
|
||||
yearlyData: SchoolResult[];
|
||||
census: SchoolCensus | null;
|
||||
/** Section list for the sticky nav, computed on the server. */
|
||||
navItems: NavItem[];
|
||||
@@ -43,8 +42,14 @@ export interface SchoolDetailShellProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
|
||||
/** Equal ignoring case and punctuation: "TIFFIN SCHOOL" is Tiffin School. */
|
||||
function sameName(a: string, b: string): boolean {
|
||||
const key = (s: string) => s.toLowerCase().replace(/[^a-z0-9]/g, '');
|
||||
return key(a) === key(b);
|
||||
}
|
||||
|
||||
export function SchoolDetailShell({
|
||||
schoolInfo, yearlyData, census, navItems, children,
|
||||
schoolInfo, census, navItems, children,
|
||||
}: SchoolDetailShellProps) {
|
||||
const router = useRouter();
|
||||
const { addSchool, removeSchool, isSelected } = useComparison();
|
||||
@@ -63,7 +68,7 @@ export function SchoolDetailShell({
|
||||
const heroMapRef = useRef<SchoolHeroMapHandle>(null);
|
||||
// "All ▾" jump menu listing every section.
|
||||
const [sectionsOpen, setSectionsOpen] = useState(false);
|
||||
// Header details (headteacher, contact, trust, area) collapse behind a
|
||||
// Header details (headteacher, contact, trust, capacity) collapse behind a
|
||||
// "Show all details" link on mobile/tablet, where they're below the fold.
|
||||
const [detailsOpen, setDetailsOpen] = useState(false);
|
||||
|
||||
@@ -122,15 +127,34 @@ export function SchoolDetailShell({
|
||||
return () => window.removeEventListener('keydown', onKey);
|
||||
}, [sectionsOpen]);
|
||||
|
||||
// The chrome needs only these four. The section-shape flags are computed
|
||||
// The chrome needs only these few. The section-shape flags are computed
|
||||
// once on the server (lib/schoolSections) and consumed by the section
|
||||
// composers; recomputing them here would duplicate that work for values
|
||||
// this component never renders.
|
||||
const latestResults = yearlyData.length > 0 ? yearlyData[yearlyData.length - 1] : null;
|
||||
const phase = schoolInfo.phase ?? '';
|
||||
const isAllThrough = phase.toLowerCase() === 'all-through';
|
||||
const hasLocation = schoolInfo.latitude != null && schoolInfo.longitude != null;
|
||||
|
||||
// Header facts: each is one register value in a fixed slot (lib/schoolFacts).
|
||||
const phasePill = getPhaseStyle(schoolInfo.phase);
|
||||
// Never latestResults.total_pupils: that is the results cohort, which for a
|
||||
// secondary is the GCSE year group alone.
|
||||
const pupils = census?.total_pupils ?? schoolInfo.total_pupils ?? null;
|
||||
const facts = [
|
||||
formatAgeRange(schoolInfo.age_range),
|
||||
schoolTypeLabel(schoolInfo),
|
||||
pupils != null ? `${pupils.toLocaleString()} pupils` : null,
|
||||
].filter((fact): fact is string => !!fact);
|
||||
const flags = schoolFlags(schoolInfo);
|
||||
// The council, unless the address already names it.
|
||||
const council = schoolInfo.local_authority
|
||||
&& !(schoolInfo.address ?? '').toLowerCase().includes(schoolInfo.local_authority.toLowerCase())
|
||||
? schoolInfo.local_authority
|
||||
: null;
|
||||
// A single-academy trust carries the school's own name, which says nothing.
|
||||
const trust = schoolInfo.trust_name && !sameName(schoolInfo.trust_name, schoolInfo.school_name)
|
||||
? schoolInfo.trust_name
|
||||
: null;
|
||||
|
||||
const handleComparisonToggle = () => {
|
||||
if (isInComparison) {
|
||||
removeSchool(schoolInfo.urn);
|
||||
@@ -204,29 +228,31 @@ export function SchoolDetailShell({
|
||||
<div className={styles.headerContent}>
|
||||
<div className={styles.titleSection}>
|
||||
<h1 className={styles.schoolName}>{schoolInfo.school_name}</h1>
|
||||
<div className={styles.meta}>
|
||||
{schoolInfo.local_authority && (
|
||||
<span className={styles.metaItem}>{schoolInfo.local_authority}</span>
|
||||
)}
|
||||
{schoolInfo.school_type && (
|
||||
<span className={styles.metaItem}>{schoolInfo.school_type}</span>
|
||||
)}
|
||||
{isAllThrough && (
|
||||
<span className={styles.metaItem}>All-through (primary & secondary)</span>
|
||||
)}
|
||||
{schoolInfo.gender && schoolInfo.gender !== 'Mixed' && (
|
||||
<span className={styles.metaItem}>{schoolInfo.gender}'s school</span>
|
||||
)}
|
||||
{schoolInfo.age_range && (
|
||||
<span className={styles.metaItem}>{formatAgeRange(schoolInfo.age_range)}</span>
|
||||
)}
|
||||
{schoolInfo.nursery_provision && (
|
||||
<span className={styles.metaItem}>Nursery</span>
|
||||
)}
|
||||
{schoolInfo.has_sixth_form && (
|
||||
<span className={styles.metaItem}>Sixth form</span>
|
||||
)}
|
||||
</div>
|
||||
{(phasePill.label || facts.length > 0) && (
|
||||
<div className={styles.facts}>
|
||||
{phasePill.label && (
|
||||
<span className={`${styles.phasePill} ${styles[`phasePill${phasePill.key}`]}`}>
|
||||
{phasePill.label}
|
||||
</span>
|
||||
)}
|
||||
{facts.map((fact) => (
|
||||
<span key={fact} className={styles.fact}>{fact}</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{flags.length > 0 && (
|
||||
// role="list": list-style: none drops list semantics in Safari.
|
||||
<ul role="list" className={styles.flags} aria-label="Admission and provision">
|
||||
{flags.map((flag) => (
|
||||
<li
|
||||
key={flag.label}
|
||||
className={flag.kind === 'condition' ? styles.flagCondition : styles.flagProvision}
|
||||
>
|
||||
{flag.label}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
{isProposedToClose(schoolInfo) && (
|
||||
<div className={styles.closingStrip} role="note">
|
||||
<strong>⚠ Proposed to close.</strong> Check with the local authority before
|
||||
@@ -236,6 +262,7 @@ export function SchoolDetailShell({
|
||||
{schoolInfo.address && (
|
||||
<p className={styles.address}>
|
||||
{schoolInfo.address}{schoolInfo.postcode && `, ${schoolInfo.postcode}`}
|
||||
{council && ` · ${council}`}
|
||||
{hasLocation && (
|
||||
<>
|
||||
{' · '}
|
||||
@@ -282,21 +309,6 @@ export function SchoolDetailShell({
|
||||
</a>
|
||||
</span>
|
||||
)}
|
||||
{(() => {
|
||||
const total = census?.total_pupils ?? latestResults?.total_pupils ?? null;
|
||||
if (total == null) return null;
|
||||
return (
|
||||
<span className={styles.headerDetail}>
|
||||
<strong>Pupils:</strong> {total.toLocaleString()}
|
||||
{schoolInfo.capacity != null && ` (capacity: ${schoolInfo.capacity})`}
|
||||
</span>
|
||||
);
|
||||
})()}
|
||||
{schoolInfo.trust_name && (
|
||||
<span className={styles.headerDetail}>
|
||||
Part of <strong>{schoolInfo.trust_name}</strong>
|
||||
</span>
|
||||
)}
|
||||
{schoolInfo.telephone && (
|
||||
<span className={styles.headerDetail}>
|
||||
<strong>Phone:</strong>{' '}
|
||||
@@ -305,22 +317,14 @@ export function SchoolDetailShell({
|
||||
</a>
|
||||
</span>
|
||||
)}
|
||||
{schoolInfo.religious_denomination && (
|
||||
{trust && (
|
||||
<span className={styles.headerDetail}>
|
||||
<strong>Religious character:</strong>{' '}
|
||||
{['Does not apply', 'None'].includes(schoolInfo.religious_denomination)
|
||||
? 'None'
|
||||
: schoolInfo.religious_denomination}
|
||||
<strong>Academy trust:</strong> {trust}
|
||||
</span>
|
||||
)}
|
||||
{schoolInfo.county && (
|
||||
{schoolInfo.capacity != null && (
|
||||
<span className={styles.headerDetail}>
|
||||
<strong>County:</strong> {schoolInfo.county}
|
||||
</span>
|
||||
)}
|
||||
{schoolInfo.parliamentary_constituency && (
|
||||
<span className={styles.headerDetail}>
|
||||
<strong>Constituency:</strong> {schoolInfo.parliamentary_constituency}
|
||||
<strong>Capacity:</strong> {schoolInfo.capacity.toLocaleString()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -54,7 +54,8 @@ export function WellbeingSection({
|
||||
</div>
|
||||
)}
|
||||
{(() => {
|
||||
const total = census?.total_pupils ?? schoolInfo.total_pupils ?? latestResults?.total_pupils ?? null;
|
||||
// Not latestResults.total_pupils: that is the GCSE year group.
|
||||
const total = census?.total_pupils ?? schoolInfo.total_pupils ?? null;
|
||||
if (total == null) return null;
|
||||
const female = census?.female_pupils ?? null;
|
||||
const male = census?.male_pupils ?? null;
|
||||
|
||||
@@ -0,0 +1,66 @@
|
||||
/**
|
||||
* The facts the school header and the search rows print, so a parent reads
|
||||
* the same words in the list and on the page.
|
||||
*
|
||||
* Every value comes from one register field. Nothing is inferred or explained
|
||||
* inline, and a missing field prints nothing.
|
||||
*/
|
||||
|
||||
import type { School } from './types';
|
||||
import { hasNurseryClasses, hasReligiousCharacter, singleSexLabel } from './utils';
|
||||
|
||||
/** The search filter's type groups (backend/school_groups.py), without its
|
||||
* parenthesised notes: fees have a flag of their own. */
|
||||
const TYPE_GROUP_LABELS: Record<string, string> = {
|
||||
state: 'State school',
|
||||
independent: 'Independent school',
|
||||
special: 'Special school (SEND)',
|
||||
post16: 'Sixth form or college',
|
||||
alternative: 'Alternative provision',
|
||||
};
|
||||
|
||||
/** The school's type in the search filter's terms, or the register's own name
|
||||
* for a type in no group (secure units, online providers). */
|
||||
export function schoolTypeLabel(school: Pick<School, 'type_group' | 'school_type'>): string | null {
|
||||
const grouped = school.type_group ? TYPE_GROUP_LABELS[school.type_group] : undefined;
|
||||
return grouped ?? (school.school_type?.trim() || null);
|
||||
}
|
||||
|
||||
/** "condition": changes who can apply or what it costs.
|
||||
* "provision": what the school offers. */
|
||||
export type SchoolFlagKind = 'condition' | 'provision';
|
||||
|
||||
export interface SchoolFlag {
|
||||
label: string;
|
||||
kind: SchoolFlagKind;
|
||||
}
|
||||
|
||||
type FlagFields = Pick<
|
||||
School,
|
||||
'type_group' | 'admissions_policy' | 'gender' | 'religious_denomination'
|
||||
| 'nursery_provision' | 'has_sixth_form' | 'phase'
|
||||
>;
|
||||
|
||||
/**
|
||||
* Flags for what applies, in a fixed order: conditions first, then provision.
|
||||
*
|
||||
* Selective needs the exact value. The register files a partly selective
|
||||
* school as "Non-selective", so that value is never printed.
|
||||
*/
|
||||
export function schoolFlags(school: FlagFields): SchoolFlag[] {
|
||||
const flags: SchoolFlag[] = [];
|
||||
const condition = (label: string) => flags.push({ label, kind: 'condition' });
|
||||
const provision = (label: string) => flags.push({ label, kind: 'provision' });
|
||||
const phase = school.phase?.trim().toLowerCase();
|
||||
|
||||
if (school.type_group === 'independent') condition('Fee-paying');
|
||||
if (school.admissions_policy?.trim().toLowerCase() === 'selective') condition('Selective');
|
||||
const singleSex = singleSexLabel(school.gender);
|
||||
if (singleSex) condition(singleSex);
|
||||
if (hasReligiousCharacter(school.religious_denomination)) {
|
||||
condition(school.religious_denomination!.trim());
|
||||
}
|
||||
if (hasNurseryClasses(school.nursery_provision) && phase !== 'nursery') provision('Nursery class');
|
||||
if (school.has_sixth_form && phase !== '16 plus') provision('Sixth form');
|
||||
return flags;
|
||||
}
|
||||
+14
-1
@@ -17,10 +17,13 @@ export interface School {
|
||||
local_authority_code: number | null;
|
||||
school_type: string | null;
|
||||
school_type_code: string | null;
|
||||
/** Search-filter type group ("state", "independent"…), null for a type in none. */
|
||||
type_group?: string | null;
|
||||
religious_denomination: string | null;
|
||||
age_range: string | null;
|
||||
has_sixth_form?: boolean | null;
|
||||
nursery_provision?: boolean | null;
|
||||
/** GIAS text; read it through hasNurseryClasses(). */
|
||||
nursery_provision?: string | null;
|
||||
status?: string | null; // GIAS establishment status ("Open" / "Open, but proposed to close")
|
||||
|
||||
// Address
|
||||
@@ -484,6 +487,12 @@ export interface RankingsResponse {
|
||||
local_authority?: string;
|
||||
}
|
||||
|
||||
/** A filter option whose URL value differs from what a parent reads. */
|
||||
export interface FilterOption {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
export interface Filters {
|
||||
local_authorities: string[];
|
||||
school_types: string[];
|
||||
@@ -491,6 +500,9 @@ export interface Filters {
|
||||
phases: string[];
|
||||
genders: string[];
|
||||
admissions_policies: string[];
|
||||
/** Parent-facing school type groups; the URL's school_type takes their value. */
|
||||
school_type_groups?: FilterOption[];
|
||||
faiths?: FilterOption[];
|
||||
}
|
||||
|
||||
export interface NationalAveragesYear {
|
||||
@@ -567,6 +579,7 @@ export interface SchoolSearchParams {
|
||||
gender?: string;
|
||||
admissions_policy?: string;
|
||||
has_sixth_form?: string;
|
||||
faith?: string;
|
||||
}
|
||||
|
||||
export interface RankingsParams {
|
||||
|
||||
@@ -99,6 +99,26 @@ export function formatAgeRange(ageRange: string | null | undefined): string {
|
||||
return /^\d+–\d+$/.test(span) ? `Ages ${span}` : span;
|
||||
}
|
||||
|
||||
/**
|
||||
* GIAS NurseryProvision is text: "Has Nursery Classes", "No Nursery Classes"
|
||||
* or "Not applicable". Only the first means a nursery, so never test the raw
|
||||
* value for truthiness.
|
||||
*/
|
||||
export function hasNurseryClasses(value: string | null | undefined): boolean {
|
||||
return value?.trim().toLowerCase() === 'has nursery classes';
|
||||
}
|
||||
|
||||
/**
|
||||
* "Girls' school" / "Boys' school" for a single-sex school, null otherwise.
|
||||
* GIAS genders are plural, so the possessive is a bare apostrophe.
|
||||
*/
|
||||
export function singleSexLabel(gender: string | null | undefined): string | null {
|
||||
const g = gender?.trim().toLowerCase();
|
||||
if (g === 'girls') return "Girls' school";
|
||||
if (g === 'boys') return "Boys' school";
|
||||
return null;
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// Number Formatting
|
||||
// ============================================================================
|
||||
@@ -902,6 +922,15 @@ export function isSpecialSchool(school: { school_type?: string | null }): boolea
|
||||
return /\bspecial\b/.test(t) || /pupil referral/.test(t) || /alternative provision/.test(t);
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether GIAS records a religious character. "None" and "Does not apply" are
|
||||
* the register's two ways of saying it has none, and neither is a faith.
|
||||
*/
|
||||
export function hasReligiousCharacter(value: string | null | undefined): boolean {
|
||||
const v = value?.trim().toLowerCase() ?? '';
|
||||
return v !== '' && v !== 'none' && v !== 'does not apply';
|
||||
}
|
||||
|
||||
/**
|
||||
* The school's combined Reading, Writing & Maths figure, or null when there is
|
||||
* no real one to show.
|
||||
|
||||
Reference in new issue
Block a user