chore: add testing package

package.json

@@ -91,6 +91,7 @@
     "packages/main",
     "packages/compat",
     "packages/ai",
+    "packages/testing",
     "packages/fiori",
     "packages/icons",
     "packages/icons-business-suite",

packages/base/.eslintrc.cjs

@@ -1,3 +1,8 @@
 const config = require("@ui5/webcomponents-tools/components-package/eslint.js");
+const testEslint = require("@ui5/webcomponents-testing/eslint.cjs");
+
+testEslint.forEach(override => {
+    config.overrides?.push(override);
+});
 
 module.exports = config;

packages/base/cypress.config.js

@@ -1,3 +1,10 @@
-import cypressConfig from "@ui5/webcomponents-tools/components-package/cypress.config.js";
+import { defineCypressConfig } from "@ui5/webcomponents-testing/cypress/config.js";
+import viteConfig from "../../vite.config";
 
-export default cypressConfig;
+export default defineCypressConfig({
+	component: {
+		devServer: {
+			viteConfig: viteConfig
+		}
+	}
+});

packages/base/cypress/support/component.ts

@@ -0,0 +1 @@
+import "@ui5/webcomponents-testing/cypress/support/component.js";

packages/base/cypress/tsconfig.json

@@ -4,7 +4,7 @@
 		"./**/*"
 	],
 	"compilerOptions": {
-		"types": ["@ui5/webcomponents-tools"],
+		"types": ["@ui5/webcomponents-testing"],
 		"outDir": "dist",
 		"composite": true,
 		"tsBuildInfoFile": "dist/.tsbuildinfobuild",

packages/base/package.json

@@ -53,6 +53,7 @@
   "devDependencies": {
     "@openui5/sap.ui.core": "1.120.17",
     "@ui5/webcomponents-tools": "2.4.0-rc.3",
+    "@ui5/webcomponents-testing": "0.0.0",
     "chromedriver": "^129.0.0",
     "clean-css": "^5.2.2",
     "copy-and-watch": "^0.1.5",

packages/base/tsconfig.json

@@ -5,7 +5,6 @@
 		"src/global.d.ts",
 	],
 	"compilerOptions": {
-		"types": ["@ui5/webcomponents-tools"],
 		"outDir": "dist",
 		"composite": true,
 		"rootDir": "src",

packages/fiori/.eslintrc.cjs

@@ -1,3 +1,8 @@
 const config = require("@ui5/webcomponents-tools/components-package/eslint.js");
+const testEslint = require("@ui5/webcomponents-testing/eslint.cjs");
+
+testEslint.forEach(override => {
+    config.overrides?.push(override);
+});
 
 module.exports = config;

packages/fiori/cypress.config.js

@@ -1,10 +1,10 @@
-import cypressConfig from "@ui5/webcomponents-tools/components-package/cypress.config.js";
-import path from "path";
-import { fileURLToPath } from "node:url";
+import { defineCypressConfig } from "@ui5/webcomponents-testing";
+import viteConfig from "../../vite.config";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-cypressConfig.component.supportFile = path.join(__dirname, "cypress/support/component.ts");
-
-export default cypressConfig;
+export default defineCypressConfig({
+	component: {
+		devServer: {
+			viteConfig: viteConfig
+		}
+	}
+});

packages/fiori/cypress/specs/BarcodeScannerDialog.cy.ts

@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "@ui5/webcomponents-icons/dist/camera.js";
 import "../../src/BarcodeScannerDialog.js";
 import type BarcodeScannerDialog from "../../src/BarcodeScannerDialog.js";

packages/fiori/cypress/specs/FCL.cy.ts

@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import { setAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
 import "../../src/FlexibleColumnLayout.js";
 

packages/fiori/cypress/specs/Page.cy.ts

@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../src/Page.js";
 import "@ui5/webcomponents/dist/Bar.js";
 import "@ui5/webcomponents/dist/Button.js";

packages/fiori/cypress/support/component.ts

@@ -1,3 +1,3 @@
-import "@ui5/webcomponents-tools/components-package/cypress/support/component.js";
+import "@ui5/webcomponents-testing/cypress/support/component.js";
 
 import "./commands.js";

packages/fiori/cypress/tsconfig.json

@@ -4,7 +4,7 @@
 		"./**/*"
 	],
 	"compilerOptions": {
-		"types": ["@ui5/webcomponents-tools"],
+		"types": ["@ui5/webcomponents-testing"],
 		"composite": true,
 		"tsBuildInfoFile": "dist/.tsbuildinfobuild",
 		"paths": {

packages/fiori/package.json

@@ -61,7 +61,8 @@
   },
   "devDependencies": {
     "@ui5/webcomponents-tools": "2.4.0-rc.3",
+    "@ui5/webcomponents-testing": "0.0.0",
     "chromedriver": "^129.0.0",
-    "lit": "^2.0.0"
+    "lit-html": "^2.0.0"
   }
 }

packages/main/.eslintrc.cjs

@@ -1,3 +1,8 @@
 const config = require("@ui5/webcomponents-tools/components-package/eslint.js");
+const testEslint = require("@ui5/webcomponents-testing/eslint.cjs");
+
+testEslint.forEach(override => {
+    config.overrides?.push(override);
+});
 
 module.exports = config;

packages/main/cypress.config.js

@@ -1,10 +1,10 @@
-import cypressConfig from "@ui5/webcomponents-tools/components-package/cypress.config.js";
-import path from "path";
-import { fileURLToPath } from "node:url";
+import { defineCypressConfig } from "@ui5/webcomponents-testing";
+import viteConfig from "../../vite.config";
 
-const __filename = fileURLToPath(import.meta.url);
-const __dirname = path.dirname(__filename);
-
-cypressConfig.component.supportFile = path.join(__dirname, "cypress/support/component.ts");
-
-export default cypressConfig;
+export default defineCypressConfig({
+	component: {
+		devServer: {
+			viteConfig: viteConfig
+		}
+	}
+});

packages/main/cypress/specs/Button.cy.ts

@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../src/Button.js";
 import type Button from "../../src/Button.js";
 import "@ui5/webcomponents-icons/dist/download.js";

packages/main/cypress/specs/Eventing.cy.ts

@@ -1,4 +1,4 @@
-// import { html } from "lit";
+// import { html } from "lit-html";
 import "../../src/Button.js";
 
 describe("Eventing", () => {

packages/main/cypress/specs/F6.cy.ts

@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "@ui5/webcomponents-base/dist/features/F6Navigation.js";
 import "../../src/Button.js";
 

packages/main/cypress/specs/Form.cy.ts

@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../src/Form.js";
 import "../../src/FormItem.js";
 import "../../src/FormGroup.js";

packages/main/cypress/specs/FormSupport.cy.ts

@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../src/Button.js";
 import "../../src/CheckBox.js";
 import "../../src/ColorPicker.js";

packages/main/cypress/specs/List.cy.ts

@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../src/List.js";
 import type List from "../../src/List.js";
 

packages/main/cypress/specs/LitKeyFunction.cy.ts

@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../src/MultiComboBox.js";
 import "../../src/MultiComboBoxItem.js";
 

packages/main/cypress/specs/Menu.cy.ts

@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../src/Button.js";
 import "../../src/Menu.js";
 import "../../src/MenuItem.js";

packages/main/cypress/specs/RTL.cy.ts

@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../src/CheckBox.js";
 
 describe("RTL", () => {

packages/main/cypress/specs/ResponsivePopover.mobile.cy.ts

@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../src/ResponsivePopover.js";
 import "../../src/Button.js";
 import "../../src/Input.js";

packages/main/cypress/specs/Select.cy.ts

@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../src/Select.js";
 import "../../src/Option.js";
 import "../../src/OptionCustom.js";

packages/main/cypress/specs/TableLoading.cy.ts

@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../src/Table.js";
 import "../../src/TableHeaderRow.js";
 import "../../src/TableCell.js";

packages/main/cypress/specs/TextArea.cy.ts

@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../src/TextArea.js";
 import "../../src/Label.js";
 

packages/main/cypress/specs/base/AriaLabelHelper.cy.ts

@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../../src/Label.js";
 import "../../../src/Input.js";
 

packages/main/cypress/specs/base/Events.cy.ts

@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../../src/Dialog.js";
 import "../../../src/Select.js";
 import "../../../src/Option.js";
@@ -126,8 +126,8 @@ describe("Event bubbling", () => {
 						<ui5-option>Hello</ui5-option>
 						<ui5-option>World</ui5-option>
 						<ui5-option>Hello</ui5-option>
-					</ui5-select>	
-					
+					</ui5-select>
+
 					<ui5-multi-combobox id="myMCB">
 						<ui5-mcb-item text="Cosy"></ui5-mcb-item>
 						<ui5-mcb-item selected text="Compact"></ui5-mcb-item>

packages/main/cypress/specs/base/IconCollection.cy.ts

@@ -1,7 +1,7 @@
 import "./css/redfish.custom.theme.css";
 import getEffectiveIconCollection from "@ui5/webcomponents-base/dist/asset-registries/util/getIconCollectionByTheme.js";
 import { setTheme, isLegacyThemeFamily } from "@ui5/webcomponents-base/dist/config/Theme.js";
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../../src/Assets.js";
 import "../../../src/Icon.js";
 

packages/main/cypress/specs/base/IgnoreCustomElements.cy.ts

@@ -1,4 +1,4 @@
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../../src/Card.js";
 import "../../../src/CardHeader.js";
 

packages/main/cypress/specs/base/Tooltips.cy.ts

@@ -1,5 +1,5 @@
 import { setEnableDefaultTooltips } from "@ui5/webcomponents-base/dist/config/Tooltips.js";
-import { html } from "lit";
+import { html } from "lit-html";
 import "../../../src/Icon.js";
 import "../../../src/Button.js";
 import "../../../src/ToggleButton.js";

packages/main/cypress/support/component.ts

@@ -1,3 +1,3 @@
-import "@ui5/webcomponents-tools/components-package/cypress/support/component.js";
+import "@ui5/webcomponents-testing/cypress/support/component.js";
 
 import "./commands.js";

packages/main/cypress/tsconfig.json

@@ -4,7 +4,7 @@
 		"./**/*"
 	],
 	"compilerOptions": {
-		"types": ["@ui5/webcomponents-tools"],
+		"types": ["@ui5/webcomponents-testing"],
 		"composite": true,
 		"tsBuildInfoFile": "dist/.tsbuildinfobuild",
 		"paths": {

packages/main/package.json

@@ -59,7 +59,8 @@
   },
   "devDependencies": {
     "@ui5/webcomponents-tools": "2.4.0-rc.3",
+    "@ui5/webcomponents-testing": "0.0.0",
     "chromedriver": "^129.0.0",
-    "lit": "^2.0.0"
+    "lit-html": "^2.0.0"
   }
 }

packages/testing/.eslintrc.js

@@ -0,0 +1,9 @@
+import { config } from "@ui5/webcomponents-tools/components-package/eslint.js";
+
+import testEslint from "./src/eslint.cjs";
+
+testEslint.forEach(override => {
+	config.overrides?.push(override);
+});
+
+export default config;

packages/testing/cypress/config.d.ts

@@ -0,0 +1,4 @@
+import { defineConfig } from "cypress"
+
+declare const defineCypressConfig: typeof defineConfig;
+export { defineCypressConfig };

packages/testing/cypress/config.js

@@ -0,0 +1,47 @@
+import { defineConfig } from 'cypress';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { existsSync } from 'fs';
+import merge from "deepmerge";
+
+const __processDir = process.cwd();
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+const indexHtmlFilePath = "./support/component-index.html"; // relative to the config file
+
+const intialConfig = () => ({
+	component: {
+		specPattern: ["**/specs/*.cy.{js,ts}", "**/specs/**/*.cy.{js,ts}"],
+		devServer: {
+			framework: 'cypress-ct-lit',
+			bundler: 'vite',
+		}
+	},
+	video: false,
+	screenshotOnRunFailure: false,
+	scrollBehavior: false,
+	viewportHeight: 1080,
+	viewportWidth: 1440,
+})
+
+const defineCypressConfig = (externalConrfig = {}) => {
+	let indexHtmlFile;
+	const config = intialConfig();
+
+	if (externalConrfig.component?.indexHtmlFile) {
+		indexHtmlFile = path.join(__processDir, externalConrfig.component.indexHtmlFile)
+	} else if (!existsSync(path.join(__processDir, "cypress", indexHtmlFilePath))) {
+		indexHtmlFile = path.join(__dirname, indexHtmlFilePath);
+	}
+
+	if (!existsSync(path.join(__processDir, "vite.config.js")) && !externalConrfig.component?.devServer?.viteConfig) {
+		config.component.devServer.viteConfig = import.meta.resolve("@ui5/webcomponents-tools/components-package/vite.config.js");
+	}
+
+	config.component.indexHtmlFile = indexHtmlFile;
+
+	return defineConfig(merge(config, externalConrfig));
+};
+
+export { defineCypressConfig }

packages/testing/cypress/support/commands.js

@@ -0,0 +1 @@
+import "cypress-real-events";