@ui5/webcomponents 2.10.0-rc.0 → 2.10.0-rc.2

package/cypress/specs/Table.cy.tsx

@@ -16,6 +16,12 @@ import Button from "../../src/Button.js";
 const ROLE_COLUMN_HEADER = "columnheader";
 
 describe("Table - Rendering", () => {
+	function checkWidth(id: string, expectedWidth: number) {
+		cy.get(id).then($cell => {
+			expect($cell.outerWidth()).to.be.equal(expectedWidth);
+		});
+	};
+
 	it("tests if table is rendered", () => {
 		cy.mount(
 			<Table id="table">
@@ -57,6 +63,183 @@ describe("Table - Rendering", () => {
 		// eslint-disable-next-line cypress/no-unnecessary-waiting
 		cy.wait(500);
 	});
+
+	it("tests if table is rendered with no data slot", () => {
+		cy.mount(
+			<Table id="table">
+				<TableHeaderRow slot="headerRow">
+					<TableHeaderCell></TableHeaderCell>
+				</TableHeaderRow>
+				<div slot="noData" id="noData">
+					<Label>No data found</Label>
+				</div>
+			</Table>
+		);
+
+		cy.get("#table").shadow().find('slot[name=noData]').as("noDataSlot");
+		cy.get("@noDataSlot").should("exist");
+		cy.get("@noDataSlot").then(($noDataSlot) => {
+			const noDataElement = ($noDataSlot[0] as HTMLSlotElement).assignedElements()[0];
+			cy.wrap(noDataElement).should("have.attr", "id", "noData")
+		});
+	});
+
+	it("columns have equal widths width default width", () => {
+		cy.mount(
+			<Table style="width: 400px;" id="table">
+				<TableHeaderRow slot="headerRow">
+					<TableHeaderCell><span>ColumnA</span></TableHeaderCell>
+					<TableHeaderCell><span>ColumnB</span></TableHeaderCell>
+					<TableHeaderCell><span>ColumnC</span></TableHeaderCell>
+					<TableHeaderCell><span>ColumnD</span></TableHeaderCell>
+				</TableHeaderRow>
+				<TableRow>
+					<TableCell><Label>Cell A</Label></TableCell>
+					<TableCell><Label>Cell B</Label></TableCell>
+					<TableCell><Label>Cell C</Label></TableCell>
+					<TableCell><Label>Cell D</Label></TableCell>
+				</TableRow>
+			</Table>
+		);
+
+		const expectedWidth = 100;
+		cy.get("ui5-table-header-cell").each(($cell) => {
+			expect($cell.outerWidth()).to.be.equal(expectedWidth);
+		});
+	});
+
+	it("columns have width set", () => {
+		cy.mount(
+			<Table style="width: 200px;" id="table">
+				<TableHeaderRow slot="headerRow">
+					<TableHeaderCell width="100px"><span>ColumnA</span></TableHeaderCell>
+					<TableHeaderCell width="100px"><span>ColumnB</span></TableHeaderCell>
+					<TableHeaderCell width="100px"><span>ColumnC</span></TableHeaderCell>
+					<TableHeaderCell width="100px"><span>ColumnD</span></TableHeaderCell>
+				</TableHeaderRow>
+				<TableRow>
+					<TableCell><Label>Cell A</Label></TableCell>
+					<TableCell><Label>Cell B</Label></TableCell>
+					<TableCell><Label>Cell C</Label></TableCell>
+					<TableCell><Label>Cell D</Label></TableCell>
+				</TableRow>
+			</Table>
+		);
+
+		const expectedWidth = 100;
+		cy.get("ui5-table-header-cell").each(($cell) => {
+			expect($cell.outerWidth()).to.be.equal(expectedWidth);
+		});
+	});
+
+	it("columns have relative width set", () => {
+		cy.mount(
+			<Table style="width: 200px;" id="table">
+				<TableHeaderRow slot="headerRow">
+					<TableHeaderCell id="colA" width="10%"><span>ColumnA</span></TableHeaderCell>
+					<TableHeaderCell id="colB" width="25%"><span>ColumnB</span></TableHeaderCell>
+					<TableHeaderCell id="colC" width="25%"><span>ColumnC</span></TableHeaderCell>
+					<TableHeaderCell id="colD" width="40%"><span>ColumnD</span></TableHeaderCell>
+				</TableHeaderRow>
+				<TableRow>
+					<TableCell><Label>Cell A</Label></TableCell>
+					<TableCell><Label>Cell B</Label></TableCell>
+					<TableCell><Label>Cell C</Label></TableCell>
+					<TableCell><Label>Cell D</Label></TableCell>
+				</TableRow>
+			</Table>
+		);
+
+		checkWidth("#colA", 48);
+		checkWidth("#colB", 50);
+		checkWidth("#colC", 50);
+		checkWidth("#colD", 80);
+
+		cy.get("ui5-table").then($table => {
+			$table.css("width", "800px");
+		});
+
+		checkWidth("#colA", 80);
+		checkWidth("#colB", 200);
+		checkWidth("#colC", 200);
+		checkWidth("#colD", 320);
+	});
+
+	it("columns have min-width set", () => {
+		cy.mount(
+			<Table style="width: 800px;" id="table">
+				<TableHeaderRow slot="headerRow">
+					<TableHeaderCell minWidth="100px"><span>ColumnA</span></TableHeaderCell>
+					<TableHeaderCell minWidth="100px"><span>ColumnB</span></TableHeaderCell>
+					<TableHeaderCell minWidth="100px"><span>ColumnC</span></TableHeaderCell>
+					<TableHeaderCell minWidth="100px"><span>ColumnD</span></TableHeaderCell>
+				</TableHeaderRow>
+				<TableRow>
+					<TableCell><Label>Cell A</Label></TableCell>
+					<TableCell><Label>Cell B</Label></TableCell>
+					<TableCell><Label>Cell C</Label></TableCell>
+					<TableCell><Label>Cell D</Label></TableCell>
+				</TableRow>
+			</Table>
+		);
+
+		cy.get("ui5-table-header-cell").each(($cell) => {
+			const expectedWidth = 200;
+			expect($cell.outerWidth()).to.be.equal(expectedWidth);
+		});
+
+		cy.get("ui5-table").then($table => {
+			$table.css("width", "400px");
+		});
+
+		cy.get("ui5-table-header-cell").each(($cell) => {
+			const expectedWidth = 100;
+			expect($cell.outerWidth()).to.be.equal(expectedWidth);
+		});
+
+		cy.get("ui5-table").then($table => {
+			$table.css("width", "100px");
+		});
+
+		cy.get("ui5-table-header-cell").each(($cell) => {
+			const expectedWidth = 100;
+			expect($cell.outerWidth()).to.be.equal(expectedWidth);
+		});
+	});
+
+	it("column width settings combined", () => {
+		cy.mount(
+			<Table style="width: 800px;" id="table">
+				<TableHeaderRow slot="headerRow">
+					<TableHeaderCell id="colA" minWidth="50px"><span>ColumnA</span></TableHeaderCell>
+					<TableHeaderCell id="colB" width="300px"><span>ColumnB</span></TableHeaderCell>
+					<TableHeaderCell id="colC" minWidth="200px" width="50%"><span>ColumnC</span></TableHeaderCell>
+					<TableHeaderCell id="colD" width="2fr"><span>ColumnD</span></TableHeaderCell>
+				</TableHeaderRow>
+				<TableRow>
+					<TableCell><Label>Cell A</Label></TableCell>
+					<TableCell><Label>Cell B</Label></TableCell>
+					<TableCell><Label>Cell C</Label></TableCell>
+					<TableCell><Label>Cell D</Label></TableCell>
+				</TableRow>
+			</Table>
+		);
+
+		checkWidth("#colA", 50);
+		checkWidth("#colB", 300);
+		checkWidth("#colC", 400);
+		checkWidth("#colD", 50);
+
+		cy.get("ui5-table").then($table => {
+			$table.css("width", "200px");
+		});
+
+		checkWidth("#colA", 50);
+		checkWidth("#colB", 300);
+		checkWidth("#colC", 200);
+		// 2fr is being ignored
+		checkWidth("#colD", 48);
+	});
 });
 
 describe("Table - Popin Mode", () => {

package/cypress/specs/TableGrowing.cy.tsx

@@ -151,7 +151,7 @@ describe("TableGrowing - Button", () => {
 				.should("have.been.calledTwice");
 		});
 
-		it("tests focus is set to first newly added row", () => {
+		it("tests focus is set to first newly added row - click", () => {
 			cy.mount(<TableSample></TableSample>);
 
 			cy.get<TableGrowing>("[ui5-table-growing]")
@@ -175,6 +175,30 @@ describe("TableGrowing - Button", () => {
 				.should("have.focus");
 		});
 
+		it("tests focus is set to first newly added row - ENTER", () => {
+			cy.mount(<TableSample></TableSample>);
+
+			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);
+					});
+				})
+				.trigger("keydown", { key: "Enter", code: "Enter", which: 13 });
+
+			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", () => {
 			cy.mount(<TableSample></TableSample>);
 
@@ -226,16 +250,34 @@ describe("TableGrowing - Scroll", () => {
 				.should("be.visible");
 
 			cy.get<TableGrowing>("[ui5-table-growing]")
-				.then(tableGrowing => tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore")));
+				.then(tableGrowing => {
+					tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore"));
+					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);
+						});
+					});
+				});
 
-			cy.get("[ui5-table-row]:last-child")
+			for (let i = 0; i <= 5; i++) {
+				cy.get("[ui5-table-row]:last-child")
 				.scrollIntoView();
 
-			cy.get("[ui5-table-row]:last-child")
-				.should("be.visible");
+				cy.get("[ui5-table-row]:last-child")
+					.should("be.visible");
 
-			cy.get("@loadMore")
-				.should("have.been.calledOnce");
+				cy.get("@loadMore")
+					.should("have.been.calledOnce");
+
+				cy.get("#wrapper")
+					.then($wrapper => {
+						const wrapper = $wrapper.get(0);
+						expect(wrapper.scrollTop).to.be.greaterThan(0);
+					});
+			}
 		});
 
 		it("tests button fires load-more, button vanishes, scroll to end fires load-more", () => {
@@ -282,6 +324,12 @@ describe("TableGrowing - Scroll", () => {
 				cy.get("[ui5-table]")
 					.children("ui5-table-row")
 					.should("have.length", 1 + 10 * i);
+
+				cy.get("#wrapper")
+					.then($wrapper => {
+						const wrapper = $wrapper.get(0);
+						expect(wrapper.scrollTop).to.be.greaterThan(0);
+					});
 			}
 		});
 	});

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/support/commands.ts

@@ -101,6 +101,10 @@ Cypress.Commands.add("ui5SimulateDevice", (device: SimulationDevices = "phone")
 			return true;
 		});
 
+	if (device === "phone") {
+		cy.stub(internals, "windows").value(false);
+	}
+
 	cy.viewport(deviceName[device]);
 
 	cy.wrap({ isPhone })