hanzo.ai/e2e/sidebar-width.spec.ts

import { expect, test, type Page } from '@playwright/test'
import { signIn } from './session'
import { sidebar } from './app'


/** The width of the sheet the reader can actually see, or 0 for none. */
const SHEET = `
  (() => {
    const edges = [...document.querySelectorAll('[role="separator"][aria-label="Resize sidebar"]')]
    for (const e of edges) {
      const box = e.parentElement?.getBoundingClientRect()
      if (box && box.width > 0) return Math.round(box.width)
    }
    return 0
  })()
`

/** The visible sheet's width, as a number. */
const width = (page: Page): Promise<number> => page.evaluate(SHEET) as Promise<number>

test.describe('sidebar width', () => {
  test.beforeEach(async ({ page }) => {
    await signIn(page)
  })

  test('the mark opens it, the edge sizes it, and the width is remembered', async ({ page }) => {
    await page.setViewportSize({ width: 1440, height: 900 })
    await page.goto('/work')
    await page.waitForLoadState('networkidle')

    // Whatever width it is open at is this run's baseline: addInitScript runs
    // before EVERY load, so clearing the stored width here would clear it
    // during the reload this test exists to check.
    //
    // It used to require 0 here — "away until asked for" — and the shell now
    // ships the sidebar OPEN on a laptop, so that line asserted a viewport
    // rather than a behaviour, and failed before reaching either of the two
    // things worth holding: the edge sizes it, and the size survives a load.
    await sidebar(page)
    await expect.poll(() => width(page), { timeout: 15_000 }).toBeGreaterThan(200)
    const before = await width(page)

    // The button the edge replaces is gone.
    await expect(page.getByRole('button', { name: 'Collapse sidebar' })).toHaveCount(0)

    // Wider, by the keys a separator answers — the same state a drag writes.
    await page.evaluate(() => {
      const e = [...document.querySelectorAll('[role="separator"][aria-label="Resize sidebar"]')]
        .find((x) => (x.parentElement?.getBoundingClientRect().width ?? 0) > 0) as HTMLElement
      e.focus()
    })
    for (let i = 0; i < 4; i++) await page.keyboard.press('ArrowRight')
    await expect.poll(() => width(page), { timeout: 10_000 }).toBeGreaterThan(before)
    const widened = await width(page)

    // It is remembered across a load.
    await page.reload()
    await page.waitForLoadState('networkidle')
    await sidebar(page)
    await expect.poll(() => width(page), { timeout: 15_000 }).toBe(widened)
  })
})