bert.hausmans
82af11754a
B2 of TEST-INFRA-001 (RFC-WS-FRONTEND-PRIMEVUE Amendment A-1). - Add tests/playwright-ct/utils/mountWithProviders.ts: ergonomic wrapper around Playwright CT's mount() exposing buildMountArgs() and readNotificationState(). Documents the Vue Test Utils ↔ Playwright CT API divergence (provider plugins must be wired in beforeMount, not at call time) and the Vuetify-temp lifecycle (replaced by PrimeVue in F3). - Add tests/playwright-ct/components/SanityButtonHarness.vue: a v-btn harness with a click counter; lives in a .vue file so Vite bundles its CSS-side-effect imports for the browser context (Playwright CT runs the test orchestrator in Node and components in a Vite-bundled browser, unlike Vitest's single jsdom graph). - Add tests/playwright-ct/components/sanity-vuetify.spec.ts: two tests proving (a) v-btn renders and propagates clicks, (b) the --v-theme-primary CSS variable resolves to a parseable RGB triplet. - Update playwright/index.ts: import 'vuetify/styles' so the v-btn renders with its actual visual appearance (not unstyled). Required for B3's visual baselines. 3 component tests pass. 402 Vitest tests still pass unchanged. Lint + typecheck clean on new files. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
51 lines
1.9 KiB
TypeScript
51 lines
1.9 KiB
TypeScript
import { expect, test } from '@playwright/experimental-ct-vue'
|
|
import SanityButtonHarness from './SanityButtonHarness.vue'
|
|
|
|
// B2 sanity — proves the full provider stack from playwright/index.ts
|
|
// is wired:
|
|
// - Vuetify renders v-btn with theme tokens applied
|
|
// - Click events propagate via Vue's reactivity (counter ref updates)
|
|
// - Vuetify CSS variables resolve in computed style
|
|
//
|
|
// TEMPORARY VUETIFY: this test is replaced by a PrimeVue equivalent
|
|
// in F3. Do not extend or generalise — F3 rewrites it. See
|
|
// dev-docs/ARCH-TESTING.md §6.
|
|
//
|
|
// Why a .vue harness file: Playwright CT runs the test orchestrator
|
|
// in Node and the component in a Vite-bundled browser context. Vue
|
|
// components that pull in CSS-side-effect imports (Vuetify) cannot be
|
|
// loaded directly into the test's Node module graph; they must live
|
|
// in a .vue / Vite-compilable file. This is a structural divergence
|
|
// from Vitest, which uses jsdom and one module graph for both.
|
|
|
|
test.describe('B2 sanity: provider stack', () => {
|
|
test('mounts a Vuetify v-btn and propagates clicks', async ({ mount }) => {
|
|
const component = await mount(SanityButtonHarness)
|
|
const btn = component.locator('[data-test="btn"]')
|
|
|
|
await expect(btn).toBeVisible()
|
|
await expect(btn).toContainText('Clicks: 0')
|
|
|
|
await btn.click()
|
|
await expect(btn).toContainText('Clicks: 1')
|
|
|
|
await btn.click()
|
|
await expect(btn).toContainText('Clicks: 2')
|
|
})
|
|
|
|
test('Vuetify primary theme color resolves on rendered button', async ({ mount, page }) => {
|
|
await mount(SanityButtonHarness)
|
|
|
|
// Vuetify exposes theme primary as "R, G, B" decimals on
|
|
// --v-theme-primary (e.g. "31, 122, 209" for #1f7ad1).
|
|
const themePrimary = await page.evaluate(() => {
|
|
const root = document.documentElement
|
|
|
|
return getComputedStyle(root).getPropertyValue('--v-theme-primary').trim()
|
|
})
|
|
|
|
expect(themePrimary).not.toBe('')
|
|
expect(themePrimary.split(',')).toHaveLength(3)
|
|
})
|
|
})
|