chore: wait shadow DOM to exists (#10734)

packages/fiori/cypress/specs/SideNavigation.cy.tsx

@@ -30,7 +30,7 @@ describe("Side Navigation Rendering", () => {
 			.should("have.attr", "design", "Action");
 	});
 
-	it.skip("Tests rendering of overflow items", () => {
+	it("Tests rendering of overflow items", () => {
 		cy.mount(
 			<SideNavigation id="sideNav" collapsed={true}>
 				<SideNavigationItem text="dummy item"></SideNavigationItem>

packages/fiori/src/SideNavigationSubItemTemplate.tsx

@@ -3,10 +3,6 @@ import arrowRight from "@ui5/webcomponents-icons/dist/arrow-right.js";
 import type SideNavigationSubItem from "./SideNavigationSubItem.js";
 
 export default function SideNavigationSubItemTemplate(this: SideNavigationSubItem) {
-	if (this.sideNavCollapsed) {
-		return <></>;
-	}
-
 	return (
 		<li id={this._id} class="ui5-sn-list-li" role="none">
 			{this._href ?

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

@@ -71,7 +71,7 @@ describe("Menu interaction", () => {
 			.should("exist");
 	});
 
-	it.skip("Restore focus to previous element after close", () => {
+	it("Restore focus to previous element after close", () => {
 		cy.mount(
 			<>
 				<Button id="btnOpen">Open Menu</Button>
@@ -286,7 +286,7 @@ describe("Menu interaction", () => {
 	});
 
 	describe("Event firing", () => {
-		it.skip("Event firing - 'ui5-item-click' after 'click' on menu item", () => {
+		it("Event firing - 'ui5-item-click' after 'click' on menu item", () => {
 			cy.mount(
 				<>
 					<Button id="btnOpen">Open Menu</Button>
@@ -405,7 +405,7 @@ describe("Menu interaction", () => {
 				.ui5MenuOpened();
 		});
 
-		it.skip("Events firing on open/close of the menu", () => {
+		it("Events firing on open/close of the menu", () => {
 			cy.mount(
 				<>
 					<Button id="btnOpen">Open Menu</Button>
@@ -569,7 +569,7 @@ describe("Menu interaction", () => {
 				.should("have.attr", "accessible-name", "Select an option from the menu");
 		});
 
-		it.skip("Menu items - navigation in endContent", () => {
+		it("Menu items - navigation in endContent", () => {
 			cy.mount(
 				<>
 					<Button id="btnOpen">Open Menu</Button>

packages/main/cypress/specs/TableGrowing.cy.tsx

@@ -195,7 +195,7 @@ describe("TableGrowing - Scroll", () => {
 			cy.get("[ui5-table-growing]")
 				.shadow()
 				.find("#growing-button")
-				.should("not.exist");
+				.should("not.be.visible");
 
 			cy.get("[ui5-table]")
 				.shadow()
@@ -265,7 +265,7 @@ describe("TableGrowing - Scroll", () => {
 			cy.get("[ui5-table-growing]")
 				.shadow()
 				.find("#growing-button")
-				.should("not.exist");
+				.should("not.be.visible");
 
 			cy.get("[ui5-table]")
 				.shadow()

packages/main/src/TableGrowing.hbs

@@ -1,19 +1,17 @@
-{{#if _hasGrowingButton}}
-	<div
-		id="growing-button"
-		tabindex="-1"
-		?active="{{_activeState}}"
-		@click="{{loadMore}}"
-		@keydown="{{_onKeydown}}"
-		@keyup="{{_onKeyup}}"
-		@focusout="{{_onFocusout}}"
-		role="button"
-		aria-labelledby="growing-text growing-subtext"
-		aria-describedby="growing-description">
-		<span id="growing-text">{{_growingButtonText}}</span>
-		{{#if growingSubText}}
-			<span id="growing-subtext">{{growingSubText}}</span>
-		{{/if}}
-		<span id="growing-description" style="display: none;" aria-hidden="true">{{_growingButtonDescription}}</span>
-	</div>
-{{/if}}
+<div
+	id="growing-button"
+	tabindex="-1"
+	?active="{{_activeState}}"
+	@click="{{loadMore}}"
+	@keydown="{{_onKeydown}}"
+	@keyup="{{_onKeyup}}"
+	@focusout="{{_onFocusout}}"
+	role="button"
+	aria-labelledby="growing-text growing-subtext"
+	aria-describedby="growing-description">
+	<span id="growing-text">{{_growingButtonText}}</span>
+	{{#if growingSubText}}
+		<span id="growing-subtext">{{growingSubText}}</span>
+	{{/if}}
+	<span id="growing-description" style="display: none;" aria-hidden="true">{{_growingButtonDescription}}</span>
+</div>

packages/main/src/TableVirtualizer.ts

@@ -149,8 +149,10 @@ class TableVirtualizer extends UI5Element implements ITableFeature {
 	}
 
 	onExitDOM(): void {
-		this._scrollContainer.removeEventListener("scroll", this._onScrollBound);
-		this._table = undefined;
+		if (this._table) {
+			this._scrollContainer.removeEventListener("scroll", this._onScrollBound);
+			this._table = undefined;
+		}
 	}
 
 	/**

packages/tools/components-package/cypress.config.js

@@ -10,7 +10,7 @@ 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.{jsx,tsx}", "**/specs/**/*.cy.{js,ts}", "**/specs/**/*.cy.{jsx,tsx}"],
+		specPattern: ["**/specs/**/*.cy.{js,ts,jsx,tsx}"],
 		devServer: {
 			bundler: 'vite',
 		}

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

@@ -41,8 +41,8 @@ import "cypress-real-events";
 const realEventCmdCallback = (originalFn, element, ...args) => {
 	cy.get(element)
 		.should($el => {
-			if ($el[0].tagName.includes("-") && typeof $el[0].shadowRoot && typeof $el[0].getDomRef === "function") {
-				expect($el[0].getDomRef()).to.exist;
+			if ($el[0].tagName.includes("-") && $el[0].shadowRoot) {
+				expect($el[0].shadowRoot.hasChildNodes()).to.be.true;
 			} else {
 				expect(true).to.be.true;
 			}
@@ -65,4 +65,4 @@ const commands = [
 
 commands.forEach(cmd => {
 	Cypress.Commands.overwrite(cmd, realEventCmdCallback)
-})
+});

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

@@ -1,5 +1,5 @@
 import "@cypress/code-coverage/support";
-import { setupHooks, getContainerEl} from "@cypress/mount-utils";
+import { setupHooks, getContainerEl } from "@cypress/mount-utils";
 import { mount as preactMount } from "./cypress-ct-preact.js";
 import "./commands.js";
 
@@ -22,7 +22,23 @@ function mount(component, options = {}) {
 	applyConfiguration(options);
 
 	// Mount JSX Element
-	return preactMount(component, container);
+	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);