feat: build Learning Planner evidence project

2026-08-14 10:42:39 +01:00
commit 370aaa2e01
58 changed files with 4888 additions and 0 deletions
--- a/e2e/evidence.spec.ts
+++ b/e2e/evidence.spec.ts
@@ -0,0 +1,46 @@
+import { expect, test } from '@playwright/test'
+
+const output = 'docs/evidence/screenshots'
+const supported = new Set(['chrome', 'firefox', 'chromium-1920x1080', 'chromium-1680x1050', 'chromium-1920x1200'])
+
+test('capture evidence dashboard', async ({ page }, testInfo) => {
+  test.skip(!supported.has(testInfo.project.name), 'Only required evidence projects generate captures.')
+  await page.goto('/')
+  await page.evaluate(() => localStorage.clear())
+  await page.reload()
+
+  const metadata = await page.evaluate(() => ({
+    width: window.innerWidth,
+    height: window.innerHeight,
+    browser: navigator.userAgent.includes('Firefox') ? 'Firefox' : 'Google Chrome',
+  }))
+  await page.evaluate((label) => {
+    const badge = document.createElement('div')
+    badge.id = 'evidence-metadata'
+    badge.textContent = label
+    Object.assign(badge.style, { position: 'fixed', right: '16px', bottom: '14px', zIndex: '9999', background: '#171429e6', color: '#fff', padding: '8px 12px', borderRadius: '8px', font: '600 12px sans-serif', boxShadow: '0 4px 18px #0004' })
+    document.body.appendChild(badge)
+  }, `${metadata.browser} · ${metadata.width}×${metadata.height} · ${new Date().toISOString().slice(0, 10)}`)
+
+  const filename = testInfo.project.name === 'chrome' || testInfo.project.name === 'firefox'
+    ? `browser-${testInfo.project.name}-dashboard.png`
+    : `responsive-${metadata.width}x${metadata.height}-dashboard.png`
+  await page.screenshot({ path: `${output}/${filename}`, fullPage: true })
+  await expect(page.locator('.app-shell')).toBeVisible()
+
+  if (testInfo.project.name === 'chromium-1680x1050') {
+    await page.addStyleTag({ content: '@media (min-width:1400px) and (max-width:1799px){.stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}' })
+    await page.screenshot({ path: `${output}/responsive-defect-before-1680x1050.png`, fullPage: true })
+    await page.reload()
+    await page.evaluate(() => {
+      const badge = document.createElement('div')
+      badge.textContent = 'Chromium · 1680×1050 · corrected 2×2 summary grid'
+      Object.assign(badge.style, { position: 'fixed', right: '16px', bottom: '14px', zIndex: '9999', background: '#08735ee6', color: '#fff', padding: '8px 12px', borderRadius: '8px', font: '600 12px sans-serif' })
+      document.body.appendChild(badge)
+    })
+    await page.screenshot({ path: `${output}/responsive-fix-after-1680x1050.png`, fullPage: true })
+    await page.getByLabel('Primary navigation').getByRole('button', { name: 'Learning goals' }).click()
+    await page.getByRole('button', { name: 'New goal' }).click()
+    await page.screenshot({ path: `${output}/responsive-1680x1050-goal-dialog.png`, fullPage: true })
+  }
+})