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

package/src/migrate/runner/tasks/v1/link-button.ts

@@ -0,0 +1,15 @@
+import { RemovePropertyNameTask } from '../common/RemovePropertyNameTask';
+import { RenamePropertyNameTask } from '../common/RenamePropertyNameTask';
+
+export const LinkButtonRemovePropertyAriaControl = RemovePropertyNameTask.getInstance('kol-link-button', '_aria-control', '^1');
+export const LinkButtonRenamePropertyAriaCurrentToListenAriaCurrent = RenamePropertyNameTask.getInstance(
+	'kol-link-button',
+	'_aria-current',
+	'_listen-aria-current',
+	'^1',
+);
+export const LinkButtonRemovePropertyAriaExpanded = RemovePropertyNameTask.getInstance('kol-link-button', '_aria-expanded', '^1');
+export const LinkButtonRemovePropertyAriaLabel = RemovePropertyNameTask.getInstance('kol-link-button', '_aria-label', '^1');
+export const LinkButtonRemovePropertyAriaSelected = RemovePropertyNameTask.getInstance('kol-link-button', '_aria-selected', '^1');
+export const LinkButtonRemovePropertyDisabled = RemovePropertyNameTask.getInstance('kol-link-button', '_disabled', '^1');
+export const LinkButtonRenamePropertyIconOnlyToHideLabel = RenamePropertyNameTask.getInstance('kol-link-button', '_icon-only', '_hide-label', '^1');

package/src/migrate/runner/tasks/v1/link-group.ts

@@ -0,0 +1,7 @@
+import { RemovePropertyNameTask } from '../common/RemovePropertyNameTask';
+import { RenamePropertyNameTask } from '../common/RenamePropertyNameTask';
+
+export const LinkGroupRenamePropertyAriaLabelToLabel = RenamePropertyNameTask.getInstance('kol-link-group', '_aria-label', '_label', '^1');
+export const LinkGroupRenamePropertyHeadingToLabel = RenamePropertyNameTask.getInstance('kol-link-group', '_heading', '_label', '^1');
+export const LinkGroupRemovePropertyHeading = RemovePropertyNameTask.getInstance('kol-link-group', '_heading', '^1', [LinkGroupRenamePropertyHeadingToLabel]);
+export const LinkGroupRemovePropertyOrdered = RemovePropertyNameTask.getInstance('kol-link-group', '_ordered', '^1');

package/src/migrate/runner/tasks/v1/link.ts

@@ -0,0 +1,15 @@
+import { RemovePropertyNameTask } from '../common/RemovePropertyNameTask';
+import { RenamePropertyNameTask } from '../common/RenamePropertyNameTask';
+
+export const LinkRemovePropertyAriaControl = RemovePropertyNameTask.getInstance('kol-link', '_aria-control', '^1');
+export const LinkRenamePropertyAriaCurrentToListenAriaCurrent = RenamePropertyNameTask.getInstance('kol-link', '_aria-current', '_listen-aria-current', '^1');
+export const LinkRemovePropertyAriaExpanded = RemovePropertyNameTask.getInstance('kol-link', '_aria-expanded', '^1');
+export const LinkRemovePropertyAriaLabel = RemovePropertyNameTask.getInstance('kol-link', '_aria-label', '^1');
+export const LinkRemovePropertyAriaSelected = RemovePropertyNameTask.getInstance('kol-link', '_aria-selected', '^1');
+export const LinkRemovePropertyDisabled = RemovePropertyNameTask.getInstance('kol-link', '_disabled', '^1');
+// @todo: handle _icon-align in _icon
+export const LinkRemovePropertyIconAlign = RemovePropertyNameTask.getInstance('kol-link', '_icon-align', '^1');
+export const LinkRenamePropertyIconOnlyToHideLabel = RenamePropertyNameTask.getInstance('kol-link', '_icon-only', '_hide-label', '^1');
+export const LinkRemovePropertySelector = RemovePropertyNameTask.getInstance('kol-link', '_selector', '^1');
+export const LinkRemovePropertyStealth = RemovePropertyNameTask.getInstance('kol-link', '_stealth', '^1');
+export const LinkRemovePropertyUseCase = RemovePropertyNameTask.getInstance('kol-link', '_use-case', '^1');

package/src/migrate/runner/tasks/v1/logo.ts

@@ -0,0 +1,3 @@
+import { RenamePropertyNameTask } from '../common/RenamePropertyNameTask';
+
+export const LogoRenamePropertyAbbrToOrg = RenamePropertyNameTask.getInstance('kol-logo', '_abbr', '_org', '^1');

package/src/migrate/runner/tasks/v1/modal.ts

@@ -0,0 +1,3 @@
+import { RenamePropertyNameTask } from '../common/RenamePropertyNameTask';
+
+export const ModalRenamePropertyAriaLabelToLabel = RenamePropertyNameTask.getInstance('kol-modal', '_aria-label', '_label', '^1');

package/src/migrate/runner/tasks/v1/nav.ts

@@ -0,0 +1,7 @@
+import { RemovePropertyNameTask } from '../common/RemovePropertyNameTask';
+import { RenamePropertyNameTask } from '../common/RenamePropertyNameTask';
+
+export const NavRenamePropertyAriaLabelToLabel = RenamePropertyNameTask.getInstance('kol-nav', '_aria-label', '_label', '^1');
+export const NavRenamePropertyCompactToHideLabel = RenamePropertyNameTask.getInstance('kol-nav', '_compact', '_hide-label', '^1');
+export const NavRemovePropertyHasCompactButton = RemovePropertyNameTask.getInstance('kol-nav', '_has-compact-button', '^1');
+export const NavRemovePropertyVariant = RemovePropertyNameTask.getInstance('kol-nav', '_variant', '^1');

package/src/migrate/runner/tasks/v1/pagination.ts

@@ -0,0 +1,3 @@
+import { RenamePropertyNameTask } from '../common/RenamePropertyNameTask';
+
+export const PaginationRenamePropertyCountToTotal = RenamePropertyNameTask.getInstance('kol-pagination', '_count', '_total', '^1');

package/src/migrate/runner/tasks/v1/progress.ts

@@ -0,0 +1,3 @@
+import { RenamePropertyNameTask } from '../common/RenamePropertyNameTask';
+
+export const ProgressRenamePropertyTypeToVariant = RenamePropertyNameTask.getInstance('kol-progress', '_type', '_variant', '^1');

package/src/migrate/runner/tasks/v1/quote.ts

@@ -0,0 +1,3 @@
+import { RenamePropertyNameTask } from '../common/RenamePropertyNameTask';
+
+export const QuoteRenamePropertyCaptionToLabel = RenamePropertyNameTask.getInstance('kol-quote', '_caption', '_label', '^1');

package/src/migrate/runner/tasks/v1/select.ts

@@ -0,0 +1,4 @@
+import { RenamePropertyNameTask } from '../common/RenamePropertyNameTask';
+
+export const SelectRenamePropertyHeightToRows = RenamePropertyNameTask.getInstance('kol-select', '_height', '_rows', '^1');
+export const SelectRenamePropertyListToOptions = RenamePropertyNameTask.getInstance('kol-select', '_list', '_options', '^1');

package/src/migrate/runner/tasks/v1/skip-nav.ts

@@ -0,0 +1,3 @@
+import { RenamePropertyNameTask } from '../common/RenamePropertyNameTask';
+
+export const SkipNavButtonRenamePropertyAriaLabelToLabel = RenamePropertyNameTask.getInstance('kol-skip-nav', '_aria-label', '_label', '^1');

package/src/migrate/runner/tasks/v1/span.ts

@@ -0,0 +1,3 @@
+import { RenamePropertyNameTask } from '../common/RenamePropertyNameTask';
+
+export const SpanRenamePropertyIconOnlyToHideLabel = RenamePropertyNameTask.getInstance('kol-span', '_icon-only', '_hide-label', '^1');

package/src/migrate/runner/tasks/v1/split-button.ts

@@ -0,0 +1,3 @@
+import { RemovePropertyNameTask } from '../common/RemovePropertyNameTask';
+
+export const SplitButtonRemovePropertyAriaLabel = RemovePropertyNameTask.getInstance('kol-split-button', '_aria-label', '^1');

package/src/migrate/runner/tasks/v1/table.ts

@@ -0,0 +1,3 @@
+import { RenamePropertyNameTask } from '../common/RenamePropertyNameTask';
+
+export const TableRenamePropertyCaptionToLabel = RenamePropertyNameTask.getInstance('kol-table', '_caption', '_label', '^1');

package/src/migrate/runner/tasks/v1/tabs.ts

@@ -0,0 +1,4 @@
+import { RenamePropertyNameTask } from '../common/RenamePropertyNameTask';
+
+export const TabsRenamePropertyAriaLabelToLabel = RenamePropertyNameTask.getInstance('kol-tabs', '_aria-label', '_label', '^1');
+export const TabsRenamePropertyTabAlignToAlign = RenamePropertyNameTask.getInstance('kol-tabs', '_tab-align', '_align', '^1');

package/src/migrate/runner/tasks/v1/toast.ts

@@ -0,0 +1,3 @@
+import { RenamePropertyNameTask } from '../common/RenamePropertyNameTask';
+
+export const ToastRenamePropertyHeadingToLabel = RenamePropertyNameTask.getInstance('kol-toast', '_heading', '_label', '^1');

package/src/migrate/runner/tasks/v1/version.ts

@@ -0,0 +1,3 @@
+import { RenamePropertyNameTask } from '../common/RenamePropertyNameTask';
+
+export const VersionRenamePropertyVersionToLabel = RenamePropertyNameTask.getInstance('kol-version', '_version', '_label', '^1');

package/src/migrate/runner/types.ts

@@ -0,0 +1,2 @@
+const TASK_STATUS = ['pending', 'running', 'done', 'failed', 'skipped'] as const;
+export type TaskStatus = (typeof TASK_STATUS)[number];

package/src/migrate/shares/reuse.ts

@@ -0,0 +1,182 @@
+import chalk from 'chalk';
+import fs from 'fs';
+import path from 'path';
+
+import { FileExtension, PackageJson } from '../../types';
+import { RemoveMode } from '../types';
+
+/**
+ * This function is used to exit the process with an error message.
+ * @param {string} msg The error message
+ * @param {string} hint The hint message
+ * @returns {Error} The error object
+ */
+export function logAndCreateError(msg: string, hint?: string) {
+	const hintText = hint
+		? chalk.yellow(
+				`
+ℹ️ `,
+				chalk.underline.bold(`Hinweis:`),
+				hint,
+				`
+`,
+		  )
+		: '';
+	console.log(
+		chalk.red(
+			chalk.underline.bold(`
+Error:`),
+			`${msg}
+`,
+		),
+		hintText,
+		`
+  👉 You can report this error to`,
+		chalk.blue(`https://github.com/public-ui/kolibri/issues/new?title=CLI:+`),
+		`
+`,
+	);
+	// @todo process.exit(1); // makes `hint` undefined - ?!
+	return new Error();
+}
+
+/**
+ * Recursively searches for files with the specified extension in the specified directory.
+ * @param {string} dir The directory to search in
+ * @param {FileExtension | FileExtension[]} ext The extension to search for
+ * @returns {string[]} The found files
+ */
+export function filterFilesByExt(dir: string, ext: FileExtension | FileExtension[]): string[] {
+	ext = Array.isArray(ext) ? ext : [ext];
+	let files: string[] = [];
+	const dirPath = path.resolve(process.cwd(), dir);
+	fs.readdirSync(dirPath).forEach((file) => {
+		const fullPath = path.resolve(dir, file);
+		if (fs.lstatSync(fullPath).isDirectory()) {
+			files = files.concat(filterFilesByExt(fullPath, ext));
+		} else if (ext.includes(path.extname(fullPath).replace('.', '') as FileExtension)) {
+			files.push(fullPath);
+		}
+	});
+	return files;
+}
+
+/**
+ * This function is used to get the version of the package.json as string.
+ * @param {string} offsetPath The offset path to the package.json
+ * @returns {string} The package.json as string
+ */
+function readPackageString(offsetPath: string): string {
+	offsetPath = path.resolve(offsetPath, 'package.json');
+	if (!fs.existsSync(offsetPath)) {
+		throw logAndCreateError(`The following "package.json" does not exists: ${offsetPath}`);
+	}
+	return fs.readFileSync(offsetPath, 'utf8');
+}
+
+/**
+ * This function is used to get the version of the package.json.
+ * @param {string} offsetPath The offset path to the package.json
+ * @returns {PackageJson} The package.json as object
+ */
+function readPackageJson(offsetPath: string): PackageJson {
+	const content = readPackageString(offsetPath);
+	let json: Record<string, unknown>;
+	try {
+		json = JSON.parse(content) as Record<string, unknown>;
+	} catch (err) {
+		throw logAndCreateError(`The following "package.json" content could not parse: ${content}`);
+	}
+	return json as PackageJson;
+}
+
+/**
+ * This function is used to get the package manager install command.
+ * @param {string} baseDir The base directory to start searching for the package manager
+ * @returns {string} The package manager install command
+ */
+export function getPackageManagerInstallCommand(baseDir: string = process.cwd()) {
+	if (fs.existsSync(path.resolve(baseDir, 'pnpm-lock.yaml'))) return 'pnpm i';
+	if (fs.existsSync(path.resolve(baseDir, 'yarn.lock'))) return 'yarn';
+	if (fs.existsSync(path.resolve(baseDir, 'package-lock.json'))) return 'npm i';
+	baseDir = path.resolve(baseDir, '..');
+	if (baseDir === '/') {
+		throw logAndCreateError('Package manager could not detected.');
+	}
+	return getPackageManagerInstallCommand(baseDir);
+}
+
+export const isTagKebabCaseRegExp = /^kol-[a-z]+(-[a-z]+)*$/;
+export const isPropertyKebabCaseRegExp = /^(data-removed-)?_[a-z]+(-[a-z]+)*$/;
+
+/**
+ * Converts a kebab case string to a capital case string.
+ * @param {string} str The kebab case string
+ * @returns {string} The capital case string
+ */
+export function kebabToCapitalCase(str: string) {
+	return str
+		.split('-') // Split on hyphen
+		.map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()) // Capitalize each word
+		.join(''); // Join without space
+}
+
+/**
+ * Converts a kebab case string to a camel case string.
+ * @param {string} str The kebab case string
+ * @returns {string} The camel case string
+ */
+export function kebabToCamelCase(str: string) {
+	return str
+		.split('-') // Split on hyphen
+		.map((word, index) => (index === 0 ? word : word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())) // Capitalize each word
+		.join(''); // Join without space
+}
+
+export const MODIFIED_FILES = new Set<string>();
+
+let REMOVE_MODE: RemoveMode = 'prefix';
+
+/**
+ * Sets the remove mode.
+ * @param {RemoveMode} mode The remove mode
+ */
+export function setRemoveMode(mode: RemoveMode): void {
+	REMOVE_MODE = mode;
+}
+
+/**
+ * Gets the remove mode.
+ * @returns {RemoveMode} The remove mode
+ */
+export function getRemoveMode(): RemoveMode {
+	return REMOVE_MODE;
+}
+
+export const getContentOfProjectPkgJson = (): string => {
+	try {
+		return readPackageString(path.resolve(process.cwd()));
+	} catch (err) {
+		throw logAndCreateError('Could not read content of project "package.json"!');
+	}
+};
+export const getVersionOfPublicUiComponents = (): string => {
+	try {
+		return readPackageJson(path.resolve(process.cwd(), 'node_modules/@public-ui/components')).version;
+	} catch (err) {
+		throw logAndCreateError(
+			'Could not get version of installed "@public-ui/components" package!',
+			'Check that you are in the root directory of your project and that the package "@public-ui/components" is installed.',
+		);
+	}
+};
+export const getVersionOfPublicUiKoliBriCli = (): string => {
+	try {
+		return readPackageJson(path.resolve(__dirname, '..', '..', '..')).version;
+	} catch (err) {
+		throw logAndCreateError(
+			'Could not get version of global installed "@public-ui/kolibri-cli" package!',
+			'Install the package with: npm i -g @public-ui/kolibri-cli',
+		);
+	}
+};

package/src/migrate/types.ts

@@ -0,0 +1,2 @@
+export const REMOVE_MODE = ['delete', 'prefix'] as const;
+export type RemoveMode = (typeof REMOVE_MODE)[number];

package/src/types.ts

@@ -0,0 +1,23 @@
+export const FILE_EXTENSIONS = ['html', 'js', 'json', 'jsx', 'ts', 'tsx', 'vue'] as const;
+export type FileExtension = (typeof FILE_EXTENSIONS)[number];
+
+export const COMPONENT_FILE_EXTENSIONS: FileExtension[] = ['jsx', 'tsx', 'vue'];
+export const CUSTOM_ELEMENT_FILE_EXTENSIONS: FileExtension[] = ['html', 'jsx', 'tsx', 'vue'];
+export const MARKUP_EXTENSIONS: FileExtension[] = COMPONENT_FILE_EXTENSIONS.concat(CUSTOM_ELEMENT_FILE_EXTENSIONS);
+
+export type PackageJson = {
+	name: string;
+	version: string;
+	scripts?: { [key: string]: string };
+	dependencies?: { [key: string]: string };
+	devDependencies?: { [key: string]: string };
+	peerDependencies?: { [key: string]: string };
+};
+
+export type Configuration = {
+	migrate?: {
+		tasks: {
+			[identifier: string]: boolean;
+		};
+	};
+};

package/dist/index.js

@@ -1,43 +0,0 @@
-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 +0,0 @@
-# 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" $1

package/playwright.config.ts

@@ -1,59 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,22 +0,0 @@
-{
-	"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"]
-}