@public-ui/visual-tests 1.7.0-rc.5 → 1.7.0-rc.7

package/dist/index.js

@@ -0,0 +1,43 @@
+import child_process from 'node:child_process';
+import path from 'node:path';
+import { fileURLToPath } 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;
+if (!process.env.THEME_MODULE) {
+    throw new Error('Environment variable THEME_MODULE not specified.');
+}
+if (!tempDir) {
+    throw new Error('Neither environment variable RUNNER_TEMP or TMPDIR specified.');
+}
+process.env.THEME_MODULE = path.join(process.cwd(), process.env.THEME_MODULE);
+const visualsTestModulePath = fileURLToPath(new URL('..', import.meta.url));
+const binaryPath = fileURLToPath(new URL('../node_modules/.bin', import.meta.url));
+const buildPath = path.join(tempDir, `kolibri-visual-testing-build-${crypto.randomUUID()}`);
+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], {
+    encoding: 'utf-8',
+});
+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)], {
+        cwd: visualsTestModulePath,
+    });
+    playwright.stdout.on('data', (data) => {
+        console.log('Playwright: ' + data.toString());
+    });
+    playwright.stderr.on('data', (data) => {
+        console.log('Playwright stderr: ' + data.toString());
+    });
+    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 });
+        process.exit(code !== null && code !== void 0 ? code : 1);
+    });
+})();

package/kolibri-visual-test.sh

@@ -1,3 +1,3 @@
 # Wrapper script necessary to avoid issues in the monorepos' initial `pnpm i`, when the binary already needs to exist.
 # The actual script is built in the `prepare` hook and available after the `pnpm i` finished.
-node "$(dirname "$0")/dist/index.js"
+node "$(dirname "$0")/dist/index.js" $1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@public-ui/visual-tests",
-	"version": "1.7.0-rc.5",
+	"version": "1.7.0-rc.7",
 	"license": "EUPL-1.2",
 	"homepage": "https://public-ui.github.io",
 	"repository": "https://github.com/public-ui/kolibri",
@@ -25,22 +25,27 @@
 	"bin": {
 		"kolibri-visual-test": "kolibri-visual-test.sh"
 	},
+	"dependencies": {
+		"@playwright/test": "1.37.1",
+		"@public-ui/sample-react": "1.7.0-rc.7",
+		"http-server": "14.1.1",
+		"portfinder": "1.0.32",
+		"tslib": "2.6.2",
+		"typescript": "5.2.2"
+	},
 	"devDependencies": {
 		"@types/node": "20.6.0",
 		"@typescript-eslint/eslint-plugin": "6.7.0",
 		"eslint": "8.49.0",
 		"eslint-plugin-no-loops": "0.3.0",
-		"knip": "2.23.0",
-		"npm-check-updates": "16.13.3",
-		"prettier": "3.0.3",
-		"tslib": "2.6.2",
-		"typescript": "5.2.2"
-	},
-	"dependencies": {
-		"@playwright/test": "1.37.1",
-		"@public-ui/sample-react": "1.7.0-rc.5",
-		"http-server": "14.1.1",
-		"portfinder": "1.0.32"
+		"knip": "2.24.0",
+		"npm-check-updates": "16.14.0",
+		"prettier": "3.0.3"
 	},
-	"files": []
+	"files": [
+		"dist",
+		"playwright.config.ts",
+		"tests",
+		"tsconfig.json"
+	]
 }

package/playwright.config.ts

@@ -0,0 +1,59 @@
+import { defineConfig, devices } from '@playwright/test';
+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}`;
+
+console.log('Serving React Sample app:', URL);
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+	testDir: './tests',
+	snapshotDir: path.join(process.env.KOLIBRI_CWD, 'snapshots'),
+	// snapshotPathTemplate: '',
+	outputDir: path.join(process.env.KOLIBRI_CWD, 'test-results'),
+	/* Run tests in files in parallel */
+	fullyParallel: true,
+	/* 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,
+	/* Opt out of parallel tests on CI. */
+	workers: process.env.CI ? 1 : undefined,
+	/* Reporter to use. See https://playwright.dev/docs/test-reporters */
+	reporter: 'line',
+	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+	use: {
+		/* Base URL to use in actions like `await page.goto('/')`. */
+		baseURL: URL,
+
+		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+		trace: 'on-first-retry',
+	},
+
+	/* Configure projects for major browsers */
+	projects: [
+		// {
+		// 	name: 'chrome',
+		// 	use: { ...devices['Desktop Chrome'] },
+		// },
+		// {
+		// 	name: 'edge',
+		// 	use: { ...devices['Desktop Edge'] },
+		// },
+		{
+			name: 'firefox',
+			use: { ...devices['Desktop Firefox'] },
+		},
+	],
+
+	/* Run your local dev server before starting the tests */
+	webServer: {
+		command: `http-server ${process.env.KOLIBRI_VISUAL_TESTS_BUILD_PATH} -p ${PORT}`,
+		url: URL,
+		reuseExistingServer: false,
+	},
+});

package/tests/theme-snapshots.spec.ts

@@ -0,0 +1,46 @@
+import { test, expect, TestInfo } from '@playwright/test';
+// @ts-ignore
+import { routes } from '@public-ui/sample-react/src/routes-test.ts';
+
+// https://github.com/microsoft/playwright/issues/7575#issuecomment-1288164474
+export const configureSnapshotPath =
+	(options?: {}) =>
+	({}: any, testInfo: TestInfo): any => {
+		const originalSnapshotPath = testInfo.snapshotPath;
+		testInfo.snapshotPath = (snapshotName) => {
+			const result = originalSnapshotPath
+				.apply(testInfo, [snapshotName])
+
+				// Remove browser name from snapshot name
+				// .replace('-chromium', '')
+				// .replace('-firefox', '')
+
+				// Remove os name from snapshot name
+				.replace('-darwin', '')
+				.replace('-linux', '')
+				.replace('-windows', '')
+
+				// Remove test counter from snapshot name
+				.replace('-1-', '-');
+			return result;
+		};
+	};
+
+test.beforeEach(configureSnapshotPath());
+
+/**
+ * @todo stabilize and re-enable test
+ */
+const blocklist = ['/heading/paragraph'];
+
+routes
+	.filter((route) => !blocklist.includes(route))
+	.forEach((route) => {
+		test(`snapshot for ${route}`, async ({ page }) => {
+			await page.goto(`/#${route}?hideMenus`, { waitUntil: 'networkidle' });
+			await expect(page).toHaveScreenshot({
+				fullPage: true,
+				maxDiffPixelRatio: 0.03,
+			});
+		});
+	});

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+	"compilerOptions": {
+		"allowSyntheticDefaultImports": true,
+		"allowUnreachableCode": false,
+		"declaration": false,
+		"experimentalDecorators": true,
+		"lib": ["ES2017"],
+		"moduleResolution": "nodenext",
+		"module": "nodenext",
+		"target": "ES2017",
+		"noUnusedLocals": true,
+		"noUnusedParameters": true,
+		"forceConsistentCasingInFileNames": true,
+		"importHelpers": true,
+		"removeComments": true,
+		"types": ["node"],
+		"typeRoots": ["node_modules/@types"],
+		"strict": true,
+		"skipLibCheck": true
+	},
+	"include": ["src"]
+}