Implement snapshot testing for sample app with tag name transformer e…

…nabled (#6227)

.github/workflows/update-snapshots.yml

@@ -74,4 +74,4 @@ jobs:
         uses: stefanzweifel/git-auto-commit-action@v5
         with:
           commit_message: Update all snapshots
-          file_pattern: 'packages/themes/**/snapshots/*'
+          file_pattern: 'packages/themes/**/snapshots/* packages/test-tag-name-transformer/snapshots/*'

packages/samples/react/src/react.main.tsx

@@ -1,6 +1,7 @@
 import React, { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { HashRouter as Router } from 'react-router-dom';
+import { setTagNameTransformer } from '@public-ui/react';
 
 import { bootstrap } from '@public-ui/components';
 import { defineCustomElements } from '@public-ui/components/dist/loader';
@@ -12,33 +13,50 @@ import type { Generic } from 'adopted-style-sheets';
 
 type Theme = Generic.Theming.RegisterPatch<string, string, string>;
 
-void (async () => {
+const ENABLE_TAG_NAME_TRANSFORMER =
+	process.env.ENABLE_TAG_NAME_TRANSFORMER === 'true' || new URL('https://x' + location.hash.substring(1)).searchParams.has('enableTagNameTransformer');
+
+const tagNameTransformer = (tagName: string) => `${tagName}-sample`;
+if (ENABLE_TAG_NAME_TRANSFORMER) {
+	setTagNameTransformer(tagNameTransformer);
+}
+
+const getThemes = async () => {
 	if (process.env.THEME_MODULE) {
 		/* Visual regression testing mode: Themes are overridden with a certain theme module, that should be used instead. */
-		const { [(process.env.THEME_EXPORT as string) ?? 'default']: theme } = (await import(process.env.THEME_MODULE)) as Record<string, Theme>;
-		try {
-			await bootstrap([theme], defineCustomElements, {
-				translation: {
-					name: 'de',
-				},
-			});
-		} catch (error) {
-			console.warn('Theme registration failed:', error);
-		}
-	} else {
-		/* Regular mode: Register all known themes. */
-		try {
-			await bootstrap([BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund], defineCustomElements, {
-				theme: {
-					detect: 'auto',
-				},
+		const { [(process.env.THEME_EXPORT as string) || 'default']: theme } = (await import(process.env.THEME_MODULE)) as Record<string, Theme>;
+		return [theme];
+	}
+
+	/* List of regular sample app themes */
+	return [BMF, DEFAULT, ECL_EC, ECL_EU, ITZBund];
+};
+
+void (async () => {
+	try {
+		await bootstrap(
+			await getThemes(),
+			() => {
+				// @see https://github.com/ionic-team/stencil/issues/2847
+				// eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+				defineCustomElements(window, {
+					transformTagName: ENABLE_TAG_NAME_TRANSFORMER ? tagNameTransformer : undefined,
+				} as any);
+			},
+			{
+				theme: process.env.THEME_MODULE
+					? undefined
+					: {
+							detect: 'auto',
+						},
 				translation: {
 					name: 'de',
 				},
-			});
-		} catch (error) {
-			console.warn('Theme registration failed:', error);
-		}
+				transformTagName: ENABLE_TAG_NAME_TRANSFORMER ? tagNameTransformer : undefined,
+			},
+		);
+	} catch (error) {
+		console.warn('Theme registration failed:', error);
 	}
 
 	/**

packages/samples/react/webpack.config.js

@@ -8,6 +8,7 @@ module.exports = (...args) => {
 		new webpack.EnvironmentPlugin({
 			THEME_MODULE: '',
 			THEME_EXPORT: '',
+			ENABLE_TAG_NAME_TRANSFORMER: '',
 		}),
 	);
 	return config;

packages/test-tag-name-transformer/.gitignore

@@ -0,0 +1 @@
+test-results

packages/test-tag-name-transformer/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@public-ui/test-tag-name-transformer",
+	"private": true,
+	"version": "1.0.0",
+	"license": "EUPL-1.2",
+  "description": "Performs snapshot testing on the default theme with a tag name transformer enabled.",
+  "scripts": {
+    "test": "THEME_MODULE=theme ENABLE_TAG_NAME_TRANSFORMER=true kolibri-visual-test",
+    "test-update": "THEME_MODULE=theme ENABLE_TAG_NAME_TRANSFORMER=true kolibri-visual-test --update-snapshots theme-snapshots.spec.js"
+  },
+  "devDependencies": {
+    "@public-ui/theme-default": "workspace:*",
+    "@public-ui/visual-tests": "workspace:*"
+  }
+}

packages/test-tag-name-transformer/theme.js

@@ -0,0 +1,2 @@
+import { DEFAULT } from '@public-ui/theme-default';
+export default DEFAULT;

packages/tools/visual-tests/tests/axe-snapshots.spec.js

@@ -1,8 +1,8 @@
 import { test } from '@playwright/test';
 import { checkA11y, injectAxe } from 'axe-playwright';
-import path from 'path';
 import { ROUTES } from './sample-app.routes.js';
 
+const themeName = (process.env.THEME_EXPORT || 'default').toLocaleLowerCase();
 const rename = (snapshotName) => {
 	const result = snapshotName
 
@@ -19,7 +19,7 @@ const rename = (snapshotName) => {
 		.replace('-1-', '-')
 
 		// Make different snapshot folder for different themes
-		.replace('theme-snapshots.spec.js', `axe-${process.env.THEME_EXPORT.toLocaleLowerCase()}`)
+		.replace('theme-snapshots.spec.js', `axe-${themeName}`)
 		.replace('-snapshots', '');
 	return result;
 };
@@ -36,9 +36,6 @@ test.use({
 	},
 });
 
-/**
- * @todo stabilize and re-enable test
- */
 const blocklist = [];
 
 ROUTES.forEach((options, route) => {
@@ -74,7 +71,7 @@ ROUTES.forEach((options, route) => {
 			'html',
 			{
 				outputDirPath: outputPath.replace(/\/[^/]+$/, ''),
-				outputDir: `axe-${process.env.THEME_EXPORT.toLocaleLowerCase()}`,
+				outputDir: `axe-${themeName}`,
 				reportFileName: `${route.replace('/', '-')}.html`,
 			},
 		);

packages/tools/visual-tests/tests/theme-snapshots.spec.js

@@ -24,7 +24,7 @@ export const configureSnapshotPath =
 				.replace('-1-', '-')
 
 				// Make different snapshot folder for different themes
-				.replace('theme-snapshots.spec.js', `theme-${process.env.THEME_EXPORT.toLocaleLowerCase()}`)
+				.replace('theme-snapshots.spec.js', `theme-${(process.env.THEME_EXPORT || 'default').toLocaleLowerCase()}`)
 				.replace('-snapshots', '');
 			return result;
 		};
@@ -44,9 +44,6 @@ test.use({
 	},
 });
 
-/**
- * @todo stabilize and re-enable test
- */
 const blocklist = [];
 
 ROUTES.forEach((options, route) => {

pnpm-workspace.yaml

@@ -11,6 +11,7 @@ packages:
   - 'packages/samples/angular'
   - 'packages/samples/react'
   - 'packages/schema'
+  - 'packages/test-tag-name-transformer'
   - 'packages/themes'
   - 'packages/themes/bmf'
   - 'packages/themes/default'