diff --git a/packages/main/cypress/specs/Toolbar.cy.tsx b/packages/main/cypress/specs/Toolbar.cy.tsx index 89a65d219b67..7625b3f04d6e 100644 --- a/packages/main/cypress/specs/Toolbar.cy.tsx +++ b/packages/main/cypress/specs/Toolbar.cy.tsx @@ -175,39 +175,40 @@ 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"); - 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(); - cy.wait(500); + .should("have.attr", "open", "open"); - 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"); }); @@ -446,52 +447,78 @@ describe("Toolbar Select", () => { .should("have.attr", "disabled", "disabled"); }); +}); //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(() => { + + cy.mount( + + + + + + ); + }) + + it("Should render the button with the correct text inside the popover", () => { + cy.viewport(100, 1080); + + cy.get("[ui5-toolbar]") + .shadow() + .find(".ui5-tb-overflow-btn") + .realClick(); + + cy.get("[text='Back']").first().shadow().find(".ui5-tb-button") + .should("have.text", "Back") + .should("have.attr", "design", "Emphasized") + .should("have.attr", "disabled", "disabled") + .should("have.attr", "icon", "sap-icon://add") + .should("have.attr", "end-icon", "sap-icon://employee") + .should("have.attr", "tooltip", "Add"); }); - it.skip("Should render the button with the correct accessible name 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]").then($button => { - expect($button).to.have.attr("accessible-name", "Add"); - expect($button).to.have.attr("accessible-name-ref", "btn"); - }); - }); - }); + 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"); }); - it.skip("Should render the button with the correct accessibilityAttributes inside the popover", async () => { + it("Should render the button with the correct accessibilityAttributes 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") + .invoke("prop", "accessibilityAttributes") + .should("deep.equal", { expanded: "true", + controls: "btn", + hasPopup: "dialog" }); }); - }); }); describe("Toolbar Button", () => {