@ui5/webcomponents 2.5.0-rc.3 → 2.6.0-rc.0

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/TableGrowing.cy.ts

@@ -77,47 +77,6 @@ describe("TableGrowing - Button", () => {
 				.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>
@@ -255,23 +214,6 @@ describe("TableGrowing - Scroll", () => {
 				.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", () => {
@@ -334,25 +276,5 @@ describe("TableGrowing - Scroll", () => {
 					.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/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();