From 8abf938529d3ae3a8628e2327a026bd7f2f26e44 Mon Sep 17 00:00:00 2001 From: PetyaMarkovaBogdanova Date: Thu, 18 Sep 2025 17:24:37 +0300 Subject: [PATCH 1/2] fix(ui5-toolbar): fix async toolbar tests --- packages/main/cypress/specs/Toolbar.cy.tsx | 165 +++++++++------------ 1 file changed, 70 insertions(+), 95 deletions(-) diff --git a/packages/main/cypress/specs/Toolbar.cy.tsx b/packages/main/cypress/specs/Toolbar.cy.tsx index 6d54e72cf7c6..25ad912b3295 100644 --- a/packages/main/cypress/specs/Toolbar.cy.tsx +++ b/packages/main/cypress/specs/Toolbar.cy.tsx @@ -144,7 +144,7 @@ describe("Toolbar general interaction", () => { }); cy.get("ui5-button", { includeShadowDom: true }).contains("Button 1") - .click(); + .realClick(); cy.get("@clicked") .should("have.been.calledOnce"); @@ -158,7 +158,7 @@ describe("Toolbar general interaction", () => { }); cy.get("ui5-select", { includeShadowDom: true }) - .click(); + .realClick(); cy.get("@clicked") .should("have.been.calledOnce"); @@ -167,7 +167,7 @@ describe("Toolbar general interaction", () => { cy.get("ui5-option", { includeShadowDom: true }) .first() - .click(); + .realClick(); cy.get("@changed") .should("have.been.calledOnce"); @@ -175,39 +175,42 @@ describe("Toolbar general interaction", () => { .should("have.been.calledOnce"); }); - it.skip("Should move button with alwaysOverflow priority to overflow popover", async () => { + it("Should move button with alwaysOverflow priority to overflow popover", () => { cy.mount( - + ); - // eslint-disable-next-line cypress/no-unnecessary-waiting + // Wait for the toolbar to render cy.wait(500); - const otb = cy.get("#otb_d"); - - cy.get("otb") + // Select the toolbar by tag name + cy.get("ui5-toolbar") .shadow() .find(".ui5-tb-overflow-btn") - .click(); - const overflowButton = otb.shadow().find(".ui5-tb-overflow-btn"); + .realClick(); - cy.get("#otb_d") + // Verify the overflow popover is open + cy.get("ui5-toolbar") .shadow() .find(".ui5-overflow-popover") - .should("have.attr", "open", "true"); - overflowButton.click(); + .should("have.attr", "open", "open"); cy.wait(500); - cy.get("@popover") + // Verify the popover contains the correct number of items + cy.get("ui5-toolbar") + .shadow() .find(".ui5-tb-popover-item") .should("have.length", 2); - cy.get("@popover") - .find(`[stable-dom-ref="tb-button-employee-d"]`) + // Verify the specific button is in the popover + cy.get("ui5-toolbar") + .find(`[stabledomref="tb-button-employee-d"]`) + .shadow() + .find(`[ui5-button]`) .should("have.class", "ui5-tb-popover-item"); }); @@ -233,11 +236,11 @@ describe("Toolbar general interaction", () => { cy.get("#testEventpreventClosing-toolbar") .shadow() .find(".ui5-tb-overflow-btn") - .click(); + .realClick(); cy.get("[ui5-toolbar-select]") .shadow() .find("[ui5-select]") - .click(); + .realClick(); cy.get("#testEventpreventClosing-toolbar") .shadow() @@ -268,7 +271,7 @@ describe("Toolbar general interaction", () => { .should("exist"); cy.get("@overflowButton") - .click(); + .realClick(); cy.get("ui5-toolbar") .shadow() @@ -282,7 +285,7 @@ describe("Toolbar general interaction", () => { .first() .shadow() .find("[ui5-button]") - .click(); + .realClick(); cy.get("@popover") .should("have.prop", "open", false); @@ -307,8 +310,8 @@ describe("Toolbar general interaction", () => { cy.get("ui5-toolbar") .shadow() .find(".ui5-tb-overflow-btn") - .click() - .click() + .realClick() + .realClick() .should("be.focused"); // Resize the viewport to make the overflow button disappear @@ -475,7 +478,7 @@ describe("Toolbar in Dialog", () => { ); // Open dialog - cy.get("#open-dialog-button").click(); + cy.get("#open-dialog-button").realClick(); cy.get("#dialog").ui5DialogOpened(); // Verify toolbar is rendered inside the dialog @@ -493,84 +496,57 @@ describe("Toolbar in Dialog", () => { }); }); -//ToolbarSelect -describe("Toolbar Select", () => { - - //ToolbarButton - it.skip("Should render the button with the correct text inside the popover", async () => { - cy.viewport(200, 1080); - - cy.get("#otb_d").within(() => { - cy.get(".ui5-tb-overflow-btn").click(); - cy.get("ui5-popover").shadow().within(() => { - cy.get("ui5-toolbar-button").shadow().within(() => { - cy.get("ui5-button").then($button => { - expect($button).to.have.text("Back"); - expect($button).to.have.attr("design", "Emphasized"); - expect($button).to.have.attr("disabled", "true"); - expect($button).to.have.attr("icon", "sap-icon://add"); - expect($button).to.have.attr("end-icon", "sap-icon://employee"); - expect($button).to.have.attr("tooltip", "Add"); - }); - }); - }); - }); - }); +describe("ToolbarButton", () => { + beforeEach(() => { - it.skip("Should render the button with the correct accessible name inside the popover", async () => { - cy.viewport(100, 1080); + cy.mount( + + - cy.get("#otb_d").within(() => { - cy.get(".ui5-tb-overflow-btn").click(); - cy.get("ui5-popover").shadow().within(() => { - cy.get("ui5-button[accessible-name]").then($button => { - expect($button).to.have.attr("accessible-name", "Add"); - expect($button).to.have.attr("accessible-name-ref", "btn"); - }); - }); - }); + + + ); }); - it.skip("Should render the button with the correct accessibilityAttributes inside the popover", async () => { + it("Should render the button with the correct accessible name inside the popover", () => { cy.viewport(100, 1080); - cy.get("#otb_d").within(() => { - cy.get(".ui5-tb-overflow-btn").click(); - cy.get("ui5-popover").shadow().within(() => { - cy.get("ui5-button[accessible-name]").invoke("prop", "accessibilityAttributes").should("have.property", "expanded", "true"); - }); - }); + cy.get("[ui5-toolbar]") + .shadow() + .find(".ui5-tb-overflow-btn") + .realClick(); + + cy.get("[ui5-toolbar-button][accessible-name]").shadow().find(".ui5-tb-button") + .should("have.attr", "accessible-name", "Add") + .should("have.attr", "accessible-name-ref", "btn"); }); -}); -describe("Toolbar Button", () => { - it("Should not trigger click event on disabled button", () => { - // Use cy.mount to create the toolbar with buttons and input field - cy.mount( -
- - Disabled Button - { - const input = document.getElementById("value-input") as HTMLInputElement; - input.value = (parseInt(input.value, 10) + 1).toString(); - }} - > - Enabled Button - - - -
- ); + it("Should render the button with the correct accessibilityAttributes inside the popover", () => { + cy.viewport(100, 1080); - // Test clicking the disabled button - cy.get("ui5-toolbar-button[disabled]").realClick(); - cy.get("#value-input").should("have.value", "0"); + cy.get("[ui5-toolbar]") + .shadow() + .find(".ui5-tb-overflow-btn") + .realClick(); - // Test clicking the non-disabled button - cy.get("ui5-toolbar-button:not([disabled])").realClick(); - cy.get("#value-input").should("have.value", "1"); - }); + cy.get("ui5-toolbar-button[accessible-name]").shadow().find(".ui5-tb-button") + .invoke("prop", "accessibilityAttributes") + .should("deep.equal", { expanded: "true", + controls: "btn", + hasPopup: "dialog" }); + }); it("Should not recalculate overflow when button state changes without affecting width", () => { cy.mount( @@ -601,12 +577,11 @@ describe("Toolbar Button", () => { cy.get("@toolbar").then($toolbar => { const toolbar = $toolbar[0] as Toolbar; const addButton = document.getElementById("add-btn") as ToolbarButton; - expect(toolbar.itemsToOverflow.includes(addButton)).to.be.true; - + const initialOverflowCount = toolbar.itemsToOverflow.length; const initialItemsWidth = toolbar.itemsWidth; - + addButton.disabled = !addButton.disabled; cy.get("@toolbar").then($toolbarAfter => { From e4886b6d2e4b1fa832bd3a8ebcfb4ae1fd3f72fc Mon Sep 17 00:00:00 2001 From: PetyaMarkovaBogdanova Date: Fri, 19 Sep 2025 18:32:33 +0300 Subject: [PATCH 2/2] fix(ui5-toolbar): fix async toolbar tests --- packages/main/cypress/specs/Toolbar.cy.tsx | 28 ++++++++++------------ 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/packages/main/cypress/specs/Toolbar.cy.tsx b/packages/main/cypress/specs/Toolbar.cy.tsx index 25ad912b3295..5d1033c0cd5b 100644 --- a/packages/main/cypress/specs/Toolbar.cy.tsx +++ b/packages/main/cypress/specs/Toolbar.cy.tsx @@ -188,26 +188,26 @@ describe("Toolbar general interaction", () => { cy.wait(500); // Select the toolbar by tag name - cy.get("ui5-toolbar") + cy.get("[ui5-toolbar]") .shadow() .find(".ui5-tb-overflow-btn") .realClick(); // Verify the overflow popover is open - cy.get("ui5-toolbar") + cy.get("[ui5-toolbar]") .shadow() .find(".ui5-overflow-popover") .should("have.attr", "open", "open"); cy.wait(500); // Verify the popover contains the correct number of items - cy.get("ui5-toolbar") + cy.get("[ui5-toolbar]") .shadow() .find(".ui5-tb-popover-item") .should("have.length", 2); // Verify the specific button is in the popover - cy.get("ui5-toolbar") + cy.get("[ui5-toolbar]") .find(`[stabledomref="tb-button-employee-d"]`) .shadow() .find(`[ui5-button]`) @@ -262,7 +262,7 @@ describe("Toolbar general interaction", () => { ); - cy.get("ui5-toolbar") + cy.get("[ui5-toolbar]") .shadow() .find(".ui5-tb-overflow-btn") .as("overflowButton") @@ -273,7 +273,7 @@ describe("Toolbar general interaction", () => { cy.get("@overflowButton") .realClick(); - cy.get("ui5-toolbar") + cy.get("[ui5-toolbar]") .shadow() .find("[ui5-popover]") .as("popover") @@ -307,7 +307,7 @@ describe("Toolbar general interaction", () => { cy.viewport(300, 1080); // Focus on the overflow button - cy.get("ui5-toolbar") + cy.get("[ui5-toolbar]") .shadow() .find(".ui5-tb-overflow-btn") .realClick() @@ -318,7 +318,7 @@ describe("Toolbar general interaction", () => { cy.viewport(800, 1080); // Verify the focus shifts to the last interactive element outside the overflow popover - cy.get("ui5-toolbar") + cy.get("[ui5-toolbar]") .shadow() .find(".ui5-tb-item") .eq(3) @@ -439,7 +439,7 @@ describe("Accessibility", () => { ); cy.wait(1000); - cy.get("ui5-toolbar") + cy.get("[ui5-toolbar]") .shadow() .find(".ui5-overflow-popover") .should("have.attr", "accessible-name", "Available Values"); @@ -541,12 +541,10 @@ describe("ToolbarButton", () => { .find(".ui5-tb-overflow-btn") .realClick(); - cy.get("ui5-toolbar-button[accessible-name]").shadow().find(".ui5-tb-button") - .invoke("prop", "accessibilityAttributes") - .should("deep.equal", { expanded: "true", - controls: "btn", - hasPopup: "dialog" }); - }); + cy.get("[ui5-toolbar-button][accessible-name]").shadow().find(".ui5-tb-button") + .should("have.prop", "accessibilityAttributes") + .should("deep.include", { expanded: "true", controls: "btn", hasPopup: "dialog" }); + }); it("Should not recalculate overflow when button state changes without affecting width", () => { cy.mount(