@public-ui/visual-tests 4.3.0-rc.1 → 4.3.0-rc.3

package/app/vite.config.ts

@@ -0,0 +1,57 @@
+import UnoCSS from '@unocss/vite';
+import react from '@vitejs/plugin-react-swc';
+import { execSync } from 'node:child_process';
+import path from 'path';
+import process from 'process';
+import { defineConfig } from 'vite';
+
+function getGitCommitHash(): string | null {
+	try {
+		return execSync('git rev-parse --short HEAD 2>/dev/null').toString().trim();
+	} catch {
+		return null;
+	}
+}
+
+export default defineConfig({
+	root: __dirname,
+	base: './',
+	/* UnoCSS resolves its config relative to the process cwd (the package root), not the Vite root,
+	   so the config file must be referenced explicitly – otherwise the project's custom rules are
+	   silently dropped and the rendered layout differs from the snapshots. */
+	plugins: [react(), UnoCSS({ configFile: path.resolve(__dirname, 'unocss.config.ts') })],
+	resolve: {
+		dedupe: ['react', 'react-dom'],
+		alias: {
+			/* Bundle the theme under test (THEME_MODULE) at build time. Falls back to an empty stub so
+			   the app can still be built/served without a theme (e.g. local debugging). */
+			'@kolibri-vt/theme': process.env.THEME_MODULE ? path.resolve(process.env.THEME_MODULE) : path.resolve(__dirname, 'src/empty-theme.ts'),
+		},
+	},
+	define: {
+		'process.env.THEME_MODULE': JSON.stringify(process.env.THEME_MODULE || ''),
+		'process.env.THEME_EXPORT': JSON.stringify(process.env.THEME_EXPORT || ''),
+		'process.env.THEME_CSS': JSON.stringify(process.env.THEME_CSS || ''),
+		'process.env.ENABLE_I18N_OVERWRITING': JSON.stringify(process.env.ENABLE_I18N_OVERWRITING || ''),
+		'process.env.ENABLE_TAG_NAME_TRANSFORMER': JSON.stringify(process.env.ENABLE_TAG_NAME_TRANSFORMER || ''),
+		'process.env.ENABLE_THEME_PATCHING': JSON.stringify(process.env.ENABLE_THEME_PATCHING || ''),
+		'process.env.BUILD_DATE': JSON.stringify(new Date().toISOString()),
+		'process.env.COMMIT_HASH': JSON.stringify(getGitCommitHash()),
+		'process.env.PLATFORM': JSON.stringify(process.platform),
+	},
+	build: {
+		emptyOutDir: true,
+		sourcemap: true,
+	},
+	server: {
+		allowedHosts: true,
+		port: parseInt(process.env.KOLIBRI_VISUAL_TEST_PORT || '9191', 10),
+		fs: {
+			allow: [
+				path.resolve(__dirname),
+				...(process.env.THEME_MODULE ? [path.resolve(process.env.THEME_MODULE)] : []),
+				...(process.env.THEME_CSS ? [path.resolve(process.env.THEME_CSS, '..')] : []),
+			],
+		},
+	},
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/visual-tests",
-  "version": "4.3.0-rc.1",
+  "version": "4.3.0-rc.3",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {
@@ -19,39 +19,59 @@
     "pnpm": "^10"
   },
   "type": "module",
-  "sideEffects": false,
   "description": "Provides utility to run visual regression tests for themes.",
   "bin": {
     "kolibri-visual-test": "src/index.js"
   },
   "dependencies": {
     "@axe-core/playwright": "4.11.3",
+    "@unocss/preset-mini": "66.7.0",
+    "@unocss/vite": "66.7.0",
+    "@vitejs/plugin-react-swc": "4.3.1",
+    "adopted-style-sheets": "1.1.9-rc.22",
     "axe-html-reporter": "2.2.11",
     "http-server": "14.1.1",
+    "npm-run-all2": "8.0.4",
     "portfinder": "1.0.38",
-    "@public-ui/sample-react": "4.3.0-rc.1"
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "react-router-dom": "7.17.0",
+    "vite": "8.0.16",
+    "@public-ui/components": "4.3.0-rc.3",
+    "@public-ui/sample-react": "4.3.0-rc.3",
+    "@public-ui/react-v19": "4.3.0-rc.3"
   },
   "devDependencies": {
-    "@eslint/js": "9.39.4",
     "@playwright/test": "1.60.0",
+    "@types/node": "25.9.2",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
     "eslint": "9.39.4",
-    "globals": "17.6.0",
-    "knip": "6.15.0",
-    "prettier": "3.8.3",
-    "prettier-plugin-organize-imports": "4.3.0"
+    "knip": "6.16.1",
+    "prettier": "3.8.4",
+    "prettier-plugin-organize-imports": "4.3.0",
+    "tslib": "2.8.1",
+    "typescript": "5.9.3",
+    "@public-ui/eslint-config": "4.3.0-rc.1"
   },
   "peerDependencies": {
     "@playwright/test": "1.60.0"
   },
   "files": [
+    "app",
     "playwright.config.js",
     "src",
     "tests"
   ],
   "scripts": {
-    "format": "prettier --check src",
+    "build": "vite build --config app/vite.config.ts",
+    "build:deps": "pnpm --filter @public-ui/visual-tests^... build",
+    "prebuild": "npm-run-all2 prebuild:*",
+    "prebuild:components": "kolibri-copy-assets --dest app/public/assets @public-ui/components @public-ui/sample-react",
+    "format": "prettier --check src app/src",
     "lint": "pnpm lint:eslint",
     "lint:eslint": "eslint src",
+    "serve": "vite --config app/vite.config.ts",
     "unused": "knip"
   }
 }

package/src/index.js

@@ -6,7 +6,7 @@ import os from 'node:os';
 import path from 'node:path';
 import portfinder from 'portfinder';
 import * as process from 'process';
-import { fileURLToPath, pathToFileURL } from 'url';
+import { fileURLToPath } from 'url';
 
 const tempDir = process.env.RUNNER_TEMP || process.env.TMPDIR || os.tmpdir(); // TODO: Check on Windows
 
@@ -17,24 +17,26 @@ if (!tempDir) {
 	throw new Error('Neither environment variable RUNNER_TEMP or TMPDIR specified.');
 }
 
+/* The current working directory is the theme folder. We keep a reference to its assets (icon fonts,
+   variant data, …) so we can overlay them onto the built app below. */
+const themeAssetsPath = path.join(process.cwd(), 'assets');
+
 process.env.THEME_MODULE = path.join(process.cwd(), process.env.THEME_MODULE); // Use current working directory (i.e. the theme folder) to complete module path
+
 const visualsTestModulePath = fileURLToPath(new URL('..', import.meta.url));
 const binaryPath = fileURLToPath(new URL('../node_modules/.bin', import.meta.url));
-const sampleReactPackageJsonPath = import.meta.resolve('@public-ui/sample-react/package.json');
-const workingDir = fileURLToPath(path.dirname(sampleReactPackageJsonPath));
 
-if (!fs.existsSync(workingDir)) {
-	throw new Error('Could not find React Sample App package. Please install it with "npm install @public-ui/sample-react".');
-}
+/* The visual-tests package now ships its own runnable Vite app (./app) that embeds <App> from
+   @public-ui/sample-react and injects the theme via THEME_MODULE. We build this local app instead of
+   the sample app itself – that is what breaks the former circular dependency. */
+const workingDir = visualsTestModulePath;
+const packageJsonContent = await readFile(path.join(workingDir, 'package.json'), 'utf8');
+const packageJson = JSON.parse(packageJsonContent);
 
 const buildPath = path.join(tempDir, `kolibri-visual-testing-build-${crypto.randomUUID()}`);
-const rawPackageJsonPath = new URL(path.join(workingDir, 'package.json'), import.meta.url).href;
-const packageJsonPath = process.platform === 'win32' ? pathToFileURL(rawPackageJsonPath) : rawPackageJsonPath;
-const packageJsonContent = await readFile(new URL(packageJsonPath, import.meta.url), 'utf8');
-const packageJson = JSON.parse(packageJsonContent);
 
 console.log(`
-Building React Sample App (v${packageJson?.version ?? '#.#.#'}) …`);
+Building Visual-Tests App (v${packageJson?.version ?? '#.#.#'}) …`);
 
 const buildResult = child_process.spawnSync('pnpm', ['run', 'build', `--outDir="${buildPath}"`], {
 	cwd: workingDir,
@@ -43,13 +45,37 @@ const buildResult = child_process.spawnSync('pnpm', ['run', 'build', `--outDir="
 });
 
 if (buildResult.status !== 0) {
-	console.log('Build status:', buildResult.status);
-	console.log('Build stdout:', buildResult.stdout);
-	console.log('Build stderr:', buildResult.stderr);
-	console.log('Build error:', buildResult.error);
+	console.error('React Sample App build FAILED — aborting visual tests.');
+	console.error('Build status:', buildResult.status);
+	console.error('Build stdout:', buildResult.stdout);
+	console.error('Build stderr:', buildResult.stderr);
+	console.error('Build error:', buildResult.error);
+	console.error(
+		'The build output directory was not created, so Playwright cannot serve it. ' +
+			'Fix the build error above and re-run. (Previously surfaced as a misleading "spawn /bin/sh ENOENT".)',
+	);
+	process.exit(buildResult.status || 1); // status is null on signal termination → fall back to 1
+}
+
+/* Overlay the theme's own assets (icon fonts, inject-variants_*.json, …) onto the built app so the
+   snapshots render exactly the theme under test. The app itself has no dependency on any theme
+   package – the theme provides its assets from its own folder at test time. */
+if (fs.existsSync(themeAssetsPath)) {
+	fs.cpSync(themeAssetsPath, path.join(buildPath, 'assets'), { recursive: true });
+	console.log(`Theme assets copied from ${themeAssetsPath}.`);
+} else {
+	console.log(`No theme assets found at ${themeAssetsPath}; continuing without overlay.`);
+}
+
+/* The app loads the theme's inject-assets.css (font-face/icon declarations) via a relative <link>,
+   so copy it into the served build root. Its own @import url('./assets/…') statements then resolve
+   against the overlaid assets above. */
+if (process.env.THEME_CSS && fs.existsSync(process.env.THEME_CSS)) {
+	fs.copyFileSync(process.env.THEME_CSS, path.join(buildPath, 'inject-assets.css'));
+	console.log(`Theme CSS copied from ${process.env.THEME_CSS}.`);
 }
 
-console.log(`React Sample App build finished. Directory:`, buildPath);
+console.log(`Visual-Tests App build finished. Directory:`, buildPath);
 
 void (async () => {
 	const playwright = child_process.spawn(`"${path.join(binaryPath, 'playwright')}"`, ['test', ...process.argv.slice(2)], {