test(org): wait for the route's prefetch and for the removal before reloading

Author: waleedlatif1

apps/sim/scripts/org-redesign-e2e/checks/home.ts

@@ -356,10 +356,16 @@ export async function homeChecks() {
       const row = recents.getByRole('link', { name: SEEDED_SOURCE.title })
       await expect(row).toBeVisible()
       await row.hover()
+      const removed = page.waitForResponse(
+        (response) =>
+          response.request().method() === 'DELETE' &&
+          new URL(response.url()).pathname.endsWith('/search/history/sources')
+      )
       await recents
         .getByRole('button', { name: `Remove ${SEEDED_SOURCE.title} from recents` })
         .click()
       await expect(row).toHaveCount(0)
+      assert.ok((await removed).ok(), 'The server refused the removal')
       await page.reload()
       await expect(homeRegion(page, 'Email')).toBeVisible()
       await session.settle()

apps/sim/scripts/org-redesign-e2e/checks/links.ts

@@ -32,6 +32,7 @@ import {
   mainNav,
   menuEntry,
   pageTurn,
+  routePrefetched,
 } from '@/scripts/org-redesign-e2e/locators'
 
 export async function linksChecks() {
@@ -391,14 +392,10 @@ export async function linksChecks() {
           if (route.request().headers()['next-router-prefetch'] === undefined) await hold.promise
           await route.continue()
         })
-        const loadingPrefetched = page.waitForResponse(
-          async (response) =>
-            isLinksPayload(new URL(response.url())) &&
-            // A prefetch the page moved past has no body left to read, and is not the one awaited.
-            (await response.text().catch(() => '')).includes('Loading links')
-        )
+        const prefetched = routePrefetched(page, isLinksPayload)
         await page.goto(orgUrl('/home'))
-        await loadingPrefetched
+        await mainNav(page).getByRole('link', { name: 'Links', exact: true }).hover()
+        await prefetched()
         await mainNav(page).getByRole('link', { name: 'Links', exact: true }).click()
         await expect(page.getByRole('status', { name: 'Loading links' })).toBeVisible()
         await expect(page.getByRole('button', { name: 'New link', exact: true })).toBeVisible()

apps/sim/scripts/org-redesign-e2e/checks/people.ts

@@ -14,7 +14,7 @@ import {
   section,
   withSession,
 } from '@/scripts/org-redesign-e2e/harness'
-import { mainNav, navLabels } from '@/scripts/org-redesign-e2e/locators'
+import { mainNav, navLabels, routePrefetched } from '@/scripts/org-redesign-e2e/locators'
 
 export async function peoplePhaseChecks() {
   section('People with its flag on')
@@ -32,14 +32,11 @@ export async function peoplePhaseChecks() {
         if (route.request().headers()['next-router-prefetch'] === undefined) await hold.promise
         await route.continue()
       })
-      // The router can only show a loading boundary a prefetch has already delivered.
-      const prefetched = page.waitForResponse((response) =>
-        isPeoplePayload(new URL(response.url()))
-      )
+      const prefetched = routePrefetched(page, isPeoplePayload)
       await page.goto(orgUrl('/home'))
       const link = mainNav(page).getByRole('link', { name: 'People', exact: true })
       await link.hover()
-      await prefetched
+      await prefetched()
       await link.click()
       const rows = page.getByRole('status', { name: 'Loading people…' })
       await expect(rows).toBeVisible()

apps/sim/scripts/org-redesign-e2e/locators.ts

@@ -1,5 +1,5 @@
 import assert from 'node:assert/strict'
-import type { Locator, Page } from '@playwright/test'
+import type { Locator, Page, Request } from '@playwright/test'
 import { expect } from '@/scripts/org-redesign-e2e/harness'
 
 declare global {
@@ -70,6 +70,29 @@ export async function openRowMenu(page: Page, label: string) {
   return page.getByRole('menu', { name: `Actions for ${label}` })
 }
 
+/**
+ * Resolves once the route's prefetch has landed: a response arrived and none is outstanding. The
+ * router can only show a loading boundary a prefetch already delivered, and it fetches a route in
+ * several requests whose order and timing are its own.
+ */
+export function routePrefetched(page: Page, isPayload: (address: URL) => boolean) {
+  let outstanding = 0
+  let landed = 0
+  const matches = (request: Request) =>
+    isPayload(new URL(request.url())) && request.headers()['next-router-prefetch'] !== undefined
+  page.on('request', (request) => {
+    if (matches(request)) outstanding += 1
+  })
+  const finish = (request: Request) => {
+    if (!matches(request)) return
+    outstanding -= 1
+    landed += 1
+  }
+  page.on('requestfinished', finish)
+  page.on('requestfailed', finish)
+  return () => expect.poll(() => landed > 0 && outstanding === 0).toBe(true)
+}
+
 export async function clipboard(page: Page) {
   return page.evaluate(() => navigator.clipboard.readText())
 }