@ui5/webcomponents 2.9.1-rc.0 → 2.10.0-rc.1

package/cypress/specs/TableRowActions.cy.tsx

@@ -39,6 +39,15 @@ describe("TableRowActions", () => {
 		});
 	}
 
+	function checkTemplateColumn(expectedWidth: string) {
+		cy.get("@innerTable").should($table => {
+			const gridTemplateColumns = getComputedStyle($table[0]).gridTemplateColumns;
+			console.log(gridTemplateColumns, expectedWidth, gridTemplateColumns.startsWith(expectedWidth));
+			// eslint-disable-next-line no-unused-expressions
+			expect(gridTemplateColumns.startsWith(expectedWidth)).to.be.true;
+		});
+	}
+
 	describe("Rendering", () => {
 		it("tests single row action", () => {
 			mountTable(1, () => <>
@@ -58,7 +67,7 @@ describe("TableRowActions", () => {
 			);
 
 			cy.get("@headerRow").shadow().find("#actions-cell").should("exist");
-			cy.get("@innerTable").should("have.css", "gridTemplateColumns", `${8 + 36 + 8}px`);
+			checkTemplateColumn(`${8 + 36 + 8}px`);
 			cy.get("@row1").find("[icon=add]").shadow().find("ui5-button").should("exist");
 			cy.get("@row2").find("[icon=add]").should("have.css", "display", "block");
 			cy.get("@row3").find("ui5-table-row-action-navigation").shadow().find("ui5-icon").should("have.attr", "name", "navigation-right-arrow");
@@ -91,8 +100,12 @@ describe("TableRowActions", () => {
 			</>
 			);
 
+			cy.get("@table").then($table => {
+				$table[0].addEventListener("row-click", cy.stub().as("rowClick"));
+			});
+
 			cy.get("@headerRow").shadow().find("#actions-cell").should("exist");
-			cy.get("@innerTable").should("have.css", "gridTemplateColumns", `${8 + 36 + 4 + 36 + 8}px`);
+			checkTemplateColumn(`${8 + 36 + 4 + 36 + 8}px`);
 			cy.get("@row1").shadow().find("#actions-cell").children().as("actions");
 			cy.get("@actions").should("have.length", 2);
 			cy.get("@actions").eq(0).as("overflowButton");
@@ -122,7 +135,7 @@ describe("TableRowActions", () => {
 			cy.get("@rowActionClick").invoke("getCall", 1).its("args.0.detail.action.id").should("equal", "editAction");
 
 			cy.get("@table").invoke("attr", "row-action-count", "3");
-			cy.get("@innerTable").should("have.css", "gridTemplateColumns", `${8 + 36 + 4 + 36 + 4 + 36 + 8}px`);
+			checkTemplateColumn(`${8 + 36 + 4 + 36 + 4 + 36 + 8}px`);
 			cy.get("@actions").should("have.length", 3);
 			cy.get("@actions").eq(0).should("have.attr", "name", "actions-2");
 			cy.get("@actions").eq(1).as("overflowButton").should("have.attr", "icon", "overflow");
@@ -136,7 +149,7 @@ describe("TableRowActions", () => {
 			cy.get("@rowActionClick").invoke("getCall", 2).its("args.0.detail.action.id").should("equal", "editAction");
 
 			cy.get("@table").invoke("attr", "row-action-count", "4");
-			cy.get("@innerTable").should("have.css", "gridTemplateColumns", `${8 + 36 + 4 + 36 + 4 + 36 + 4 + 36 + 8}px`);
+			checkTemplateColumn(`${8 + 36 + 4 + 36 + 4 + 36 + 4 + 36 + 8}px`);
 			cy.get("@actions").should("have.length", 4);
 			cy.get("@actions").eq(0).should("have.attr", "name", "actions-2");
 			cy.get("@actions").eq(1).should("have.attr", "name", "actions-3");
@@ -144,7 +157,7 @@ describe("TableRowActions", () => {
 			cy.get("@actions").eq(3).should("have.attr", "name", "actions-1");
 
 			cy.get("@table").invoke("attr", "row-action-count", "5");
-			cy.get("@innerTable").should("have.css", "gridTemplateColumns", `${8 + 36 + 4 + 36 + 4 + 36 + 4 + 36 + 4 + 36 + 8}px`);
+			checkTemplateColumn(`${8 + 36 + 4 + 36 + 4 + 36 + 4 + 36 + 4 + 36 + 8}px`);
 			cy.get("@actions").should("have.length", 4);
 			cy.get("@row1").find("[slot=actions-4],[slot=actions-1]").then($lastActions => {
 				const lastAction = $lastActions[0];
@@ -154,9 +167,11 @@ describe("TableRowActions", () => {
 			}).should("be.true");
 
 			cy.get("@table").invoke("attr", "row-action-count", "1");
-			cy.get("@innerTable").should("have.css", "gridTemplateColumns", `${8 + 36 + 8}px`);
+			checkTemplateColumn(`${8 + 36 + 8}px`);
 			cy.get("@actions").should("have.length", 1);
 			cy.get("@actions").eq(0).should("have.attr", "icon", "overflow");
+
+			cy.get("@rowClick").should("have.callCount", 0);
 		});
 
 		it("tests that invisible actions occupy space for alignment", () => {

package/cypress/specs/TableSelection.cy.tsx

@@ -182,7 +182,7 @@ Object.entries(testConfig).forEach(([mode, testConfigEntry]) => {
 		});
 
 		it("select row via SPACE", () => {
-			cy.get("@row0").realClick({ position: "left" });
+			cy.get("@row0").realClick();
 			cy.get("@row0").realPress("Space");
 			checkSelection(testConfigEntry.cases.SPACE.space_0);
 

package/cypress/specs/TableSelections.cy.tsx

@@ -207,7 +207,7 @@ Object.entries(testConfig).forEach(([mode, testConfigEntry]) => {
 		});
 
 		it("select row via SPACE", () => {
-			cy.get("@row0").realClick({ position: "left" });
+			cy.get("@row0").realClick();
 			cy.get("@row0").realPress("Space");
 			checkSelection(testConfigEntry.cases.SPACE.space_0);
 			checkSelectionChangeSpy(1);

package/cypress/specs/TableUtils.cy.tsx

@@ -1,4 +1,4 @@
-import { isInstanceOfTable } from "../../src/TableUtils.js";
+import { isInstanceOfTable, isValidColumnWidth } from "../../src/TableUtils.js";
 import Table from "../../src/Table.js";
 import TableRow from "../../src/TableRow.js";
 
@@ -24,3 +24,40 @@ describe("#isInstanceOfTable", () => {
 			.should("be.false");
 	});
 });
+
+describe("#isValidColumnWidth", () => {
+	it("px", () => {
+		const width = "100px";
+		cy.wrap({ isValidColumnWidth })
+			.invoke("isValidColumnWidth", width)
+			.should("be.true");
+	});
+
+	it("rem", () => {
+		const width = "10rem";
+		cy.wrap({ isValidColumnWidth })
+			.invoke("isValidColumnWidth", width)
+			.should("be.true");
+	});
+
+	it("%", () => {
+		const width = "100%";
+		cy.wrap({ isValidColumnWidth })
+			.invoke("isValidColumnWidth", width)
+			.should("be.true");
+	});
+
+	it("auto", () => {
+		const width = "auto";
+		cy.wrap({ isValidColumnWidth })
+			.invoke("isValidColumnWidth", width)
+			.should("be.false");
+	});
+
+	it("empty", () => {
+		const width = "";
+		cy.wrap({ isValidColumnWidth })
+			.invoke("isValidColumnWidth", width)
+			.should("be.false");
+	});
+});

package/cypress/specs/Tree.cy.tsx

@@ -1,5 +1,8 @@
 import Tree from "../../src/Tree.js";
 import "../../src/TreeItem.js";
+import TreeItem from "../../src/TreeItem.js";
+import Icon from "../../src/Icon.js";
+import bell from "@ui5/webcomponents-icons/dist/bell.js";
 
 describe("Tree Tests", () => {
 	it("tests accessibility properties forwarded to the list", () => {
@@ -27,6 +30,27 @@ describe("Tree Tests", () => {
 			.and("have.attr", "accessible-description", "Description")
 			.and("have.attr", "accessible-description-ref", "lblDesc2");
 	});
+
+	it("Tests image slot", () => {
+		cy.mount(
+			<Tree>
+				<TreeItem id="image-slot-tree-item">
+					<Icon name={bell} slot="image" id="slotted-icon"></Icon>
+				</TreeItem>
+			</Tree>
+		);
+
+		cy.get("#image-slot-tree-item")
+			.shadow()
+			.find("slot[name='image']")
+			.should("exist")
+			.then($slot => {
+				const slotElement = $slot[0] as HTMLSlotElement;
+				const assignedNodes = slotElement.assignedNodes();
+				expect(assignedNodes.length).to.be.greaterThan(0);
+				cy.wrap(assignedNodes[0]).should("have.attr", "id", "slotted-icon");
+			});
+	});
 });
 
 describe("Tree Props", () => {

package/cypress/support/commands/ResponsivePopover.commands.ts

@@ -1,8 +1,31 @@
 import type ResponsivePopover from "../../../src/ResponsivePopover.js";
-import { isPopupOpen } from "./utils/popup-open.js";
+import { isPhone } from "@ui5/webcomponents-base/dist/Device.js";
+import { isPopupOpen, isPopupClosed } from "./utils/popup-open.js";
 
 Cypress.Commands.add("ui5ResponsivePopoverOpened", { prevSubject: true }, (subject: JQuery<ResponsivePopover>) => {
-	isPopupOpen(subject);
+	if (isPhone()) {
+		cy.wrap(subject)
+			.shadow()
+			.find("[ui5-dialog]")
+			.then($dialog => {
+				isPopupOpen($dialog);
+			});
+	} else {
+		isPopupOpen(subject);
+	}
+});
+
+Cypress.Commands.add("ui5ResponsivePopoverClosed", { prevSubject: true }, (subject: JQuery<ResponsivePopover>) => {
+	if (isPhone()) {
+		cy.wrap(subject)
+			.shadow()
+			.find("[ui5-dialog]")
+			.then($dialog => {
+				isPopupClosed($dialog);
+			});
+	} else {
+		isPopupClosed(subject);
+	}
 });
 
 declare global {
@@ -11,6 +34,9 @@ declare global {
 			ui5ResponsivePopoverOpened(
 				this: Chainable<JQuery<ResponsivePopover>>
 			): Chainable<void>;
+			ui5ResponsivePopoverClosed(
+				this: Chainable<JQuery<ResponsivePopover>>
+			): Chainable<void>;
 		}
 	}
 }

package/cypress/support/commands/utils/popup-open.ts

@@ -14,6 +14,22 @@ const isPopupOpen = (subject: any) => {
 		.and("have.attr", "open");
 };
 
+const isPopupClosed = (subject: any) => {
+	cy.wrap(subject)
+		.as("popup");
+
+	cy.get("@popup")
+		.should("not.have.attr", "open");
+
+	cy.get("@popup")
+		.should($rp => {
+			expect($rp.is(":popover-open")).to.be.false;
+			expect($rp).not.be.visible;
+		})
+		.and("not.have.attr", "open");
+};
+
 export {
-	isPopupOpen
+	isPopupOpen,
+	isPopupClosed
 }