test: Add a test harness for the built card (#2653)

Mounts the card from `dist/` the way Home Assistant does, by URL with a
HACS tag, and asserts the entry stays a facade, that no chunk imports
it, that the browser is served the file unmodified, and that the card
starts up and fetches a language chunk lazily.

Runs in Chromium, Firefox and WebKit, so a change of bundler or minifier
is checked against every engine.
This commit is contained in:
Dermot Duffy
2026-08-03 21:50:21 -07:00
committed by GitHub
parent 18ea725564
commit 2d124fe3cd
18 changed files with 483 additions and 50 deletions
+14 -26
View File
@@ -1,36 +1,19 @@
import { playwright } from '@vitest/browser-playwright';
import { defineConfig } from 'vitest/config';
import { getBrowsers, type Browser } from './scripts/browsers.js';
import { releaseVersion } from './scripts/release-version-plugin.js';
import { scssString } from './scripts/scss-string-plugin.js';
import { svgPath } from './scripts/svg-path-plugin.js';
const BROWSERS = ['chromium', 'firefox', 'webkit'] as const;
type Browser = (typeof BROWSERS)[number];
const isBrowser = (name: string): name is Browser =>
BROWSERS.some((browser) => browser === name);
const requestedBrowser = process.env.VITEST_BROWSER;
if (requestedBrowser !== undefined && !isBrowser(requestedBrowser)) {
throw new Error(`Unknown browser: ${requestedBrowser}`);
}
// Which browsers to run, all of them unless one is named. CI names one per job
// so that the three run at the same time on separate machines rather than one
// after another on one.
const browsers = requestedBrowser ? [requestedBrowser] : BROWSERS;
// Browser tests mount the real card in Chromium. They live in their own config
// rather than as a fourth project in `vitest.config.ts` because `vitest run`
// executes every configured project: without splitting browser tests would
// become a way to satisfy the 100% per-file thresholds vs unittests.
// Browser tests mount the real card in a browser. Their own config rather than
// a fourth project in `vitest.config.ts`, because `vitest run` executes every
// project: they would become a way to satisfy the 100% per-file thresholds.
export default defineConfig({
// Tests import `src/` directly rather than a built bundle, so a test and the
// card share one process and one set of objects. Vite then has to supply the
// same asset shapes the Rollup build's plugins do: an SVG becomes the `{
// path, viewBox }` a custom iconset serves, SCSS becomes the string
// `unsafeCSS` takes. `svgPath` is the build's own plugin, reused unchanged.
// Tests import `src/` directly rather than a built bundle, so Vite has to
// supply the same asset shapes the build's plugins do: an SVG becomes the
// `{ path, viewBox }` a custom iconset serves, SCSS the string `unsafeCSS`
// takes. `svgPath` is the build's own plugin, reused unchanged.
plugins: [releaseVersion(), scssString(), svgPath()],
// Where the Mock Service Worker script is served from, which Vite serves at
@@ -86,6 +69,11 @@ export default defineConfig({
name: 'browser',
include: ['tests/**/*.browser.test.ts'],
// The tests under `tests/dist` need a card build to exist (in dist/), which
// this suite does not require. They have their own config, see
// vitest.dist.config.ts .
exclude: ['tests/dist/**'],
// Cosmetic: Style the pages as HA does for screenshots.
setupFiles: ['./tests/browser/style.ts'],
@@ -118,7 +106,7 @@ export default defineConfig({
// screenshot taken when one fails.
viewport: { width: 1280, height: 800 },
instances: browsers.map((browser: Browser) => ({ browser })),
instances: getBrowsers().map((browser: Browser) => ({ browser })),
screenshotDirectory: '.vitest/screenshots',
},