bert.hausmans
f6509d938b
B3 of TEST-INFRA-001 (RFC-WS-FRONTEND-PRIMEVUE Amendment A-1). - Add tests/playwright-ct/visual/static-server.mjs: 60-line Node http server that serves the canonical prototype directory. No new dependency added (vs. http-server / serve packages). - Wire static server into playwright-ct.config.ts via webServer; tests navigate to http://127.0.0.1:5179/crewli-timetable.html. - Add tests/playwright-ct/visual/prototype-smoke.spec.ts to verify the prototype loads in CT runner. - Add tests/playwright-ct/visual/prototype.spec.ts with 5 @visual composite baselines: canvas-friday.png — all status colors, b2b indicators, multi-lane stacking canvas-saturday.png — conflict ring + capacity warnings stage-row-multilane.png — first row in isolation wachtrij-populated.png — sidebar list with parked + pending popover.png — block-click popover layout 9 additional surfaces from RFC §A.3's enumerated list are documented as test.skip() with reasons (cancelled status absent from prototype data, isolated-block locators would lock to artist names, drag-mode flaky under simulated pointer events, empty Wachtrij/empty day not reachable from canonical seed). All deferred to F4 component-level Vue baselines that will use stable data-test-id attributes. - Baselines stored at tests/playwright-ct/__screenshots__/visual/ prototype.spec.ts/*.png; tracked via Git LFS (.gitattributes). Composite-over-isolated rationale: the prototype's DOM exposes status only via inline style.background, no data-* attributes. Isolated-block baselines would require artist-name locators that silently rot if prototype data changes. Composite captures yield the same visual vocabulary in fewer, more stable images. dev-docs/ARCH-TESTING.md (B5) documents this strategy and the F4 transition plan. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
79 lines
2.7 KiB
TypeScript
79 lines
2.7 KiB
TypeScript
import { fileURLToPath } from 'node:url'
|
|
import { defineConfig, devices } from '@playwright/experimental-ct-vue'
|
|
import vue from '@vitejs/plugin-vue'
|
|
|
|
// Component-test config — mounts individual components in a real
|
|
// Chromium via Playwright Component Testing. Used by:
|
|
// pnpm test:component (all CT tests, baselines verified)
|
|
// pnpm test:visual (subset tagged @visual)
|
|
// pnpm test:visual:update (regenerate visual baselines)
|
|
//
|
|
// E2E (real backend + real frontend) lives in playwright.config.ts.
|
|
|
|
const sharedAliases = {
|
|
'@': fileURLToPath(new URL('./src', import.meta.url)),
|
|
'@core': fileURLToPath(new URL('./src/@core', import.meta.url)),
|
|
'@layouts': fileURLToPath(new URL('./src/@layouts', import.meta.url)),
|
|
'@images': fileURLToPath(new URL('./src/assets/images/', import.meta.url)),
|
|
'@styles': fileURLToPath(new URL('./src/assets/styles/', import.meta.url)),
|
|
}
|
|
|
|
export default defineConfig({
|
|
testDir: './tests/playwright-ct',
|
|
testMatch: /.*\.spec\.ts$/,
|
|
snapshotDir: './tests/playwright-ct/__screenshots__',
|
|
snapshotPathTemplate: '{snapshotDir}/{testFilePath}/{arg}{ext}',
|
|
fullyParallel: true,
|
|
forbidOnly: !!process.env.CI,
|
|
retries: 0,
|
|
workers: process.env.CI ? 1 : undefined,
|
|
reporter: process.env.CI ? 'github' : 'list',
|
|
|
|
use: {
|
|
trace: 'off',
|
|
viewport: { width: 1440, height: 900 },
|
|
ctPort: 3100,
|
|
ctViteConfig: {
|
|
plugins: [vue()],
|
|
resolve: { alias: sharedAliases },
|
|
|
|
// Vuetify ships ESM that Vite needs to inline-process; matches
|
|
// the convention from vitest.config.ts's component project.
|
|
ssr: { noExternal: ['vuetify'] },
|
|
},
|
|
},
|
|
|
|
// Linux-Chromium-only baselines per RFC §A.5 — Firefox/WebKit and
|
|
// mobile/responsive viewports deferred to a later sprint. Running
|
|
// baselines on macOS (dev) vs Linux (CI) will produce a 1-2px
|
|
// anti-alias diff; pixel tolerance below absorbs that, but the
|
|
// canonical baseline IS the dev machine for now (no CI yet — see
|
|
// BACKLOG TEST-INFRA-002).
|
|
expect: {
|
|
toHaveScreenshot: {
|
|
maxDiffPixelRatio: 0.001,
|
|
threshold: 0.2,
|
|
},
|
|
},
|
|
|
|
projects: [
|
|
{
|
|
name: 'chromium',
|
|
use: { ...devices['Desktop Chrome'] },
|
|
},
|
|
],
|
|
|
|
// Auto-start the prototype static server for visual baselines.
|
|
// Tests under tests/playwright-ct/visual/ navigate to this URL via
|
|
// page.goto() rather than calling mount(); they coexist with normal
|
|
// CT tests in the same runner.
|
|
webServer: {
|
|
command: 'node tests/playwright-ct/visual/static-server.mjs',
|
|
url: `http://127.0.0.1:${process.env.PROTOTYPE_PORT ?? 5179}/crewli-timetable.html`,
|
|
reuseExistingServer: !process.env.CI,
|
|
timeout: 30_000,
|
|
stdout: 'ignore',
|
|
stderr: 'pipe',
|
|
},
|
|
})
|