@ui5/webcomponents 2.4.1-rc.0 → 2.5.0-rc.1

package/cypress/specs/LitKeyFunction.cy.ts

@@ -1,6 +1,7 @@
 import { html } from "lit";
 import "../../src/MultiComboBox.js";
 import "../../src/MultiComboBoxItem.js";
+import type List from "../../src/List.js";
 
 describe("Lit HTML key function for #each", () => {
 	it("LIT HTML does not mess up keys when looping over lists", () => {
@@ -21,15 +22,17 @@ describe("Lit HTML key function for #each", () => {
 
 		cy.get("@mcb")
 			.shadow()
-			.find(".ui5-multi-combobox-all-items-responsive-popover")
-			.as("popover");
+			.find("[ui5-responsive-popover]")
+			.as("rpo");
 
-		cy.get("@popover")
-			.find(".ui5-multi-combobox-all-items-list > ui5-li")
-			.as("items");
+		cy.get("@rpo")
+			.find("[ui5-list]")
+			.as("list");
 
-		cy.get("@items")
-			.eq(0)
+		cy.get("@list")
+			.then($el => {
+				return ($el[0] as List).getSlottedNodes("items");
+			})
 			.realClick();
 
 		cy.get("@mcb")
@@ -37,14 +40,18 @@ describe("Lit HTML key function for #each", () => {
 			.find(".inputIcon")
 			.realClick();
 
-		// cy.get("@items")
-		// 	.eq(0)
-		// 	.should("contain.text", "<empty>")
-		// 	.should("not.have.attr", "selected");
-
-		// cy.get("@items")
-		// 	.eq(3)
-		// 	.should("contain.text", "USA")
-		// 	.should("have.attr", "selected");
+		cy.get("@list")
+			.then($el => {
+				return ($el[0] as List).getSlottedNodes("items")[0];
+			})
+			.invoke("attr", "text", "<empty>")
+			.should("not.have.attr", "selected");
+
+		cy.get("@list")
+			.then($el => {
+				return ($el[0] as List).getSlottedNodes("items")[3];
+			})
+			.invoke("attr", "text", "USA")
+			.should("have.attr", "selected");
 	});
 });

package/cypress/specs/TableGrowing.cy.ts

@@ -0,0 +1,358 @@
+import { html } from "lit";
+
+import "../../src/Table.js";
+import "../../src/TableHeaderRow.js";
+import "../../src/TableCell.js";
+import "../../src/TableRow.js";
+import "../../src/TableGrowing.js";
+
+import type TableGrowing from "../../src/TableGrowing.js";
+
+describe("TableGrowing - Button", () => {
+	function mountTable() {
+		cy.mount(html`
+			<ui5-table id="table">
+				<ui5-table-growing slot="features"></ui5-table-growing>
+				<ui5-table-header-row slot="headerRow">
+					<ui5-table-header-cell><span>ColumnA</span></ui5-table-header-cell>
+				</ui5-table-header-row>
+				<ui5-table-row>
+					<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
+				</ui5-table-row>
+			</ui5-table>
+		`);
+	}
+	describe("Rendering", () => {
+		it("tests button is rendered", () => {
+			mountTable();
+
+			cy.get("[ui5-table-growing]")
+				.shadow()
+				.find("#growing-button")
+				.should("exist")
+				.should("have.attr", "role", "button")
+				.should("have.attr", "aria-labelledby", "growing-text growing-subtext");
+
+			cy.get("[ui5-table")
+				.shadow()
+				.find("#growing-row")
+				.should("exist");
+
+			cy.get("[ui5-table-growing]")
+				.shadow()
+				.find("#growing-text")
+				.should("have.text", "More");
+		});
+
+		it("tests correct custom texts are rendered", () => {
+			const growingText = "My Custom Growing Text",
+				growingSubtext = "My Custom Growing Subtext";
+			cy.mount(html`
+				<ui5-table>
+					<ui5-table-growing slot="features" growing-text="${growingText}" growing-sub-text="${growingSubtext}"/>
+					<ui5-table-header-row slot="headerRow">
+						<ui5-table-header-cell><span>ColumnA</span></ui5-table-header-cell>
+					</ui5-table-header-row>
+					<ui5-table-row>
+						<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
+					</ui5-table-row>
+				</ui5-table>
+			`);
+
+			cy.get("[ui5-table-growing]")
+				.shadow()
+				.find("#growing-button")
+				.should("exist")
+				.should("have.attr", "role", "button")
+				.should("have.attr", "aria-labelledby", "growing-text growing-subtext");
+
+			cy.get("[ui5-table-growing]")
+				.shadow()
+				.find("#growing-text")
+				.should("have.text", growingText);
+
+			cy.get("[ui5-table-growing]")
+				.shadow()
+				.find("#growing-subtext")
+				.should("have.text", growingSubtext);
+		});
+
+		it("tests diabled state", () => {
+			cy.mount(html`
+				<ui5-table>
+					<ui5-table-growing slot="features" disabled></ui5-table-growing>
+					<ui5-table-header-row slot="headerRow">
+						<ui5-table-header-cell><span>ColumnA</span></ui5-table-header-cell>
+					</ui5-table-header-row>
+					<ui5-table-row>
+						<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
+					</ui5-table-row>
+				</ui5-table>
+			`);
+
+			cy.get("[ui5-table]")
+				.shadow()
+				.find("#growing-row")
+				.should("not.exist");
+
+			cy.get("[ui5-table-growing]")
+				.shadow()
+				.find("#growing-button")
+				.should("not.exist");
+		});
+
+		it("tests dynamically setting disabled state", () => {
+			mountTable();
+
+			cy.get("[ui5-table]")
+				.shadow()
+				.find("#growing-row")
+				.should("exist");
+
+			cy.get<TableGrowing>("[ui5-table-growing]")
+				.then(table => { table.get(0).disabled = true; });
+
+			cy.get("[ui5-table]")
+				.shadow()
+				.find("#growing-row")
+				.should("not.exist");
+		});
+
+		it("tests growing button not shown when no data", () => {
+			cy.mount(html`
+				<ui5-table>
+					<ui5-table-growing slot="features"></ui5-table-growing>
+					<ui5-table-header-row slot="headerRow">
+						<ui5-table-header-cell><span>ColumnA</span></ui5-table-header-cell>
+					</ui5-table-header-row>
+				</ui5-table>
+			`);
+
+			cy.get("[ui5-table]")
+				.shadow()
+				.find("#growing-row")
+				.should("not.exist");
+		});
+	});
+
+	describe("Event & Focus", () => {
+		it("tests loadMore event fired upon pressing button", () => {
+			mountTable();
+
+			cy.get<TableGrowing>("[ui5-table-growing]")
+				.then(tableGrowing => tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore")))
+				.click();
+
+			cy.get("@loadMore")
+				.should("have.been.calledOnce");
+		});
+
+		it("test loadMore event fired upon pressing Enter", () => {
+			mountTable();
+
+			cy.get<TableGrowing>("[ui5-table-growing]")
+				.then(tableGrowing => tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore")))
+				.shadow()
+				.find("#growing-button")
+				.focus();
+
+			cy.realPress("Enter");
+
+			cy.get("@loadMore")
+				.should("have.been.calledOnce");
+
+			cy.get<TableGrowing>("[ui5-table-growing]")
+				.shadow()
+				.find("#growing-button")
+				.focus();
+
+			cy.realPress("Space");
+
+			cy.get("@loadMore")
+				.should("have.been.calledTwice");
+		});
+
+		it("tests focus is set to first newly added row", () => {
+			mountTable();
+
+			cy.get<TableGrowing>("[ui5-table-growing]")
+				.then(tableGrowing => {
+					tableGrowing.get(0).addEventListener("load-more", () => {
+						const table = document.getElementById("table");
+						const row = document.createElement("ui5-table-row");
+						row.id = "new-row";
+						row.innerHTML = "<ui5-table-cell><ui5-label>Cell B</ui5-label></ui5-table-cell>";
+						table!.appendChild(row);
+					});
+				})
+				.click();
+
+			cy.get("[ui5-table]")
+				.children("ui5-table-row")
+				.should("have.length", 2);
+
+			cy.get("#new-row")
+				.should("exist")
+				.should("have.focus");
+		});
+
+		it("tests focus is set to growing button when no new rows are added", () => {
+			mountTable();
+
+			cy.get<TableGrowing>("[ui5-table-growing]")
+				.click();
+
+			cy.get("[ui5-table-growing]")
+				.should("have.focus");
+		});
+	});
+});
+
+describe("TableGrowing - Scroll", () => {
+	function mountTable(rowCount: number = 10, overflow = false) {
+		cy.mount(html`
+			<div id="wrapper" style="height: 200px; ${overflow ? "overflow: auto" : ""}">
+			<ui5-table id="table">
+				<ui5-table-growing slot="features" type="Scroll"></ui5-table-growing>
+				<ui5-table-header-row slot="headerRow">
+					<ui5-table-header-cell><span>ColumnA</span></ui5-table-header-cell>
+				</ui5-table-header-row>
+				${Array.from({ length: rowCount }).map(() => html`
+					<ui5-table-row>
+						<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
+					</ui5-table-row>
+				`)}
+			</ui5-table>
+			</div>
+		`);
+	}
+
+	describe("Rendering", () => {
+		it("tests no button shown, when scrollable", () => {
+			mountTable(10, true);
+
+			cy.get("[ui5-table-growing]")
+				.shadow()
+				.find("#growing-button")
+				.should("not.exist");
+
+			cy.get("[ui5-table]")
+				.shadow()
+				.find("#growing-row")
+				.should("not.exist");
+		});
+
+		it("tests button shown when not scrollable", () => {
+			mountTable(1, false);
+
+			cy.get("[ui5-table-growing]")
+				.shadow()
+				.find("#growing-button")
+				.should("exist");
+
+			cy.get("[ui5-table]")
+				.shadow()
+				.find("#growing-row")
+				.should("exist");
+		});
+
+		it("tests button not shown when not scrollable and disabled", () => {
+			mountTable(1, true);
+
+			cy.get<TableGrowing>("[ui5-table-growing]")
+				.then(tableGrowing => { tableGrowing.get(0).disabled = true; });
+
+			cy.get("[ui5-table]")
+				.shadow()
+				.find("#growing-row")
+				.should("not.exist");
+
+			cy.get("[ui5-table-growing]")
+				.shadow()
+				.find("#growing-button")
+				.should("not.exist");
+		});
+	});
+
+	describe("Event", () => {
+		it("tests loadMore event fire upon scrolling to table end", () => {
+			mountTable(10, true);
+
+			cy.get<TableGrowing>("[ui5-table-growing]")
+				.then(tableGrowing => tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore")));
+
+			cy.get("[ui5-table-row]:last-child")
+				.scrollIntoView();
+
+			cy.get("@loadMore")
+				.should("have.been.calledOnce");
+		});
+
+		it("tests button fires load-more, button vanishes, scroll to end fires load-more", () => {
+			mountTable(1, true);
+
+			cy.get<TableGrowing>("[ui5-table-growing]")
+				.then(tableGrowing => {
+					tableGrowing.get(0).addEventListener("load-more", () => {
+						const table = document.getElementById("table");
+						Array.from({ length: 10 }).forEach(() => {
+							const row = document.createElement("ui5-table-row");
+							row.innerHTML = "<ui5-table-cell><ui5-label>Cell B</ui5-label></ui5-table-cell>";
+							table!.appendChild(row);
+						});
+					});
+					tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore"));
+				})
+				.click();
+
+			cy.get("@loadMore")
+				.should("have.been.calledOnce");
+
+			cy.get("[ui5-table]")
+				.children("ui5-table-row")
+				.should("have.length", 11);
+
+			cy.get("[ui5-table-growing]")
+				.shadow()
+				.find("#growing-button")
+				.should("not.exist");
+
+			cy.get("[ui5-table]")
+				.shadow()
+				.find("#growing-row")
+				.should("not.exist");
+
+			for (let i = 2; i <= 6; i++) {
+				cy.get("#wrapper")
+					.scrollTo("bottom", { duration: 300 });
+
+				cy.get("@loadMore")
+					.should("have.callCount", i);
+
+				cy.get("[ui5-table]")
+					.children("ui5-table-row")
+					.should("have.length", 1 + 10 * i);
+			}
+		});
+
+		it("tests load-more not fired when disabled", () => {
+			mountTable(11, true);
+
+			cy.get<TableGrowing>("[ui5-table-growing]")
+				.then(tableGrowing => {
+					tableGrowing.get(0).disabled = true;
+					tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore"));
+				});
+
+			cy.get("[ui5-table-row]:last-child")
+				.scrollIntoView();
+
+			cy.get("[ui5-table]")
+				.children("ui5-table-row")
+				.should("have.length", 11);
+
+			cy.get("@loadMore")
+				.should("not.have.been.called");
+		});
+	});
+});

package/cypress/specs/Tokenizer.cy.ts

@@ -0,0 +1,114 @@
+import { html } from "lit";
+import "../../src/Tokenizer.js";
+import type Tokenizer from "../../src/Tokenizer.js";
+
+describe("Tokenizer - multi-line and Clear All", () => {
+	it("'Clear All' link is rendered for multi-line tokenizer and show-clear-all set to true", () => {
+		cy.mount(html`<ui5-tokenizer show-clear-all multi-line>
+			<ui5-token text="Andora"></ui5-token>
+			<ui5-token text="Bulgaria"></ui5-token>
+			<ui5-token text="Canada"></ui5-token>
+			<ui5-token text="Denmark"></ui5-token>
+			<ui5-token text="Estonia"></ui5-token>
+			<ui5-token text="Finland"></ui5-token>
+			<ui5-token text="Germany"></ui5-token>
+		</ui5-tokenizer>`);
+
+		cy.get<Tokenizer>("[ui5-tokenizer]")
+			.shadow()
+			.find(".ui5-tokenizer--clear-all")
+			.should("exist");
+	});
+
+	it("'Clear All' link is rendered even for 1 token when in multi-line mode", () => {
+		cy.mount(html`<ui5-tokenizer show-clear-all multi-line>
+			<ui5-token text="Andora"></ui5-token>
+		</ui5-tokenizer>`);
+
+		cy.get<Tokenizer>("[ui5-tokenizer]")
+			.shadow()
+			.find(".ui5-tokenizer--clear-all")
+			.should("exist");
+	});
+
+	it("'Clear All' link is not rendered for single-line tokenizer even when show-clear-all is set to true", () => {
+		cy.mount(html`<ui5-tokenizer show-clear-all>
+						<ui5-token text="Andora"></ui5-token>
+					</ui5-tokenizer>`);
+
+		cy.get<Tokenizer>("[ui5-tokenizer]")
+			.shadow()
+			.find(".ui5-tokenizer--clear-all")
+			.should("not.exist");
+	});
+
+	it("'Clear All' link is not rendered for multi-line tokenizer when show-clear-all is set to false", () => {
+		cy.mount(html`<ui5-tokenizer multi-line>
+			<ui5-token text="Andora"></ui5-token>
+			<ui5-token text="Bulgaria"></ui5-token>
+			<ui5-token text="Canada"></ui5-token>
+			<ui5-token text="Denmark"></ui5-token>
+			<ui5-token text="Estonia"></ui5-token>
+			<ui5-token text="Finland"></ui5-token>
+			<ui5-token text="Germany"></ui5-token>
+		</ui5-tokenizer>`);
+
+		cy.get<Tokenizer>("[ui5-tokenizer]")
+			.shadow()
+			.find(".ui5-tokenizer--clear-all")
+			.should("not.exist");
+	});
+
+	it("'Clear All' link is not rendered for multi-line readonly tokenizer when show-clear-all 'true'", () => {
+		cy.mount(html`<ui5-tokenizer multi-line show-clear-all readonly>
+			<ui5-token text="Andora"></ui5-token>
+			<ui5-token text="Bulgaria"></ui5-token>
+			<ui5-token text="Canada"></ui5-token>
+			<ui5-token text="Denmark"></ui5-token>
+			<ui5-token text="Estonia"></ui5-token>
+			<ui5-token text="Finland"></ui5-token>
+			<ui5-token text="Germany"></ui5-token>
+		</ui5-tokenizer>`);
+
+		cy.get<Tokenizer>("[ui5-tokenizer]")
+			.shadow()
+			.find(".ui5-tokenizer--clear-all")
+			.should("not.exist");
+	});
+
+	it("'n-more' link is not rendered for multi-line tokenizer", () => {
+		cy.mount(html`<ui5-tokenizer multi-line style="width: 100px;">
+			<ui5-token text="Andora"></ui5-token>
+			<ui5-token text="Bulgaria"></ui5-token>
+			<ui5-token text="Canada"></ui5-token>
+			<ui5-token text="Denmark"></ui5-token>
+			<ui5-token text="Estonia"></ui5-token>
+			<ui5-token text="Finland"></ui5-token>
+			<ui5-token text="Germany"></ui5-token>
+		</ui5-tokenizer>`);
+
+		cy.get<Tokenizer>("[ui5-tokenizer]")
+			.shadow()
+			.find(".ui5-tokenizer--more-text")
+			.should("not.exist");
+	});
+
+	it("Pressing 'Clear All' link fires token-delete event", () => {
+		cy.mount(html`<ui5-tokenizer show-clear-all multi-line>
+			<ui5-token text="Andora"></ui5-token>
+			<ui5-token text="Bulgaria"></ui5-token>
+			<ui5-token text="Canada"></ui5-token>
+		</ui5-tokenizer>`);
+
+		cy.get<Tokenizer>("[ui5-tokenizer]").then($tokenizer => $tokenizer.get(0).addEventListener("token-delete", cy.stub().as("delete")));
+
+		cy.get<Tokenizer>("[ui5-tokenizer]")
+			.shadow()
+			.find(".ui5-tokenizer--clear-all")
+			.eq(0)
+			.click();
+
+		cy.get("@delete")
+			.should("have.been.calledOnce");
+	});
+});

package/cypress/specs/Toolbar.cy.ts

@@ -4,7 +4,12 @@ import "../../src/ToolbarButton.js";
 import "../../src/ToolbarSelect.js";
 import "../../src/ToolbarSelectOption.js";
 import "../../src/ToolbarSeparator.js";
+import "../../src/ToolbarSpacer.js";
+import "../../src/Popover.js";
 import type ToolbarItem from "../../src/ToolbarItem.js";
+import "@ui5/webcomponents-icons/dist/add.js";
+import "@ui5/webcomponents-icons/dist/decline.js";
+import "@ui5/webcomponents-icons/dist/employee.js";
 
 describe("Toolbar general interaction", () => {
 	it("Should not return null upon calling getDomRef for all direct child items", () => {
@@ -40,4 +45,50 @@ describe("Toolbar general interaction", () => {
 					.should("not.be.undefined");
 			});
 	});
+
+	it("should be able to use toolbar button as popover opener", () => {
+		cy.mount(html`
+			<ui5-toolbar id="tb">
+				<ui5-toolbar-button icon="add" text="Left 1 (long)" id="clickCounter"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="decline" text="Left 2" id="clearCounter"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="employee" text="Left 3"></ui5-toolbar-button>
+				<ui5-toolbar-separator></ui5-toolbar-separator>
+				<ui5-toolbar-button icon="decline" text="Left 4"></ui5-toolbar-button>
+				<ui5-toolbar-button id="btnOpenMenu" text="Open Menu" prevent-overflow-closing></ui5-toolbar-button>
+			</ui5-toolbar>
+			<ui5-popover id="popup" opener="btnOpenMenu">
+				Hello World
+			</ui5-popover>
+		`);
+
+		cy.get("#popup").invoke("prop", "open", "true");
+
+		cy.get("#popup")
+			.should("be.visible");
+	});
+
+	it("shouldn't have toolbar button as popover opener when there is spacer before last toolbar item", () => {
+		cy.mount(html`
+			<ui5-toolbar id="otb_spacer">
+				<ui5-toolbar-button icon="add" text="Plus" design="Default"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="employee" text="Hire"></ui5-toolbar-button>
+				<ui5-toolbar-separator></ui5-toolbar-separator>
+				<ui5-toolbar-button icon="add" text="Add"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="decline" text="Decline"></ui5-toolbar-button>
+				<ui5-toolbar-spacer></ui5-toolbar-spacer>
+				<ui5-toolbar-button icon="add" text="Append"></ui5-toolbar-button>
+			</ui5-toolbar>
+		`);
+
+		cy.get("#otb_spacer")
+			.as("toolbar");
+
+		// eslint-disable-next-line cypress/no-unnecessary-waiting
+		cy.wait(500);
+
+		cy.get("@toolbar")
+			.shadow()
+			.find(".ui5-tb-overflow-btn-hidden")
+			.should("exist", "hidden class attached to tb button, meaning it's not shown as expected");
+	});
 });

package/cypress/specs/Tree.cy.ts

@@ -0,0 +1,29 @@
+import { html } from "lit";
+import "../../src/Tree.js";
+import "../../src/TreeItem.js";
+
+describe("Tree Tests", () => {
+	it("tests accessibility properties forwarded to the list", () => {
+		cy.mount(html`
+		<ui5-tree
+			accessible-name="Tree"
+			accessible-name-ref="lblDesc1"
+			accessible-description="Description"
+			accessible-description-ref="lblDesc2"
+		></ui5-tree>
+		<div id="lblDesc1">Tree</div>
+		<div id="lblDesc2">Description</div>
+		`);
+
+		cy.get("[ui5-tree]")
+			.as("tree");
+
+		cy.get("@tree")
+			.shadow()
+			.find(".ui5-tree-root")
+			.should("have.attr", "accessible-name", "Tree")
+			.and("have.attr", "accessible-name-ref", "lblDesc1")
+			.and("have.attr", "accessible-description", "Description")
+			.and("have.attr", "accessible-description-ref", "lblDesc2");
+	});
+});

package/cypress/specs/base/{AriaLabelHelper.cy.ts → AccessibilityTextsHelper.cy.ts}

@@ -1,8 +1,9 @@
 import { html } from "lit";
 import "../../../src/Label.js";
 import "../../../src/Input.js";
+import "../../../src/List.js";
 
-describe("AriaLabelHelper", () => {
+describe("AccessibilityTextsHelper", () => {
 	it("Label-for tests", () => {
 		cy.mount(html`
 			<ui5-input id="myInput" placeholder="input placeholder" class="field"></ui5-input>
@@ -277,4 +278,39 @@ describe("AriaLabelHelper", () => {
 		cy.get("@input")
 			.should("have.attr", "aria-label", "Desc1X Desc4X");
 	});
+
+	it("Tests accessibleDescription and accessibleDescriptionRef with ui5-list", () => {
+		cy.mount(html`
+			<ui5-label id="lblDesc1">Desc1</ui5-label>
+			<ui5-label id="lblDesc2">Desc2</ui5-label>
+			<ui5-list id="list" accessible-description-ref="lblDesc1 lblDesc2" accessible-description="Desc3"></ui5-list>
+		`);
+
+		cy.get("#list")
+			.shadow()
+			.find("ul")
+			.as("list");
+
+		// assert
+		cy.get("@list")
+			.should("have.attr", "aria-description", "Desc1 Desc2");
+
+		// act - update text of referenced label
+		cy.get("#lblDesc1")
+			.then($el => {
+				$el.get(0).innerHTML = `${$el.get(0).innerHTML}X`;
+			});
+
+		// assert
+		cy.get("@list")
+			.should("have.attr", "aria-description", "Desc1X Desc2");
+
+		// act - update accessible-description-ref
+		cy.get("#list")
+			.invoke("removeAttr", "accessible-description-ref");
+
+		// assert
+		cy.get("@list")
+			.should("have.attr", "aria-description", "Desc3");
+	});
 });

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

@@ -206,8 +206,7 @@ describe("Event bubbling", () => {
 			.realClick();
 
 		cy.get("@multiCombobox")
-			.shadow()
-			.find("[ui5-responsive-popover]")
+			.find("[ui5-mcb-item]")
 			.should("be.visible");
 
 		cy.get("@multiComboboxIcon")