@ui5/webcomponents 2.4.0 → 2.5.0-rc.0

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,11 @@ import "../../src/ToolbarButton.js";
 import "../../src/ToolbarSelect.js";
 import "../../src/ToolbarSelectOption.js";
 import "../../src/ToolbarSeparator.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 +44,25 @@ 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");
+	});
 });

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

@@ -9,8 +9,11 @@ import "../../../src/MessageStrip.js";
 import "../../../src/MultiComboBox.js";
 import "../../../src/MultiComboBoxItem.js";
 import "../../../src/Panel.js";
+import "../../../src/Button.js";
 import "../../../src/CheckBox.js";
 import "../../../src/Label.js";
+import "../../../src/MenuItem.js";
+import "../../../src/Menu.js";
 
 describe("Event bubbling", () => {
 	it("test bubbling events", () => {
@@ -126,7 +129,13 @@ describe("Event bubbling", () => {
 						<ui5-option>Hello</ui5-option>
 						<ui5-option>World</ui5-option>
 						<ui5-option>Hello</ui5-option>
-					</ui5-select>	
+					</ui5-select>
+					
+					<ui5-button id="btnOpen">Open Menu</ui5-button>
+					<ui5-menu id="myMenu" header-text="Menu" opener="btnOpen">
+						<ui5-menu-item text="New File"></ui5-menu-item>
+						<ui5-menu-item text="New Folder"></ui5-menu-item>
+					</ui5-menu>
 					
 					<ui5-multi-combobox id="myMCB">
 						<ui5-mcb-item text="Cosy"></ui5-mcb-item>
@@ -138,12 +147,19 @@ describe("Event bubbling", () => {
 
 		cy.get("#app")
 			.as("app");
+
 		cy.get("[ui5-dialog]")
 			.as("dialog");
+
 		cy.get("[ui5-select]")
 			.as("select");
+
+		cy.get("[ui5-menu]")
+			.as("menu");
+
 		cy.get("[ui5-multi-combobox]")
 			.as("multiCombobox");
+
 		cy.get("[ui5-multi-combobox]")
 			.shadow()
 			.find(".inputIcon")
@@ -164,6 +180,11 @@ describe("Event bubbling", () => {
 				select.get(0).addEventListener("ui5-close", cy.stub().as("selClosed"));
 			});
 
+		cy.get("@menu")
+			.then(menu => {
+				menu.get(0).addEventListener("ui5-close", cy.stub().as("menuClosed"));
+			});
+
 		cy.get("@multiCombobox")
 			.then(multiCombobox => {
 				multiCombobox.get(0).addEventListener("ui5-close", cy.stub().as("mcbClosed"));
@@ -180,24 +201,32 @@ describe("Event bubbling", () => {
 			.eq(1)
 			.realClick();
 
-		// act - open the  MultiComboBox
+		// act - open/close the  MultiComboBox
 		cy.get("@multiComboboxIcon")
 			.realClick();
 
 		cy.get("@multiCombobox")
-			.shadow()
-			.find("[ui5-responsive-popover]")
+			.find("[ui5-mcb-item]")
 			.should("be.visible");
 
-		// act - close the MultiComboBox
 		cy.get("@multiComboboxIcon")
 			.realClick();
 
+		// act - open/close Menu
+		cy.get("@menu")
+			.ui5MenuOpen();
+
+		cy.get("[ui5-menu-item]")
+			.first()
+			.ui5MenuItemClick();
+
 		// 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("@menuClosed")
+			.should("have.been.calledOnce");
 		cy.get("@dialogClosed")
 			.should("not.be.called");
 		cy.get("@appClosed")

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

@@ -20,8 +20,7 @@ Cypress.Commands.add("ui5MenuOpened", { prevSubject: true }, subject => {
 		.as("menu");
 
 	cy.get("@menu")
-		.should("be.visible")
-		.and("have.attr", "open");
+		.should("have.attr", "open");
 
 	cy.get("@menu")
 		.shadow()