From 33ba526b9189334bb5990963976330c12993234f Mon Sep 17 00:00:00 2001 From: Duygu Ramadan Date: Mon, 9 Jun 2025 13:18:13 +0300 Subject: [PATCH 1/5] chore(ui5-busy-indicator): migrate wdio tests to cypress --- .../main/cypress/specs/BusyIndicator.cy.tsx | 129 ++++++++++++++++++ 1 file changed, 129 insertions(+) create mode 100644 packages/main/cypress/specs/BusyIndicator.cy.tsx diff --git a/packages/main/cypress/specs/BusyIndicator.cy.tsx b/packages/main/cypress/specs/BusyIndicator.cy.tsx new file mode 100644 index 000000000000..4dae6b113ecf --- /dev/null +++ b/packages/main/cypress/specs/BusyIndicator.cy.tsx @@ -0,0 +1,129 @@ +// import { assert } from "chai"; + +import BusyIndicator from "../../src/BusyIndicator.js"; + +describe("BusyIndicator general interaction", () => { + // before(async () => { + // await browser.url(`test/pages/BusyIndicator.html`); + // }); + + it("tests event propagation", () => { + // const dynamicItem = await browser.$(">>>#busy-tree [ui5-tree-item] ui5-icon.ui5-li-tree-toggle-icon"); + // const input = await browser.$("#tree-input"); + + // await dynamicItem.click(); + // await dynamicItem.keys("Space"); + + // assert.strictEqual(await input.getProperty("value"), "0", "itemClick is not thrown"); + }); + + it("test activation", () => { + // const busyIndicator = await browser.$("#busy-container"); + // const busyArea = await busyIndicator.shadow$(".ui5-busy-indicator-busy-area"); + + // assert.notOk(await busyArea.isExisting(), "busy area is not yet created"); + + // await busyIndicator.setAttribute("active", ""); + + // await busyArea.waitForExist({ + // timeout: 3000, + // timeoutMsg: "Busy area must be created after 3000ms" + // }); + + // // reset + // await busyIndicator.removeAttribute("active"); + // assert.notOk(await busyArea.isExisting(), "busy area is removed"); + }); + + it("tests focus handling", () => { + // const busyIndicator = await browser.$("#indicator1"); + // await busyIndicator.click(); + + // let innerFocusElement = await browser.custom$("activeElement", "#indicator1"); + + // innerFocusElement = await browser.$(innerFocusElement); + + // assert.strictEqual(await innerFocusElement.getAttribute("class"), "ui5-busy-indicator-busy-area", "The correct inner element is focused"); + }); + + it("tests internal focused element attributes", () => { + // const busyIndicator = await browser.$("#indicator1"); + // await busyIndicator.click(); + // const innerFocusElement = await busyIndicator.shadow$(".ui5-busy-indicator-busy-area"); + + // assert.strictEqual(await innerFocusElement.getAttribute("role"), "progressbar", "Correct 'role' is set"); + // assert.strictEqual(await innerFocusElement.getAttribute("tabindex"), "0", "Correct 'tabindex' is set"); + // assert.strictEqual(await innerFocusElement.getAttribute("aria-valuemin"), "0", "Correct 'aria-valuemin' is set"); + // assert.strictEqual(await innerFocusElement.getAttribute("aria-valuemax"), "100", "Correct 'aria-valuemax' is set"); + // assert.strictEqual(await innerFocusElement.getAttribute("aria-valuetext"), "Busy", "Correct 'aria-valuetext' is set"); + }); + + it("tests content is not reachable with keyboard when active in both directions", () => { + // const beforeBusyIndicator = await browser.$("#beforeIndicatorWithBtn"); + // const busyIndicator = await browser.$("#indicatorWithBtn"); + // const afterBusyIndicator = await browser.$("#afterIndicatorWithBtn"); + + // await beforeBusyIndicator.click(); + // await browser.keys("Tab"); + // let activeElement = await browser.getActiveElement(); + // assert.strictEqual(await browser.$(activeElement).getAttribute("id"), await busyIndicator.getAttribute("id"), "Correct element is focused with TAB"); + + // await browser.keys("Tab"); + // activeElement = await browser.getActiveElement(); + // assert.strictEqual(await browser.$(activeElement).getAttribute("id"), await afterBusyIndicator.getAttribute("id"), "Correct element is focused with TAB"); + + // await browser.keys(["Shift", "Tab"]); + // activeElement = await browser.getActiveElement(); + // assert.strictEqual(await browser.$(activeElement).getAttribute("id"), await busyIndicator.getAttribute("id"), "Correct element is focused with SHIFT + TAB"); + + // await browser.keys(["Shift", "Tab"]); + // activeElement = await browser.getActiveElement(); + // assert.strictEqual(await browser.$(activeElement).getAttribute("id"), await beforeBusyIndicator.getAttribute("id"), "Correct element is focused with SHIFT + TAB"); + }); + + it("test inactive indicator in dialog - correct element from default slot is focused", () => { + // await browser.$("#open-dialog-inactive-indicator").click(); + + // const activeElement = await browser.getActiveElement(); + // assert.strictEqual( + // await browser.$(activeElement).getAttribute("id"), + // await browser.$("#dialog-inactive-indicator-focused-button").getAttribute("id"), + // "Correct element from default slot is focused" + // ); + + // await browser.keys("Escape"); + }); + + it("delayed indicator in dialog - shouldn't attempt to focus before the indicator is visible", () => { + // await browser.$("#open-dialog-delayed-indicator").click(); + + // const activeElement = await browser.getActiveElement(); + // assert.strictEqual( + // await browser.$(activeElement).getAttribute("id"), + // "dialog-delayed-indicator-focus-stop", + // "Correct element is focused" + // ); + + // await browser.keys("Escape"); + }); + + it.only("Height of the root element depends on the height of the Busy Indicator - issue 6668", () => { + cy.mount( + +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. +
+ + ); + + cy.get("#busy-indicator-height") + .shadow() + .find(".ui5-busy-indicator-root") + .should("have.css", "height", 144); + + // const busyIndicator = await browser.$("#busy-indicator-height"); + // const height = parseInt((await busyIndicator.shadow$(".ui5-busy-indicator-root").getCSSProperty("height")).value); + + // assert.equal(height, 144, "Height of the root element inherits the height of the Busy Indicator"); + }); +}); From a131020857e380194bb261b568aeab12c7ae2242 Mon Sep 17 00:00:00 2001 From: Duygu Ramadan Date: Tue, 10 Jun 2025 11:47:27 +0300 Subject: [PATCH 2/5] chore(ui5-busy-indicator): migrate wdio tests to cypress --- .../main/cypress/specs/BusyIndicator.cy.tsx | 230 +++++++++++------- .../main/test/specs/BusyIndicator.spec.js | 115 --------- 2 files changed, 145 insertions(+), 200 deletions(-) delete mode 100644 packages/main/test/specs/BusyIndicator.spec.js diff --git a/packages/main/cypress/specs/BusyIndicator.cy.tsx b/packages/main/cypress/specs/BusyIndicator.cy.tsx index 4dae6b113ecf..9e2a00e0f984 100644 --- a/packages/main/cypress/specs/BusyIndicator.cy.tsx +++ b/packages/main/cypress/specs/BusyIndicator.cy.tsx @@ -1,129 +1,189 @@ -// import { assert } from "chai"; - import BusyIndicator from "../../src/BusyIndicator.js"; +import Button from "../../src/Button.js"; +import Dialog from "../../src/Dialog.js"; +import List from "../../src/List.js"; +import Tree from "../../src/Tree.js"; +import TreeItem from "../../src/TreeItem.js"; describe("BusyIndicator general interaction", () => { - // before(async () => { - // await browser.url(`test/pages/BusyIndicator.html`); - // }); - it("tests event propagation", () => { - // const dynamicItem = await browser.$(">>>#busy-tree [ui5-tree-item] ui5-icon.ui5-li-tree-toggle-icon"); - // const input = await browser.$("#tree-input"); + const onClickStub = cy.stub().as("myStub");; + cy.mount( + + + + + + + + + ); - // await dynamicItem.click(); - // await dynamicItem.keys("Space"); + cy.get("#treeItem") + .shadow() + .find("ui5-icon.ui5-li-tree-toggle-icon") + .realClick(); - // assert.strictEqual(await input.getProperty("value"), "0", "itemClick is not thrown"); + cy.realPress("Space"); + + cy.get("@myStub").should("not.have.been.called"); }); it("test activation", () => { - // const busyIndicator = await browser.$("#busy-container"); - // const busyArea = await busyIndicator.shadow$(".ui5-busy-indicator-busy-area"); + cy.mount( + + + + ); - // assert.notOk(await busyArea.isExisting(), "busy area is not yet created"); + cy.get("#busy-container") + .shadow() + .find(".ui5-busy-indicator-busy-area") + .should("not.exist"); - // await busyIndicator.setAttribute("active", ""); + cy.get("#busy-container") + .invoke("attr", "active", ""); - // await busyArea.waitForExist({ - // timeout: 3000, - // timeoutMsg: "Busy area must be created after 3000ms" - // }); + cy.wait(3000); - // // reset - // await busyIndicator.removeAttribute("active"); - // assert.notOk(await busyArea.isExisting(), "busy area is removed"); + cy.get("#busy-container") + .shadow() + .find(".ui5-busy-indicator-busy-area") + .should("exist"); + + cy.get("#busy-container") + .invoke("removeAttr", "active"); + + cy.get("#busy-container") + .shadow() + .find(".ui5-busy-indicator-busy-area") + .should("not.exist"); }); it("tests focus handling", () => { - // const busyIndicator = await browser.$("#indicator1"); - // await busyIndicator.click(); + cy.mount(); - // let innerFocusElement = await browser.custom$("activeElement", "#indicator1"); + cy.get("#indicator1").realClick(); - // innerFocusElement = await browser.$(innerFocusElement); - - // assert.strictEqual(await innerFocusElement.getAttribute("class"), "ui5-busy-indicator-busy-area", "The correct inner element is focused"); + cy.get("#indicator1") + .shadow() + .find(".ui5-busy-indicator-busy-area") + .should("exist"); }); it("tests internal focused element attributes", () => { - // const busyIndicator = await browser.$("#indicator1"); - // await busyIndicator.click(); - // const innerFocusElement = await busyIndicator.shadow$(".ui5-busy-indicator-busy-area"); - - // assert.strictEqual(await innerFocusElement.getAttribute("role"), "progressbar", "Correct 'role' is set"); - // assert.strictEqual(await innerFocusElement.getAttribute("tabindex"), "0", "Correct 'tabindex' is set"); - // assert.strictEqual(await innerFocusElement.getAttribute("aria-valuemin"), "0", "Correct 'aria-valuemin' is set"); - // assert.strictEqual(await innerFocusElement.getAttribute("aria-valuemax"), "100", "Correct 'aria-valuemax' is set"); - // assert.strictEqual(await innerFocusElement.getAttribute("aria-valuetext"), "Busy", "Correct 'aria-valuetext' is set"); + cy.mount(); + + cy.get("#indicator1").realClick(); + + cy.get("#indicator1") + .shadow() + .find(".ui5-busy-indicator-busy-area") + .should("have.attr", "role", "progressbar") + .and("have.attr", "tabindex", "0") + .and("have.attr", "aria-valuemin", "0") + .and("have.attr", "aria-valuemax", "100") + .and("have.attr", "aria-valuetext", "Busy"); }); it("tests content is not reachable with keyboard when active in both directions", () => { - // const beforeBusyIndicator = await browser.$("#beforeIndicatorWithBtn"); - // const busyIndicator = await browser.$("#indicatorWithBtn"); - // const afterBusyIndicator = await browser.$("#afterIndicatorWithBtn"); - - // await beforeBusyIndicator.click(); - // await browser.keys("Tab"); - // let activeElement = await browser.getActiveElement(); - // assert.strictEqual(await browser.$(activeElement).getAttribute("id"), await busyIndicator.getAttribute("id"), "Correct element is focused with TAB"); - - // await browser.keys("Tab"); - // activeElement = await browser.getActiveElement(); - // assert.strictEqual(await browser.$(activeElement).getAttribute("id"), await afterBusyIndicator.getAttribute("id"), "Correct element is focused with TAB"); - - // await browser.keys(["Shift", "Tab"]); - // activeElement = await browser.getActiveElement(); - // assert.strictEqual(await browser.$(activeElement).getAttribute("id"), await busyIndicator.getAttribute("id"), "Correct element is focused with SHIFT + TAB"); - - // await browser.keys(["Shift", "Tab"]); - // activeElement = await browser.getActiveElement(); - // assert.strictEqual(await browser.$(activeElement).getAttribute("id"), await beforeBusyIndicator.getAttribute("id"), "Correct element is focused with SHIFT + TAB"); + cy.mount( +
+ + + + + +
+ ); + + cy.get("#beforeIndicatorWithBtn").realClick(); + cy.realPress("Tab"); + + cy.get("#test") + .find("[active]") + .should("have.id", "indicatorWithBtn"); + + cy.realPress("Tab"); + cy.get("#afterIndicatorWithBtn").should("have.focus"); + + cy.realPress(["Shift", "Tab"]); + cy.get("#test") + .find("[active]") + .should("have.id", "indicatorWithBtn"); + + cy.realPress(["Shift", "Tab"]); + + cy.get("#beforeIndicatorWithBtn").should("have.focus"); }); it("test inactive indicator in dialog - correct element from default slot is focused", () => { - // await browser.$("#open-dialog-inactive-indicator").click(); + cy.mount( + +
Dialog with focus issue
+
+
Buttons are wrapped in busy indicator, which is inactive.
+ + + + +
+ + ); - // const activeElement = await browser.getActiveElement(); - // assert.strictEqual( - // await browser.$(activeElement).getAttribute("id"), - // await browser.$("#dialog-inactive-indicator-focused-button").getAttribute("id"), - // "Correct element from default slot is focused" - // ); + cy.get("#dialog-inactive-indicator") + .invoke("attr", "open", true); - // await browser.keys("Escape"); + cy.get("#dialog-inactive-indicator-focused-button") + .should("have.focus"); }); it("delayed indicator in dialog - shouldn't attempt to focus before the indicator is visible", () => { - // await browser.$("#open-dialog-delayed-indicator").click(); + cy.mount( + + + Will become busy after 5 seconds + + + + ); + + cy.get("#dialog-delayed-indicator-indicator") + .invoke("attr", "active", true); - // const activeElement = await browser.getActiveElement(); - // assert.strictEqual( - // await browser.$(activeElement).getAttribute("id"), - // "dialog-delayed-indicator-focus-stop", - // "Correct element is focused" - // ); + cy.get("#dialog-delayed-indicator") + .invoke("attr", "open", true); - // await browser.keys("Escape"); + cy.get("#dialog-delayed-indicator-focus-stop") + .should("have.focus"); }); - it.only("Height of the root element depends on the height of the Busy Indicator - issue 6668", () => { + it("Height of the root element depends on the height of the Busy Indicator - issue 6668", () => { cy.mount( - -
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. -
- +
+
+ +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis + quasi, minus ullam aut eaque dolorem eos rem itaque unde, veritatis + consequuntur numquam! Repellat sunt, dignissimos fugit voluptate + animi repudiandae placeat? +
+ +
+
+ +
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. +
+ +
+
); cy.get("#busy-indicator-height") .shadow() .find(".ui5-busy-indicator-root") - .should("have.css", "height", 144); - - // const busyIndicator = await browser.$("#busy-indicator-height"); - // const height = parseInt((await busyIndicator.shadow$(".ui5-busy-indicator-root").getCSSProperty("height")).value); - - // assert.equal(height, 144, "Height of the root element inherits the height of the Busy Indicator"); + .should("have.css", "height", "144px"); }); }); diff --git a/packages/main/test/specs/BusyIndicator.spec.js b/packages/main/test/specs/BusyIndicator.spec.js deleted file mode 100644 index 3e99363ee129..000000000000 --- a/packages/main/test/specs/BusyIndicator.spec.js +++ /dev/null @@ -1,115 +0,0 @@ -import { assert } from "chai"; - - -describe("BusyIndicator general interaction", () => { - before(async () => { - await browser.url(`test/pages/BusyIndicator.html`); - }); - - it("tests event propagation", async () => { - const dynamicItem = await browser.$(">>>#busy-tree [ui5-tree-item] ui5-icon.ui5-li-tree-toggle-icon"); - const input = await browser.$("#tree-input"); - - await dynamicItem.click(); - await dynamicItem.keys("Space"); - - assert.strictEqual(await input.getProperty("value"), "0", "itemClick is not thrown"); - }); - - it("test activation", async () => { - const busyIndicator = await browser.$("#busy-container"); - const busyArea = await busyIndicator.shadow$(".ui5-busy-indicator-busy-area"); - - assert.notOk(await busyArea.isExisting(), "busy area is not yet created"); - - await busyIndicator.setAttribute("active", ""); - - await busyArea.waitForExist({ - timeout: 3000, - timeoutMsg: "Busy area must be created after 3000ms" - }); - - // reset - await busyIndicator.removeAttribute("active"); - assert.notOk(await busyArea.isExisting(), "busy area is removed"); - }); - - it("tests focus handling", async () => { - const busyIndicator = await browser.$("#indicator1"); - await busyIndicator.click(); - - let innerFocusElement = await browser.custom$("activeElement", "#indicator1"); - - innerFocusElement = await browser.$(innerFocusElement); - - assert.strictEqual(await innerFocusElement.getAttribute("class"), "ui5-busy-indicator-busy-area", "The correct inner element is focused"); - }); - - it("tests internal focused element attributes", async () => { - const busyIndicator = await browser.$("#indicator1"); - await busyIndicator.click(); - const innerFocusElement = await busyIndicator.shadow$(".ui5-busy-indicator-busy-area"); - - assert.strictEqual(await innerFocusElement.getAttribute("role"), "progressbar", "Correct 'role' is set"); - assert.strictEqual(await innerFocusElement.getAttribute("tabindex"), "0", "Correct 'tabindex' is set"); - assert.strictEqual(await innerFocusElement.getAttribute("aria-valuemin"), "0", "Correct 'aria-valuemin' is set"); - assert.strictEqual(await innerFocusElement.getAttribute("aria-valuemax"), "100", "Correct 'aria-valuemax' is set"); - assert.strictEqual(await innerFocusElement.getAttribute("aria-valuetext"), "Busy", "Correct 'aria-valuetext' is set"); - }); - - it("tests content is not reachable with keyboard when active in both directions", async () => { - const beforeBusyIndicator = await browser.$("#beforeIndicatorWithBtn"); - const busyIndicator = await browser.$("#indicatorWithBtn"); - const afterBusyIndicator = await browser.$("#afterIndicatorWithBtn"); - - await beforeBusyIndicator.click(); - await browser.keys("Tab"); - let activeElement = await browser.getActiveElement(); - assert.strictEqual(await browser.$(activeElement).getAttribute("id"), await busyIndicator.getAttribute("id"), "Correct element is focused with TAB"); - - await browser.keys("Tab"); - activeElement = await browser.getActiveElement(); - assert.strictEqual(await browser.$(activeElement).getAttribute("id"), await afterBusyIndicator.getAttribute("id"), "Correct element is focused with TAB"); - - await browser.keys(["Shift", "Tab"]); - activeElement = await browser.getActiveElement(); - assert.strictEqual(await browser.$(activeElement).getAttribute("id"), await busyIndicator.getAttribute("id"), "Correct element is focused with SHIFT + TAB"); - - await browser.keys(["Shift", "Tab"]); - activeElement = await browser.getActiveElement(); - assert.strictEqual(await browser.$(activeElement).getAttribute("id"), await beforeBusyIndicator.getAttribute("id"), "Correct element is focused with SHIFT + TAB"); - }); - - it("test inactive indicator in dialog - correct element from default slot is focused", async () => { - await browser.$("#open-dialog-inactive-indicator").click(); - - const activeElement = await browser.getActiveElement(); - assert.strictEqual( - await browser.$(activeElement).getAttribute("id"), - await browser.$("#dialog-inactive-indicator-focused-button").getAttribute("id"), - "Correct element from default slot is focused" - ); - - await browser.keys("Escape"); - }); - - it("delayed indicator in dialog - shouldn't attempt to focus before the indicator is visible", async () => { - await browser.$("#open-dialog-delayed-indicator").click(); - - const activeElement = await browser.getActiveElement(); - assert.strictEqual( - await browser.$(activeElement).getAttribute("id"), - "dialog-delayed-indicator-focus-stop", - "Correct element is focused" - ); - - await browser.keys("Escape"); - }); - - it("Height of the root element depends on the height of the Busy Indicator - issue 6668", async () => { - const busyIndicator = await browser.$("#busy-indicator-height"); - const height = parseInt((await busyIndicator.shadow$(".ui5-busy-indicator-root").getCSSProperty("height")).value); - - assert.equal(height, 144, "Height of the root element inherits the height of the Busy Indicator"); - }); -}); From feec45025f2d9982efcf192f5ce9722adec88ef7 Mon Sep 17 00:00:00 2001 From: Duygu Ramadan Date: Wed, 11 Jun 2025 14:15:02 +0300 Subject: [PATCH 3/5] chore(ui5-busy-indicator): test focus --- .../main/cypress/specs/BusyIndicator.cy.tsx | 82 +++++++++++-------- 1 file changed, 49 insertions(+), 33 deletions(-) diff --git a/packages/main/cypress/specs/BusyIndicator.cy.tsx b/packages/main/cypress/specs/BusyIndicator.cy.tsx index faf16d79494c..c901a25b4425 100644 --- a/packages/main/cypress/specs/BusyIndicator.cy.tsx +++ b/packages/main/cypress/specs/BusyIndicator.cy.tsx @@ -1,9 +1,6 @@ import BusyIndicator from "../../src/BusyIndicator.js"; import Button from "../../src/Button.js"; import Dialog from "../../src/Dialog.js"; -import List from "../../src/List.js"; -import Tree from "../../src/Tree.js"; -import TreeItem from "../../src/TreeItem.js"; describe("Rendering", () => { it("Rendering without content", () => { @@ -32,32 +29,44 @@ describe("Rendering", () => { describe("BusyIndicator general interaction", () => { it("tests event propagation", () => { - const onClickStub = cy.stub().as("myStub");; + const onClickStub = cy.stub().as("clickStub"); cy.mount( - - - - - - - + + - - + + ); cy.get("#beforeIndicatorWithBtn").realClick(); - cy.realPress("Tab"); - cy.get("#test") - .find("[active]") - .should("have.id", "indicatorWithBtn"); + cy.get("#indicatorWithBtn") + .shadow() + .find(".ui5-busy-indicator-busy-area") + .should("exist"); cy.realPress("Tab"); - cy.get("#afterIndicatorWithBtn").should("have.focus"); + cy.get("#indicatorWithBtn").should("have.focus"); + cy.realPress("Tab"); + + cy.get("#helloBtn").should("not.have.focus"); cy.realPress(["Shift", "Tab"]); - cy.get("#test") - .find("[active]") - .should("have.id", "indicatorWithBtn"); + cy.get("#indicatorWithBtn") + .shadow() + .find(".ui5-busy-indicator-busy-area") + .should("exist"); + + cy.get("#indicatorWithBtn").should("have.focus"); + cy.get("#helloBtn").should("not.have.focus"); cy.realPress(["Shift", "Tab"]); From 90188e6498ceb05d271bc720b7adcacea35a465e Mon Sep 17 00:00:00 2001 From: Duygu Ramadan Date: Wed, 11 Jun 2025 15:27:40 +0300 Subject: [PATCH 4/5] chore(ui5-busy-indicator): add requested changes --- packages/main/cypress/specs/BusyIndicator.cy.tsx | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/packages/main/cypress/specs/BusyIndicator.cy.tsx b/packages/main/cypress/specs/BusyIndicator.cy.tsx index c901a25b4425..49827c8250ea 100644 --- a/packages/main/cypress/specs/BusyIndicator.cy.tsx +++ b/packages/main/cypress/specs/BusyIndicator.cy.tsx @@ -65,7 +65,7 @@ describe("BusyIndicator general interaction", () => { it("test activation", () => { cy.mount( - + ); @@ -108,8 +108,6 @@ describe("BusyIndicator general interaction", () => { it("tests internal focused element attributes", () => { cy.mount(); - cy.get("#indicator1").realClick(); - cy.get("#indicator1") .shadow() .find(".ui5-busy-indicator-busy-area") @@ -122,7 +120,7 @@ describe("BusyIndicator general interaction", () => { it("tests content is not reachable with keyboard when active in both directions", () => { cy.mount( -
+
@@ -139,16 +137,15 @@ describe("BusyIndicator general interaction", () => { .should("exist"); cy.realPress("Tab"); + cy.get("#indicatorWithBtn").should("have.focus"); + cy.realPress("Tab"); cy.get("#helloBtn").should("not.have.focus"); + cy.get("#afterIndicatorWithBtn").should("have.focus"); cy.realPress(["Shift", "Tab"]); - cy.get("#indicatorWithBtn") - .shadow() - .find(".ui5-busy-indicator-busy-area") - .should("exist"); cy.get("#indicatorWithBtn").should("have.focus"); cy.get("#helloBtn").should("not.have.focus"); From b2e1ec335fd27a1240359eca28149f84229118a7 Mon Sep 17 00:00:00 2001 From: Duygu Ramadan Date: Wed, 18 Jun 2025 10:43:11 +0300 Subject: [PATCH 5/5] chore(ui5-busy-indicator): add requested changes --- .../main/cypress/specs/BusyIndicator.cy.tsx | 61 ++++++++++--------- 1 file changed, 31 insertions(+), 30 deletions(-) diff --git a/packages/main/cypress/specs/BusyIndicator.cy.tsx b/packages/main/cypress/specs/BusyIndicator.cy.tsx index 49827c8250ea..2d0d9c4f862f 100644 --- a/packages/main/cypress/specs/BusyIndicator.cy.tsx +++ b/packages/main/cypress/specs/BusyIndicator.cy.tsx @@ -6,7 +6,7 @@ describe("Rendering", () => { it("Rendering without content", () => { cy.mount(); - cy.get("#busyInd") + cy.get("[ui5-busy-indicator]") .shadow() .find(".ui5-busy-indicator-busy-area:not(.ui5-busy-indicator-busy-area-over-content)") .should("exist"); @@ -20,7 +20,7 @@ describe("Rendering", () => { ); - cy.get("#busyInd") + cy.get("[ui5-busy-indicator]") .shadow() .find(".ui5-busy-indicator-busy-area.ui5-busy-indicator-busy-area-over-content") .should("exist"); @@ -32,11 +32,12 @@ describe("BusyIndicator general interaction", () => { const onClickStub = cy.stub().as("clickStub"); cy.mount( -