// examples/state-test.js
// State materialization test: verify geometry changes between default, hover,
// and focus-visible states.
//
// Imhotep can materialize CSS pseudo-states without manual interaction
// choreography. This is useful for testing focus rings, hover expansions,
// and active press states.

const { test, expect } = require('@playwright/test')
const { imhotep } = require('imhotep-playwright')

test('button state geometry', async ({ page }) => {
  await page.goto('https://example.com')
  const ui = await imhotep(page)

  // Default state
  await ui.materializeState('.button', 'default')
  const defaultData = await ui.extract('.button')
  const defaultRect = defaultData[0].rect

  // Hover state
  await ui.materializeState('.button', 'hover')
  const hoverData = await ui.extract('.button')
  const hoverRect = hoverData[0].rect

  // Focus-visible state
  await ui.materializeState('.button', 'focus-visible')
  const focusData = await ui.extract('.button')
  const focusRect = focusData[0].rect

  // Hover should not shrink the button
  expect(hoverRect.width).toBeGreaterThanOrEqual(defaultRect.width)

  // Focus-visible should show an outline (geometry may expand)
  expect(focusRect.width).toBeGreaterThanOrEqual(defaultRect.width)

  // Active state (pressed)
  await ui.materializeState('.button', 'active')
  const activeData = await ui.extract('.button')
  const activeRect = activeData[0].rect

  // Active should not collapse to zero
  expect(activeRect.width).toBeGreaterThan(0)
  expect(activeRect.height).toBeGreaterThan(0)
})