test(org): grow full-page shots only for panes that follow the viewport

A pane with its own ceiling, like the Home calendar, stays a scroller at any
height, so counting its overflow left 1300px of blank page in the shot. Also
holds Home's typed placeholder at its full text for the shot.

Author: waleedlatif1

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

@@ -70,29 +70,52 @@ function routesFor(persona: Persona): { name: string; path: string }[] {
   return shared
 }
 
-/** The app scrolls inside its own panes, so the viewport grows to what they hold before the shot. */
+/** How far a probe grows the viewport to see which panes follow it. */
+const PANE_PROBE_PX = 200
+/** Home's composer types its suggestion out, then holds it this long before deleting it. */
+const TYPED_PLACEHOLDER = '[placeholder^="Ask Sim to "]:not([placeholder$="..."])'
+
+/**
+ * The app scrolls inside its own panes, so the viewport grows to what they hold before the shot. A
+ * pane with a ceiling of its own, such as a Home widget's list, stays a scroller at any height and
+ * shows no more for it: only the panes that follow the viewport count.
+ */
+async function viewportHolding(page: Page, viewport: Viewport) {
+  const scrollers = await page.evaluateHandle(() =>
+    Array.from(document.querySelectorAll('body *'))
+      .filter((element) => element.scrollHeight - element.clientHeight > 1)
+      .map((element) => ({
+        element,
+        clientHeight: element.clientHeight,
+        overflow: element.scrollHeight - element.clientHeight,
+      }))
+  )
+  await page.setViewportSize({ width: viewport.width, height: viewport.height + PANE_PROBE_PX })
+  await sleep(150)
+  const overflow = await scrollers.evaluate((measured) =>
+    measured
+      .filter(({ element, clientHeight }) => element.clientHeight > clientHeight)
+      .reduce((tallest, { overflow }) => Math.max(tallest, overflow), 0)
+  )
+  await scrollers.dispose()
+  return Math.min(viewport.height + overflow, 3600)
+}
+
 export async function fullPageScreenshot(page: Page, path: string, viewport: Viewport) {
-  const height = await page.evaluate(() => {
-    let tallest = innerHeight
-    for (const element of Array.from(document.querySelectorAll('body *'))) {
-      const overflow = element.scrollHeight - element.clientHeight
-      if (overflow > 1) tallest = Math.max(tallest, innerHeight + overflow)
-    }
-    return Math.min(tallest, 3600)
+  const height = await viewportHolding(page, viewport)
+  await page.setViewportSize({ width: viewport.width, height })
+  await sleep(150)
+  await page.waitForFunction((typing) => !document.querySelector(typing), TYPED_PLACEHOLDER, {
+    timeout: 10_000,
   })
-  const grows = height > viewport.height
-  if (grows) {
-    await page.setViewportSize({ width: viewport.width, height })
-    await sleep(150)
-  }
   await page.screenshot({
     path,
     fullPage: true,
     animations: 'disabled',
     style: 'nextjs-portal { display: none; }',
     timeout: 20_000,
   })
-  if (grows) await page.setViewportSize({ width: viewport.width, height: viewport.height })
+  await page.setViewportSize({ width: viewport.width, height: viewport.height })
 }
 
 /** Long enough for a persona's walk to list every route that failed. */