@ui5/webcomponents 2.5.0 → 2.6.0-rc.1

package/cypress/specs/List.cy.ts

@@ -34,83 +34,119 @@ describe("List Tests", () => {
 
 	it("Arrow down and up navigation between last item and growing button", () => {
 		cy.mount(html`
-		<ui5-list id="infiniteScrollEx2" growing="Button">
-			<ui5-li>Laptop Lenovo</ui5-li>
-			<ui5-li>IPhone 3</ui5-li>
-			<ui5-li>HP Monitor 24</ui5-li>
-			<ui5-li id="lastItem">Last Item</ui5-li>
-		</ui5-list>
+			<ui5-list growing="Button">
+				<ui5-li>Laptop Lenovo</ui5-li>
+				<ui5-li>IPhone 3</ui5-li>
+				<ui5-li>HP Monitor 24</ui5-li>
+			</ui5-list>
 		`);
 
-		cy.get("#lastItem")
-			.shadow()
-			.find("li[role='listitem']")
-			.invoke("attr", "tabindex", "0")
-			.focus();
+		cy.get("[ui5-list]")
+			.as("list");
+
+		// Click the last item to set focus
+		cy.get("@list")
+			.find("ui5-li")
+			.last()
+			.click();
 
-		cy.get("#infiniteScrollEx2")
-			.realPress("ArrowDown");
+		// Verify the last item is focused
+		cy.get("@list")
+			.find("ui5-li")
+			.last()
+			.should("be.focused");
+
+		// Press arrow down once to move focus to the growing button
+		cy.realPress("ArrowDown");
 
-		cy.get("#infiniteScrollEx2")
+		// Verify the growing button is focused
+		cy.get("@list")
 			.shadow()
-			.find("[id$=\"growing-btn\"]")
+			.find("[id$='growing-btn']")
 			.should("be.focused");
 
-		cy.get("#infiniteScrollEx2")
-			.realPress("ArrowUp");
+		// Arrow up once to move focus back to the last item
+		cy.realPress("ArrowUp");
 
-		cy.get("#lastItem")
+		// Verify the last item is focused
+		cy.get("@list")
+			.find("ui5-li")
+			.last()
 			.should("be.focused");
 	});
 
 	it("Home key on growing button moves focus to first item", () => {
 		cy.mount(html`
-		<ui5-list id="infiniteScrollEx2" growing="Button">
-			<ui5-li id="firstItem">Laptop Lenovo</ui5-li>
-			<ui5-li>IPhone 3</ui5-li>
-			<ui5-li>HP Monitor 24</ui5-li>
-			<ui5-li id="lastItem">Last Item</ui5-li>
-		</ui5-list>
+			<ui5-list growing="Button">
+				<ui5-li>Laptop Lenovo</ui5-li>
+				<ui5-li>IPhone 3</ui5-li>
+				<ui5-li>HP Monitor 24</ui5-li>
+			</ui5-list>
 		`);
 
-		cy.get("#infiniteScrollEx2")
+		cy.get("[ui5-list]")
+			.as("list");
+
+		// Click the growing button to set focus
+		cy.get("@list")
+			.shadow()
+			.find("[id$='growing-btn']")
+			.click();
+
+		// Wait for the growing button to be focused
+		cy.get("@list")
 			.shadow()
-			.find("[id$=\"growing-btn\"]")
-			.focus();
+			.find("[id$='growing-btn']")
+			.should("be.focused");
 
-		cy.get("#infiniteScrollEx2")
-			.realPress("Home");
+		// Press Home key to move focus to the first item
+		cy.realPress("Home");
 
-		cy.get("#firstItem")
+		// Verify the first item is focused
+		cy.get("@list")
+			.find("ui5-li")
+			.first()
 			.should("be.focused");
 	});
 
 	it("End key navigation moves focus from first item to last item and then to growing button", () => {
 		cy.mount(html`
-		<ui5-list id="infiniteScrollEx2" growing="Button">
-			<ui5-li id="firstItem">Laptop Lenovo</ui5-li>
-			<ui5-li>IPhone 3</ui5-li>
-			<ui5-li>HP Monitor 24</ui5-li>
-			<ui5-li id="lastItem">Last Item</ui5-li>
-		</ui5-list>
+			<ui5-list growing="Button">
+				<ui5-li>Laptop Lenovo</ui5-li>
+				<ui5-li>IPhone 3</ui5-li>
+				<ui5-li>HP Monitor 24</ui5-li>
+			</ui5-list>
 		`);
 
-		cy.get("#firstItem")
-			.shadow()
-			.find("li[role='listitem']")
-			.invoke("attr", "tabindex", "0")
-			.focus();
+		cy.get("[ui5-list]")
+			.as("list");
+
+		// Click the first item to set focus
+		cy.get("@list")
+			.find("ui5-li")
+			.first()
+			.click();
+
+		// Wait for the first item to be focused
+		cy.get("@list")
+			.find("ui5-li")
+			.first()
+			.should("be.focused");
 
-		cy.get("#infiniteScrollEx2")
-			.realPress("End");
+		// Press End key to move focus to the last item
+		cy.realPress("End");
 
-		cy.get("#lastItem")
+		// Verify the last item is focused
+		cy.get("@list")
+			.find("ui5-li")
+			.last()
 			.should("be.focused");
 
-		cy.get("#infiniteScrollEx2")
-			.realPress("End");
+		// Press End key again to move focus to the growing button
+		cy.realPress("End");
 
-		cy.get("#infiniteScrollEx2")
+		// Verify the growing button is focused
+		cy.get("@list")
 			.shadow()
 			.find("[id$='growing-btn']")
 			.should("be.focused");

package/cypress/specs/MessageStrip.cy.ts

@@ -0,0 +1,29 @@
+import { html } from "lit";
+import "../../src/MessageStrip.js";
+import { MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION, MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM } from "../../src/generated/i18n/i18n-defaults.js";
+
+describe("MessageStrip close button tooltip", () => {
+	it("should display the correct tooltip text for different designs", () => {
+		const designs = [
+		  {
+				design: "Information",
+				btnText: MESSAGE_STRIP_CLOSE_BUTTON_INFORMATION.defaultText,
+		  },
+		  {
+				design: "ColorSet1",
+				btnText: MESSAGE_STRIP_CLOSE_BUTTON_CUSTOM.defaultText,
+		  },
+		];
+
+		designs.forEach(({ design, btnText }) => {
+		  cy.mount(html`<ui5-message-strip class="top" design="${design}">${design} design with icon and close button:</ui5-message-strip>`);
+
+		  cy.get("[ui5-message-strip]")
+				.shadow()
+				.find("ui5-button")
+				.shadow()
+				.find("button")
+				.should("have.attr", "title", btnText);
+		});
+	  });
+});

package/cypress/specs/StepInput.cy.ts

@@ -0,0 +1,34 @@
+import { html } from "lit";
+import "../../src/StepInput.js";
+import type StepInput from "../../src/StepInput.js";
+
+describe("StepInput Tests", () => {
+	it("tets input event prevention", () => {
+		cy.mount(html`
+			<ui5-step-input></ui5-step-input>
+		`);
+
+		cy.get("[ui5-step-input]")
+			.as("stepInput");
+
+		cy.get<StepInput>("@stepInput")
+			.then($input => {
+				$input.get(0).addEventListener("input", e => {
+					e.preventDefault();
+					(e.target as StepInput).value = 30;
+				});
+			});
+
+		cy.get<StepInput>("@stepInput")
+			.realClick();
+
+		cy.realPress("1");
+
+		cy.get("@stepInput")
+			.shadow()
+			.find("ui5-input")
+			.shadow()
+			.find("input")
+			.should("have.value", "30");
+	});
+});

package/cypress/specs/TableDragAndDrop.cy.ts

@@ -0,0 +1,233 @@
+import { html } from "lit";
+
+import "../../src/Table.js";
+import "../../src/TableHeaderRow.js";
+import "../../src/TableCell.js";
+import "../../src/TableRow.js";
+import MovePlacement from "@ui5/webcomponents-base/dist/types/MovePlacement.js";
+
+describe("API & Events", () => {
+	function dragTo(selectors: { source: string, destination: string }, position: MovePlacement, expectMove = true, onPrevented = false) {
+		const source = Cypress.$(selectors.source)[0];
+		const destination = Cypress.$(selectors.destination)[0];
+		const destinationRect = destination.getBoundingClientRect();
+
+		const dataTransfer = new DataTransfer();
+
+		cy.get(selectors.source)
+			.then(row => {
+				row.get(0).dispatchEvent(new DragEvent("dragstart", {
+					dataTransfer,
+					bubbles: true,
+				}));
+			});
+
+		let delta = 10;
+		if (position === MovePlacement.On) {
+			delta = destinationRect.height / 2;
+		} else if (position === MovePlacement.After) {
+			delta = destinationRect.height;
+		}
+
+		cy.get("ui5-table")
+			.trigger("dragover", {
+				dataTransfer,
+				clientX: destinationRect.left,
+				clientY: destinationRect.top + delta,
+			});
+
+		cy.get("ui5-table")
+			.trigger("drop", {
+				dataTransfer,
+			});
+
+		cy.get(selectors.source)
+			.trigger("dragend");
+
+		cy.get("@moveOver")
+			.should("be.called")
+			.should("be.calledWithMatch", {
+				detail: {
+					source: { element: source },
+					destination: { element: destination, placement: position },
+				},
+			});
+
+		if (onPrevented) {
+			position = MovePlacement.After;
+		}
+
+		if (expectMove) {
+			cy.get("@move")
+				.should("be.called")
+				.should("be.calledWithMatch", {
+					detail: {
+						source: { element: source },
+						destination: { element: destination, placement: position },
+					},
+				});
+		}
+	}
+
+	beforeEach(() => {
+		cy.viewport(1920, 1080);
+		cy.mount(html`
+			<ui5-table id="table">
+				<ui5-table-header-row slot="headerRow">
+					<ui5-table-header-cell><span>ColumnA</span></ui5-table-header-cell>
+					<ui5-table-header-cell><span>ColumnB</span></ui5-table-header-cell>
+				</ui5-table-header-row>
+				${Array.from({ length: 10 }).map((_, index) => html`
+					<ui5-table-row row-key="${index}" movable>
+						<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
+						<ui5-table-cell><ui5-label>Cell B</ui5-label></ui5-table-cell>
+					</ui5-table-row>
+				`)}
+				<ui5-table-row row-key="10">
+						<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
+						<ui5-table-cell><ui5-label>Cell B</ui5-label></ui5-table-cell>
+				</ui5-table-row>
+			</ui5-table>
+		`);
+	});
+
+	it("tests if draggable=true is set", () => {
+		cy.get("[ui5-table-row]")
+			.should("have.length", 11)
+			.each(($row, index) => {
+				if (index === 10) {
+					cy.wrap($row).should("not.have.attr", "draggable");
+				} else {
+					cy.wrap($row).should("have.attr", "draggable", "true");
+				}
+			});
+	});
+
+	it("tests if events are fired and paramters are as expected", () => {
+		cy.get("[ui5-table]")
+			.then(table => {
+				table.get(0).addEventListener("move-over", e => e.preventDefault());
+				table.get(0).addEventListener("move-over", cy.stub().as("moveOver"));
+				table.get(0).addEventListener("move", cy.stub().as("move"));
+			});
+
+		dragTo({
+			source: "ui5-table-row[row-key='0']",
+			destination: "ui5-table-row[row-key='1']",
+		}, MovePlacement.Before);
+		dragTo({
+			source: "ui5-table-row[row-key='0']",
+			destination: "ui5-table-row[row-key='1']",
+		}, MovePlacement.On);
+		dragTo({
+			source: "ui5-table-row[row-key='0']",
+			destination: "ui5-table-row[row-key='1']",
+		}, MovePlacement.After);
+	});
+
+	it("tests if drop with Before placement does not occur when not preventing move-over for it", () => {
+		cy.get("ui5-table")
+			.then(table => {
+				table.get(0).addEventListener("move-over", (e: Event) => {
+					const evt = e as CustomEvent; // needed to satisfy TS
+					if (evt.detail.destination.placement === MovePlacement.Before) {
+						return;
+					}
+					e.preventDefault();
+				});
+				table.get(0).addEventListener("move-over", cy.stub().as("moveOver"));
+				table.get(0).addEventListener("move", cy.stub().as("move"));
+			});
+
+		dragTo({
+			source: "ui5-table-row[row-key='0']",
+			destination: "ui5-table-row[row-key='5']",
+		}, MovePlacement.Before, false);
+		dragTo({
+			source: "ui5-table-row[row-key='0']",
+			destination: "ui5-table-row[row-key='5']",
+		}, MovePlacement.On);
+		dragTo({
+			source: "ui5-table-row[row-key='0']",
+			destination: "ui5-table-row[row-key='5']",
+		}, MovePlacement.After);
+	});
+
+	it("tests if drop with After placement does not occur when not preventing move-over for it", () => {
+		cy.get("ui5-table")
+			.then(table => {
+				table.get(0).addEventListener("move-over", (e: Event) => {
+					const evt = e as CustomEvent; // needed to satisfy TS
+					if (evt.detail.destination.placement === MovePlacement.After) {
+						return;
+					}
+					e.preventDefault();
+				});
+				table.get(0).addEventListener("move-over", cy.stub().as("moveOver"));
+				table.get(0).addEventListener("move", cy.stub().as("move"));
+			});
+
+		dragTo({
+			source: "ui5-table-row[row-key='0']",
+			destination: "ui5-table-row[row-key='5']",
+		}, MovePlacement.Before);
+
+		cy.get("@move")
+			.should("have.callCount", 1);
+
+		dragTo({
+			source: "ui5-table-row[row-key='0']",
+			destination: "ui5-table-row[row-key='5']",
+		}, MovePlacement.On);
+
+		cy.get("@move")
+			.should("have.callCount", 2);
+
+		dragTo({
+			source: "ui5-table-row[row-key='0']",
+			destination: "ui5-table-row[row-key='5']",
+		}, MovePlacement.After, false);
+
+		cy.get("@move")
+			.should("have.callCount", 2);
+	});
+
+	it("tests if drop with On placement does occur (because Before/After still applies) when not preventing move-over for it", () => {
+		cy.get("ui5-table")
+			.then(table => {
+				table.get(0).addEventListener("move-over", (e: Event) => {
+					const evt = e as CustomEvent; // needed to satisfy TS
+					if (evt.detail.destination.placement === MovePlacement.On) {
+						return;
+					}
+					e.preventDefault();
+				});
+				table.get(0).addEventListener("move-over", cy.stub().as("moveOver"));
+				table.get(0).addEventListener("move", cy.stub().as("move"));
+			});
+
+		dragTo({
+			source: "ui5-table-row[row-key='0']",
+			destination: "ui5-table-row[row-key='5']",
+		}, MovePlacement.Before);
+
+		cy.get("@move")
+			.should("have.callCount", 1);
+
+		dragTo({
+			source: "ui5-table-row[row-key='0']",
+			destination: "ui5-table-row[row-key='5']",
+		}, MovePlacement.On, true, true);
+
+		cy.get("@move")
+			.should("have.callCount", 2);
+
+		dragTo({
+			source: "ui5-table-row[row-key='0']",
+			destination: "ui5-table-row[row-key='5']",
+		}, MovePlacement.After);
+
+		cy.get("@move")
+			.should("have.callCount", 3);
+	});
+});

package/cypress/specs/TableUtils.cy.ts

@@ -0,0 +1,26 @@
+import { isInstanceOfTable } from "../../src/TableUtils.js";
+import Table from "../../src/Table.js";
+import TableRow from "../../src/TableRow.js";
+
+describe("#isInstanceOfTable", () => {
+	it("object is Table", () => {
+		const obj = new Table();
+		cy.wrap({ isInstanceOfTable })
+			.invoke("isInstanceOfTable", obj)
+			.should("be.true");
+	});
+
+	it("object is not Table", () => {
+		const obj = new TableRow();
+		cy.wrap({ isInstanceOfTable })
+			.invoke("isInstanceOfTable", obj)
+			.should("be.false");
+	});
+
+	it("object is undefined", () => {
+		const obj = undefined;
+		cy.wrap({ isInstanceOfTable })
+			.invoke("isInstanceOfTable", obj)
+			.should("be.false");
+	});
+});

package/cypress/specs/Toast.cy.ts

@@ -0,0 +1,43 @@
+import { html } from "lit";
+import "../../src/Toast.js";
+import "../../src/Button.js";
+import "../../src/List.js";
+import type Toast from "../../src/Toast.js";
+
+describe("Toast - test popover API", () => {
+	it("Should verify the toast has the popover attribute set to manual", () => {
+		cy.mount(html`
+		<ui5-toast id="toast" open placement="TopStart">TopStart</ui5-toast>`);
+		cy.get<Toast>("[ui5-toast]")
+			.should("have.attr", "popover", "manual")
+			.should("be.visible");
+	});
+
+	it("Toast should stay on top of list after scroll", () => {
+		cy.mount(html`
+		<ui5-toast id="toast" open duration="999999" placement="TopStart">TopStart</ui5-toast>
+		<ui5-list id="list" header-text="List with ListItemStandard" style="opacity: 0.7">
+			<ui5-li additional-text="3">List Item 1</ui5-li>
+			<ui5-li additional-text="2">List Item 2</ui5-li>
+			<ui5-li additional-text="1">List Item 3</ui5-li>
+		</ui5-list>`);
+
+		cy.get<Toast>("[ui5-toast]")
+			.should("have.attr", "popover", "manual")
+			.should("be.visible");
+
+		cy.get("#toast")
+			.then($toast => {
+				const toastRect = $toast[0].getBoundingClientRect();
+				cy.get("#list")
+					.then($list => {
+						const listRect = $list[0].getBoundingClientRect();
+						const isOverlapping = toastRect.right > listRect.left
+							&& toastRect.left < listRect.right
+							&& toastRect.bottom > listRect.top
+							&& toastRect.top < listRect.bottom;
+						expect(isOverlapping).to.be.true;
+					});
+			});
+	});
+});

package/cypress/specs/Toolbar.cy.ts

@@ -12,7 +12,7 @@ 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", () => {
+	it.skip("Should not return null upon calling getDomRef for all direct child items", () => {
 		cy.mount(html`
 			<ui5-toolbar id="otb_standard">
 				<ui5-toolbar-button text="Button 1"></ui5-toolbar-button>

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

@@ -130,13 +130,13 @@ describe("Event bubbling", () => {
 						<ui5-option>World</ui5-option>
 						<ui5-option>Hello</ui5-option>
 					</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>
 						<ui5-mcb-item selected text="Compact"></ui5-mcb-item>
@@ -175,6 +175,11 @@ describe("Event bubbling", () => {
 				dialog.get(0).addEventListener("ui5-close", cy.stub().as("dialogClosed"));
 			});
 
+		cy.get("@dialog")
+			.then(dialog => {
+				dialog.get(0).addEventListener("ui5-open", cy.stub().as("dialogOpened"));
+			});
+
 		cy.get("@select")
 			.then(select => {
 				select.get(0).addEventListener("ui5-close", cy.stub().as("selClosed"));
@@ -190,6 +195,11 @@ describe("Event bubbling", () => {
 				multiCombobox.get(0).addEventListener("ui5-close", cy.stub().as("mcbClosed"));
 			});
 
+		cy.get("@multiCombobox")
+			.then(multiCombobox => {
+				multiCombobox.get(0).addEventListener("open", cy.stub().as("mcbOpened"));
+			});
+
 		cy.get("@dialog").invoke("attr", "open", true);
 
 		// act - open and close Select
@@ -209,6 +219,10 @@ describe("Event bubbling", () => {
 			.find("[ui5-mcb-item]")
 			.should("be.visible");
 
+		// assert - the open event of the MultiComboBox do not bubble
+		cy.get("@mcbOpened").should("have.been.calledOnce");
+		cy.get("@dialogOpened").should("have.been.calledTwice");
+
 		cy.get("@multiComboboxIcon")
 			.realClick();