@ui5/webcomponents-tools 2.7.0-rc.2 → 2.7.0

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.7.0](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0-rc.2...v2.7.0) (2025-02-03)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
 # [2.7.0-rc.2](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0-rc.1...v2.7.0-rc.2) (2025-01-30)
 
 **Note:** Version bump only for package @ui5/webcomponents-tools

package/components-package/cypress/support/commands.js

@@ -36,4 +36,33 @@
 //   }
 // }
 
-import "cypress-real-events";
+import "cypress-real-events";
+
+const realEventCmdCallback = (originalFn, element, ...args) => {
+	cy.get(element)
+		.should($el => {
+			if ($el[0].tagName.includes("-") && $el[0].shadowRoot) {
+				expect($el[0].shadowRoot.hasChildNodes()).to.be.true;
+			} else {
+				expect(true).to.be.true;
+			}
+		})
+		.and("be.visible")
+		.then(() => {
+			return originalFn(element, ...args)
+		});
+};
+
+const commands = [
+	"realClick",
+	"realHover",
+	"realTouch",
+	"realSwipe",
+	"realMouseDown",
+	"realMouseUp",
+	"realMouseMove"
+];
+
+commands.forEach(cmd => {
+	Cypress.Commands.overwrite(cmd, realEventCmdCallback)
+});

package/components-package/cypress/support/component.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="cypress" />
-import { RenderOptions, HTMLTemplateResult } from 'lit';
 import "cypress-real-events";
 
 export type Renderable = HTMLTemplateResult;
@@ -7,13 +6,13 @@ export interface MountUI5Options extends MountLitTemplateOptions {
 	ui5Configuration: object;
 }
 export type MountOptions = Partial<MountUI5Options>;
-export declare function mount<T extends keyof HTMLElementTagNameMap = any>(component: string | Renderable, options?: MountOptions): Cypress.Chainable<JQuery<HTMLElementTagNameMap[T]>>;
+export declare function mount<T extends keyof HTMLElementTagNameMap = any>(component: JSX.Element, options?: MountOptions): Cypress.Chainable<JQuery<HTMLElementTagNameMap[T]>>;
 declare global {
 	namespace Cypress {
 		interface Chainable {
 			/**
 			 * Mount your component into Cypress sandbox
-			 * @param component content to render by lit-html render function
+			 * @param component content to render by preact render function
 			 * @param options render options for custom rendering
 			 */
 			mount: typeof mount;

package/components-package/cypress/support/component.js

@@ -1,35 +1,46 @@
-import '@cypress/code-coverage/support'
-import { setupHooks } from '@cypress/mount-utils';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-import { mount } from 'cypress-ct-lit'
+import "@cypress/code-coverage/support";
+import { setupHooks, getContainerEl } from "@cypress/mount-utils";
+import { mount as preactMount } from "./cypress-ct-preact.js";
 import "./commands.js";
 
-let dispose;
-
-function cleanup() {
-	dispose?.();
-}
-
-function ui5Mount(component, options = {}) {
-	const configurationScript = document.head.querySelector("script[data-ui5-config]")
-	cleanup();
+function applyConfiguration(options) {
+	const configurationScript = document.head.querySelector("script[data-ui5-config]");
 
 	if (options.ui5Configuration) {
 		configurationScript.innerHTML = JSON.stringify(options.ui5Configuration);
-
-	}
-
-	dispose = () => {
-		configurationScript.innerHTML = "{}";
 	}
+}
 
-	if (typeof component === "string") {
-		return mount(unsafeHTML(component), options)
-	}
+function cleanup() {
+	preactMount(null, getContainerEl());
+}
 
-	return mount(component, options)
+function mount(component, options = {}) {
+	const container = getContainerEl();
+
+	// Apply custom configuration
+	applyConfiguration(options);
+
+	// Mount JSX Element
+	return cy.wrap({ preactMount })
+		.invoke("preactMount", component, container)
+		.then(() => {
+			cy.get(container)
+				.find("*")
+				.should($el => {
+					const shadowrootsExist = [...$el].every(el => {
+						if (el.tagName.includes("-") && el.shadowRoot) {
+							return el.shadowRoot.hasChildNodes();
+						}
+
+						return true;
+					})
+
+					expect(shadowrootsExist, "Custom elements with shadow DOM have content in their shadow DOM").to.be.true;
+				})
+		});
 }
 
 setupHooks(cleanup);
 
-Cypress.Commands.add('mount', ui5Mount)
+Cypress.Commands.add('mount', mount)

package/components-package/cypress/support/cypress-ct-preact.js

@@ -0,0 +1,11 @@
+import { render } from 'preact';
+
+function mount(component, container) {
+	render(null, container);
+
+	return render(component, container);
+}
+
+export {
+	mount,
+};

package/components-package/cypress.config.js

@@ -2,6 +2,16 @@ const { defineConfig } = require('cypress')
 const path = require("path");
 const coverageTask = require('@cypress/code-coverage/task');
 
+const suites = {
+	SUITE1: [
+		"**/specs/base/*.cy.{jsx,tsx}",
+		"**/specs/[A-I]*.cy.{js,jsx,ts,tsx}",
+	],
+	SUITE2: [
+		"**/specs/[^A-I]*.cy.{js,jsx,ts,tsx}",
+	],
+};
+
 module.exports = defineConfig({
 	component: {
 		setupNodeEvents(on, config) {
@@ -10,9 +20,8 @@ module.exports = defineConfig({
 		},
 		supportFile: path.join(__dirname, "cypress/support/component.js"),
 		indexHtmlFile: path.join(__dirname, "cypress/support/component-index.html"),
-		specPattern: ["**/specs/*.cy.{js,ts}", "**/specs/**/*.cy.{js,ts}"],
+		specPattern: suites[process.env.TEST_SUITE] || ["**/specs/**/*.cy.{js,ts,jsx,tsx}"],
 		devServer: {
-			framework: 'cypress-ct-lit',
 			bundler: 'vite',
 		}
 	},
@@ -21,4 +30,4 @@ module.exports = defineConfig({
 	scrollBehavior: false,
 	viewportHeight: 1080,
 	viewportWidth: 1440,
-})
+})

package/components-package/eslint.js

@@ -56,7 +56,7 @@ const getTsModeOverrides = () => {
 	};
 
 	const cypressConfiguration = {
-		"files": ["**/cypress/**/*.ts"],
+		"files": ["**/cypress/**/*.ts", "**/cypress/**/*.tsx"],
 
 		"plugins": [
 			"cypress"
@@ -69,6 +69,7 @@ const getTsModeOverrides = () => {
 		},
 		"rules": {
 			"max-nested-callbacks": 0,
+			"no-unused-expressions": 0,
 			"@typescript-eslint/no-namespace": "off",
 			"cypress/no-assigning-return-values": "error",
 			"cypress/no-unnecessary-waiting": "error",

package/components-package/nps.js

@@ -123,6 +123,8 @@ const getScripts = (options) => {
 		start: "nps prepare watch.devServer",
 		test: `node "${LIB}/test-runner/test-runner.js"`,
 		"test-cy-ci": `cross-env CYPRESS_COVERAGE=true yarn cypress run --component --browser chrome`,
+		"test-cy-ci-suite-1": `cross-env CYPRESS_COVERAGE=true TEST_SUITE=SUITE1 yarn cypress run --component --browser chrome`,
+		"test-cy-ci-suite-2": `cross-env CYPRESS_COVERAGE=true TEST_SUITE=SUITE2 yarn cypress run --component --browser chrome`,
 		"test-cy-open": `cross-env CYPRESS_COVERAGE=true yarn cypress open --component --browser chrome`,
 		"test-suite-1": `node "${LIB}/test-runner/test-runner.js" --suite suite1`,
 		"test-suite-2": `node "${LIB}/test-runner/test-runner.js" --suite suite2`,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ui5/webcomponents-tools",
-  "version": "2.7.0-rc.2",
+  "version": "2.7.0",
   "description": "UI5 Web Components: webcomponents.tools",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -64,6 +64,7 @@
     "postcss": "^8.4.5",
     "postcss-cli": "^9.1.0",
     "postcss-selector-parser": "^6.0.10",
+    "preact": "^10.25.4",
     "prompts": "^2.4.2",
     "properties-reader": "^2.2.0",
     "recursive-readdir": "^2.2.2",
@@ -84,10 +85,10 @@
     }
   },
   "devDependencies": {
-    "cypress-ct-lit": "^0.4.0",
+    "@cypress/mount-utils": "^4.1.2",
     "cypress-real-events": "^1.12.0",
     "esbuild": "^0.19.9",
     "yargs": "^17.5.1"
   },
-  "gitHead": "26546e81e1e1e3c9186a9540b979ec7032a8cf95"
+  "gitHead": "91c56c48e906a28c476cfe304bf13edbbbad34a5"
 }