From e7645d1ba52e723ff32763effaf53c994a90e099 Mon Sep 17 00:00:00 2001 From: Tudor Date: Thu, 1 Oct 2026 21:43:06 +0100 Subject: [PATCH] test(e2e): scroll a long list, and wait out the popup crossfade The pinned-toolbar journeys scrolled the results of a typed B1 1BB search. At the new half-mile default that is two schools, so the page ended before the toolbar had anything to stay pinned over (desktop scrollY stopped at 229; on phones the scroll reached the footer). They now open the search at a mile, which is what they were measuring. Leaflet crossfades popups for 200ms, so for that window there are two .sc-popup elements, and a strict locator fails at once rather than retrying. Wait for one popup before reading it. Co-Authored-By: Claude Opus 5.5 --- e2e/tests/journeys.spec.ts | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/e2e/tests/journeys.spec.ts b/e2e/tests/journeys.spec.ts index 7341330..7dd7030 100644 --- a/e2e/tests/journeys.spec.ts +++ b/e2e/tests/journeys.spec.ts @@ -541,6 +541,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 +558,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 +589,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 +650,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 +669,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 +677,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. -- 2.54.0