diff --git a/packages/main/cypress/specs/MultiComboBox.cy.tsx b/packages/main/cypress/specs/MultiComboBox.cy.tsx
index 7ac380d6505b..4046f30d0b75 100644
--- a/packages/main/cypress/specs/MultiComboBox.cy.tsx
+++ b/packages/main/cypress/specs/MultiComboBox.cy.tsx
@@ -1,5 +1,6 @@
import MultiComboBox from "../../src/MultiComboBox.js";
import MultiComboBoxItem from "../../src/MultiComboBoxItem.js";
+import type ResponsivePopover from "../../src/ResponsivePopover.js";
describe("Security", () => {
it("tests setting malicious text to items", () => {
@@ -11,11 +12,22 @@ describe("Security", () => {
);
- cy.get("ui5-mcb-item").eq(0).shadow().find(".ui5-li-title")
+ cy.get("[ui5-mcb-item]")
+ .eq(0)
+ .shadow()
+ .find(".ui5-li-title")
.should("have.text", "");
- cy.get("ui5-mcb-item").eq(1).shadow().find(".ui5-li-title")
+
+ cy.get("[ui5-mcb-item]")
+ .eq(1)
+ .shadow()
+ .find(".ui5-li-title")
.should("have.text", "");
- cy.get("ui5-mcb-item").eq(2).shadow().find(".ui5-li-title")
+
+ cy.get("[ui5-mcb-item]")
+ .eq(2)
+ .shadow()
+ .find(".ui5-li-title")
.should("have.text", "Albania");
});
});
@@ -29,30 +41,40 @@ describe("General interaction", () => {
);
cy.get("[ui5-multi-combobox]")
- .shadow()
- .find("input")
- .type('t');
+ .as("mcb")
+ .realClick();
- cy.get("[ui5-multi-combobox]")
- .shadow()
- .find("input")
- .realPress('Enter');
+ cy.get("@mcb")
+ .should("be.focused");
- cy.get("[ui5-multi-combobox]").shadow().find("[ui5-tokenizer]").then($tokenizer => {
- $tokenizer[0].addEventListener("ui5-token-delete", cy.stub().as("tokenDelete"))
- });
+ cy.realPress("t");
- cy.get("[ui5-multi-combobox]")
+ cy.realPress('Enter');
+
+ cy.get("@mcb")
.shadow()
- .find("input")
- .realClick();
+ .find("[ui5-tokenizer]")
+ .then($tokenizer => {
+ $tokenizer[0].addEventListener("ui5-token-delete", cy.stub().as("tokenDelete"))
+ });
+
+ cy.get("@mcb")
+ .shadow()
+ .find("[ui5-tokenizer]")
+ .find("[ui5-token]")
+ .should("exist")
+ .and("have.length", 1);
- cy.get("[ui5-multi-combobox]").shadow()
+ cy.get("@mcb")
+ .shadow()
.find("[ui5-tokenizer]")
- .find("[ui5-token]").shadow()
- .find("[ui5-icon]").realClick();
+ .find("[ui5-token]")
+ .shadow()
+ .find("[ui5-icon]")
+ .realClick();
- cy.get("@tokenDelete").should("have.been.called");
+ cy.get("@tokenDelete")
+ .should("have.been.called");
});
});
@@ -66,27 +88,36 @@ describe("Value State", () => {
);
// add event listener
- cy.get("ui5-multi-combobox")
+ cy.get("[ui5-multi-combobox]")
+ .as("mcb")
.then(mcb => {
mcb.get(0).addEventListener("input", e => {
(mcb.get(0) as MultiComboBox).valueState = (e.target as MultiComboBox).value.length ? "Negative" : "Information";
});
});
+ cy.get("@mcb")
+ .realClick();
+
+ cy.get("@mcb")
+ .should("be.focused");
+
// type "f"
- cy.get("ui5-multi-combobox")
+ cy.realType("f");
+
+ cy.get("@mcb")
.shadow()
- .find("input")
- .realType("f");
+ .find(".ui5-valuestatemessage--error")
cy.realPress("Backspace");
- cy.get("ui5-multi-combobox")
+ cy.get("@mcb")
.shadow()
- .find("input")
- .realPress("f");
+ .find(".ui5-valuestatemessage--information")
+
+ cy.realPress("f");
- cy.get("ui5-multi-combobox")
+ cy.get("@mcb")
.shadow()
.find(".ui5-valuestatemessage--information")
.should("not.exist");
@@ -96,62 +127,52 @@ describe("Value State", () => {
describe("Event firing", () => {
it("tests if open and close events are fired correctly", () => {
cy.mount(
-
+
);
- cy.get("ui5-multi-combobox")
- .as("multiComboBox");
-
- cy.get("@multiComboBox")
+ cy.get("[ui5-multi-combobox]")
+ .as("mcb")
.then($mcb => {
$mcb[0].addEventListener("focusin", () => {
$mcb[0].setAttribute("open", "true");
});
});
- cy.get("@multiComboBox")
- .then($mcb => {
- $mcb[0].addEventListener("ui5-open", cy.stub().as("mcbOpened"));
- });
-
- cy.get("@multiComboBox")
- .then($mcb => {
- $mcb[0].addEventListener("ui5-close", cy.stub().as("mcbClosed"));
- });
-
- cy.get("@multiComboBox")
- .shadow()
- .find("input")
- .as("input");
-
- cy.get("@input")
- .click();
+ cy.get("@mcb")
+ .realClick();
- cy.get("@multiComboBox")
+ cy.get("@mcb")
.shadow()
- .find("ui5-responsive-popover")
- .as("respPopover");
-
- cy.get("@respPopover")
- .should("have.attr", "open");
+ .find("ui5-responsive-popover")
+ .ui5ResponsivePopoverOpened()
cy.get("@mcbOpened")
.should("have.been.calledOnce");
- cy.get("@multiComboBox")
+ cy.get("@mcb")
.shadow()
- .find("ui5-icon")
+ .find("[ui5-icon]")
.as("icon");
cy.get("@icon")
- .click();
+ .realClick();
+
+ cy.get("@mcb")
+ .shadow()
+ .find("ui5-responsive-popover")
+ .ui5ResponsivePopoverClosed();
cy.get("@icon")
- .click();
+ .realClick();
+
+ cy.get("@mcb")
+ .shadow()
+ .find("ui5-responsive-popover")
+ .ui5ResponsivePopoverOpened()
cy.get("@mcbClosed")
.should("have.been.calledOnce");
@@ -163,27 +184,18 @@ describe("Event firing", () => {
describe("Accessibility", () => {
it("should announce the associated label when MultiComboBox is focused", () => {
+ const label = "MultiComboBox aria-label";
+
cy.mount(
<>
-
+
>
);
- cy.get('label[for="mcb"]')
- .invoke('text')
- .then((labelText) => {
-
- cy.get("[ui5-multi-combobox]")
- .shadow()
- .find("input")
- .as("innerInput");
-
- cy.get("@innerInput")
- .click();
-
- cy.get("@innerInput")
- .should("have.attr", "aria-label", labelText);
- });
+ cy.get("[ui5-multi-combobox]")
+ .shadow()
+ .find("input")
+ .should("have.attr", "aria-label", label);
});
});