diff --git a/packages/main/cypress/specs/BusyIndicator.cy.tsx b/packages/main/cypress/specs/BusyIndicator.cy.tsx index 923f3240c3b5..2d0d9c4f862f 100644 --- a/packages/main/cypress/specs/BusyIndicator.cy.tsx +++ b/packages/main/cypress/specs/BusyIndicator.cy.tsx @@ -1,10 +1,12 @@ import BusyIndicator from "../../src/BusyIndicator.js"; +import Button from "../../src/Button.js"; +import Dialog from "../../src/Dialog.js"; 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"); @@ -18,9 +20,209 @@ 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"); }); }); + +describe("BusyIndicator general interaction", () => { + it("tests event propagation", () => { + const onClickStub = cy.stub().as("clickStub"); + cy.mount( + + + + + + + + ); + + cy.get("#beforeIndicatorWithBtn").realClick(); + cy.get("#beforeIndicatorWithBtn").should("have.focus"); + + cy.get("[ui5-busy-indicator]") + .shadow() + .find(".ui5-busy-indicator-busy-area") + .should("exist"); + + cy.realPress("Tab"); + + cy.get("[ui5-busy-indicator]").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("[ui5-busy-indicator]").should("have.focus"); + cy.get("#helloBtn").should("not.have.focus"); + + cy.realPress(["Shift", "Tab"]); + + cy.get("#beforeIndicatorWithBtn").should("have.focus"); + }); + + it("test inactive indicator in dialog - correct element from default slot is focused", () => { + cy.mount( + +
Dialog with focus issue
+
+
Buttons are wrapped in busy indicator, which is inactive.
+ + + + +
+ + ); + + cy.get("#dialog-inactive-indicator").invoke("attr", "open", true); + cy.get("[ui5-dialog]").ui5DialogOpened(); + + 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", () => { + cy.mount( + + + Will become busy after 5 seconds + + + + ); + + cy.get("[ui5-busy-indicator]").invoke("attr", "active", true); + + cy.get("[ui5-dialog]").invoke("attr", "open", true); + + cy.get("[ui5-button]").should("have.focus"); + }); + + 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. 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", "144px"); + }); +}); \ No newline at end of file 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"); - }); -});