@ui5/webcomponents-base 2.7.0-rc.1 → 2.7.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 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)
+
+
+### Bug Fixes
+
+* **framework:** improve check for native popovers ([#10745](https://github.com/SAP/ui5-webcomponents/issues/10745)) ([f21f9b8](https://github.com/SAP/ui5-webcomponents/commit/f21f9b8835c7081235acc79d067b6e0a77feccbd))
+
+
+
+
+
+# [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)
+
+
+### Bug Fixes
+
+* **f6navigation:** fast navigation in certain container only ([#10485](https://github.com/SAP/ui5-webcomponents/issues/10485)) ([4b2ab63](https://github.com/SAP/ui5-webcomponents/commit/4b2ab63cae9b175f07d266e4150a587756cd7f6c))
+
+
+
+
+
 # [2.7.0-rc.1](https://github.com/SAP/ui5-webcomponents/compare/v2.7.0-rc.0...v2.7.0-rc.1) (2025-01-23)
 
 

package/cypress/specs/{Accessor.cy.ts → Accessor.cy.tsx}

@@ -1,8 +1,8 @@
-import "../../test/test-elements/Accessor.js";
+import Accessor from "../../test/test-elements/Accessor.js";
 
 describe("Framework boot", () => {
 	it("Setting property updates attribute, state and DOM", () => {
-		cy.mount(`<ui5-test-accessor></ui5-test-accessor>`);
+		cy.mount(<Accessor></Accessor>);
 
 		cy.get("[ui5-test-accessor]")
 			.as("testAccessor")
@@ -36,7 +36,7 @@ describe("Framework boot", () => {
 	});
 
 	it("Setting attribute updates property, state and DOM", () => {
-		cy.mount(`<ui5-test-accessor></ui5-test-accessor>`);
+		cy.mount(<Accessor></Accessor>);
 
 		cy.get("[ui5-test-accessor]")
 			.as("testAccessor")
@@ -70,7 +70,7 @@ describe("Framework boot", () => {
 	});
 
 	it("should stop searching for accessors when HTMLElement is reached", () => {
-		cy.mount(`<ui5-test-accessor></ui5-test-accessor>`);
+		cy.mount(<Accessor></Accessor>);
 
 		cy.get("[ui5-test-accessor]")
 			.invoke("prop", "title")

package/cypress/specs/{ConfigurationScript.cy.ts → ConfigurationScript.cy.tsx}

@@ -1,6 +1,7 @@
 import { getAnimationMode } from "../../src/config/AnimationMode.js";
 import { getCalendarType } from "../../src/config/CalendarType.js";
 import { getDefaultFontLoading } from "../../src/config/Fonts.js";
+import TestGeneric from "../../test/test-elements/Generic.js";
 import { getFirstDayOfWeek, getLegacyDateCalendarCustomizing } from "../../src/config/FormatSettings.js";
 import { getLanguage } from "../../src/config/Language.js";
 import { getNoConflict } from "../../src/config/NoConflict.js";
@@ -43,7 +44,7 @@ describe("Configuration script", () => {
 	};
 
 	before(() => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`, {
+		cy.mount(<TestGeneric />, {
 			ui5Configuration: configurationObject,
 		});
 

package/cypress/specs/{ConfigurationURL.cy.ts → ConfigurationURL.cy.tsx}

@@ -1,5 +1,5 @@
 import { internals } from "../../src/Location.js";
-import "../../test/test-elements/Generic.js";
+import TestGeneric from "../../test/test-elements/Generic.js";
 import { resetConfiguration } from "../../src/InitialConfiguration.js";
 import { getLanguage } from "../../src/config/Language.js";
 import { getCalendarType } from "../../src/config/CalendarType.js";
@@ -23,7 +23,7 @@ describe("Some settings can be set via SAP UI URL params", () => {
 			.invoke("search")
 			.should("be.equal", searchParams);
 
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<TestGeneric />);
 	});
 
 	it("Tests that language is applied", () => {
@@ -66,7 +66,7 @@ describe("Different themeRoot configurations", () => {
 			.invoke("search")
 			.should("be.equal", searchParams);
 
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<TestGeneric />);
 
 		cy.wrap({ getThemeRoot })
 			.invoke("getThemeRoot")
@@ -87,7 +87,7 @@ describe("Different themeRoot configurations", () => {
 			.invoke("search")
 			.should("be.equal", searchParams);
 
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<TestGeneric />);
 
 		cy.wrap({ getThemeRoot })
 			.invoke("getThemeRoot")
@@ -108,7 +108,7 @@ describe("Different themeRoot configurations", () => {
 			.invoke("search")
 			.should("be.equal", searchParams);
 
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<TestGeneric />);
 
 		cy.wrap({ getThemeRoot })
 			.invoke("getThemeRoot")
@@ -134,7 +134,7 @@ describe("Some settings can be set via SAP URL params", () => {
 			.invoke("search")
 			.should("be.equal", searchParams);
 
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<TestGeneric />);
 	});
 
 	it("Tests that language is applied via sap-ui-language", () => {
@@ -165,7 +165,7 @@ describe("Some settings can be set via SAP UI URL params", () => {
 			.invoke("search")
 			.should("be.equal", searchParams);
 
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<TestGeneric />);
 	});
 
 	it("Tests that language is applied via sap-ui-language", () => {

package/cypress/specs/{CustomMount.cy.ts → CustomMount.cy.tsx}

@@ -2,7 +2,7 @@ import { getAnimationMode } from "../../src/config/AnimationMode.js";
 
 describe("Custom mount", () => {
 	it("mount", () => {
-		cy.mount(`<button>Test</button>`);
+		cy.mount(<button>Test</button>);
 
 		cy.get("button")
 			.should("exist")
@@ -12,7 +12,7 @@ describe("Custom mount", () => {
 	it("mount with configuration", () => {
 		const configurationObject = { "animationMode": "basic" };
 
-		cy.mount(`<button>Test with configuration</button>`, {
+		cy.mount(<button>Test with configuration</button>, {
 			ui5Configuration: configurationObject,
 		});
 

package/cypress/specs/{CustomTheme.cy.ts → CustomTheme.cy.tsx}

@@ -1,7 +1,7 @@
 import { registerThemePropertiesLoader } from "../../src/AssetRegistry.js";
 import { setTheme } from "../../src/config/Theme.js";
 import { getCurrentRuntimeIndex } from "../../src/Runtimes.js";
-import "../../test/test-elements/Generic.js";
+import TestGeneric from "../../test/test-elements/Generic.js";
 
 describe("Custom themes can be registered", () => {
 	it("Tests that theme parameters are changed on theme change", () => {
@@ -10,7 +10,7 @@ describe("Custom themes can be registered", () => {
 		const currentRuntime = 0;
 		const dataPropAttr = `data-ui5-component-properties-${currentRuntime}`;
 
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<TestGeneric />);
 
 		cy.wrap({ getCurrentRuntimeIndex })
 			.invoke("getCurrentRuntimeIndex")

package/cypress/specs/{UI5ElementInvalidation.cy.ts → UI5ElementInvalidation.cy.tsx}

@@ -1,9 +1,14 @@
 import type UI5Element from "../../src/UI5Element.js";
-import "../../test/test-elements/Generic.js";
+import Generic from "../../test/test-elements/Generic.js";
 
 describe("Invalidation works", () => {
 	it("Tests that changing a property invalidates", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
+
+		cy.get<Generic>("[ui5-test-generic]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric")
@@ -22,10 +27,15 @@ describe("Invalidation works", () => {
 	});
 
 	it("Tests that setting a property to the same value does not invalidate", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
 
 		const text = "new value";
 
+		cy.get<Generic>("[ui5-test-generic]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
+
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric")
 			.invoke("prop", "strProp", text)
@@ -41,11 +51,16 @@ describe("Invalidation works", () => {
 	});
 
 	it("Tests that setting a property of type Object always invalidates", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
 
 		const obj = {};
 		const otherObj = {};
 
+		cy.get<Generic>("[ui5-test-generic]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
+
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric")
 			.invoke("prop", "objectProp", obj)
@@ -61,11 +76,16 @@ describe("Invalidation works", () => {
 	});
 
 	it("Tests that setting an array property always invalidates", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
 
 		const arr: Array<string> = [];
 		const otherArr: Array<string> = [];
 
+		cy.get<Generic>("[ui5-test-generic]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
+
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric")
 			.invoke("prop", "multiProp", arr)
@@ -81,7 +101,12 @@ describe("Invalidation works", () => {
 	});
 
 	it("Tests that adding a child invalidates", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
+
+		cy.get<Generic>("[ui5-test-generic]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric")
@@ -100,10 +125,15 @@ describe("Invalidation works", () => {
 	});
 
 	it("Tests that removing a child invalidates", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
 
 		const div = document.createElement("div");
 
+		cy.get<Generic>("[ui5-test-generic]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
+
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric")
 			.then($testGeneric => {
@@ -128,7 +158,12 @@ describe("Invalidation works", () => {
 	});
 
 	it("Tests that modifying textContent invalidates", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
+
+		cy.get<Generic>("[ui5-test-generic]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric")
@@ -154,7 +189,12 @@ describe("Invalidation works", () => {
 	});
 
 	it("Tests that modifying nodeValue invalidates", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
+
+		cy.get<Generic>("[ui5-test-generic]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric")
@@ -180,7 +220,12 @@ describe("Invalidation works", () => {
 	});
 
 	it("Tests that multiple invalidations result in a single rendering", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
+
+		cy.get<Generic>("[ui5-test-generic]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric");

package/cypress/specs/{UI5ElementLifecycle.cy.ts → UI5ElementLifecycle.cy.tsx}

@@ -1,11 +1,11 @@
 import type UI5Element from "../../src/UI5Element.js";
-import "../../test/test-elements/Generic.js";
+import Generic from "../../test/test-elements/Generic.js";
 
 describe("Lifecycle works", () => {
 	it("Tests that changing a property invalidates", () => {
 		const el = document.createElement("ui5-test-generic");
 
-		cy.mount(`<div id="container"></div>`);
+		cy.mount(<div id="container"></div>);
 
 		cy.spy<UI5Element>((el as UI5Element), "onBeforeRendering").as("onBeforeRendering");
 
@@ -32,7 +32,7 @@ describe("Lifecycle works", () => {
 	});
 
 	it("Tests element invalidation callbacks", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric")
@@ -56,7 +56,7 @@ describe("Lifecycle works", () => {
 	it("Tests element destruction callback", () => {
 		const el = document.createElement("ui5-test-generic");
 
-		cy.mount(`<div id="container"></div>`);
+		cy.mount(<div id="container"></div>);
 
 		cy.spy<UI5Element>((el as UI5Element), "onExitDOM").as("onExitDOM");
 		cy.spy<UI5Element>((el as UI5Element), "onEnterDOM").as("onEnterDOM");

package/cypress/specs/{UI5ElementListenForChildPropChanges.cy.ts → UI5ElementListenForChildPropChanges.cy.tsx}

@@ -1,13 +1,20 @@
 import type UI5Element from "../../src/UI5Element.js";
 
-import "../../test/test-elements/Parent.js";
-import "../../test/test-elements/Child.js";
+import Parent from "../../test/test-elements/Parent.js";
+import Child from "../../test/test-elements/Child.js";
 
 describe("Invalidation works", () => {
 	it("Tests that changing a monitored property of a child invalidates the parent", () => {
-		cy.mount(`<ui5-test-parent>
-		<ui5-test-child></ui5-test-child>
-	</ui5-test-parent>`);
+		cy.mount(
+			<Parent>
+				<Child></Child>
+			</Parent>
+		);
+
+		cy.get<Parent>("[ui5-test-parent]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
 
 		cy.get("[ui5-test-parent]")
 			.as("testParent")
@@ -23,9 +30,16 @@ describe("Invalidation works", () => {
 	});
 
 	it("Tests that changing a non-monitored property of a child does not invalidate the parent", () => {
-		cy.mount(`<ui5-test-parent>
-		<ui5-test-child></ui5-test-child>
-	</ui5-test-parent>`);
+		cy.mount(
+			<Parent>
+				<Child></Child>
+			</Parent>
+		);
+
+		cy.get<Parent>("[ui5-test-parent]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
 
 		cy.get("[ui5-test-parent]")
 			.as("testParent")
@@ -41,9 +55,16 @@ describe("Invalidation works", () => {
 	});
 
 	it("Tests that changing a non-monitored property of a child does not invalidate the parent", () => {
-		cy.mount(`<ui5-test-parent>
-		<ui5-test-child slot="items"></ui5-test-child>
-	</ui5-test-parent>`);
+		cy.mount(
+			<Parent>
+				<Child slot="items"></Child>
+			</Parent>
+		);
+
+		cy.get<Parent>("[ui5-test-parent]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
 
 		cy.get("[ui5-test-parent]")
 			.as("testParent")

package/cypress/specs/{UI5ElementMetadataExt.cy.ts → UI5ElementMetadataExt.cy.tsx}

@@ -1,9 +1,9 @@
 import type UI5Element from "../../src/UI5Element.js";
-import "../../test/test-elements/GenericExt.js";
+import GenericExt from "../../test/test-elements/GenericExt.js";
 
 describe("Invalidation works", () => {
 	it("Tests that changing a monitored property of a child invalidates the parent", () => {
-		cy.mount(`<ui5-test-generic-ext></ui5-test-generic-ext>`);
+		cy.mount(<GenericExt></GenericExt>);
 
 		cy.get("[ui5-test-generic-ext]")
 			.then($el => {
@@ -33,7 +33,7 @@ describe("Invalidation works", () => {
 	});
 
 	it("When extending metadata, property defaultValue can be modified", () => {
-		cy.mount(`<ui5-test-generic-ext></ui5-test-generic-ext>`);
+		cy.mount(<GenericExt></GenericExt>);
 
 		cy.get("[ui5-test-generic-ext]")
 			.invoke("attr", "str-prop")

package/cypress/specs/{UI5ElementPropertyValidation.cy.ts → UI5ElementPropertyValidation.cy.tsx}

@@ -1,8 +1,8 @@
-import "../../test/test-elements/Generic.js";
+import Generic from "../../test/test-elements/Generic.js";
 
 describe("Properties can only have values, restricted to their types", () => {
 	it("String property enforced to string", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric");

package/cypress/specs/{UI5ElementPropsAndAttrs.cy.ts → UI5ElementPropsAndAttrs.cy.tsx}

@@ -1,8 +1,8 @@
-import "../../test/test-elements/Generic.js";
+import Generic from "../../test/test-elements/Generic.js";
 
 describe("Properties and attributes convert to each other", () => {
 	it("Tests that properties with default values are initialized with the default value", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric");
@@ -13,7 +13,7 @@ describe("Properties and attributes convert to each other", () => {
 	});
 
 	it("Tests that prop-attr conversion works for string properties", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric");
@@ -33,7 +33,7 @@ describe("Properties and attributes convert to each other", () => {
 	});
 
 	it("Tests that prop-attr conversion works for boolean properties", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric");
@@ -66,7 +66,7 @@ describe("Properties and attributes convert to each other", () => {
 	});
 
 	it("Tests that object properties have no attributes", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric");
@@ -79,7 +79,7 @@ describe("Properties and attributes convert to each other", () => {
 	});
 
 	it("Tests that array properties have no attributes", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric");
@@ -92,7 +92,7 @@ describe("Properties and attributes convert to each other", () => {
 	});
 
 	it("Tests that noAttribute properties have no attributes", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric");
@@ -105,7 +105,7 @@ describe("Properties and attributes convert to each other", () => {
 	});
 
 	it("Tests that properties with default values do automatically set attributes", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
 
 		cy.get("[ui5-test-generic]")
 			.should("have.attr", "default-value-prop", "Hello");

package/cypress/specs/{UI5ElementShadowDOM.cy.ts → UI5ElementShadowDOM.cy.tsx}

@@ -1,9 +1,9 @@
-import "../../test/test-elements/Generic.js";
-import "../../test/test-elements/NoShadowDOM.js";
+import Generic from "../../test/test-elements/Generic.js";
+import NoShadowDOM from "../../test/test-elements/NoShadowDOM.js";
 
 describe("The framework can define web components", () => {
 	it("Tests that element's Shadow DOM is rendered if it has a template", () => {
-		cy.mount(`<ui5-test-generic></ui5-test-generic>`);
+		cy.mount(<Generic></Generic>);
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric")
@@ -19,7 +19,7 @@ describe("The framework can define web components", () => {
 	});
 
 	it("Tests that element's Shadow DOM is not rendered if it has no template", () => {
-		cy.mount(`<ui5-test-no-shadow></ui5-test-no-shadow>`);
+		cy.mount(<NoShadowDOM></NoShadowDOM>);
 
 		cy.get("[ui5-test-no-shadow]")
 			.then($element => {

package/cypress/specs/{UI5ElementSlots.cy.ts → UI5ElementSlots.cy.tsx}

@@ -1,20 +1,26 @@
-import "../../test/test-elements/Generic.js";
+import Generic from "../../test/test-elements/Generic.js";
 
 describe("Slots work properly", () => {
 	it("Tests that properties exist on the element for each slot", () => {
-		cy.mount(`<ui5-test-generic>
-		Default slot text
-		<span>Default slot content</span>
-		<span slot="other">Other slot content 1</span>
-		<span slot="other">Other slot content 2</span>
-		<span slot="individual">Individual slot content 1</span>
-		<span slot="individual">Individual slot content 2</span>
-		<span slot="named">Item in slot with propertyName</span>
-		<span slot="named">Item in slot with propertyName</span>
-		<span slot="row-header">Item in slot row-header</span>
-		<span slot="row-header">Item in slot row-header</span>
-	</ui5-test-generic>
-		`);
+		cy.mount(
+			<Generic>
+				Default slot text
+				<span>Default slot content</span>
+				<span slot="other">Other slot content 1</span>
+				<span slot="other">Other slot content 2</span>
+				<span slot="individual">Individual slot content 1</span>
+				<span slot="individual">Individual slot content 2</span>
+				<span slot="named">Item in slot with propertyName</span>
+				<span slot="named">Item in slot with propertyName</span>
+				<span slot="row-header">Item in slot row-header</span>
+				<span slot="row-header">Item in slot row-header</span>
+			</Generic>
+		);
+
+		cy.get<Generic>("[ui5-test-generic]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric");
@@ -44,11 +50,19 @@ describe("Slots work properly", () => {
 	});
 
 	it("Tests that properties exist on the element for each slot", () => {
-		cy.mount(`<ui5-test-generic>
-		<span slot="individual">Individual slot content 1</span>
-		<span slot="individual">Individual slot content 2</span>
-	</ui5-test-generic>
-		`);
+		cy.mount(
+			<Generic>
+				<span slot="individual">Individual slot content 1</span>
+				<span slot="individual">Individual slot content 2</span>
+			</Generic>
+		);
+
+		cy.get<Generic>("[ui5-test-generic]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
+
+		cy.get("[ui5-test-generic]");
 
 		cy.get("[slot=individual]")
 			.should("not.exist");
@@ -63,14 +77,20 @@ describe("Slots work properly", () => {
 	it("Tests that changing the slot attribute of children redistributes them across slot accessors", () => {
 		let defaultSlotLength = 0;
 
-		cy.mount(`<ui5-test-generic>
-<span>Default slot content</span>
-<span slot="other" id="o1">Other slot content 1</span>
-<span slot="other" id="o2">Other slot content 2</span>
-<span slot="named">Item in slot with propertyName</span>
-<span slot="named">Item in slot with propertyName</span>
-	</ui5-test-generic>
-		`);
+		cy.mount(
+			<Generic>
+				<span>Default slot content</span>
+				<span slot="other" id="o1">Other slot content 1</span>
+				<span slot="other" id="o2">Other slot content 2</span>
+				<span slot="named">Item in slot with propertyName</span>
+				<span slot="named">Item in slot with propertyName</span>
+			</Generic>
+		);
+
+		cy.get<Generic>("[ui5-test-generic]")
+			.should($el => {
+				expect($el[0].getDomRef()).to.exist;
+			});
 
 		cy.get("[ui5-test-generic]")
 			.as("testGeneric");

package/cypress/specs/{WithComplexTemplate.cy.ts → WithComplexTemplate.cy.tsx}

@@ -1,11 +1,11 @@
-import "../../test/test-elements/WithComplexTemplate.js";
+import WithComplexTemplate from "../../test/test-elements/WithComplexTemplate.js";
 
 describe("Complex templates", () => {
 	it("Tests context maintained in the HBS template before, after and inside 'each' statements", () => {
 		const EXPTECTED_LOOP_CONTENT = "Root text: root, Item text: positives";
 		const EXPTECTED_NESTED_LOOP_CONTENT = "Root Text: root, Word text: word1_good";
 
-		cy.mount(`<ui5-test-complex-template></ui5-test-complex-template>`);
+		cy.mount(<WithComplexTemplate />);
 
 		cy.get("[ui5-test-complex-template]")
 			.shadow()

package/cypress/tsconfig.json

@@ -8,6 +8,8 @@
 		"outDir": "dist",
 		"composite": true,
 		"tsBuildInfoFile": "dist/.tsbuildinfobuild",
+		"module": "NodeNext",
+		"moduleResolution": "nodenext",
 	},
 	"references": [
 		{