@ui5/webcomponents 2.7.0-rc.1 → 2.7.0

package/cypress/specs/{Menu.cy.ts → Menu.cy.tsx}

@@ -1,38 +1,53 @@
-import { html } from "lit";
-import "../../src/Button.js";
-import "../../src/Menu.js";
-import "../../src/MenuItem.js";
-import type MenuItem from "../../src/MenuItem.js";
+import Button from "../../src/Button.js";
+import Menu from "../../src/Menu.js";
+import MenuItem from "../../src/MenuItem.js";
+
+import openFolder from "@ui5/webcomponents-icons/dist/open-folder.js";
+import addFolder from "@ui5/webcomponents-icons/dist/add-folder.js";
+import locked from "@ui5/webcomponents-icons/dist/locked.js";
+import favorite from "@ui5/webcomponents-icons/dist/favorite.js";
 
 describe("Menu interaction", () => {
 	it("Menu opens after button click", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-		<ui5-menu id="menu" opener="btnOpen">
-			<ui5-menu-item text="New File"></ui5-menu-item>
-		</ui5-menu>`);
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open Menu</Button>
+				<Menu id="menu" opener="btnOpen">
+					<MenuItem text="New File"></MenuItem>
+				</Menu>
+			</>
+		);
 
 		cy.get("[ui5-menu]")
 			.ui5MenuOpen({ opener: "btnOpen" });
 	});
 
 	it("Menu opens after button click", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-		<ui5-menu>
-			<ui5-menu-item text="New File"></ui5-menu-item>
-		</ui5-menu>`);
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open Menu</Button>
+				<Menu>
+					<MenuItem text="New File"></MenuItem>
+				</Menu>
+			</>
+		);
 
 		cy.get("[ui5-menu]")
 			.ui5MenuOpen({ opener: "btnOpen" });
 	});
 
 	it("Menu icons appearance", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-		<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.mount(
+			<>
+				<Button id="btnOpen">Open Menu</Button>
+				<Menu opener="btnOpen">
+					<MenuItem text="Item 1.0" icon={openFolder}>
+						<MenuItem text="1.1"></MenuItem>
+					</MenuItem>
+					<MenuItem text="Item 2.0"></MenuItem>
+				</Menu>
+			</>
+		);
 
 		cy.get("[ui5-menu]")
 			.ui5MenuOpen();
@@ -57,12 +72,16 @@ describe("Menu interaction", () => {
 	});
 
 	it("Restore focus to previous element after close", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-		<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.mount(
+			<>
+				<Button id="btnOpen">Open Menu</Button>
+				<Menu opener="btnOpen">
+					<MenuItem text="Item 1.0" icon={openFolder}>
+						<MenuItem text="1.1"></MenuItem>
+					</MenuItem>
+				</Menu>
+			</>
+		);
 
 		cy.get("[ui5-menu]")
 			.ui5MenuOpen();
@@ -81,11 +100,15 @@ 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">
-			<ui5-menu-item text="Item 1"></ui5-menu-item>
-			<ui5-menu-item text="Item 2" disabled></ui5-menu-item>
-		</ui5-menu>`);
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open Menu</Button>
+				<Menu id="menu" opener="btnOpen">
+					<MenuItem text="Item 1"></MenuItem>
+					<MenuItem text="Item 2" disabled></MenuItem>
+				</Menu>
+			</>
+		);
 
 		cy.get("[ui5-menu]")
 			.ui5MenuOpen();
@@ -97,23 +120,27 @@ describe("Menu interaction", () => {
 			.as("items");
 
 		cy.get("@items")
-			.eq(1)
+			.last()
 			.should("be.visible")
 			.ui5MenuItemClick();
 
 		cy.get("@items")
-			.eq(1)
+			.last()
 			.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">
-			<ui5-menu-item text="Item 1">
-				<ui5-button slot="endContent">endContent</ui5-button>
-			</ui5-menu-item>
-		</ui5-menu>`);
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open Menu</Button>
+				<Menu id="menu" opener="btnOpen">
+					<MenuItem text="Item 1">
+						<Button slot="endContent">endContent</Button>
+					</MenuItem>
+				</Menu>
+			</>
+		);
 
 		cy.get("[ui5-menu]")
 			.ui5MenuOpen();
@@ -140,12 +167,16 @@ 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">
-			<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.mount(
+			<>
+				<Button id="btnOpen">Open Menu</Button>
+				<Menu id="menu" opener="btnOpen">
+					<MenuItem text="Item 1" loadingDelay={500} loading={true}>
+						<MenuItem text="Item 1.1"></MenuItem>
+					</MenuItem>
+				</Menu>
+			</>
+		);
 
 		cy.get("[ui5-menu]")
 			.ui5MenuOpen();
@@ -161,10 +192,14 @@ 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">
-			<ui5-menu-item text="Item 1" loading-delay="500" loading></ui5-menu-item>
-		</ui5-menu>`);
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open Menu</Button>
+				<Menu id="menu" opener="btnOpen">
+					<MenuItem text="Item 1" loadingDelay={500} loading={true}></MenuItem>
+				</Menu>
+			</>
+		);
 
 		cy.get("[ui5-menu]")
 			.ui5MenuOpen();
@@ -177,10 +212,14 @@ describe("Menu interaction", () => {
 	});
 
 	it("Restore focus on close", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-		<ui5-menu id="menu">
-			<ui5-menu-item text="Item 1"></ui5-menu-item>
-		</ui5-menu>`);
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open Menu</Button>
+				<Menu id="menu">
+					<MenuItem text="Item 1"></MenuItem>
+				</Menu>
+			</>
+		);
 
 		cy.get("#btnOpen")
 			.as("button")
@@ -206,18 +245,20 @@ describe("Menu interaction", () => {
 	});
 
 	it("Set focus on first item", () => {
-		cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-		<ui5-menu id="menu" loading loading-delay="100">
-		</ui5-menu>`);
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open Menu</Button>
+				<Menu id="menu" loadingDelay={100} loading={true}></Menu>
+			</>
+		);
 
 		cy.get("[ui5-menu]")
 			.as("menu").then($menu => {
 				const menu = $menu.get(0) as Menu;
 
-				menu.addEventListener("ui5-before-open", () => {
+				menu.addEventListener("ui5-open", () => {
 					setTimeout(() => {
 						menu.loading = false;
-						menu.loadingDelay = 0;
 
 						const oneNode = document.createElement("ui5-menu-item") as MenuItem;
 						oneNode.text = "Open from Amazon Cloud";
@@ -246,10 +287,14 @@ 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 opener="btnOpen">
-				<ui5-menu-item text="Item 1.0"></ui5-menu-item>
-			</ui5-menu>`);
+			cy.mount(
+				<>
+					<Button id="btnOpen">Open Menu</Button>
+					<Menu opener="btnOpen">
+						<MenuItem text="Item 1.0"></MenuItem>
+					</Menu>
+				</>
+			);
 
 			cy.get("[ui5-menu]")
 				.ui5MenuOpen();
@@ -270,10 +315,14 @@ 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 opener="btnOpen">
-				<ui5-menu-item text="Item 1.0"></ui5-menu-item>
-			</ui5-menu>`);
+			cy.mount(
+				<>
+					<Button id="btnOpen">Open Menu</Button>
+					<Menu opener="btnOpen">
+						<MenuItem text="Item 1.0"></MenuItem>
+					</Menu>
+				</>
+			);
 
 			cy.get("[ui5-menu]")
 				.ui5MenuOpen();
@@ -294,10 +343,14 @@ 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 opener="btnOpen">
-				<ui5-menu-item text="Item 1.0"></ui5-menu-item>
-			</ui5-menu>`);
+			cy.mount(
+				<>
+					<Button id="btnOpen">Open Menu</Button>
+					<Menu opener="btnOpen">
+						<MenuItem text="Item 1.0"></MenuItem>
+					</Menu>
+				</>
+			);
 
 			cy.get("[ui5-menu]")
 				.ui5MenuOpen();
@@ -318,10 +371,14 @@ describe("Menu interaction", () => {
 		});
 
 		it("Prevent menu closing on item press", () => {
-			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-			<ui5-menu opener="btnOpen" @ui5-item-click="${(e: CustomEvent) => e.preventDefault()}">
-				<ui5-menu-item text="Item 1.0"></ui5-menu-item>
-			</ui5-menu>`);
+			cy.mount(
+				<>
+					<Button id="btnOpen">Open Menu</Button>
+					<Menu opener="btnOpen" onui5-item-click={(e: CustomEvent) => e.preventDefault()}>
+						<MenuItem text="Item 1.0"></MenuItem>
+					</Menu>
+				</>
+			);
 
 			cy.get("[ui5-menu]")
 				.ui5MenuOpen();
@@ -349,10 +406,18 @@ describe("Menu interaction", () => {
 		});
 
 		it("Events firing on open/close of the menu", () => {
-			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-			<ui5-menu id="menu" opener="btnOpen">
-				<ui5-menu-item text="New File"></ui5-menu-item>
-			</ui5-menu>`);
+			cy.mount(
+				<>
+					<Button id="btnOpen">Open Menu</Button>
+					<Menu id="menu" opener="btnOpen">
+						<MenuItem text="New File"></MenuItem>
+					</Menu>
+				</>
+			);
+
+			// Possible solution is to wait until the opener is visible
+			cy.get("[ui5-button]")
+				.should("be.visible");
 
 			cy.get("[ui5-menu]")
 				.then($item => {
@@ -403,14 +468,18 @@ 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 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>
-				<ui5-menu-item text="Item 2.0" accessible-name="test accessible name"></ui5-menu-item>
-				<ui5-menu-item text="Item 3.0" additional-text="Ctrl+A"></ui5-menu-item>
-			</ui5-menu>`);
+			cy.mount(
+				<>
+					<Button id="btnOpen">Open Menu</Button>
+					<Menu opener="btnOpen">
+						<MenuItem text="Item 1.0" accessibleName="test accessible name">
+							<MenuItem text="Item 1.1"></MenuItem>
+						</MenuItem>
+						<MenuItem text="Item 2.0" accessibleName="test accessible name"></MenuItem>
+						<MenuItem text="Item 3.0" additionalText="Ctrl+A"></MenuItem>
+					</Menu>
+				</>
+			);
 
 			cy.get("[ui5-menu]")
 				.ui5MenuOpen();
@@ -468,12 +537,16 @@ describe("Menu interaction", () => {
 		});
 
 		it("Menu popover has an accessible name", () => {
-			cy.mount(html`<ui5-button id="btnOpen">Open Menu</ui5-button>
-			<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.mount(
+				<>
+					<Button id="btnOpen">Open Menu</Button>
+					<Menu opener="btnOpen">
+						<MenuItem text="Item 1.0" icon={openFolder}>
+							<MenuItem text="1.1"></MenuItem>
+						</MenuItem>
+					</Menu>
+				</>
+			);
 
 			cy.get("[ui5-menu]")
 				.ui5MenuOpen();
@@ -495,5 +568,48 @@ describe("Menu interaction", () => {
 				.find("[ui5-responsive-popover]")
 				.should("have.attr", "accessible-name", "Select an option from the menu");
 		});
+
+		it("Menu items - navigation in endContent", () => {
+			cy.mount(
+				<>
+					<Button id="btnOpen">Open Menu</Button>
+					<Menu id="menu" opener="btnOpen">
+						<MenuItem id="item2" text="Item 2">
+							<Button id="newLock" slot="endContent" icon={locked} design="Transparent" />
+							<Button id="newFavorite" slot="endContent" icon={favorite} design="Transparent" />
+						</MenuItem>
+						<MenuItem text="Item3" additionalText="Ctrl+F" icon={addFolder} />
+					</Menu>
+				</>
+			);
+
+			cy.get("[ui5-menu]")
+				.ui5MenuOpen();
+
+			cy.get("[ui5-menu] > [ui5-menu-item]").as("items");
+			cy.get("[ui5-menu-item] > [ui5-button]").as("buttons");
+
+			cy.get("@items")
+				.first()
+				.should("be.focused");
+
+			cy.realPress("ArrowRight");
+			cy.get("@buttons").first().should("be.focused");
+
+			cy.realPress("ArrowRight");
+			cy.get("@buttons").last().should("be.focused");
+
+			cy.realPress("ArrowRight");
+			cy.get("@buttons").last().should("be.focused");
+
+			cy.realPress("ArrowLeft");
+			cy.get("@buttons").first().should("be.focused");
+
+			cy.realPress("ArrowLeft");
+			cy.get("@buttons").first().should("be.focused");
+
+			cy.realPress("ArrowDown");
+			cy.get("@items").last().should("be.focused");
+		});
 	});
 });

package/cypress/specs/MessageStrip.cy.tsx

@@ -0,0 +1,164 @@
+import Button from "../../src/Button.js";
+import Icon from "../../src/Icon.js";
+import MessageStrip from "../../src/MessageStrip.js";
+import ResponsivePopover from "../../src/ResponsivePopover.js";
+import {
+	MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION,
+	MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM,
+	MESSAGE_STRIP_INFORMATION,
+	MESSAGE_STRIP_CLOSABLE,
+	MESSAGE_STRIP_CUSTOM,
+} from "../../src/generated/i18n/i18n-defaults.js";
+
+import palette from "@ui5/webcomponents-icons/dist/palette.js";
+
+type MSDesignInfo = {
+	design: "ColorSet1" | "Information" | "Positive" | "Negative" | "Critical" | "ColorSet2" | undefined;
+	btnText: string;
+}
+
+describe("API", () => {
+	it("tests close event", () => {
+		cy.mount(<MessageStrip>MessageStrip</MessageStrip>);
+
+		cy.get("[ui5-message-strip]").then($strip => {
+			$strip.get(0).addEventListener("close", cy.stub().as("close"));
+		});
+
+		cy.get("[ui5-message-strip]")
+			.shadow()
+			.find(".ui5-message-strip-close-button")
+			.as("closeButton");
+
+		cy.get("@closeButton")
+			.realClick();
+
+		cy.get("@closeButton")
+			.realPress("Space");
+
+		cy.get("@closeButton")
+			.realPress("Enter");
+
+		cy.get("@close").should("have.callCount", 3);
+	});
+
+	it("Message strip is rendered without icon when design changes from default to a specific color set and scheme", () => {
+		cy.mount(<MessageStrip >MessageStrip w/ default properties</MessageStrip>);
+
+		cy.get("[ui5-message-strip]")
+			.invoke("prop", "design", "ColorSet1")
+			.invoke("prop", "colorScheme", "1");
+
+		cy.get("[ui5-message-strip]")
+			.shadow()
+			.find("ui5-icon")
+			.should("not.exist");
+	});
+
+	it("should display the correct tooltip text for different designs", () => {
+		const designs: Array<MSDesignInfo> = [
+		  {
+				design: "Information",
+				btnText: MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION.defaultText,
+		  },
+		  {
+				design: "ColorSet1",
+				btnText: MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM.defaultText,
+		  },
+		];
+
+		designs.forEach(({ design, btnText }) => {
+		  cy.mount(<MessageStrip class="top" design={design}>{design} design with icon and close button:</MessageStrip>);
+
+		  cy.get("[ui5-message-strip]")
+				.shadow()
+				.find("ui5-button")
+				.shadow()
+				.find("button")
+				.should("have.attr", "title", btnText);
+		});
+	});
+
+	it("should not close the popover when close button is clicked", () => {
+		cy.mount(
+			<>
+				<Button id="btnopen">Open ResponsivePopover</Button>
+				<ResponsivePopover
+					opener="btnopen"
+					headerText="Newsletter subscription"
+					id="resppopover"
+				>
+					<div class="popover-content">
+						<MessageStrip design="Information">Information Message</MessageStrip>
+					</div>
+
+					<div slot="footer" class="popover-footer">
+						<Button id="closePopoverButton" design="Emphasized">Subscribe</Button>
+					</div>
+				</ResponsivePopover>
+			</>
+		);
+
+		cy.get("[ui5-button]")
+			.as("button");
+
+		cy.get("[ui5-responsive-popover]")
+			.as("popover");
+
+		cy.get("@button")
+			.then($btn => {
+				$btn[0].addEventListener("click", () => {
+					cy.get("@popover").then($popover => {
+						$popover[0].setAttribute("open", "");
+					});
+				});
+			});
+
+		cy.get("@popover")
+			.then($popover => {
+				$popover[0].addEventListener("close", () => {
+					$popover[0].removeAttribute("open");
+				});
+			});
+
+		cy.get("@button")
+			.realClick();
+
+		cy.get("@popover")
+			.should("have.attr", "open");
+
+		cy.get("ui5-message-strip")
+			.shadow()
+			.find("ui5-button")
+			.as("buttonMS");
+
+		cy.get("@buttonMS")
+			.realClick();
+
+		cy.get("@popover")
+			.should("have.attr", "open");
+	});
+});
+
+describe("Accessibility", () => {
+	it("Test hidden text element content", () => {
+		cy.mount(
+			<>
+				<MessageStrip id="messageStrip">Hello World!</MessageStrip>
+				<MessageStrip id="colorSet1ColorScheme1" design="ColorSet1" colorScheme="1" class="top">
+					<Icon name={palette} slot="icon"></Icon>Color Set 1 - color-scheme 1
+				</MessageStrip>
+			</>
+		);
+
+		cy.get("#messageStrip")
+			.shadow()
+			.find(".ui5-hidden-text")
+			.should("have.text", `${MESSAGE_STRIP_INFORMATION.defaultText} ${MESSAGE_STRIP_CLOSABLE.defaultText}`);
+
+		cy.get("#colorSet1ColorScheme1")
+			.shadow()
+			.find(".ui5-hidden-text")
+			.should("have.text", `${MESSAGE_STRIP_CUSTOM.defaultText} ${MESSAGE_STRIP_CLOSABLE.defaultText}`);
+	});
+});

package/cypress/specs/MultiComboBox.cy.tsx

@@ -0,0 +1,58 @@
+import MultiComboBox from "../../src/MultiComboBox.js";
+import MultiComboBoxItem from "../../src/MultiComboBoxItem.js";
+
+describe("Security", () => {
+	it("tests setting malicious text to items", () => {
+		cy.mount(
+			<MultiComboBox>
+				<MultiComboBoxItem text="<script>alert('XSS')</script>"></MultiComboBoxItem>
+				<MultiComboBoxItem text="<b onmouseover=alert('XSS')></b>"></MultiComboBoxItem>
+				<MultiComboBoxItem text="Albania<button onClick='alert(1)'>alert</button>"></MultiComboBoxItem>
+			</MultiComboBox>
+		);
+
+		cy.get("ui5-mcb-item").eq(0).shadow().find(".ui5-li-title")
+			.should("have.text", "<script>alert('XSS')</script>");
+		cy.get("ui5-mcb-item").eq(1).shadow().find(".ui5-li-title")
+			.should("have.text", "<b onmouseover=alert('XSS')></b>");
+		cy.get("ui5-mcb-item").eq(2).shadow().find(".ui5-li-title")
+			.should("have.text", "Albania<button onClick='alert(1)'>alert</button>");
+	});
+});
+
+describe("Value State", () => {
+	it("should be able to change value states upon typing", () => {
+		cy.mount(
+			<MultiComboBox noValidation={true}>
+				<MultiComboBoxItem text="Item 1"></MultiComboBoxItem>
+				<MultiComboBoxItem text="Item 2"></MultiComboBoxItem>
+			</MultiComboBox>
+		);
+
+		// add event listener
+		cy.get("ui5-multi-combobox")
+			.then(mcb => {
+				mcb.get(0).addEventListener("input", e => {
+					(mcb.get(0) as MultiComboBox).valueState = (e.target as MultiComboBox).value.length ? "Negative" : "Information";
+				});
+			});
+
+		// type "f"
+		cy.get("ui5-multi-combobox")
+			.shadow()
+			.find("input")
+			.realType("f");
+
+		cy.realPress("Backspace");
+
+		cy.get("ui5-multi-combobox")
+			.shadow()
+			.find("input")
+			.realPress("f");
+
+		cy.get("ui5-multi-combobox")
+			.shadow()
+			.find(".ui5-valuestatemessage--information")
+			.should("not.exist");
+	});
+});