src/Umbraco.Web.UI.Client/web-test-runner.config.mjs

import { esbuildPlugin } from '@web/dev-server-esbuild';
import { playwrightLauncher } from '@web/test-runner-playwright';
import { importMapsPlugin } from '@web/dev-server-import-maps';
import rollupCommonjs from '@rollup/plugin-commonjs';
import { fromRollup } from '@web/dev-server-rollup';
import { createImportMap } from './devops/importmap/index.js';

const commonjs = fromRollup(rollupCommonjs);

const mode = process.env.MODE || 'dev';
if (!['dev', 'prod'].includes(mode)) {
	throw new Error(`MODE must be "dev" or "prod", was "${mode}"`);
}

const silencedLogs = ['Lit is in dev mode.', 'Multiple versions of Lit loaded.'];

/** @type {import('@web/dev-server').DevServerConfig} */
export default {
	rootDir: '.',
	files: ['./src/**/*.test.ts'],
	nodeResolve: { exportConditions: mode === 'dev' ? ['development'] : [], preferBuiltins: false, browser: false },
	browsers: [playwrightLauncher({ product: 'chromium' }), playwrightLauncher({ product: 'webkit' })],
	coverageConfig: {
		reporters: ['text-summary'],
	},
	plugins: [
		importMapsPlugin({
			inject: {
				importMap: createImportMap({
					rootDir: './src',
					additionalImports: {
						'@umbraco-cms/internal/test-utils': './utils/test-utils.ts',
					},
					replaceModuleExtensions: true,
				}),
			},
		}),
		commonjs({
			include: ['node_modules/base64-js/**/*', 'node_modules/tinymce/**/*'],
		}),
		esbuildPlugin({ ts: true, tsconfig: './tsconfig.json', target: 'auto', json: true }),
	],
	filterBrowserLogs(log) {
		for (const arg of log.args) {
			if (typeof arg === 'string' && silencedLogs.some((l) => arg.includes(l))) {
				return false;
			}
		}
		return true;
	},
	testRunnerHtml: (testFramework, devMode) =>
		`<html lang="en-us">
			<head>
				<meta charset="UTF-8" />
				<meta name="viewport" content="width=device-width, initial-scale=1.0" />
				<link rel="icon" type="image/svg+xml" href="src/assets/favicon.svg" />
				<title>Umbraco</title>
				<base href="/" />
				<script>
					window.__UMBRACO_TEST_RUN_A11Y_TEST = ${(!devMode).toString()};
				</script>
				<script src="/node_modules/msw/lib/iife/index.js"></script>
				<link rel="stylesheet" href="src/css/user-defined.css">
				<link rel="stylesheet" href="node_modules/@umbraco-ui/uui-css/dist/uui-css.css">
				<link rel="stylesheet" href="src/css/umb-css.css">
				<script type="module">
					import '@umbraco-cms/backoffice/components';
				</script>
			</head>
      <body>
        <script type="module" src="${testFramework}"></script>
        <script type="module">
					import 'element-internals-polyfill';
					import '@umbraco-ui/uui';
        </script>
      </body>
    </html>`,
};
added packages and basic setup 2022-05-24 16:14:15 +02:00			`import { esbuildPlugin } from '@web/dev-server-esbuild';`
			`import { playwrightLauncher } from '@web/test-runner-playwright';`
set up import maps aliases in tests 2022-10-18 14:03:42 +02:00			`import { importMapsPlugin } from '@web/dev-server-import-maps';`
add rollup/commonjs plugin to web-test-runner to treat externals the same as we do on the production build (this helps with tinymce) 2023-11-08 12:03:50 +01:00			`import rollupCommonjs from '@rollup/plugin-commonjs';`
			`import { fromRollup } from '@web/dev-server-rollup';`
use create function in web test runner 2024-02-10 23:05:05 +01:00			`import { createImportMap } from './devops/importmap/index.js';`
add rollup/commonjs plugin to web-test-runner to treat externals the same as we do on the production build (this helps with tinymce) 2023-11-08 12:03:50 +01:00
			`const commonjs = fromRollup(rollupCommonjs);`
added packages and basic setup 2022-05-24 16:14:15 +02:00
cleanup after vite hacks in wtr and remove deprecated packages 2023-08-02 16:54:48 +02:00			`const mode = process.env.MODE \|\| 'dev';`
			`if (!['dev', 'prod'].includes(mode)) {`
			throw new Error(`MODE must be "dev" or "prod", was "${mode}"`);
			`}`
add logic to handle image imports in web-test-runner 2023-02-10 09:33:32 +01:00
fix test runner log filter 2024-07-03 11:57:13 +02:00			`const silencedLogs = ['Lit is in dev mode.', 'Multiple versions of Lit loaded.'];`

add logic to handle image imports in web-test-runner 2023-02-10 09:33:32 +01:00			`/** @type {import('@web/dev-server').DevServerConfig} */`
added packages and basic setup 2022-05-24 16:14:15 +02:00			`export default {`
cleanup after vite hacks in wtr and remove deprecated packages 2023-08-02 16:54:48 +02:00			`rootDir: '.',`
			`files: ['./src/*/.test.ts'],`
fix: instruct web-test-runner NOT to use the browser field in modules, since it messes with packages that also export an esm version 2024-05-22 11:56:19 +02:00			`nodeResolve: { exportConditions: mode === 'dev' ? ['development'] : [], preferBuiltins: false, browser: false },`
sort config of test runner 2023-12-08 12:36:46 +01:00			`browsers: [playwrightLauncher({ product: 'chromium' }), playwrightLauncher({ product: 'webkit' })],`
Update web-test-runner.config.mjs 2024-07-04 13:16:33 +02:00			`coverageConfig: {`
			`reporters: ['text-summary'],`
			`},`
set up import maps aliases in tests 2022-10-18 14:03:42 +02:00			`plugins: [`
			`importMapsPlugin({`
			`inject: {`
use create function in web test runner 2024-02-10 23:05:05 +01:00			`importMap: createImportMap({`
reuse import util for both tsconfig and test runner 2024-02-11 22:16:03 +01:00			`rootDir: './src',`
			`additionalImports: {`
add import alias's 2023-04-12 17:05:14 +02:00			`'@umbraco-cms/internal/test-utils': './utils/test-utils.ts',`
set up import maps aliases in tests 2022-10-18 14:03:42 +02:00			`},`
generate an umbraco-package.json file containing the general importmap of the backoffice 2024-02-13 11:57:03 +01:00			`replaceModuleExtensions: true,`
use create function in web test runner 2024-02-10 23:05:05 +01:00			`}),`
set up import maps aliases in tests 2022-10-18 14:03:42 +02:00			`},`
			`}),`
add rollup/commonjs plugin to web-test-runner to treat externals the same as we do on the production build (this helps with tinymce) 2023-11-08 12:03:50 +01:00			`commonjs({`
load global components in tests 2024-05-29 20:07:33 +02:00			`include: ['node_modules/base64-js/*/', 'node_modules/tinymce/*/'],`
add rollup/commonjs plugin to web-test-runner to treat externals the same as we do on the production build (this helps with tinymce) 2023-11-08 12:03:50 +01:00			`}),`
revamp web/test-runner config so that commonjs() is being run before esbuild but only on the modules that are actually only exported as CJS 2024-04-09 17:16:52 +02:00			`esbuildPlugin({ ts: true, tsconfig: './tsconfig.json', target: 'auto', json: true }),`
set up import maps aliases in tests 2022-10-18 14:03:42 +02:00			`],`
fix test runner log filter 2024-07-03 11:57:13 +02:00			`filterBrowserLogs(log) {`
			`for (const arg of log.args) {`
			`if (typeof arg === 'string' && silencedLogs.some((l) => arg.includes(l))) {`
			`return false;`
			`}`
			`}`
			`return true;`
			`},`
dev mode for testing 2023-12-07 13:23:33 +01:00			`testRunnerHtml: (testFramework, devMode) =>`
replace localization context with localize controller 2023-07-31 17:27:49 +02:00			`<html lang="en-us">
add css to test environment 2022-08-10 12:03:01 +02:00			`<head>`
import uui-css directly in app.ts, preview.js and web-test-runner.mjs to avoid 404 on the web-test-runner 2023-01-18 11:19:51 +01:00			`<meta charset="UTF-8" />`
			`<meta name="viewport" content="width=device-width, initial-scale=1.0" />`
update import map in test runner 2023-05-25 10:55:09 +02:00			`<link rel="icon" type="image/svg+xml" href="src/assets/favicon.svg" />`
import uui-css directly in app.ts, preview.js and web-test-runner.mjs to avoid 404 on the web-test-runner 2023-01-18 11:19:51 +01:00			`<title>Umbraco</title>`
			`<base href="/" />`
dev mode for testing 2023-12-07 13:23:33 +01:00			`<script>`
tests 2023-12-07 14:03:13 +01:00			`window.__UMBRACO_TEST_RUN_A11Y_TEST = ${(!devMode).toString()};`
dev mode for testing 2023-12-07 13:23:33 +01:00			`</script>`
load msw in test runner and allow requests to the management api 2023-05-15 11:49:17 +02:00			`<script src="/node_modules/msw/lib/iife/index.js"></script>`
feat: add a user-defined.css file (empty) that we load up front in the backoffice on the server 2024-05-21 17:14:22 +02:00			`<link rel="stylesheet" href="src/css/user-defined.css">`
import uui-css directly in app.ts, preview.js and web-test-runner.mjs to avoid 404 on the web-test-runner 2023-01-18 11:19:51 +01:00			`<link rel="stylesheet" href="node_modules/@umbraco-ui/uui-css/dist/uui-css.css">`
update import map in test runner 2023-05-25 10:55:09 +02:00			`<link rel="stylesheet" href="src/css/umb-css.css">`
load global components in tests 2024-05-29 20:07:33 +02:00			`<script type="module">`
			`import '@umbraco-cms/backoffice/components';`
			`</script>`
add css to test environment 2022-08-10 12:03:01 +02:00			`</head>`
added packages and basic setup 2022-05-24 16:14:15 +02:00			`<body>`
			`<script type="module" src="${testFramework}"></script>`
add import for @umbraco-ui/uui and router-slot to test runner config to correctly register implicit uui components 2022-08-09 15:38:53 +02:00			`<script type="module">`
			`import 'element-internals-polyfill';`
			`import '@umbraco-ui/uui';`
added polyfills 2022-05-25 13:11:54 +02:00			`</script>`
added packages and basic setup 2022-05-24 16:14:15 +02:00			`</body>`
			</html>`,
			`};`