Merge pull request 'test(e2e): scroll a long list, and wait out the popup crossfade' (#167) from fix/e2e-after-half-mile-default into main

Reviewed-on: #167

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.