chore: add testing package

package.json

@@ -90,6 +90,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/src/eslint.cjs");
+
+testEslint.forEach(override => {
+    config.overrides?.push(override);
+});
 
 module.exports = config;

packages/base/cypress.config.js

@@ -1,3 +1,3 @@
-import cypressConfig from "@ui5/webcomponents-tools/components-package/cypress.config.js";
+import cypressConfig from "@ui5/webcomponents-testing/src/cypress.config.js";
 
 export default cypressConfig;

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.1",
+    "@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/src/eslint.cjs");
+
+testEslint.forEach(override => {
+    config.overrides?.push(override);
+});
 
 module.exports = config;

packages/fiori/cypress.config.js

@@ -1,4 +1,4 @@
-import cypressConfig from "@ui5/webcomponents-tools/components-package/cypress.config.js";
+import cypressConfig from "@ui5/webcomponents-testing/src/cypress.config.js";
 import path from "path";
 import { fileURLToPath } from "node:url";
 

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/src/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.1",
+    "@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/src/eslint.cjs");
+
+testEslint.forEach(override => {
+    config.overrides?.push(override);
+});
 
 module.exports = config;

packages/main/cypress.config.js

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

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";
@@ -124,7 +124,7 @@ describe("Event bubbling", () => {
 						<ui5-option>Hello</ui5-option>
 						<ui5-option>World</ui5-option>
 						<ui5-option>Hello</ui5-option>
-					</ui5-select>					
+					</ui5-select>
 				</ui5-dialog>
 			</div>
 		`);

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/src/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.1",
+    "@ui5/webcomponents-testing": "0.0.0",
     "chromedriver": "^129.0.0",
-    "lit": "^2.0.0"
+    "lit-html": "^2.0.0"
   }
 }

packages/testing/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@ui5/webcomponents-testing",
+  "version": "0.0.0",
+  "description": "UI5 Web Components: webcomponents.testing",
+  "author": "SAP SE (https://www.sap.com)",
+  "license": "Apache-2.0",
+  "private": false,
+  "type": "module",
+  "keywords": [
+    "openui5",
+    "sapui5",
+    "ui5"
+  ],
+  "types": "./types/index.d.ts",
+  "scripts": {},
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/SAP/ui5-webcomponents.git",
+    "directory": "packages/testing"
+  },
+  "dependencies": {
+    "cypress": "^13.11.0",
+    "cypress-real-events": "^1.12.0",
+    "eslint": "^7.22.0",
+    "eslint-plugin-cypress": "^3.4.0",
+    "vite": "^5.4.8",
+    "cypress-ct-lit": "^0.5.0",
+    "@cypress/mount-utils": "^4.0.0"
+  }
+}

packages/tools/components-package/cypress.config.js → packages/testing/src/cypress.config.js

@@ -1,7 +1,11 @@
-const { defineConfig } = require('cypress')
-const path = require("path");
+import { defineConfig } from 'cypress';
+import path from 'path';
+import { fileURLToPath } from 'url';
 
-module.exports = defineConfig({
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default defineConfig({
 	component: {
 		supportFile: path.join(__dirname, "cypress/support/component.js"),
 		indexHtmlFile: path.join(__dirname, "cypress/support/component-index.html"),
@@ -16,4 +20,4 @@ module.exports = defineConfig({
 	scrollBehavior: false,
 	viewportHeight: 1080,
 	viewportWidth: 1440,
-})
+});

packages/tools/components-package/cypress/support/commands.js → packages/testing/src/cypress/support/commands.js

@@ -36,4 +36,32 @@
 //   }
 // }
 
-import "cypress-real-events";
+import "cypress-real-events";
+import { setupHooks } from '@cypress/mount-utils';
+import { mount } from 'cypress-ct-lit'
+
+let dispose;
+
+function cleanup() {
+	dispose?.();
+}
+
+function ui5Mount(component, options = {}) {
+	const configurationScript = document.head.querySelector("script[data-ui5-config]")
+	cleanup();
+
+	if (options.ui5Configuration) {
+		configurationScript.innerHTML = JSON.stringify(options.ui5Configuration);
+
+	}
+
+	dispose = () => {
+		configurationScript.innerHTML = "{}";
+	}
+
+	return mount(component, options)
+}
+
+setupHooks(cleanup);
+
+Cypress.Commands.add('mount', ui5Mount)

packages/testing/src/cypress/support/component.js

@@ -0,0 +1 @@
+import "./commands.js";

packages/testing/src/eslint.cjs

@@ -0,0 +1,32 @@
+module.exports = [{
+	"files": ["**/cypress/**/*.ts"],
+
+	"plugins": [
+		"cypress"
+	],
+	extends: [
+		"plugin:cypress/recommended"
+	],
+	"env": {
+		"cypress/globals": true
+	},
+	"rules": {
+		"max-nested-callbacks": 0,
+		"@typescript-eslint/no-namespace": "off",
+		"cypress/no-assigning-return-values": "error",
+		"cypress/no-unnecessary-waiting": "error",
+		"cypress/assertion-before-screenshot": "warn",
+		"cypress/no-force": "warn",
+		"cypress/no-async-tests": "error",
+		"cypress/no-async-before": "error",
+		"cypress/no-pause": "error",
+		"import/no-extraneous-dependencies": [
+			"error",
+			{
+				"devDependencies": [
+					"**/cypress/**/*.ts"
+				]
+			}
+		]
+	}
+}];

packages/testing/types/index.d.ts

@@ -0,0 +1 @@
+import "../src/cypress/support/component"