test(app): stabilize file expansion anchor (#44293)

packages/app/e2e/regression/session-timeline-file-projection.spec.ts

@@ -3,9 +3,9 @@ import { createTwoFilesPatch } from "diff"
 import {
   assistantMessage,
   setupTimeline,
-  textPart,
   toolPart,
   userMessage,
+  userText,
 } from "../performance/timeline-stability/fixture"
 
 test("renders completed write content", async ({ page }) => {
@@ -82,9 +82,9 @@ test("keeps an expanded file diff header at the same viewport position", async (
   const id = "prt_file_projection_anchored_patch"
   const before = Array.from({ length: 80 }, (_, index) => `export const value${index} = ${index}\n`).join("")
   const after = before.replaceAll(" = ", " = compute(").replaceAll("\n", ")\n")
-  const timeline = await setupTimeline(page, {
+  await setupTimeline(page, {
     messages: [
-      userMessage(),
+      userMessage([userText("Preceding context ".repeat(120))]),
       assistantMessage([
         toolPart(
           id,
@@ -105,7 +105,6 @@ test("keeps an expanded file diff header at the same viewport position", async (
             },
           },
         ),
-        textPart("prt_after_anchored_patch", "The diff is ready.\n\n".repeat(4)),
       ]),
     ],
     viewport: { width: 1200, height: 600 },
@@ -113,7 +112,21 @@ test("keeps an expanded file diff header at the same viewport position", async (
 
   const scroller = page.locator(".scroll-view__viewport", { has: page.locator("[data-timeline-row]") })
   const wrapper = page.locator(`[data-timeline-part-id="${id}"]`)
+  const row = page.locator("[data-timeline-key]", { has: wrapper })
   const trigger = wrapper.getByRole("button")
+  await expect
+    .poll(() =>
+      row.evaluate((element) => {
+        const measured = element.querySelector<HTMLElement>("[data-index]")
+        return measured
+          ? Math.abs(element.getBoundingClientRect().height - measured.getBoundingClientRect().height)
+          : Number.POSITIVE_INFINITY
+      }),
+    )
+    .toBeLessThanOrEqual(1)
+  await expect
+    .poll(() => scroller.evaluate((element) => element.scrollHeight - element.clientHeight))
+    .toBeGreaterThan(1)
   await scroller.evaluate((element) => {
     element.scrollTop = element.scrollHeight - element.clientHeight - 0.25
   })
@@ -121,11 +134,28 @@ test("keeps an expanded file diff header at the same viewport position", async (
   await expect
     .poll(() => scroller.evaluate((element) => element.scrollHeight - element.clientHeight - element.scrollTop))
     .toBeLessThanOrEqual(0.5)
-  await trigger.dispatchEvent("wheel", { deltaY: -1, deltaMode: 0 })
-  await trigger.dispatchEvent("pointerdown")
+  const bottomScrollTop = await scroller.evaluate((element) => element.scrollTop)
+  await scroller.hover()
+  await page.mouse.wheel(0, -20)
+  await expect
+    .poll(() => scroller.evaluate((element, bottom) => bottom - element.scrollTop, bottomScrollTop))
+    .toBeGreaterThan(0)
   const y = await trigger.evaluate((element) => element.getBoundingClientRect().y)
-  await trigger.dispatchEvent("click")
+  const collapsedHeight = await row.evaluate((element) => element.getBoundingClientRect().height)
+  await trigger.click()
   await expect(wrapper.locator('[data-component="apply-patch-file-diff"]')).toBeVisible()
+  await expect
+    .poll(() =>
+      row.evaluate((element, collapsed) => {
+        const measured = element.querySelector<HTMLElement>("[data-index]")
+        const allocatedHeight = element.getBoundingClientRect().height
+        return {
+          grew: allocatedHeight > collapsed + 1,
+          measured: measured ? Math.abs(allocatedHeight - measured.getBoundingClientRect().height) <= 1 : false,
+        }
+      }, collapsedHeight),
+    )
+    .toEqual({ grew: true, measured: true })
   await expect
     .poll(() => trigger.evaluate((element, initialY) => Math.abs(element.getBoundingClientRect().y - initialY), y))
     .toBeLessThanOrEqual(5)
@@ -133,9 +163,10 @@ test("keeps an expanded file diff header at the same viewport position", async (
   const scrollTop = await scroller.evaluate((element) => element.scrollTop)
   await scroller.hover()
   await page.mouse.wheel(0, 200)
-  await timeline.settle(40)
+  await expect
+    .poll(() => scroller.evaluate((element, initial) => element.scrollTop - initial, scrollTop))
+    .toBeGreaterThan(50)
   const scrolled = await scroller.evaluate((element, initial) => element.scrollTop - initial, scrollTop)
-  expect(scrolled).toBeGreaterThan(50)
   expect(scrolled).toBeLessThan(400)
 
   const expandedY = await trigger.evaluate((element) => element.getBoundingClientRect().y)
@@ -150,6 +181,16 @@ test("keeps an expanded file diff header at the same viewport position", async (
 
   await trigger.click()
   await expect(wrapper.locator('[data-component="apply-patch-file-diff"]')).toBeVisible()
+  await expect
+    .poll(() =>
+      row.evaluate((element) => {
+        const measured = element.querySelector<HTMLElement>("[data-index]")
+        return measured
+          ? Math.abs(element.getBoundingClientRect().height - measured.getBoundingClientRect().height)
+          : Number.POSITIVE_INFINITY
+      }),
+    )
+    .toBeLessThanOrEqual(1)
   await expect
     .poll(() => scroller.evaluate((element) => element.scrollHeight - element.clientHeight - element.scrollTop))
     .toBeLessThanOrEqual(1)