hanzo.ai/e2e/gates/fold.spec.ts

import { expect, test, type Page } from '@playwright/test'
import { serveExport } from './export'

/**
 * THE FIRST SCREEN IS THE WHOLE WINDOW.
 *
 * Under the bar and the beta strip the hero fills the viewport, its content in the
 * middle, so the row of backers is the first thing a scroll shows, on a desktop and
 * on a phone. Nothing is hidden: it starts at the fold.
 */

let base: string
let stop: () => Promise<void>
test.beforeAll(async () => {
  const served = await serveExport()
  base = served.url
  stop = served.close
})
test.afterAll(async () => stop())

const open = async (page: Page, size: { width: number; height: number }) => {
  await page.setViewportSize(size)
  await page.route('**/*', (route) => (new URL(route.request().url()).origin === base ? route.continue() : route.abort()))
  await page.goto(`${base}/`)
  await page.locator('html[data-hydrated]').waitFor({ state: 'attached', timeout: 30_000 })
  await expect(page.locator('[data-slot="hero"]')).toBeVisible()
}

for (const [name, size] of [['desktop', { width: 1440, height: 900 }], ['phone', { width: 390, height: 844 }]] as const) {
  test(`${name}: the hero fills the window and the backers begin at the fold`, async ({ page }) => {
    await open(page, size)
    const hero = await page.locator('[data-slot="hero"]').boundingBox()
    const backed = await page.getByRole('region', { name: 'Backed by' }).boundingBox()
    expect(hero, 'the hero is laid out').not.toBeNull()
    expect(backed, 'the backers are laid out').not.toBeNull()
    // The hero reaches the fold (the window's height), within a pixel or two of rounding.
    expect((hero?.y ?? 0) + (hero?.height ?? 0)).toBeGreaterThanOrEqual(size.height - 2)
    // And the backers are not on the first screen: they start at or below it.
    expect(backed?.y ?? 0).toBeGreaterThanOrEqual(size.height - 2)
    // Nothing runs sideways.
    expect(await page.evaluate(() => document.documentElement.scrollWidth <= window.innerWidth)).toBe(true)
  })
}