diff --git a/packages/fiori/cypress/specs/SideNavigation.cy.tsx b/packages/fiori/cypress/specs/SideNavigation.cy.tsx
index e46aafbeeef0..db912d8f0a3d 100644
--- a/packages/fiori/cypress/specs/SideNavigation.cy.tsx
+++ b/packages/fiori/cypress/specs/SideNavigation.cy.tsx
@@ -939,33 +939,39 @@ describe("Side Navigation interaction", () => {
);
- cy.get("#parentItem").realClick();
- [
+ const cases: Array<{ selector: () => Cypress.Chainable, expectedCallCount: number }> = [
{
- element: cy.get("#sideNav").shadow().find("[ui5-responsive-popover] [ui5-side-navigation-item][text='2']").shadow()
- .find(".ui5-sn-item"),
+ selector: () => cy.get("#sideNav").shadow().find("[ui5-responsive-popover] [ui5-side-navigation-item][text='2']").shadow().find(".ui5-sn-item"),
expectedCallCount: 1,
},
{
- element: cy.get("#sideNav").shadow().find("[ui5-responsive-popover] [ui5-side-navigation-sub-item][text='2.1']"),
+ selector: () => cy.get("#sideNav").shadow().find("[ui5-responsive-popover] [ui5-side-navigation-sub-item][text='2.1']"),
expectedCallCount: 1,
},
{
- element: cy.get("#sideNav").shadow().find("[ui5-responsive-popover] [ui5-side-navigation-sub-item][text='2.2']"),
+ selector: () => cy.get("#sideNav").shadow().find("[ui5-responsive-popover] [ui5-side-navigation-sub-item][text='2.2']"),
expectedCallCount: 0,
},
- ].forEach(({ element, expectedCallCount }) => {
+ ];
+
+ cases.forEach(({ selector, expectedCallCount }) => {
cy.get("#sideNav")
.then(sideNav => {
sideNav.get(0).addEventListener("ui5-selection-change", cy.stub().as("selectionChangeHandler"));
});
- // act
+ // open the popover fresh each iteration
cy.get("#parentItem").realClick();
- element.realClick();
+ cy.get("#sideNav").shadow().find("[ui5-responsive-popover]").should("be.visible");
+
+ // act
+ selector().realClick();
// assert
- cy.get("@selectionChangeHandler", { timeout: 1000 }).should("have.callCount", expectedCallCount);
+ cy.get("@selectionChangeHandler").should("have.callCount", expectedCallCount);
+
+ // close popover before next iteration (click outside)
+ cy.get("body").click(0, 0);
});
});
@@ -978,6 +984,8 @@ describe("Side Navigation interaction", () => {
);
cy.get("#item").realClick();
+ // wait for first selection to settle before clicking again
+ cy.get("@selectionChangeHandler").should("have.been.calledOnce");
cy.get("#item").realClick();
cy.get("@selectionChangeHandler").should("have.been.calledOnce");
@@ -1021,7 +1029,7 @@ describe("Side Navigation interaction", () => {
.realClick();
cy.get("@overflowMenu")
- .should("be.not.visible");
+ .should("not.be.visible");
cy.get("[ui5-side-navigation-item][text='Home 6']")
.should("be.focused");
@@ -1029,6 +1037,9 @@ describe("Side Navigation interaction", () => {
cy.get("@itemOverflow")
.realClick();
+ cy.get("@overflowMenu")
+ .should("be.visible");
+
cy.get("@overflowMenu")
.find("[ui5-navigation-menu-item][text='Home 7']")
.realClick();
diff --git a/packages/main/cypress/specs/OpenUI5andWebCPopups.cy.tsx b/packages/main/cypress/specs/OpenUI5andWebCPopups.cy.tsx
deleted file mode 100644
index 60dc10a1f7a5..000000000000
--- a/packages/main/cypress/specs/OpenUI5andWebCPopups.cy.tsx
+++ /dev/null
@@ -1,778 +0,0 @@
-import OpenUI5Support from "@ui5/webcomponents-base/dist/features/OpenUI5Support.js";
-import Button from "../../src/Button.js";
-import Dialog from "../../src/Dialog.js";
-import Select from "../../src/Select.js";
-import Option from "../../src/Option.js";
-import ComboBox from "../../src/ComboBox.js";
-import ComboBoxItem from "../../src/ComboBoxItem.js";
-import ResponsivePopover from "../../src/ResponsivePopover.js";
-
-let OpenUI5Element;
-
-function onOpenUI5InitMethod(win) {
- (win as any).sap.ui.require([
- "sap/ui/core/Element",
- "sap/ui/core/HTML",
- "sap/m/Button",
- "sap/m/Dialog",
- "sap/m/Popover",
- "sap/m/Input"
- ], async (Element, HTML, Button, Dialog, Popover, Input) => {
-
- await OpenUI5Support.init();
- OpenUI5Element = Element;
- new Button("openUI5Button", {
- text: "Open OpenUI5 Dialog",
- press: function () {
- new Dialog("openUI5Dialog1", {
- title: "OpenUI5 Dialog",
- draggable: true,
- content: [
- new HTML({
- content:
- `
- Option 1
- Option 2
- Option 3
- Option 4
- Option 5
-
-
-
-
-
-
-
`
- }),
- new Input(),
- new Button({
- text: "Focus stop"
- }),
- new Button("openResPopoverButton", {
- text: "Open WebC Responsive Popover",
- press: function () {
- (document.getElementById("respPopover") as any).open = true;
- }
- }),
- new Button("openResPopoverNoInitialFocusButton", {
- text: "Open WebC RP with NO Initial Focus",
- press: function () {
- (document.getElementById("respPopoverNoInitialFocus") as any).open = true;
- }
- }),
- new Button("openWebCDialog", {
- text: "Open WebC Dialog",
- press: function () {
- (document.getElementById("webCDialog1") as any).open = true;
- }
- })
- ],
- afterClose: function () {
- this.destroy();
- }
- }).open();
- }
- }).placeAt("content");
- });
-
- document.getElementById("myButton").addEventListener("click", function() {
- (document.getElementById("dialog1") as any).open = true;
- });
-
- (win as any).sap.ui.require(["sap/m/Select",
- "sap/m/ComboBox",
- "sap/m/Button",
- "sap/ui/core/Item",
- "sap/ui/core/ShortcutHintsMixin"],
- (Select,
- ComboBox,
- Button,
- Item,
- ShortcutHintsMixin) => {
- new Select("openUI5Select1", {
- items: [
- new Item({ text: "Item 1" }),
- new Item({ text: "Item 2" }),
- new Item({ text: "Item 3" })
- ],
- change: function (oEvent) {
- console.error("Selected item:", oEvent.getParameter("selectedItem").getText());
- }
- }).placeAt("dialog1content");
-
- new ComboBox("openUI5Combobox1", {
- items: [
- new Item({ text: "Item 1" }),
- new Item({ text: "Item 2" }),
- new Item({ text: "Item 3" })
- ]
- }).placeAt("dialog1content");
-
- const button = new Button("openUI5ButtonWithHint", {
- text: "OpenUI5 with Shortcut (Ctrl+S)",
- press: function () {
- openUI5Dialog(win);
- }
- }).placeAt("dialog1content");
-
-
- ShortcutHintsMixin.addConfig(button, {
- event: "press",
- position: "0 0",
- addAccessibilityLabel: true,
- message: "Save"
- }, button);
- });
-
- document.getElementById("dialogButton").addEventListener("click", function () {
- openUI5Dialog(win);
- });
-
- document.getElementById("openUI5DialogFromWebC").addEventListener("click", function () {
- openUI5Dialog(win);
- });
-
- document.getElementById("popoverButtonNoFocus").addEventListener("click", function (event) {
- openUI5Popover(win, event.target);
- });
-}
-
-function openUI5Dialog(win) {
- (win as any).sap.ui.require(["sap/m/Button", "sap/m/Dialog"], (Button, Dialog) => {
- new Dialog("openUI5DialogWithButtons", {
- title: "OpenUI5 Dialog",
- draggable: true,
- content: [
- new Button({
- text: "Focus stop"
- }),
- new Button("openUI5DialogButton", {
- text: "Open WebC Dialog",
- press: function () {
- (document.getElementById("newDialog1") as any).open = true;
- }
- }),
- new Button("openUI5DialogFromUi5", {
- text: "Open UI5 Dialog",
- press: function () {
- openUI5DialogFromUi5(win)
- }
- })
- ],
- afterClose: function () {
- this.destroy();
- }
- }).open();
- });
-}
-
-function openUI5DialogFromUi5(win) {
- (win as any).sap.ui.require(["sap/m/Button", "sap/m/Dialog"], (Button, Dialog) => {
- new Dialog("openUI5DialogFinal", {
- title: "OpenUI5 Dialog",
- draggable: true,
- content: [
- new Button({
- text: "Focus stop"
- })
- ],
- afterClose: function () {
- this.destroy();
- }
- }).open();
- });
-}
-
-function openUI5Popover(win, opener) {
- (win as any).sap.ui.require(["sap/m/Popover", "sap/m/Button"], (Popover, Button) => {
- new Popover("openUI5PopoverSecond", {
- title: "OpenUI5 Popover",
- content: [
- new Button("someButton", {
- text: "Open new OpenUI5 Popover",
- press: function (oEvent) {
- new Popover({
- title: "New OpenUI5 Popover",
- placement: "Bottom",
- content: [
- new Button({
- text: "Focus stop"
- })
- ],
- initialFocus: "someButton",
- afterClose: function () {
- this.destroy();
- }
- }).openBy(oEvent.getSource());
- }
- })
- ],
- initialFocus: "popoverButtonNoFocus",
- afterClose: function () {
- this.destroy();
- }
- }).openBy(opener);
- });
-}
-
-function isOpenUI5DialogOpen($dialog) {
- expect(OpenUI5Element).to.exist;
-
- const dialogInstance = OpenUI5Element.getElementById($dialog.attr("id"));
-
- expect(dialogInstance).to.exist
- expect(dialogInstance.isOpen()).to.be.true;
-};
-
-describe("ui5 and web components integration", () => {
- beforeEach(() => {
- // mount the components
- cy.mount(
- <>
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-
- // define initialization function before loading ui5
- cy.window().then((win) => {
- (win as any).onOpenUI5Init = function () {
- onOpenUI5InitMethod(win);
- };
- });
-
- // add ui5 bootstrap
- cy.document().then((doc) => {
- const ui5Script = doc.createElement('script');
- ui5Script.src = 'https://ui5.sap.com/resources/sap-ui-core.js';
- ui5Script.id = 'sap-ui-bootstrap';
- ui5Script.setAttribute('data-sap-ui-libs', 'sap.m');
- ui5Script.setAttribute('data-sap-ui-oninit', 'onOpenUI5Init');
- doc.head.appendChild(ui5Script);
- });
- });
-
- function OpenWebCDialog() {
- cy.get("#openUI5Button", { timeout: 10000 })
- .should('be.visible');
-
- cy.get('#myButton')
- .should('be.visible')
- .realClick();
-
- cy.get