@public-ui/visual-tests 2.1.7-rc.1 → 2.1.7-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@public-ui/visual-tests",
-  "version": "2.1.7-rc.1",
+  "version": "2.1.7-rc.2",
   "license": "EUPL-1.2",
   "homepage": "https://public-ui.github.io",
   "repository": {
@@ -26,7 +26,7 @@
     "axe-playwright": "2.0.1",
     "portfinder": "1.0.32",
     "serve": "14.2.3",
-    "@public-ui/sample-react": "2.1.7-rc.1"
+    "@public-ui/sample-react": "2.1.7-rc.2"
   },
   "devDependencies": {
     "@babel/eslint-parser": "7.25.1",
@@ -45,6 +45,7 @@
   "scripts": {
     "format": "prettier --check src",
     "lint": "eslint src",
-    "unused": "knip"
+    "unused": "knip",
+    "postinstall": "pnpm exec playwright install"
   }
 }

package/playwright.config.js

@@ -3,7 +3,7 @@ import * as path from 'path';
 import * as process from 'process';
 
 const PORT = Number(process.env.KOLIBRI_VISUAL_TEST_PORT);
-const URL = `http://127.0.0.1:${PORT}`;
+const URL = `http://localhost:${PORT}`;
 
 console.log('Serving React Sample app:', URL);
 
@@ -52,7 +52,8 @@ export default defineConfig({
 
 	/* Run your local dev server before starting the tests */
 	webServer: {
-		command: `serve ${process.env.KOLIBRI_VISUAL_TESTS_BUILD_PATH} -p ${PORT}`,
+		command: `npx serve -p ${PORT}`,
+		cwd: path.resolve(process.env.KOLIBRI_VISUAL_TESTS_BUILD_PATH),
 		url: URL,
 		reuseExistingServer: false,
 	},

package/src/index.js

@@ -1,12 +1,11 @@
 import child_process from 'node:child_process';
 import path from 'node:path';
-import { fileURLToPath } from 'url';
+import { fileURLToPath, pathToFileURL } from 'url';
 import * as crypto from 'crypto';
 import * as fs from 'fs';
 import portfinder from 'portfinder';
 import * as process from 'process';
 
-process.env.KOLIBRI_CWD = process.cwd();
 const tempDir = process.env.RUNNER_TEMP || process.env.TMPDIR; // TODO: Check on Windows
 
 if (!process.env.THEME_MODULE) {
@@ -34,26 +33,34 @@ if (!fs.existsSync(workingDir)) {
 }
 
 const buildPath = path.join(tempDir, `kolibri-visual-testing-build-${crypto.randomUUID()}`);
-const packageJsonPath = await import(new URL(`${workingDir}/package.json`, import.meta.url), {
+const rawPackageJsonPath = new URL(path.join(workingDir, 'package.json'), import.meta.url).href;
+const packageJsonPath = process.platform === 'win32' ? pathToFileURL(rawPackageJsonPath) : rawPackageJsonPath;
+const packageJson = await import(packageJsonPath, {
 	assert: { type: 'json' },
 });
 
-process.env.KOLIBRI_VISUAL_TESTS_BUILD_PATH = buildPath;
-
 console.log(`
-Building React Sample App (v${packageJsonPath?.default?.version ?? '#.#.#'}) …`);
-child_process.execFileSync('npm', ['run', 'build', '--', `--output-path=${buildPath}`], {
+Building React Sample App (v${packageJson?.default?.version ?? '#.#.#'}) …`);
+
+child_process.spawnSync('pnpm', ['run', 'build', '--', `--output-path="${buildPath}"`], {
 	cwd: workingDir,
 	encoding: 'utf-8',
+	shell: true,
 });
 
 console.log(`React Sample App build finished. Directory:`, buildPath);
 
 void (async () => {
-	process.env.KOLIBRI_VISUAL_TEST_PORT = String(await portfinder.getPortPromise());
-
-	const playwright = child_process.spawn(path.join(binaryPath, 'playwright'), ['test', ...process.argv.slice(2)], {
+	const playwright = child_process.spawn(`"${path.join(binaryPath, 'playwright')}"`, ['test', ...process.argv.slice(2)], {
 		cwd: visualsTestModulePath,
+		shell: true,
+		env: {
+			...process.env,
+			KOLIBRI_CWD: process.cwd(),
+			KOLIBRI_VISUAL_TESTS_BUILD_PATH: buildPath,
+			KOLIBRI_VISUAL_TEST_PORT: String(await portfinder.getPortPromise()),
+			NO_PROXY: 'localhost',
+		},
 	});
 
 	playwright.stdout.on('data', (data) => {

package/tests/sample-app.routes.js

@@ -287,6 +287,11 @@ ROUTES.set('spin/basic', {
 		skipFailures: false,
 	},
 });
+ROUTES.set('single-select/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
 ROUTES.set('spin/custom', {
 	axe: {
 		skipFailures: false,
@@ -332,6 +337,26 @@ ROUTES.set('table/complex-headers', {
 		skipFailures: false,
 	},
 });
+ROUTES.set('table/stateful-with-selection', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('table/stateful-with-single-selection', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('table/stateless-with-single-selection', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('table/stateless-with-selection', {
+	axe: {
+		skipFailures: false,
+	},
+});
 ROUTES.set('table/stateless', {
 	axe: {
 		skipFailures: false,
@@ -435,4 +460,5 @@ ROUTES.set('scenarios/focus-elements?component=link');
 ROUTES.set('scenarios/focus-elements?component=linkButton');
 ROUTES.set('scenarios/focus-elements?component=select');
 ROUTES.set('scenarios/focus-elements?component=selectMultiple');
+ROUTES.set('scenarios/focus-elements?component=singleSelect');
 ROUTES.set('scenarios/focus-elements?component=textarea');