John Dvorak
46 lines
1.5 KiB
JavaScript
46 lines
1.5 KiB
JavaScript
// 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)
|
|
})
|