@public-ui/visual-tests 1.7.0-rc.8 → 1.7.0

package/tests/sample-app.routes.js

@@ -0,0 +1,387 @@
+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', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('accordion/basic', null);
+ROUTES.set('accordion/header', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('accordion/headlines', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('accordion/list', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('alert/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('alert/card-msg', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('alert/html', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('avatar/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('badge/basic', null);
+ROUTES.set('badge/button', null);
+ROUTES.set('breadcrumb/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('button-group/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('button-link/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('button-link/icons', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('button-link/image', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('button/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('button/hide-label', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('button/icons', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('button/width', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('card/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('card/confirm', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('card/flex', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('card/selection', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('details/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('heading/badge', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('heading/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('heading/paragraph', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('icon/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('image/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('indented-text/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+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('kolibri/animated', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('kolibri/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('kolibri/no-label', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('link-button/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('link-group/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('link-group/horizontal', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('link/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('link/icons', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('link/image', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('link/target', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('logo/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('modal/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('nav/active', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('nav/aria-current', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('nav/basic', null);
+ROUTES.set('nav/horizontal', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('pagination/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('popover/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('progress/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('quote/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('quote/block', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('select/basic', null);
+ROUTES.set('skip-nav/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('spin/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('spin/custom', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('spin/cycle', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('split-button/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('table/badge-size', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('table/render-cell', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('table/sort-data', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('tabs/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('tabs/icons-only', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('textarea/adjust-height', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('textarea/basic', null);
+ROUTES.set('textarea/disabled', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('textarea/placeholder', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('textarea/readonly', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('textarea/resize', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('textarea/rows', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('textarea/with-counter', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('toast/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('version/basic', {
+	axe: {
+		skipFailures: false,
+	},
+});
+ROUTES.set('version/context', {
+	axe: {
+		skipFailures: false,
+	},
+});

package/tests/theme-snapshots.spec.js

@@ -0,0 +1,70 @@
+import { test, expect } from '@playwright/test';
+import { ROUTES } from './sample-app.routes.js';
+
+// https://github.com/microsoft/playwright/issues/7575#issuecomment-1288164474
+export const configureSnapshotPath =
+	() =>
+	// eslint-disable-next-line no-empty-pattern
+	({}, testInfo) => {
+		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-', '-')
+
+				// 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.forEach((options, route) => {
+	if (blocklist.includes(route)) {
+		return;
+	}
+	test(`snapshot for ${route}`, async ({ page }) => {
+		await page.goto(`/#${route}?hideMenus`, { waitUntil: 'networkidle' });
+		if (options?.viewportSize) {
+			await page.setViewportSize(options.viewportSize);
+		}
+		if (options?.waitForTimeout) {
+			await page.waitForTimeout(options.waitForTimeout);
+		}
+		await expect(page).toHaveScreenshot({
+			fullPage: true,
+			maxDiffPixelRatio: 0.025,
+			...options,
+		});
+	});
+});

package/src/index.ts

@@ -1,33 +0,0 @@
-#!/usr/bin/env node
-
-import { Command } from 'commander';
-import gradient from 'gradient-string';
-
-import migrate from './migrate';
-import { getVersionOfPublicUiKoliBriCli } from './migrate/shares/reuse';
-
-const versionOfPublicUiKoliBriCli = getVersionOfPublicUiKoliBriCli();
-
-const banner = gradient.atlas.multiline(
-	`
-,--. ,--.         ,--. ,--. ,-----.           ,--.
-|  .'   /  ,---.  |  | \`--' |  |) /_  ,--.--. \`--'
-|  .   '  | .-. | |  | ,--. |  .-.  \\ |  .--' ,--.
-|  |\\   \\ | '-' | |  | |  | |  '--' / |  |    |  |
-\`--' \`--´  \`---´  \`--' \`--' \`------´  \`--'    \`--'
-🚹 The accessible HTML-Standard | 👉 https://public-ui.github.io | ${versionOfPublicUiKoliBriCli}
-`,
-	{
-		interpolation: 'hsv',
-	},
-);
-console.log(banner);
-
-const program = new Command();
-
-program.name('kolibri').description('CLI for executing some helpful commands for KoliBri projects.').version(versionOfPublicUiKoliBriCli);
-
-// Add commands
-migrate(program);
-
-program.parse();

package/src/migrate/index.ts

@@ -1,127 +0,0 @@
-import { exec } from 'child_process';
-import { Command, Option } from 'commander';
-import fs from 'fs';
-import path from 'path';
-
-import { Configuration } from '../types';
-import { TaskRunner } from './runner/task-runner';
-import { testTasks } from './runner/tasks/test';
-import { v1Tasks } from './runner/tasks/v1';
-import {
-	getContentOfProjectPkgJson,
-	getPackageManagerInstallCommand,
-	getVersionOfPublicUiComponents,
-	getVersionOfPublicUiKoliBriCli,
-	logAndCreateError,
-	MODIFIED_FILES,
-	setRemoveMode,
-} from './shares/reuse';
-import { REMOVE_MODE, RemoveMode } from './types';
-
-type MigrateOption = {
-	ignoreUncommittedChanges: boolean;
-	removeMode: RemoveMode;
-	testTasks: boolean;
-};
-
-/**
- * This function is used to register the migrate command.
- * @param {Command} program The program object to register the command
- */
-export default function (program: Command): void {
-	program
-		.command('migrate')
-		.description('This command migrates KoliBri code to the current version.')
-		.argument('[string]', 'Source code folder to migrate', 'src')
-		.addOption(new Option('--ignore-uncommitted-changes', 'Allows execution with uncommitted changes').default(false))
-		.addOption(new Option('--remove-mode <mode>', 'Prefix property name or delete property').choices(REMOVE_MODE).default('prefix'))
-		.addOption(new Option('--test-tasks', 'Run additional test tasks').default(false).hideHelp())
-		.action((baseDir: string, options: MigrateOption) => {
-			exec('git status --porcelain', (err, stdout) => {
-				if (err) {
-					console.error(`exec error: ${err.message}`);
-					return;
-				}
-
-				if (!options.ignoreUncommittedChanges && stdout) {
-					throw logAndCreateError('There are uncommitted changes');
-				}
-
-				setRemoveMode(options.removeMode);
-
-				const versionOfPublicUiComponents = getVersionOfPublicUiComponents();
-				const versionOfPublicUiKoliBriCli = getVersionOfPublicUiKoliBriCli();
-
-				console.log(`
-Current version of @public-ui/components: ${versionOfPublicUiComponents}
-Source folder to migrate: ${baseDir}
-`);
-
-				const configFile = path.resolve(process.cwd(), '.kolibri.config.json');
-				let config: Configuration = {};
-				if (fs.existsSync(configFile)) {
-					try {
-						config = JSON.parse(fs.readFileSync(configFile, 'utf8')) as Configuration;
-					} catch (e) {
-						// ignore
-					}
-				}
-
-				const runner = new TaskRunner(baseDir, versionOfPublicUiKoliBriCli, versionOfPublicUiComponents, config);
-				runner.registerTasks(v1Tasks);
-
-				if (options.testTasks) {
-					runner.registerTasks(testTasks);
-				}
-
-				let version = versionOfPublicUiComponents;
-
-				/**
-				 * Runs the task runner in a loop until all tasks are completed.
-				 */
-				function runLoop() {
-					runner.run();
-					if (version !== runner.getPendingMinVersion()) {
-						version = runner.getPendingMinVersion();
-						let packageJson = getContentOfProjectPkgJson();
-						packageJson = packageJson.replace(/"(@public-ui\/[^"]+)":\s*".*"/g, `"$1": "${version}"`);
-						fs.writeFileSync(path.resolve(process.cwd(), 'package.json'), packageJson);
-						runner.setProjectVersion(version);
-
-						console.log(`- Update @public-ui/* to version ${version}`);
-						exec(getPackageManagerInstallCommand(), (err) => {
-							if (err) {
-								console.error(`exec error: ${err.message}`);
-								return;
-							}
-							runLoop();
-						});
-					} else {
-						console.log(`
-Status of all executed Tasks:`);
-
-						const status = runner.getStatus(true);
-						fs.writeFileSync(configFile, JSON.stringify(status.config, null, 2));
-
-						console.log(`
-Modified files: ${MODIFIED_FILES.size}`);
-						MODIFIED_FILES.forEach((file) => {
-							console.log(`- ${file}`);
-						});
-
-						console.log(`
-After the code migration has gone through, the code formatting may no longer be as desired. Therefore, please reformat your code afterwards if necessary.
-
-Afterwards, it may be that functions or themes in newer major versions have changed or are no longer included. This should be checked finally and corrected manually if necessary.
-
-Is anything wrong, you can reset the migration with "git reset --hard HEAD~1" or by discarding the affected files. For more information read the troubleshooting section in the README.`);
-					}
-				}
-
-				const status = runner.getStatus();
-				console.log(`
-Execute ${status.total} registered tasks...`);
-				runLoop();
-			});
-		});
-}

package/src/migrate/runner/abstract-task.ts

@@ -1,64 +0,0 @@
-import semver from 'semver';
-
-import { FILE_EXTENSIONS, FileExtension } from '../../types';
-import { logAndCreateError } from '../shares/reuse';
-import { TaskStatus } from './types';
-
-export type TaskOptions = {
-	dependentTasks?: AbstractTask[];
-	description?: string;
-};
-
-export abstract class AbstractTask {
-	private status: TaskStatus = 'pending';
-
-	protected static readonly instances: Map<string, AbstractTask> = new Map();
-
-	protected readonly description?: string;
-
-	protected constructor(
-		protected readonly identifier: string,
-		protected readonly title: string,
-		protected readonly extensions: FileExtension[],
-		protected readonly versionRange: string,
-		protected readonly dependentTasks: AbstractTask[] = [],
-		options: TaskOptions = {},
-	) {
-		this.description = options.description;
-		this.extensions = this.extensions.filter((ext) => FILE_EXTENSIONS.includes(ext));
-
-		if (!semver.validRange(this.versionRange)) {
-			throw logAndCreateError(`[${this.identifier}] Invalid semver range version: ${this.versionRange}`);
-		}
-	}
-
-	public getDependentTasks(): AbstractTask[] {
-		return this.dependentTasks;
-	}
-
-	public getDescription(): string | undefined {
-		return this.description;
-	}
-
-	public getIdentifier(): string {
-		return this.identifier;
-	}
-
-	public setStatus(status: TaskStatus): void {
-		this.status = status;
-	}
-
-	public getStatus(): TaskStatus {
-		return this.status;
-	}
-
-	public getTitle(): string {
-		return this.title;
-	}
-
-	public getVersionRange(): string {
-		return this.versionRange;
-	}
-
-	public abstract run(baseDir: string): void;
-}