Function testScrollHeightStability

playwright/virtual_list.spec.ts:4–75

(
  page: import("@playwright/test").Page,
  tolerancePx: number
)

// Helper to run scrollHeight stability test with configurable tolerance
async function testScrollHeightStability(
  page: import("@playwright/test").Page,
  tolerancePx: number
) {
  await page.goto("http://127.0.0.1:8080/component/?name=virtual_list&", {
    timeout: 20 * 60 * 1000,
  });

  const container = page.getByRole("list").first();
  await expect(container).toBeVisible({ timeout: 30000 });

  // Wait for initial render
  await page.waitForTimeout(500);

  // Get initial state
  const initialState = await container.evaluate((el) => ({
    scrollHeight: el.scrollHeight,
    clientHeight: el.clientHeight,
  }));

  const maxScroll = initialState.scrollHeight - initialState.clientHeight;
  const steps = 20;
  const stepSize = maxScroll / steps;

  const measurements: Array<{ scrollTop: number; scrollHeight: number }> = [];

  // Simulate continuous scrolling (like dragging the scrollbar)
  // by setting scrollTop in rapid succession
  for (let i = 1; i <= steps; i++) {
    const targetScroll = Math.round(stepSize * i);

    await container.evaluate((el, scroll) => {
      el.scrollTop = scroll;
    }, targetScroll);

    // Wait for scroll event to propagate through Rust and re-render
    await page.waitForTimeout(100);

    const state = await container.evaluate((el) => ({
      scrollTop: el.scrollTop,
      scrollHeight: el.scrollHeight,
    }));

    measurements.push(state);
  }

  // Analyze scrollHeight stability during the "drag"
  // Exclude last measurement since scrollend fires ~150ms after last scroll,
  // which correctly unfreezes the height - we only care about stability DURING scroll
  const duringScrollMeasurements = measurements.slice(0, -1);
  const scrollHeights = duringScrollMeasurements.map((m) => m.scrollHeight);
  const minHeight = Math.min(...scrollHeights);
  const maxHeight = Math.max(...scrollHeights);
  const heightVariance = maxHeight - minHeight;

  console.log(`scrollHeight range: ${minHeight} - ${maxHeight} (variance: ${heightVariance}px)`);
  console.log(`Measurements:`, measurements.map((m, i) =>
    `step ${i + 1}: scrollTop=${m.scrollTop}, scrollHeight=${m.scrollHeight}`