chore: wait for focus DOM refs of UI5 elements before interaction (#11834)

Author: nnaydenow

packages/cypress-internal/src/commands.ts

@@ -7,11 +7,18 @@ import "./helpers.js"
 const realEventCmdCallback = (originalFn: any, element: any, ...args: any) => {
 	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;
+			const el = $el[0];
+
+			const isCustom = el.tagName.includes("-");
+			const isUI5Element = el.isUI5Element;
+			const isVisible = !Cypress.dom.isHidden(el);
+			const domRef = typeof el.getDomRef === "function" && el.getDomRef();
+
+			if (isCustom && isUI5Element) {
+				expect(domRef, "DOM Reference exists").to.exist;
+				expect(isVisible, "Be visible").to.be.true;
 			}
 		})
-		.and("be.visible")
 		.then(() => {
 			return originalFn(element, ...args)
 		});

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

@@ -29,7 +29,7 @@ describe("Component Behavior", () => {
 				.should("not.exist");
 		});
 
-		it("Tests that visualization is correct when two groups are next to each other", async () => {
+		it("Tests that visualization is correct when two groups are next to each other", () => {
 			cy.mount(
 				<SideNavigation id="sn1" collapsed={false}>
 					<SideNavigationGroup id="group1" text="Group 1">
@@ -42,9 +42,9 @@ describe("Component Behavior", () => {
 					<SideNavigationGroup id="group3" text="Group 3">
 						<SideNavigationItem text="Item 3.1" icon="locate-me"></SideNavigationItem>
 					</SideNavigationGroup>
-				</SideNavigation>	
+				</SideNavigation>
 			);
-		
+
 			cy.get("#group2")
 				.should("have.prop", "belowGroup", true);
 
@@ -55,7 +55,7 @@ describe("Component Behavior", () => {
 
 			cy.get("#group3")
 				.should("have.prop", "belowGroup", false);
-			
+
 			cy.get("#group3")
 				.shadow()
 				.find(".ui5-sn-item-separator").eq(0)
@@ -95,7 +95,7 @@ describe("Component Behavior", () => {
 				.realClick();
 			cy.get("#group1").should("have.prop", "expanded", true);
 		});
-		
+
 		it("Tests expanding of groups with ArrowRight", () => {
 			cy.mount(
 				<SideNavigation id="sn">
@@ -186,11 +186,11 @@ describe("Component Behavior", () => {
 				<SideNavigation id="sn">
 					<SideNavigationItem id="focusStart" text="focus start"></SideNavigationItem>
 					<SideNavigationGroup id="group1" text="Group">
-							<SideNavigationItem text="Home 1"
-								icon="home"
-								href="#home"
-								title="Home tooltip" />
-						</SideNavigationGroup>
+						<SideNavigationItem text="Home 1"
+							icon="home"
+							href="#home"
+							title="Home tooltip" />
+					</SideNavigationGroup>
 				</SideNavigation>
 			);
 
@@ -206,11 +206,11 @@ describe("Component Behavior", () => {
 				<SideNavigation id="sn">
 					<SideNavigationItem id="focusStart" text="focus start"></SideNavigationItem>
 					<SideNavigationGroup id="group1" expanded text="Group">
-							<SideNavigationItem text="Home 1"
-								icon="home"
-								href="#home"
-								title="Home tooltip" />
-						</SideNavigationGroup>
+						<SideNavigationItem text="Home 1"
+							icon="home"
+							href="#home"
+							title="Home tooltip" />
+					</SideNavigationGroup>
 				</SideNavigation>
 			);
 

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

@@ -38,14 +38,14 @@ describe("Toast general interaction", () => {
 			.invoke("prop", "open", true);
 
 		cy.get("[ui5-toast]")
-		.should("be.visible")
-		.and("have.attr", "placement", "MiddleEnd")
-		.should(($el) => {
-			const rect = $el[0].getBoundingClientRect();
+			.should("be.visible")
+			.and("have.attr", "placement", "MiddleEnd")
+			.should(($el) => {
+				const rect = $el[0].getBoundingClientRect();
 
-			expect(rect.top + rect.height / 2).to.be.closeTo(window.innerHeight / 2, 20);
-			expect(window.innerWidth - (rect.left + rect.width)).to.be.lessThan(50);
-		});
+				expect(rect.top + rect.height / 2).to.be.closeTo(window.innerHeight / 2, 20);
+				expect(window.innerWidth - (rect.left + rect.width)).to.be.lessThan(50);
+			});
 	});
 
 	it("tests shadow content div role", () => {
@@ -102,7 +102,7 @@ describe("Toast general interaction", () => {
 			.should("have.attr", "open");
 
 		//waiting the duration of the toast
-		cy.get("[ui5-toast]", {timeout: 3000});
+		cy.get("[ui5-toast]", { timeout: 3000 });
 
 		cy.get("[ui5-toast]")
 			.should("not.be.visible");
@@ -128,7 +128,7 @@ describe("Keyboard handling", () => {
 		);
 	});
 
-	it("toast should be closed on pressing esc key", async () => {
+	it("toast should be closed on pressing esc key", () => {
 		cy.get("[ui5-button]")
 			.realClick();
 
@@ -150,13 +150,13 @@ describe("Keyboard handling", () => {
 			.realPress("Escape");
 
 		// //waiting the duration of the toast
-		cy.get("[ui5-toast]", {timeout: 3000});
+		cy.get("[ui5-toast]", { timeout: 3000 });
 
 		cy.get("[ui5-toast]")
 			.should("not.have.attr", "open");
 	});
 
-	it("Opens two toasts in a row and focuses the last open", async () => {
+	it("Opens two toasts in a row and focuses the last open", () => {
 		cy.mount(
 			<>
 				<Button id="wcBtnShowToastTS">Show Toast TS</Button>
@@ -176,7 +176,7 @@ describe("Keyboard handling", () => {
 		cy.realPress(["Control", "Shift", "m"]);
 
 		//waiting the duration of the toast
-		cy.get("[ui5-toast]", {timeout: 3000});
+		cy.get("[ui5-toast]", { timeout: 3000 });
 
 		cy.get("#wcToastTC")
 			.should("be.visible");
@@ -287,7 +287,7 @@ describe("Toast - test popover API", () => {
 		cy.get("#toast")
 			.invoke("prop", "open", true);
 
-		cy.get("#toast", {timeout: 500});
+		cy.get("#toast", { timeout: 500 });
 
 		cy.get("@toastClose")
 			.should("be.calledOnce");