// examples/failing-test.js
// Example of a failing layout assertion and the diagnostic information
// you can extract from the failure.
//
// In V1.0, failures are surfaced through standard Playwright assertions.
// The extracted geometry gives you raw measured values for debugging.

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

test('failing gap assertion shows diagnostics', async ({ page }) => {
  await page.goto('https://example.com')
  const ui = await imhotep(page)

  const leftData = await ui.extract('.left-box')
  const rightData = await ui.extract('.right-box')

  expect(leftData.length).toBeGreaterThanOrEqual(1)
  expect(rightData.length).toBeGreaterThanOrEqual(1)

  const left = leftData[0].rect
  const right = rightData[0].rect

  // Calculate the actual gap between the two boxes
  const actualGap = right.x - (left.x + left.width)

  console.log('Diagnostic output:')
  console.log(`  Left box:   x=${left.x}, width=${left.width}`)
  console.log(`  Right box:  x=${right.x}, width=${right.width}`)
  console.log(`  Actual gap: ${actualGap}px`)
  console.log(`  Required:   at least 16px`)

  // This assertion will fail if the gap is too small.
  // The console output above gives you the exact measured values.
  expect(actualGap).toBeGreaterThanOrEqual(16)
})