v1.1.0: pooled runtime, 959 tests, production hardening (0 squash)
This commit is contained in:
John Dvorak
@@ -0,0 +1,414 @@
|
||||
import { test, expect } from '@playwright/test'
|
||||
import { imhotep } from 'imhotep-playwright'
|
||||
import type { Page } from 'playwright'
|
||||
import {
|
||||
touchTarget,
|
||||
toolbarAlignment,
|
||||
cardSpacing,
|
||||
formLabelAlignment,
|
||||
modalContainment,
|
||||
} from 'imhotep-playwright'
|
||||
|
||||
// Create a simple test page inline so we don't depend on fixture files.
|
||||
async function loadTestPage(page: Page) {
|
||||
await page.setContent(`
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
body { margin: 0; padding: 20px; font-family: sans-serif; }
|
||||
.container { width: 400px; height: 400px; position: relative; background: #f0f0f0; }
|
||||
.box { width: 50px; height: 50px; background: blue; position: absolute; }
|
||||
.box1 { left: 10px; top: 10px; }
|
||||
.box2 { left: 100px; top: 10px; }
|
||||
.box3 { left: 10px; top: 100px; }
|
||||
.modal { width: 200px; height: 200px; background: red; position: absolute; left: 50px; top: 50px; }
|
||||
.button { width: 44px; height: 44px; background: green; }
|
||||
.small-button { width: 30px; height: 30px; background: orange; }
|
||||
.overlap1 { width: 100px; height: 100px; background: purple; position: absolute; left: 50px; top: 50px; }
|
||||
.overlap2 { width: 100px; height: 100px; background: cyan; position: absolute; left: 80px; top: 80px; }
|
||||
.wide-box { width: 150px; height: 50px; background: yellow; }
|
||||
.tall-box { width: 50px; height: 150px; background: pink; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container" data-testid="container">
|
||||
<div class="box box1" data-testid="box1"></div>
|
||||
<div class="box box2" data-testid="box2"></div>
|
||||
<div class="box box3" data-testid="box3"></div>
|
||||
<div class="modal" data-testid="modal"></div>
|
||||
<div class="overlap1" data-testid="overlap1"></div>
|
||||
<div class="overlap2" data-testid="overlap2"></div>
|
||||
</div>
|
||||
<div class="button" data-testid="button"></div>
|
||||
<div class="small-button" data-testid="small-button"></div>
|
||||
<div class="wide-box" data-testid="wide-box"></div>
|
||||
<div class="tall-box" data-testid="tall-box"></div>
|
||||
<div class="label" data-testid="label">Label</div>
|
||||
</body>
|
||||
</html>
|
||||
`)
|
||||
// Wait for layout to settle.
|
||||
await page.waitForTimeout(50)
|
||||
}
|
||||
|
||||
test.describe('Edge Feature Tests', () => {
|
||||
// ───────────────────────────────────────────────
|
||||
// Size Assertions
|
||||
// ───────────────────────────────────────────────
|
||||
test('atLeast(number, dimension) - width passes', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
ui.expect('[data-testid="wide-box"]').to.be.atLeast(100, 'width')
|
||||
|
||||
const result = await ui.checkAll()
|
||||
expect(result.passed).toBe(true)
|
||||
})
|
||||
|
||||
test('atLeast(number, dimension) - width fails', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
ui.expect('[data-testid="button"]').to.be.atLeast(100, 'width')
|
||||
|
||||
const result = await ui.checkAll()
|
||||
expect(result.passed).toBe(false)
|
||||
expect(result.diagnostics.some(d => d.code === 'IMH_SIZE_AT_LEAST_FAILED')).toBe(true)
|
||||
})
|
||||
|
||||
test('atMost(number, dimension) - height passes', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
ui.expect('[data-testid="button"]').to.be.atMost(200, 'height')
|
||||
|
||||
const result = await ui.checkAll()
|
||||
expect(result.passed).toBe(true)
|
||||
})
|
||||
|
||||
test('atMost(number, dimension) - height fails', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
ui.expect('[data-testid="tall-box"]').to.be.atMost(100, 'height')
|
||||
|
||||
const result = await ui.checkAll()
|
||||
expect(result.passed).toBe(false)
|
||||
expect(result.diagnostics.some(d => d.code === 'IMH_SIZE_AT_MOST_FAILED')).toBe(true)
|
||||
})
|
||||
|
||||
test('between(min, max, dimension) - width passes', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
ui.expect('[data-testid="wide-box"]').to.be.between(100, 200, 'width')
|
||||
|
||||
const result = await ui.checkAll()
|
||||
expect(result.passed).toBe(true)
|
||||
})
|
||||
|
||||
test('between(min, max, dimension) - width fails', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
ui.expect('[data-testid="button"]').to.be.between(100, 200, 'width')
|
||||
|
||||
const result = await ui.checkAll()
|
||||
expect(result.passed).toBe(false)
|
||||
expect(result.diagnostics.some(d => d.code === 'IMH_SIZE_BETWEEN_FAILED')).toBe(true)
|
||||
})
|
||||
|
||||
// ───────────────────────────────────────────────
|
||||
// Cardinality Assertions
|
||||
// ───────────────────────────────────────────────
|
||||
test('exactlyOne passes when 1 match', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
ui.expect('[data-testid="button"]').to.be.exactlyOne()
|
||||
|
||||
const result = await ui.checkAll()
|
||||
expect(result.passed).toBe(true)
|
||||
})
|
||||
|
||||
test('exactlyOne fails when 0 matches', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
ui.expect('.nonexistent').to.be.exactlyOne()
|
||||
|
||||
const result = await ui.checkAll()
|
||||
expect(result.passed).toBe(false)
|
||||
expect(result.diagnostics.some(d => (d.code as string) === 'IMH_CARDINALITY_EXACTLYONE_FAILED')).toBe(true)
|
||||
})
|
||||
|
||||
test('atLeastN passes', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
ui.expect('.box').to.be.atLeastN(2)
|
||||
|
||||
const result = await ui.checkAll()
|
||||
expect(result.passed).toBe(true)
|
||||
})
|
||||
|
||||
test('atLeastN fails', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
ui.expect('.box').to.be.atLeastN(10)
|
||||
|
||||
const result = await ui.checkAll()
|
||||
expect(result.passed).toBe(false)
|
||||
expect(result.diagnostics.some(d => (d.code as string) === 'IMH_CARDINALITY_ATLEASTN_FAILED')).toBe(true)
|
||||
})
|
||||
|
||||
test('atMostN passes', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
ui.expect('.box').to.be.atMostN(5)
|
||||
|
||||
const result = await ui.checkAll()
|
||||
expect(result.passed).toBe(true)
|
||||
})
|
||||
|
||||
test('atMostN fails', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
ui.expect('.box').to.be.atMostN(1)
|
||||
|
||||
const result = await ui.checkAll()
|
||||
expect(result.passed).toBe(false)
|
||||
expect(result.diagnostics.some(d => (d.code as string) === 'IMH_CARDINALITY_ATMOSTN_FAILED')).toBe(true)
|
||||
})
|
||||
|
||||
// ───────────────────────────────────────────────
|
||||
// Topology: clippedBy
|
||||
// ───────────────────────────────────────────────
|
||||
test('clippedBy - check if documented/exists', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
// clippedBy is mentioned in docs but may not be implemented.
|
||||
// Test whether it exists on the be proxy.
|
||||
const be = ui.expect('[data-testid="modal"]').to.be as any
|
||||
const hasClippedBy = typeof be.clippedBy === 'function'
|
||||
|
||||
if (hasClippedBy) {
|
||||
;(ui.expect('[data-testid="modal"]').to.be as any).clippedBy('[data-testid="container"]')
|
||||
const result = await ui.checkAll()
|
||||
expect(result.passed).toBe(true)
|
||||
} else {
|
||||
console.log('clippedBy is NOT implemented on be proxy')
|
||||
expect(hasClippedBy).toBe(false)
|
||||
}
|
||||
})
|
||||
|
||||
// ───────────────────────────────────────────────
|
||||
// checkAll options: format llm
|
||||
// ───────────────────────────────────────────────
|
||||
test('checkAll with format: llm returns string', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
ui.expect('[data-testid="box1"]').to.be.leftOf('[data-testid="box2"]')
|
||||
|
||||
const result = await ui.checkAll({ format: 'llm' })
|
||||
expect(typeof result).toBe('string')
|
||||
|
||||
const parsed = JSON.parse(result)
|
||||
expect(typeof parsed.passed).toBe('boolean')
|
||||
expect(Array.isArray(parsed.failingClauses)).toBe(true)
|
||||
})
|
||||
|
||||
test('checkAll with format: llm on failure', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
ui.expect('[data-testid="box2"]').to.be.leftOf('[data-testid="box1"]')
|
||||
|
||||
const result = await ui.checkAll({ format: 'llm' })
|
||||
expect(typeof result).toBe('string')
|
||||
|
||||
const parsed = JSON.parse(result)
|
||||
expect(parsed.passed).toBe(false)
|
||||
expect(parsed.failingClauses.length).toBeGreaterThan(0)
|
||||
})
|
||||
|
||||
// ───────────────────────────────────────────────
|
||||
// checkAll options: includeNormalized
|
||||
// ───────────────────────────────────────────────
|
||||
test('checkAll with includeNormalized: true', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
ui.expect('[data-testid="box1"]').to.be.leftOf('[data-testid="box2"]')
|
||||
|
||||
const result = await ui.checkAll({ includeNormalized: true })
|
||||
expect(result.passed).toBe(true)
|
||||
expect(Array.isArray(result.normalizedContracts)).toBe(true)
|
||||
expect(result.normalizedContracts!.length).toBeGreaterThan(0)
|
||||
})
|
||||
|
||||
// ───────────────────────────────────────────────
|
||||
// clearCache
|
||||
// ───────────────────────────────────────────────
|
||||
test('clearCache does not throw', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
// Should be callable without error.
|
||||
expect(() => ui.clearCache()).not.toThrow()
|
||||
})
|
||||
|
||||
// ───────────────────────────────────────────────
|
||||
// Presets
|
||||
// ───────────────────────────────────────────────
|
||||
test('touchTarget preset exists and works', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
const preset = touchTarget(ui, '[data-testid="button"]')
|
||||
expect(preset.assertions.length).toBe(2)
|
||||
expect(preset.clauses.length).toBe(2)
|
||||
|
||||
// Apply the assertions.
|
||||
for (const a of preset.assertions) {
|
||||
ui.expect(a.assertion.getSubject()).to.be.atLeast(44, a.assertion.getSubject() === '[data-testid="button"]' ? 'width' : 'height')
|
||||
}
|
||||
|
||||
const result = await ui.checkAll()
|
||||
expect(result.passed).toBe(true)
|
||||
})
|
||||
|
||||
test('toolbarAlignment preset exists', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
const preset = toolbarAlignment(ui, ['[data-testid="box1"]', '[data-testid="box2"]', '[data-testid="box3"]'])
|
||||
expect(preset.assertions.length).toBeGreaterThan(0)
|
||||
expect(preset.clauses.length).toBeGreaterThan(0)
|
||||
})
|
||||
|
||||
test('cardSpacing preset exists', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
const preset = cardSpacing(ui, '[data-testid="box1"]', '[data-testid="box2"]')
|
||||
expect(preset.assertions.length).toBe(2)
|
||||
expect(preset.clauses.length).toBe(2)
|
||||
})
|
||||
|
||||
test('formLabelAlignment preset exists', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
const preset = formLabelAlignment(ui, '[data-testid="label"]', '[data-testid="button"]')
|
||||
expect(preset.assertions.length).toBeGreaterThan(0)
|
||||
expect(preset.clauses.length).toBeGreaterThan(0)
|
||||
})
|
||||
|
||||
test('modalContainment preset exists', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
const preset = modalContainment(ui, '[data-testid="modal"]')
|
||||
expect(preset.assertions.length).toBe(2)
|
||||
expect(preset.clauses.length).toBe(2)
|
||||
})
|
||||
|
||||
// ───────────────────────────────────────────────
|
||||
// Failure Cases
|
||||
// ───────────────────────────────────────────────
|
||||
test('zero-match selector fails with actionable error', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
ui.expect('.nonexistent').to.be.leftOf('[data-testid="label"]')
|
||||
|
||||
const result = await ui.checkAll()
|
||||
expect(result.passed).toBe(false)
|
||||
expect(result.diagnostics.some(d => d.code === 'IMH_SELECTOR_ZERO_MATCHES')).toBe(true)
|
||||
|
||||
const diag = result.diagnostics.find(d => (d.code as string) === 'IMH_SELECTOR_ZERO_MATCHES')
|
||||
expect(diag).toBeDefined()
|
||||
expect(diag!.fixHints.length).toBeGreaterThan(0)
|
||||
expect(diag!.fixHints.some(h => h.includes('ui.extract'))).toBe(true)
|
||||
})
|
||||
|
||||
test('invalid relation option produces validation error', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
// Pass an unknown option; the system should reject it with a clear error.
|
||||
ui.expect('[data-testid="box1"]').to.be.leftOf('[data-testid="box2"]', { invalidOption: true } as any)
|
||||
|
||||
const result = await ui.checkAll()
|
||||
// Invalid options should cause the assertion to fail with a validation error.
|
||||
expect(result.passed).toBe(false)
|
||||
expect(result.diagnostics.some(d => d.severity === 'error')).toBe(true)
|
||||
})
|
||||
|
||||
test('overlapping elements are detected', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
ui.expect('[data-testid="overlap1"]').to.be.overlaps('[data-testid="overlap2"]')
|
||||
|
||||
const result = await ui.checkAll()
|
||||
expect(result.passed).toBe(true)
|
||||
})
|
||||
|
||||
test('overlapping elements - separatedFrom fails', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
ui.expect('[data-testid="overlap1"]').to.be.separatedFrom('[data-testid="overlap2"]')
|
||||
|
||||
const result = await ui.checkAll()
|
||||
// separatedFrom is not implemented per audit.
|
||||
expect(result.passed).toBe(false)
|
||||
})
|
||||
|
||||
// ───────────────────────────────────────────────
|
||||
// Hidden / Edge Behaviors
|
||||
// ───────────────────────────────────────────────
|
||||
test('checkAll clears assertion store after call', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
ui.expect('[data-testid="box1"]').to.be.leftOf('[data-testid="box2"]')
|
||||
|
||||
const result1 = await ui.checkAll()
|
||||
expect(result1.clauseResults.length).toBe(1)
|
||||
|
||||
// Second call with no new assertions should be empty.
|
||||
const result2 = await ui.checkAll()
|
||||
expect(result2.clauseResults.length).toBe(0)
|
||||
expect(result2.passed).toBe(true)
|
||||
})
|
||||
|
||||
test('validate returns empty array for valid assertions', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
ui.expect('[data-testid="box1"]').to.be.leftOf('[data-testid="box2"]')
|
||||
|
||||
const issues = ui.validate()
|
||||
expect(issues.length).toBe(0)
|
||||
})
|
||||
|
||||
test('validate catches invalid dense spec', async ({ page }) => {
|
||||
const ui = await imhotep(page)
|
||||
await loadTestPage(page)
|
||||
|
||||
ui.spec(`'box1' is leftOf 'box2'`)
|
||||
|
||||
const issues = ui.validate()
|
||||
expect(issues.length).toBeGreaterThan(0)
|
||||
expect(issues.some(i => i.message.includes('is'))).toBe(true)
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user