Skip to content

fix(ui5-toolbar): fix async toolbar tests #12330

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Sep 24, 2025
Merged

fix(ui5-toolbar): fix async toolbar tests #12330

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8abf938
fix(ui5-toolbar): fix async toolbar tests
PetyaMarkovaBogdanova Sep 18, 2025
e4886b6
fix(ui5-toolbar): fix async toolbar tests
PetyaMarkovaBogdanova Sep 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
173 changes: 73 additions & 100 deletions packages/main/cypress/specs/Toolbar.cy.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand All @@ -158,7 +158,7 @@ describe("Toolbar general interaction", () => {
});

cy.get("ui5-select", { includeShadowDom: true })
.click();
.realClick();

cy.get("@clicked")
.should("have.been.calledOnce");
Expand All @@ -167,47 +167,50 @@ describe("Toolbar general interaction", () => {

cy.get("ui5-option", { includeShadowDom: true })
.first()
.click();
.realClick();

cy.get("@changed")
.should("have.been.calledOnce");
cy.get("@closed")
.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(
<Toolbar id="otb_d">
<Toolbar>
<ToolbarButton text="Add" icon={add} overflow-priority="AlwaysOverflow" stableDomRef="tb-button-add-d"></ToolbarButton>
<ToolbarButton text="Employee" icon={employee} overflow-priority="AlwaysOverflow" stableDomRef="tb-button-employee-d"></ToolbarButton>
</Toolbar>
);

// 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");
});

Expand All @@ -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()
Expand All @@ -259,7 +262,7 @@ describe("Toolbar general interaction", () => {
);


cy.get("ui5-toolbar")
cy.get("[ui5-toolbar]")
.shadow()
.find(".ui5-tb-overflow-btn")
.as("overflowButton")
Expand All @@ -268,9 +271,9 @@ describe("Toolbar general interaction", () => {
.should("exist");

cy.get("@overflowButton")
.click();
.realClick();

cy.get("ui5-toolbar")
cy.get("[ui5-toolbar]")
.shadow()
.find("[ui5-popover]")
.as("popover")
Expand All @@ -282,7 +285,7 @@ describe("Toolbar general interaction", () => {
.first()
.shadow()
.find("[ui5-button]")
.click();
.realClick();

cy.get("@popover")
.should("have.prop", "open", false);
Expand All @@ -304,18 +307,18 @@ 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")
.click()
.click()
.realClick()
.realClick()
.should("be.focused");

// Resize the viewport to make the overflow button disappear
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)
Expand Down Expand Up @@ -436,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");
Expand Down Expand Up @@ -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>("#dialog").ui5DialogOpened();

// Verify toolbar is rendered inside the dialog
Expand All @@ -493,84 +496,55 @@ 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(
<Toolbar>
<ToolbarButton
text="Back"
design="Emphasized"
disabled
icon="sap-icon://add"
endIcon="sap-icon://employee"
tooltip="Add"
></ToolbarButton>

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");
});
});
});
<ToolbarButton
icon="sap-icon://add"
accessible-name="Add"
accessible-name-ref="btn"
accessibilityAttributes={{ expanded: "true", controls: "btn", hasPopup: "dialog" }}
></ToolbarButton>
</Toolbar>
);
});

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(
<div>
<Toolbar id="test-toolbar">
<ToolbarButton disabled>Disabled Button</ToolbarButton>
<ToolbarButton
onClick={() => {
const input = document.getElementById("value-input") as HTMLInputElement;
input.value = (parseInt(input.value, 10) + 1).toString();
}}
>
Enabled Button
</ToolbarButton>
<input id="value-input" type="number" defaultValue="0" />
</Toolbar>
</div>
);
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")
.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(
Expand Down Expand Up @@ -601,12 +575,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 => {
Expand Down
Loading