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

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.8.0-rc.0](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0...v2.8.0-rc.0) (2025-02-06)
+
+**Note:** Version bump only for package @ui5/webcomponents-tools
+
+
+
+
+
+# [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,31 @@
 //   }
 // }
 
-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(), "Custom elements with shadow DOM have content in their shadow DOM").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(component: JSX.Element, options?: MountOptions): CypressChainable<JQuery<HTMLElement>>;
 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 applyConfiguration(options) {
+	const configurationScript = document.head.querySelector("script[data-ui5-config]");
+
+	if (options.ui5Configuration) {
+		configurationScript.innerHTML = JSON.stringify(options.ui5Configuration);
+	}
+}
 
 function cleanup() {
-	dispose?.();
+	preactMount(null, getContainerEl());
 }
 
-function ui5Mount(component, options = {}) {
-	const configurationScript = document.head.querySelector("script[data-ui5-config]")
-	cleanup();
+function mount(component, options = {}) {
+	const container = getContainerEl();
 
-	if (options.ui5Configuration) {
-		configurationScript.innerHTML = JSON.stringify(options.ui5Configuration);
+	// Apply custom configuration
+	applyConfiguration(options);
 
-	}
+	// Mount JSX Element
+	preactMount(component, container);
 
-	dispose = () => {
-		configurationScript.innerHTML = "{}";
-	}
+	cy.get(container)
+	.find("*")
+	.should($el => {
+		const shadowrootsExist = [...$el].every(el => {
+			if (el.tagName.includes("-") && el.shadowRoot) {
+				return el.shadowRoot.hasChildNodes();
+			}
 
-	if (typeof component === "string") {
-		return mount(unsafeHTML(component), options)
-	}
+			return true;
+		})
+
+		expect(shadowrootsExist, "Custom elements with shadow DOM have content in their shadow DOM").to.be.true;
+	})
 
-	return mount(component, options)
+	return cy.get(container);
 }
 
 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.8.0-rc.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": "8ec6a8928a1f691e8ca272f0f2c32f49e46c6992"
 }