@public-ui/visual-tests 1.7.0-rc.10 → 1.7.0-rc.12

package/README.md

@@ -36,6 +36,12 @@ In the following runs, new screenshots will be compared to this reference.
 
 To update the reference screenshots call `npm run test-update`.
 
+It's recommended to add the `test-results` folder to the `.gitignore` file:
+
+```bash
+/test-results/
+```
+
 It's also recommended to automatically run the tests before packing/publishing the module:
 
 ```json

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/visual-tests",
-	"version": "1.7.0-rc.10",
+	"version": "1.7.0-rc.12",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": "https://github.com/public-ui/kolibri",
@@ -16,7 +16,7 @@
 	"sideEffects": false,
 	"description": "Provides utility to run visual regression tests for themes.",
 	"scripts": {
-		"depcheck": "depcheck --ignores=@public-ui/sample-react,http-server,tslib",
+		"depcheck": "depcheck --ignores=@babel/plugin-syntax-import-attributes,@babel/preset-env,@public-ui/sample-react,portfinder,serve",
 		"format": "prettier --check src",
 		"lint": "eslint src",
 		"unused": "knip"
@@ -25,17 +25,19 @@
 		"kolibri-visual-test": "src/index.js"
 	},
 	"dependencies": {
-		"@playwright/test": "1.37.1",
-		"@public-ui/sample-react": "1.7.0-rc.10",
-		"http-server": "14.1.1",
-		"portfinder": "1.0.32"
+		"@playwright/test": "1.38.0",
+		"@public-ui/sample-react": "1.7.0-rc.12",
+		"portfinder": "1.0.32",
+		"serve": "14.2.1"
 	},
 	"devDependencies": {
 		"@babel/eslint-parser": "7.22.15",
+		"@babel/plugin-syntax-import-attributes": "7.22.5",
+		"@babel/preset-env": "7.22.20",
 		"depcheck": "1.4.6",
 		"eslint": "8.49.0",
 		"eslint-plugin-no-loops": "0.3.0",
-		"knip": "2.24.0",
+		"knip": "2.25.2",
 		"prettier": "3.0.3"
 	},
 	"files": [

package/playwright.config.js

@@ -20,7 +20,7 @@ export default defineConfig({
 	/* Fail the build on CI if you accidentally left test.only in the source code. */
 	forbidOnly: !!process.env.CI,
 	/* Retry on CI only */
-	retries: 0, // process.env.CI ? 2 : 0,
+	retries: process.env.CI ? 2 : 0,
 	/* Opt out of parallel tests on CI. */
 	workers: process.env.CI ? 1 : undefined,
 	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
@@ -52,7 +52,7 @@ export default defineConfig({
 
 	/* Run your local dev server before starting the tests */
 	webServer: {
-		command: `http-server ${process.env.KOLIBRI_VISUAL_TESTS_BUILD_PATH} -p ${PORT}`,
+		command: `serve ${process.env.KOLIBRI_VISUAL_TESTS_BUILD_PATH} -p ${PORT}`,
 		url: URL,
 		reuseExistingServer: false,
 	},

package/src/index.js

@@ -19,11 +19,18 @@ if (!tempDir) {
 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 workingDir = fileURLToPath(new URL('../node_modules/@public-ui/sample-react', import.meta.url));
 const buildPath = path.join(tempDir, `kolibri-visual-testing-build-${crypto.randomUUID()}`);
+const packageJsonPath = await import(new URL('../node_modules/@public-ui/sample-react/package.json', import.meta.url), {
+	assert: { type: 'json' },
+});
+
 process.env.KOLIBRI_VISUAL_TESTS_BUILD_PATH = buildPath;
 
-console.log('Building React Sample App …');
-child_process.execFileSync(path.join(binaryPath, 'kolibri-sample-react-test-build'), [buildPath], {
+console.log(`
+Building React Sample App (v${packageJsonPath?.default?.version ?? '#.#.#'}) …`);
+child_process.execFileSync('npm', ['run', 'build', '--', `--output-path=${buildPath}`], {
+	cwd: workingDir,
 	encoding: 'utf-8',
 });
 
@@ -46,8 +53,15 @@ void (async () => {
 
 	playwright.on('exit', (code) => {
 		console.log(`Playwright test finished with exit code ${code}.`);
-		console.log('Cleaning up build folder …');
-		fs.rmSync(buildPath, { recursive: true, force: true });
+
+		if (process.env.KOLIBRI_CLEANUP === '0') {
+			console.log('Skipping cleanup up build folder.');
+			console.log(`You can serve this build with "npx serve ${buildPath}".`);
+		} else {
+			console.log('Cleaning up build folder …');
+			fs.rmSync(buildPath, { recursive: true, force: true });
+			console.log('Cleaning up finished successfully.');
+		}
 		process.exit(code ?? 1);
 	});
 })();

package/tests/sample-app.routes.js

@@ -1,80 +1,114 @@
-export const ROUTES = [
-	'/handout/basic',
-	'/abbr/basic',
-	'/accordion/basic',
-	'/accordion/header',
-	'/accordion/headlines',
-	'/accordion/list',
-	'/alert/basic',
-	'/alert/card-msg',
-	'/alert/html',
-	'/avatar/basic',
-	'/badge/basic',
-	'/badge/button',
-	'/breadcrumb/basic',
-	'/button/basic',
-	'/button/hide-label',
-	'/button/icons',
-	'/button/width',
-	'/button-link/basic',
-	'/button-link/icons',
-	'/button-link/image',
-	'/button-link/target',
-	'/button-group/basic',
-	'/card/basic',
-	'/card/confirm',
-	'/card/flex',
-	'/card/selection',
-	'/details/basic',
-	'/heading/badge',
-	'/heading/basic',
-	'/heading/paragraph',
-	'/icon/basic',
-	'/indented-text/basic',
-	'/input-checkbox/basic',
-	'/input-color/basic',
-	'/input-date/basic',
-	'/input-email/basic',
-	'/input-file/basic',
-	'/input-number/basic',
-	'/input-password/basic',
-	'/input-password/show-password',
-	'/input-radio/basic',
-	'/input-radio/horizontal',
-	'/input-radio/select',
-	'/input-range/basic',
-	'/input-text/basic',
-	'/input-text/hidden-label',
-	'/input-text/blur',
-	'/input-text/focus',
-	'/link/basic',
-	'/link/icons',
-	'/link/image',
-	'/link/target',
-	'/link-button/basic',
-	'/nav/basic',
-	'/nav/active',
-	'/nav/aria-current',
-	'/nav/horizontal',
-	'/pagination/basic',
-	'/popover/basic',
-	'/progress/basic',
-	'/select/basic',
-	'/skip-nav/basic',
-	'/spin/basic',
-	'/spin/cycle',
-	'/spin/custom',
-	'/split-button/basic',
-	'/table/badge-size',
-	'/table/render-cell',
-	'/table/sort-data',
-	'/textarea/basic',
-	'/textarea/adjust-height',
-	'/textarea/disabled',
-	'/textarea/placeholder',
-	'/textarea/readonly',
-	'/textarea/resize',
-	'/textarea/rows',
-	'/version/basic',
-	'/version/context',
-];
+export const ROUTES = new Map();
+
+/**
+ * Actually we support the following options:
+ *
+ * Details: https://playwright.dev/docs/api/class-pageassertions#page-assertions-to-have-screenshot-1
+ * - fullPage: boolean (Default: true)
+ * - maxDiffPixelRatio: number (Default: undefined)
+ * - maxDiffPixels: number (Default: undefined)
+ * - threshold: number (Default: undefined)
+ * - timeout: number (Default: 0)
+ *
+ * To set the viewport size, use the following options:
+ * - viewportSize: { width, height } (Default: 800x600)
+ *
+ */
+
+ROUTES.set('handout/basic', {
+	viewportSize: {
+		width: 1920,
+		height: 1280,
+	},
+	waitForTimeout: 500,
+});
+ROUTES.set('abbr/basic', null);
+ROUTES.set('accordion/basic', null);
+ROUTES.set('accordion/header', null);
+ROUTES.set('accordion/headlines', null);
+ROUTES.set('accordion/list', null);
+ROUTES.set('alert/basic', null);
+ROUTES.set('alert/card-msg', null);
+ROUTES.set('alert/html', null);
+ROUTES.set('avatar/basic', null);
+ROUTES.set('badge/basic', null);
+ROUTES.set('badge/button', null);
+ROUTES.set('breadcrumb/basic', null);
+ROUTES.set('button-group/basic', null);
+ROUTES.set('button-link/basic', null);
+ROUTES.set('button-link/icons', null);
+ROUTES.set('button-link/image', null);
+ROUTES.set('button-link/target', null);
+ROUTES.set('button/basic', null);
+ROUTES.set('button/hide-label', null);
+ROUTES.set('button/icons', null);
+ROUTES.set('button/width', null);
+ROUTES.set('card/basic', null);
+ROUTES.set('card/confirm', null);
+ROUTES.set('card/flex', null);
+ROUTES.set('card/selection', null);
+ROUTES.set('details/basic', null);
+ROUTES.set('heading/badge', null);
+ROUTES.set('heading/basic', null);
+ROUTES.set('heading/paragraph', null);
+ROUTES.set('icon/basic', null);
+ROUTES.set('image/basic', null);
+ROUTES.set('indented-text/basic', null);
+ROUTES.set('input-checkbox/basic', null);
+ROUTES.set('input-checkbox/button', null);
+ROUTES.set('input-checkbox/switch', null);
+ROUTES.set('input-color/basic', null);
+ROUTES.set('input-date/basic', null);
+ROUTES.set('input-email/basic', null);
+ROUTES.set('input-file/basic', null);
+ROUTES.set('input-number/basic', null);
+ROUTES.set('input-password/basic', null);
+ROUTES.set('input-password/show-password', null);
+ROUTES.set('input-radio/basic', null);
+ROUTES.set('input-radio/horizontal', null);
+ROUTES.set('input-radio/select', null);
+ROUTES.set('input-range/basic', null);
+ROUTES.set('input-text/basic', null);
+ROUTES.set('input-text/blur', null);
+ROUTES.set('input-text/focus', null);
+ROUTES.set('input-text/hidden-label', null);
+ROUTES.set('kolibri/animated', null);
+ROUTES.set('kolibri/basic', null);
+ROUTES.set('kolibri/no-label', null);
+ROUTES.set('link-button/basic', null);
+ROUTES.set('link-group/basic', null);
+ROUTES.set('link-group/horizontal', null);
+ROUTES.set('link/basic', null);
+ROUTES.set('link/icons', null);
+ROUTES.set('link/image', null);
+ROUTES.set('link/target', null);
+ROUTES.set('logo/basic', null);
+ROUTES.set('nav/active', null);
+ROUTES.set('nav/aria-current', null);
+ROUTES.set('nav/basic', null);
+ROUTES.set('nav/horizontal', null);
+ROUTES.set('pagination/basic', null);
+ROUTES.set('popover/basic', null);
+ROUTES.set('progress/basic', null);
+ROUTES.set('quote/basic', null);
+ROUTES.set('quote/block', null);
+ROUTES.set('select/basic', null);
+ROUTES.set('skip-nav/basic', null);
+ROUTES.set('spin/basic', null);
+ROUTES.set('spin/custom', null);
+ROUTES.set('spin/cycle', null);
+ROUTES.set('split-button/basic', null);
+ROUTES.set('table/badge-size', null);
+ROUTES.set('table/render-cell', null);
+ROUTES.set('table/sort-data', null);
+ROUTES.set('tabs/basic', null);
+ROUTES.set('tabs/icons-only', null);
+ROUTES.set('textarea/adjust-height', null);
+ROUTES.set('textarea/basic', null);
+ROUTES.set('textarea/disabled', null);
+ROUTES.set('textarea/placeholder', null);
+ROUTES.set('textarea/readonly', null);
+ROUTES.set('textarea/resize', null);
+ROUTES.set('textarea/rows', null);
+ROUTES.set('version/basic', null);
+ROUTES.set('version/context', null);

package/tests/theme-snapshots.spec.js

@@ -15,33 +15,55 @@ export const configureSnapshotPath =
 				// .replace('-firefox', '')
 
 				// Remove os name from snapshot name
-				.replace('-darwin', '')
-				.replace('-linux', '')
-				.replace('-windows', '')
+				// .replace('-darwin', '')
+				// .replace('-linux', '')
+				// .replace('-windows', '')
 
 				// Remove test counter from snapshot name
-				.replace('-1-', '-');
+				.replace('-1-', '-')
+
+				// Make different snapshot folder for different themes
+				.replace('theme-snapshots.spec.js', `theme-${process.env.THEME_EXPORT.toLocaleLowerCase()}`)
+				.replace('-snapshots', '');
 			return result;
 		};
 	};
 
 test.beforeEach(configureSnapshotPath());
 
+// https://playwright.dev/docs/emulation
+test.use({
+	colorScheme: 'light',
+	locale: 'de-DE',
+	isMobile: false,
+	timezoneId: 'Europe/Berlin',
+	viewport: {
+		width: 800,
+		height: 0,
+	},
+});
+
 /**
  * @todo stabilize and re-enable test
  */
 const blocklist = [];
 
-ROUTES.filter((route) => !blocklist.includes(route)).forEach((route) => {
+ROUTES.forEach((options, route) => {
+	if (blocklist.includes(route)) {
+		return;
+	}
 	test(`snapshot for ${route}`, async ({ page }) => {
 		await page.goto(`/#${route}?hideMenus`, { waitUntil: 'networkidle' });
-		await page.setViewportSize({
-			width: 1920,
-			height: 1280,
-		});
+		if (options?.viewportSize) {
+			await page.setViewportSize(options.viewportSize);
+		}
+		if (options?.waitForTimeout) {
+			await page.waitForTimeout(options.waitForTimeout);
+		}
 		await expect(page).toHaveScreenshot({
-			// fullPage: true,
-			maxDiffPixelRatio: 0.03,
+			fullPage: true,
+			maxDiffPixelRatio: 0.025,
+			...options,
 		});
 	});
 });