@ui5/webcomponents 2.4.0-rc.0 → 2.4.0-rc.2

package/cypress/specs/Menu.cy.ts

@@ -27,13 +27,16 @@ describe("Menu interaction", () => {
 
 	it("Menu icons appearance", () => {
 		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-		<ui5-menu open opener="btnOpen">
+		<ui5-menu opener="btnOpen">
 			<ui5-menu-item text="Item 1.0" icon="open-folder">
 				<ui5-menu-item text="1.1"></ui5-menu-item>
 			</ui5-menu-item>
 			<ui5-menu-item text="Item 2.0"></ui5-menu-item>
 		</ui5-menu>`);
 
+		cy.get("[ui5-menu]")
+			.ui5MenuOpen();
+
 		cy.get("[ui5-menu] > [ui5-menu-item]")
 			.as("items");
 
@@ -55,12 +58,15 @@ describe("Menu interaction", () => {
 
 	it("Restore focus to previous element after close", () => {
 		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-		<ui5-menu open opener="btnOpen">
+		<ui5-menu opener="btnOpen">
 			<ui5-menu-item text="Item 1.0" icon="open-folder">
 				<ui5-menu-item text="1.1"></ui5-menu-item>
 			</ui5-menu-item>
 		</ui5-menu>`);
 
+		cy.get("[ui5-menu]")
+			.ui5MenuOpen();
+
 		cy.get("[ui5-menu]")
 			.ui5MenuOpened();
 
@@ -76,11 +82,14 @@ describe("Menu interaction", () => {
 
 	it("Enable navigaion over disabled items", () => {
 		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-		<ui5-menu id="menu" opener="btnOpen" open>
+		<ui5-menu id="menu" opener="btnOpen">
 			<ui5-menu-item text="Item 1"></ui5-menu-item>
 			<ui5-menu-item text="Item 2" disabled></ui5-menu-item>
 		</ui5-menu>`);
 
+		cy.get("[ui5-menu]")
+			.ui5MenuOpen();
+
 		cy.get("[ui5-menu]")
 			.ui5MenuOpened();
 
@@ -88,24 +97,27 @@ describe("Menu interaction", () => {
 			.as("items");
 
 		cy.get("@items")
-			.eq(0)
-			.should("be.focused");
+			.eq(1)
+			.should("be.visible")
+			.ui5MenuItemClick();
 
 		cy.get("@items")
 			.eq(1)
-			.ui5MenuItemClick()
 			.should("be.focused")
 			.and("have.attr", "disabled");
 	});
 
 	it("Add endContent to a menu item", () => {
 		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-		<ui5-menu id="menu" opener="btnOpen" open>
+		<ui5-menu id="menu" opener="btnOpen">
 			<ui5-menu-item text="Item 1">
 				<ui5-button slot="endContent">endContent</ui5-button>
 			</ui5-menu-item>
 		</ui5-menu>`);
 
+		cy.get("[ui5-menu]")
+			.ui5MenuOpen();
+
 		cy.get("[ui5-menu]")
 			.as("menu")
 			.ui5MenuOpened();
@@ -129,12 +141,15 @@ describe("Menu interaction", () => {
 
 	it("Menu and Menu items busy indication - with items", () => {
 		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-		<ui5-menu id="menu" opener="btnOpen" open>
+		<ui5-menu id="menu" opener="btnOpen">
 			<ui5-menu-item text="Item 1" loading-delay="500" loading>
 				<ui5-menu-item text="Item 1.1"></ui5-menu-item>
 			</ui5-menu-item>
 		</ui5-menu>`);
 
+		cy.get("[ui5-menu]")
+			.ui5MenuOpen();
+
 		cy.get("[ui5-menu]")
 			.ui5MenuOpened();
 
@@ -147,10 +162,13 @@ describe("Menu interaction", () => {
 
 	it("Menu and Menu items busy indication - without items", () => {
 		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-		<ui5-menu id="menu" opener="btnOpen" open>
+		<ui5-menu id="menu" opener="btnOpen">
 			<ui5-menu-item text="Item 1" loading-delay="500" loading></ui5-menu-item>
 		</ui5-menu>`);
 
+		cy.get("[ui5-menu]")
+			.ui5MenuOpen();
+
 		cy.get("[ui5-menu] > [ui5-menu-item]")
 			.shadow()
 			.find("[ui5-busy-indicator]")
@@ -190,10 +208,13 @@ describe("Menu interaction", () => {
 	describe("Event firing", () => {
 		it("Event firing - 'ui5-item-click' after 'click' on menu item", () => {
 			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-			<ui5-menu open opener="btnOpen">
+			<ui5-menu opener="btnOpen">
 				<ui5-menu-item text="Item 1.0"></ui5-menu-item>
 			</ui5-menu>`);
 
+			cy.get("[ui5-menu]")
+				.ui5MenuOpen();
+
 			cy.get("[ui5-menu]")
 				.then($item => {
 					$item.get(0).addEventListener("ui5-item-click", cy.stub().as("clicked"));
@@ -211,10 +232,13 @@ describe("Menu interaction", () => {
 
 		it("Event firing - 'ui5-item-click' after 'Space' on menu item", () => {
 			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-			<ui5-menu open opener="btnOpen">
+			<ui5-menu opener="btnOpen">
 				<ui5-menu-item text="Item 1.0"></ui5-menu-item>
 			</ui5-menu>`);
 
+			cy.get("[ui5-menu]")
+				.ui5MenuOpen();
+
 			cy.get("[ui5-menu]")
 				.then($menu => {
 					$menu.get(0).addEventListener("ui5-item-click", cy.stub().as("clicked"));
@@ -232,10 +256,13 @@ describe("Menu interaction", () => {
 
 		it("Event firing - 'ui5-item-click' after 'Enter' on menu item", () => {
 			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-			<ui5-menu open opener="btnOpen">
+			<ui5-menu opener="btnOpen">
 				<ui5-menu-item text="Item 1.0"></ui5-menu-item>
 			</ui5-menu>`);
 
+			cy.get("[ui5-menu]")
+				.ui5MenuOpen();
+
 			cy.get("[ui5-menu]")
 				.then($item => {
 					$item.get(0).addEventListener("ui5-item-click", cy.stub().as("clicked"));
@@ -253,10 +280,13 @@ describe("Menu interaction", () => {
 
 		it("Prevent menu closing on item press", () => {
 			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-			<ui5-menu open opener="btnOpen" @ui5-item-click="${(e: CustomEvent) => e.preventDefault()}">
+			<ui5-menu opener="btnOpen" @ui5-item-click="${(e: CustomEvent) => e.preventDefault()}">
 				<ui5-menu-item text="Item 1.0"></ui5-menu-item>
 			</ui5-menu>`);
 
+			cy.get("[ui5-menu]")
+				.ui5MenuOpen();
+
 			cy.get("[ui5-menu]")
 				.as("menu")
 				.then($item => {
@@ -335,7 +365,7 @@ describe("Menu interaction", () => {
 	describe("Accessibility", () => {
 		it("Menu and Menu items accessibility attributes", () => {
 			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-			<ui5-menu open opener="btnOpen">
+			<ui5-menu opener="btnOpen">
 				<ui5-menu-item text="Item 1.0" accessible-name="test accessible name">
 					<ui5-menu-item text="Item 1.1"></ui5-menu-item>
 				</ui5-menu-item>
@@ -343,6 +373,9 @@ describe("Menu interaction", () => {
 				<ui5-menu-item text="Item 3.0" additional-text="Ctrl+A"></ui5-menu-item>
 			</ui5-menu>`);
 
+			cy.get("[ui5-menu]")
+				.ui5MenuOpen();
+
 			cy.get("[ui5-menu]")
 				.as("menu");
 
@@ -380,40 +413,39 @@ describe("Menu interaction", () => {
 				.eq(2)
 				.shadow()
 				.find("li")
-				.invoke("attr", "aria-keyshortcuts")
-				.should("be.equal", "Ctrl+A");
+				.should("have.attr", "aria-keyshortcuts", "Ctrl+A");
 
 			cy.get("@items")
 				.eq(2)
 				.shadow()
 				.find("li")
-				.invoke("attr", "role")
-				.should("be.equal", "alertdialog");
+				.should("have.attr", "role", "alertdialog");
 
 			cy.get("@items")
 				.eq(2)
 				.shadow()
 				.find("li .ui5-li-additional-text")
-				.invoke("attr", "aria-hidden")
-				.should("be.equal", "true");
+				.should("have.attr", "aria-hidden", "true");
 		});
 
 		it("Menu popover has an accessible name", () => {
 			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-			<ui5-menu open opener="btnOpen">
+			<ui5-menu opener="btnOpen">
 				<ui5-menu-item text="Item 1.0" icon="open-folder">
 					<ui5-menu-item text="1.1"></ui5-menu-item>
 				</ui5-menu-item>
 			</ui5-menu>`);
 
+			cy.get("[ui5-menu]")
+				.ui5MenuOpen();
+
 			cy.get("[ui5-menu]")
 				.ui5MenuOpened();
 
 			cy.get("[ui5-menu]")
 				.shadow()
 				.find("[ui5-responsive-popover]")
-				.invoke("attr", "accessible-name")
-				.should("be.equal", "Select an option from the menu");
+				.should("have.attr", "accessible-name", "Select an option from the menu");
 
 			cy.get("[ui5-menu-item][text='Item 1.0']")
 				.as("item")
@@ -422,8 +454,7 @@ describe("Menu interaction", () => {
 			cy.get("@item")
 				.shadow()
 				.find("[ui5-responsive-popover]")
-				.invoke("attr", "accessible-name")
-				.should("be.equal", "Select an option from the menu");
+				.should("have.attr", "accessible-name", "Select an option from the menu");
 		});
 	});
 });

package/cypress/specs/RTL.cy.ts

@@ -9,11 +9,9 @@ describe("RTL", () => {
 </section>`);
 
 		cy.get("#cbRTL")
-			.invoke("prop", "effectiveDir")
-			.should("be.equal", "rtl");
+			.should("have.prop", "effectiveDir", "rtl");
 
 		cy.get("#cbLTR")
-			.invoke("prop", "effectiveDir")
-			.should("be.equal", "ltr");
+			.should("have.prop", "effectiveDir", "ltr");
 	});
 });

package/cypress/specs/base/AriaLabelHelper.cy.ts

@@ -105,8 +105,7 @@ describe("AriaLabelHelper", () => {
 
 		// assert
 		cy.get("@input")
-			.invoke("attr", "aria-label")
-			.should("eq", UPDATED_ACCESSIBLE_NAME);
+			.should("have.attr", "aria-label", UPDATED_ACCESSIBLE_NAME);
 
 		// act - remove acccessible-name
 		cy.get("#inputEnterDesc")
@@ -114,8 +113,7 @@ describe("AriaLabelHelper", () => {
 
 		// assert - aria-label fallbacks to use the label's for, pointing to this input
 		cy.get("@input")
-			.invoke("attr", "aria-label")
-			.should("eq", "Label for inputEnterDesc");
+			.should("have.attr", "aria-label", "Label for inputEnterDesc");
 
 		// act - add acccessible-name-ref
 		cy.get("#inputEnterDesc")

package/cypress/specs/base/Events.cy.ts

@@ -6,6 +6,8 @@ import "../../../src/Input.js";
 import "../../../src/SuggestionItem.js";
 import "../../../src/features/InputSuggestions.js";
 import "../../../src/MessageStrip.js";
+import "../../../src/MultiComboBox.js";
+import "../../../src/MultiComboBoxItem.js";
 import "../../../src/Panel.js";
 import "../../../src/CheckBox.js";
 import "../../../src/Label.js";
@@ -124,7 +126,12 @@ describe("Event bubbling", () => {
 						<ui5-option>Hello</ui5-option>
 						<ui5-option>World</ui5-option>
 						<ui5-option>Hello</ui5-option>
-					</ui5-select>					
+					</ui5-select>	
+					
+					<ui5-multi-combobox id="myMCB">
+						<ui5-mcb-item text="Cosy"></ui5-mcb-item>
+						<ui5-mcb-item selected text="Compact"></ui5-mcb-item>
+					</ui5-multi-combobox>
 				</ui5-dialog>
 			</div>
 		`);
@@ -135,20 +142,31 @@ describe("Event bubbling", () => {
 			.as("dialog");
 		cy.get("[ui5-select]")
 			.as("select");
+		cy.get("[ui5-multi-combobox]")
+			.as("multiCombobox");
+		cy.get("[ui5-multi-combobox]")
+			.shadow()
+			.find(".inputIcon")
+			.as("multiComboboxIcon");
 
 		cy.get("@app")
 			.then(app => {
-				app.get(0).addEventListener("close", cy.stub().as("appClosed"));
+				app.get(0).addEventListener("ui5-close", cy.stub().as("appClosed"));
 			});
 
 		cy.get("@dialog")
 			.then(dialog => {
-				dialog.get(0).addEventListener("close", cy.stub().as("dialogClosed")); // non-bubbling
+				dialog.get(0).addEventListener("ui5-close", cy.stub().as("dialogClosed"));
 			});
 
 		cy.get("@select")
 			.then(select => {
-				select.get(0).addEventListener("close", cy.stub().as("selClosed")); // non-bubbling
+				select.get(0).addEventListener("ui5-close", cy.stub().as("selClosed"));
+			});
+
+		cy.get("@multiCombobox")
+			.then(multiCombobox => {
+				multiCombobox.get(0).addEventListener("ui5-close", cy.stub().as("mcbClosed"));
 			});
 
 		cy.get("@dialog").invoke("attr", "open", true);
@@ -162,9 +180,24 @@ describe("Event bubbling", () => {
 			.eq(1)
 			.realClick();
 
-		// assert - the close event of the Select does not bubble
+		// act - open the  MultiComboBox
+		cy.get("@multiComboboxIcon")
+			.realClick();
+
+		cy.get("@multiCombobox")
+			.shadow()
+			.find("[ui5-responsive-popover]")
+			.should("be.visible");
+
+		// act - close the MultiComboBox
+		cy.get("@multiComboboxIcon")
+			.realClick();
+
+		// assert - the close events of the Select and MultiComboBox do not bubble
 		cy.get("@selClosed")
 			.should("have.been.calledOnce");
+		cy.get("@mcbClosed")
+			.should("have.been.calledOnce");
 		cy.get("@dialogClosed")
 			.should("not.be.called");
 		cy.get("@appClosed")
@@ -186,7 +219,7 @@ describe("Event bubbling", () => {
 
 		cy.get("@checkbox")
 			.then(checkbox => {
-				checkbox.get(0).addEventListener("change", e => e.preventDefault());
+				checkbox.get(0).addEventListener("ui5-change", e => e.preventDefault());
 			});
 
 		// act

package/cypress/support/commands/Menu.commands.ts

@@ -21,12 +21,17 @@ Cypress.Commands.add("ui5MenuOpened", { prevSubject: true }, subject => {
 
 	cy.get("@menu")
 		.should("be.visible")
-		.should("have.attr", "open");
+		.and("have.attr", "open");
 
 	cy.get("@menu")
 		.shadow()
 		.find("[ui5-responsive-popover]")
-		.and("have.attr", "open");
+		.should("have.attr", "open");
+
+	cy.get("@menu")
+		.find(" > [ui5-menu-item]")
+		.first()
+		.should("be.visible");
 });
 
 Cypress.Commands.add("ui5MenuItemClick", { prevSubject: true }, subject => {