@ui5/webcomponents 2.8.0-rc.2 → 2.8.0

package/cypress/specs/TableNavigationFixedHeader.cy.tsx

@@ -0,0 +1,199 @@
+import Table from "../../src/Table.js";
+import TableHeaderRow from "../../src/TableHeaderRow.js";
+import TableHeaderCell from "../../src/TableHeaderCell.js";
+import TableRow from "../../src/TableRow.js";
+import TableCell from "../../src/TableCell.js";
+import Label from "../../src/Label.js";
+import Bar from "../../src/Bar.js";
+import Title from "../../src/Title.js";
+import Slider from "../../src/Slider.js";
+
+describe("Table - Keyboard Navigation with Fixed Headers", () => {
+	function isDisplayedInsideViewport(element: string) {
+		cy.get(element).then($el => {
+			const el = $el[0];
+			const rect = el.getBoundingClientRect();
+
+			expect(rect.top).to.be.at.least(0);
+			expect(rect.left).to.be.at.least(0);
+			expect(rect.bottom).to.be.lessThan(Cypress.config("viewportHeight"));
+			expect(rect.right).to.be.lessThan(Cypress.config("viewportWidth"));
+		});
+	}
+
+	it("scrollable container - focused row should always be below the header", () => {
+		cy.mount(
+			<div style="height:300px; overflow:auto;">
+				<Bar id="toolbar" design="Header" accessible-name-ref="title" style="position: sticky; top: 0; z-index: 2; height: 50px;">
+					<Title tabindex={0} level="H3" id="title" slot="startContent">My Selectable Products (3)</Title>
+					<Slider id="slider" min={0} max={100} step={1} value={100}
+						label-interval="0"/>
+				</Bar>
+				<Table id="table0" overflow-mode="Popin" sticky-top="50px" accessible-name-ref="title" no-data-text="No data found">
+					<TableHeaderRow sticky slot="headerRow">
+						<TableHeaderCell id="colA" min-width="300px"><span>ColumnA</span></TableHeaderCell>
+						<TableHeaderCell id="colB" min-width="200px">Column B</TableHeaderCell>
+						<TableHeaderCell id="colC" min-width="200px">Column C</TableHeaderCell>
+						<TableHeaderCell id="colD" min-width="150px">Column D</TableHeaderCell>
+					</TableHeaderRow>
+					<TableRow id="row-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-2"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-3"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-4"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-5"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-6"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-7"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-8"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-9"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-10"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-11"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-12"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-13"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-14"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-15"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-16"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-17"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-18"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-19"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-20"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow id="row-21"> <TableCell>A</TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				</Table>
+			</div>
+		);
+
+		cy.get("#table0").children("ui5-table-row").as("rows");
+		cy.get("#table0").children("ui5-table-header-row").as("headerRow");
+		cy.get("@rows").get("#row-21").as("lastRow");
+
+		cy.get("@lastRow").scrollIntoView();
+		cy.get("@lastRow").click("left");
+		cy.get("@lastRow").should("be.focused");
+
+		for (let i = 20; i > 0; i--) {
+			cy.realPress("{uparrow}");
+			cy.get("@rows").get(`#row-${i}`).should("be.focused");
+
+			isDisplayedInsideViewport("@headerRow");
+
+			cy.get("@headerRow").then($headerRow => {
+				cy.get("@rows").get(`#row-${i}`).then($row => {
+					const headerRowBottom = $headerRow[0].getBoundingClientRect().bottom;
+					const focusedRowTop = $row[0].getBoundingClientRect().top;
+
+					expect(focusedRowTop).to.be.at.least(headerRowBottom);
+				});
+			});
+		}
+	});
+
+	it("scrollable table - focused row should always be below the header", () => {
+		cy.mount(
+			<Table id="table1" overflow-mode="Popin" sticky-top="0" accessible-name-ref="title" no-data-text="No data found" style="height: 300px; overflow: auto;">
+				<TableHeaderRow sticky slot="headerRow">
+					<TableHeaderCell id="colA" min-width="300px"><span>ColumnA</span></TableHeaderCell>
+					<TableHeaderCell id="colB" min-width="200px">Column B</TableHeaderCell>
+					<TableHeaderCell id="colC" min-width="200px">Column C</TableHeaderCell>
+					<TableHeaderCell id="colD" min-width="150px">Column D</TableHeaderCell>
+				</TableHeaderRow>
+				<TableRow id="row-1-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-2-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-3-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-4-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-5-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-6-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-7-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-8-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-9-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-10-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-11-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-12-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-13-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-14-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-15-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-16-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-17-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-18-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-19-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-20-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				<TableRow id="row-21-1"> <TableCell>A</TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+			</Table>
+		);
+
+		cy.get("#table1").children("ui5-table-row").as("rows");
+		cy.get("#table1").children("ui5-table-header-row").as("headerRow");
+		cy.get("@rows").get("#row-21-1").as("lastRow");
+
+		cy.get("@lastRow").scrollIntoView();
+		cy.get("@lastRow").click("left");
+		cy.get("@lastRow").should("be.focused");
+
+		for (let i = 20; i > 0; i--) {
+			cy.realPress("{uparrow}");
+			cy.get("@rows").get(`#row-${i}-1`).should("be.focused");
+
+			isDisplayedInsideViewport("@headerRow");
+
+			cy.get("@headerRow").then($headerRow => {
+				cy.get("@rows").get(`#row-${i}-1`).then($row => {
+					const headerRowBottom = $headerRow[0].getBoundingClientRect().bottom;
+					const focusedRowTop = $row[0].getBoundingClientRect().top;
+
+					expect(focusedRowTop).to.be.at.least(headerRowBottom);
+				});
+			});
+		}
+	});
+
+	it("body as scroll container - focused row should always be below the header", () => {
+		cy.mount(
+			<>
+				<Bar id="toolbar2" design="Header" accessible-name-ref="title" style="position: sticky; top: 0; z-index: 2; height: 50px;">
+					<Title tabindex={0} level="H3" id="title" slot="startContent">My Selectable Products (3)</Title>
+					<Slider id="slider" min={0} max={100} step={1} value={100}
+						label-interval="0"></Slider>
+				</Bar>
+				<Table id="table2" overflow-mode="Popin" sticky-top="50px" accessible-name-ref="title" no-data-text="No data found">
+					<TableHeaderRow sticky slot="headerRow">
+						<TableHeaderCell id="colA" min-width="300px"><span>ColumnA</span></TableHeaderCell>
+						<TableHeaderCell id="colB" min-width="200px">Column B</TableHeaderCell>
+						<TableHeaderCell id="colC" min-width="200px">Column C</TableHeaderCell>
+						<TableHeaderCell id="colD" min-width="150px">Column D</TableHeaderCell>
+					</TableHeaderRow>
+					${Array.from({ length: 100 }).map((row, index) =>
+						<TableRow id={`row-${index + 1}-2`}>
+							<TableCell><Label><b>Notebook Basic ${index + 1}</b><br/>HT-100${index + 1}</Label></TableCell>
+							<TableCell><Label>Technocom</Label></TableCell>
+							<TableCell><Label>32 x 21 x 4 cm</Label></TableCell>
+							<TableCell><Label style="color: #2b7c2b"><b>3.7</b> KG</Label></TableCell>
+							<TableCell style="text-align: end;"><Label style="text-align: end;"><b>29</b> EUR</Label></TableCell>
+						</TableRow>
+					)}
+				</Table>
+			</>
+		);
+
+		cy.get("#table2").children("ui5-table-row").as("rows");
+		cy.get("#table2").children("ui5-table-header-row").as("headerRow");
+		cy.get("@rows").get("#row-100-2").as("lastRow");
+
+		cy.get("@lastRow").scrollIntoView();
+		cy.get("@lastRow").click("left");
+		cy.get("@lastRow").should("be.focused");
+
+		for (let i = 99; i > 0; i--) {
+			cy.realPress("{uparrow}");
+			cy.get("@rows").get(`#row-${i}-2`).should("be.focused");
+
+			isDisplayedInsideViewport("@headerRow");
+
+			cy.get("@headerRow").then($headerRow => {
+				cy.get("@rows").get(`#row-${i}-2`).then($row => {
+					const headerRowBottom = $headerRow[0].getBoundingClientRect().bottom;
+					const focusedRowTop = $row[0].getBoundingClientRect().top;
+
+					expect(focusedRowTop).to.be.at.least(headerRowBottom);
+				});
+			});
+		}
+	});
+});

package/cypress/specs/TableSelection.cy.tsx

@@ -241,3 +241,40 @@ Object.entries(testConfig).forEach(([mode, testConfigEntry]) => {
 		});
 	});
 });
+
+describe("TableSelection - Multi", () => {
+	it("updates the header row checkbox when rows are added or removed", () => {
+		cy.mount(
+			<Table id="table1">
+				<TableSelection id="selection" selected="1 2" slot="features"></TableSelection>
+				<TableHeaderRow id="headerRow" slot="headerRow">
+					<TableHeaderCell>ColumnA</TableHeaderCell>
+				</TableHeaderRow>
+				<TableRow id="row1" rowKey="1">
+					<TableCell><Label>Cell A</Label></TableCell>
+				</TableRow>
+				<TableRow id="row2" rowKey="2">
+					<TableCell><Label>Cell A</Label></TableCell>
+				</TableRow>
+			</Table>
+		);
+
+		cy.get("#headerRow").shadow().find("#selection-cell").as("headerRowSelectionCell");
+		cy.get("@headerRowSelectionCell").find("#selection-component").as("headerRowCheckBox");
+		cy.get("@headerRowCheckBox").should("have.attr", "checked");
+		cy.get("#table1").then($table => {
+			$table.append(
+				`<ui5-table-row id="row3" row-key="3">
+					<ui5-table-cell>Cell A</ui5-table-cell>
+					<ui5-table-cell>Cell B</ui5-table-cell>
+				</ui5-table-row>`
+			);
+		});
+		cy.get("@headerRowCheckBox").should("not.have.attr", "checked");
+		cy.get("#row3").invoke("remove");
+		cy.get("@headerRowCheckBox").should("have.attr", "checked");
+		cy.get("#row2").invoke("remove");
+		cy.get("#row1").invoke("remove");
+		cy.get("@headerRowCheckBox").should("not.have.attr", "checked");
+	});
+});

package/cypress/specs/TableSelections.cy.tsx

@@ -0,0 +1,296 @@
+import Label from "../../src/Label.js";
+import Table from "../../src/Table.js";
+import TableHeaderRow from "../../src/TableHeaderRow.js";
+import TableHeaderCell from "../../src/TableHeaderCell.js";
+import TableRow from "../../src/TableRow.js";
+import TableCell from "../../src/TableCell.js";
+import TableSelectionSingle from "../../src/TableSelectionSingle.js";
+import TableSelectionMulti from "../../src/TableSelectionMulti.js";
+import type TableSelectionBase from "../../src/TableSelectionBase.js";
+
+function mountTestpage(selectionMode: string) {
+	cy.mount(
+		<>
+			<Table id="table0" noDataText="No data found">
+				{selectionMode === "Single" && (
+					<TableSelectionSingle id="selection" slot="features"></TableSelectionSingle>
+				)}
+				{selectionMode === "Multiple" && (
+					<TableSelectionMulti id="selection" slot="features"></TableSelectionMulti>
+				)}
+				<TableHeaderRow slot="headerRow">
+					<TableHeaderCell id="colA"><span>ColumnA</span></TableHeaderCell>
+					<TableHeaderCell id="colB">Column B</TableHeaderCell>
+					<TableHeaderCell id="colC">Column C</TableHeaderCell>
+					<TableHeaderCell id="colD">Column D</TableHeaderCell>
+				</TableHeaderRow>
+				<TableRow rowKey="0">
+					<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>
+				<TableRow rowKey="1">
+					<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>
+				<TableRow rowKey="2">
+					<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>
+				<TableRow rowKey="3">
+					<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>
+				<TableRow rowKey="4">
+					<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("#table0").children("ui5-table-header-row").first().as("headerRow");
+	cy.get("#table0").children("ui5-table-row").get("[row-key=\"0\"]").as("row0");
+	cy.get("#table0").children("ui5-table-row").get("[row-key=\"4\"]").as("row4");
+}
+
+describe("Mode - None", () => {
+	before(() => {
+		mountTestpage("None");
+	});
+
+	it("selection should be not active", () => {
+		cy.get("@headerRow").shadow().find("#selection-cell")
+			.should("not.exist");
+		cy.get("@row0").shadow().find("#selection-cell")
+			.should("not.exist");
+	});
+});
+
+const testConfig = {
+	"Single": {
+		"config": {
+			"mode": "Single",
+		},
+		"cases": {
+			"BOXES": {
+				"header": {
+					"exists": true,
+					"checkbox": false,
+				},
+				"row": {
+					"exists": true,
+					"checkbox": true,
+				},
+			},
+			"SPACE": {
+				"space_0": "0",
+				"space_4": "4",
+			},
+			"ARROWS_BOX": {
+				"arrow_initial": "0",
+				"arrow_down": "1",
+				"arrow_up": "0",
+			},
+			"MOUSE": {
+				"mouse_0": "0",
+				"mouse_4": "4",
+			},
+			"RANGE_MOUSE": {
+				"range_mouse_initial": "0",
+				"range_mouse_final": "4",
+				"range_mouse_edge": "0",
+			},
+			"RANGE_KEYBOARD": {
+				"initial": "0",
+				"block_1": "0",
+				"block_2": "3",
+			},
+		},
+	},
+	"Multiple": {
+		"config": {
+			"mode": "Multiple",
+		},
+		"cases": {
+			"BOXES": {
+				"header": {
+					"exists": true,
+					"checkbox": true
+				},
+				"row": {
+					"exists": true,
+					"checkbox": true
+				}
+			},
+			"SPACE": {
+				"space_0": "0",
+				"space_4": "0 4"
+			},
+			"ARROWS_BOX": {
+				"arrow_initial": "0",
+				"arrow_down": "0",
+				"arrow_up": "0"
+			},
+			"MOUSE": {
+				"mouse_0": "0",
+				"mouse_4": "0 4"
+			},
+			"RANGE_MOUSE": {
+				"range_mouse_initial": "0",
+				"range_mouse_final": "0 1 2 3 4",
+				"range_mouse_edge": "0 1 2 3 4"
+			},
+			"RANGE_KEYBOARD": {
+				"initial": "0",
+				"block_1": "0 1",
+				"block_2": "0 1 3 4"
+			}
+		}
+	}
+};
+
+// I've had to check the attribute this way because
+// should("have.attr"... and similar functions always returned '' instead of the actual value
+// It could be a timing issue but .wait didn't help either
+function checkSelection(expectedSelected: string) {
+	cy.get("#selection").then($selection => {
+		const selection = $selection.get(0) as TableSelectionBase;
+		expect(selection.getAttribute("selected")).to.equal(expectedSelected);
+
+		if (selection.isMultiSelectable()) {
+			const selectedRows = (selection as TableSelectionMulti).getSelectedRows();
+			expect(selectedRows.map(row => selection.getRowKey(row)).join(" ")).to.equal(expectedSelected);
+			const selectedAsSet = (selection as TableSelectionMulti).getSelectedAsSet();
+			expect([...selectedAsSet].join(" ")).to.equal(expectedSelected);
+		} else {
+			const selectedRow = (selection as TableSelectionSingle).getSelectedRow();
+			expect(selectedRow!.rowKey).to.equal(expectedSelected);
+			expect(selectedRow).to.equal(selection.getRowByKey(expectedSelected));
+		}
+	});
+}
+
+Object.entries(testConfig).forEach(([mode, testConfigEntry]) => {
+	describe(`Mode - ${mode}`, () => {
+		beforeEach(() => {
+			mountTestpage(testConfigEntry.config.mode);
+		});
+
+		it("Correct boxes are shown", () => {
+			cy.get("@headerRow").shadow().find("#selection-cell")
+				.should(testConfigEntry.cases.BOXES.header.exists ? "exist" : "not.exist");
+			cy.get("@row0").shadow().find("#selection-cell")
+				.should(testConfigEntry.cases.BOXES.row.exists ? "exist" : "not.exist");
+
+			cy.get("@headerRow").shadow().find("#selection-component")
+				.should(testConfigEntry.cases.BOXES.header.checkbox ? "exist" : "not.exist");
+			cy.get("@row0").shadow().find("#selection-component")
+				.should(testConfigEntry.cases.BOXES.row.checkbox ? "exist" : "not.exist");
+		});
+
+		it("select row via SPACE", () => {
+			cy.get("@row0").realClick({ position: "left" });
+			cy.get("@row0").realPress("Space");
+			checkSelection(testConfigEntry.cases.SPACE.space_0);
+
+			cy.get("@row4").realClick();
+			cy.get("@row4").realPress("Space");
+			checkSelection(testConfigEntry.cases.SPACE.space_4);
+		});
+
+		it("select row via arrows (radio focus)", () => {
+			cy.get("@row0").shadow().find("#selection-component").realClick();
+			checkSelection(testConfigEntry.cases.ARROWS_BOX.arrow_initial);
+
+			cy.realPress("ArrowDown");
+			checkSelection(testConfigEntry.cases.ARROWS_BOX.arrow_down);
+
+			cy.realPress("ArrowUp");
+			checkSelection(testConfigEntry.cases.ARROWS_BOX.arrow_up);
+		});
+
+		it("select row via mouse", () => {
+			cy.get("@row0").shadow().find("#selection-component").realClick();
+			checkSelection(testConfigEntry.cases.MOUSE.mouse_0);
+
+			cy.get("@row4").shadow().find("#selection-component").realClick();
+			checkSelection(testConfigEntry.cases.MOUSE.mouse_4);
+		});
+
+		it("range selection with mouse", () => {
+			cy.get("@row0").shadow().find("#selection-component").realClick();
+			checkSelection(testConfigEntry.cases.RANGE_MOUSE.range_mouse_initial);
+
+			// Need to simulate keydown with SHIFT key to set range selection flag shiftKeyPressed
+			// Cypress does not trigger keydown when just calling realClick with shiftKey: true
+			// That is why selection of the row is not supressed, and we end up with 0 4 1 2 3
+			cy.get("@row4").trigger("keydown", { bubbles: true, key: "Shift", shiftKey: true });
+			cy.get("@row4").shadow().find("#selection-component").realClick({ shiftKey: true });
+			checkSelection(testConfigEntry.cases.RANGE_MOUSE.range_mouse_final);
+
+			cy.get("@row4").trigger("keydown", { bubbles: true, key: "Shift", shiftKey: true });
+			cy.get("@row0").shadow().find("#selection-component").realClick();
+			checkSelection(testConfigEntry.cases.RANGE_MOUSE.range_mouse_edge);
+		});
+
+		it("range selection with keyboard", () => {
+			cy.get("@row0").realClick({ position: "center" });
+			cy.get("@row0").realPress("Space");
+			checkSelection(testConfigEntry.cases.RANGE_KEYBOARD.initial);
+
+			cy.realPress(["Shift", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowUp", "ArrowUp"]);
+			checkSelection(testConfigEntry.cases.RANGE_KEYBOARD.block_1);
+
+			cy.realPress(["ArrowDown", "ArrowDown", "Space"]);
+			cy.realPress(["Shift", "ArrowDown"]);
+			checkSelection(testConfigEntry.cases.RANGE_KEYBOARD.block_2);
+		});
+	});
+});
+
+describe("TableSelectionMulti", () => {
+	it("updates the header row checkbox when rows are added or removed", () => {
+		cy.mount(
+			<Table id="table1">
+				<TableSelectionMulti id="selection" selected="1 2" slot="features"></TableSelectionMulti>
+				<TableHeaderRow id="headerRow" slot="headerRow">
+					<TableHeaderCell>ColumnA</TableHeaderCell>
+				</TableHeaderRow>
+				<TableRow id="row1" rowKey="1">
+					<TableCell><Label>Cell A</Label></TableCell>
+				</TableRow>
+				<TableRow id="row2" rowKey="2">
+					<TableCell><Label>Cell A</Label></TableCell>
+				</TableRow>
+			</Table>
+		);
+
+		cy.get("#headerRow").shadow().find("#selection-cell").as("headerRowSelectionCell");
+		cy.get("@headerRowSelectionCell").find("#selection-component").as("headerRowCheckBox");
+		cy.get("@headerRowCheckBox").should("have.attr", "checked");
+		cy.get("#table1").then($table => {
+			$table.append(
+				`<ui5-table-row id="row3" row-key="3">
+					<ui5-table-cell>Cell A</ui5-table-cell>
+					<ui5-table-cell>Cell B</ui5-table-cell>
+				</ui5-table-row>`
+			);
+		});
+		cy.get("@headerRowCheckBox").should("not.have.attr", "checked");
+		cy.get("#row3").invoke("remove");
+		cy.get("@headerRowCheckBox").should("have.attr", "checked");
+		cy.get("#row2").invoke("remove");
+		cy.get("#row1").invoke("remove");
+		cy.get("@headerRowCheckBox").should("not.have.attr", "checked");
+	});
+});

package/cypress/specs/Text.cy.tsx

@@ -13,12 +13,28 @@ describe("Text", () => {
 
 	it("tests maxLines default behavior", () => {
 		cy.mount(<Text >Text</Text>);
-		cy.get("[ui5-text]").should("have.css", "-webkit-line-clamp", "none");
+		cy.get("[ui5-text]")
+			.should("have.css", "-webkit-box-orient", "vertical")
+			.should("have.css", "-webkit-line-clamp", "none");
 	});
 
-	it("tests maxLines", () => {
+	it("tests maxLines = 1", () => {
 		cy.mount(<Text maxLines={1}>Text</Text>);
-		cy.get("[ui5-text]").should("have.css", "-webkit-line-clamp", "1");
+
+		cy.get("[ui5-text]")
+			.should("have.css", "display", "inline-block")
+			.should("have.css", "overflow", "hidden")
+			.should("have.css", "text-overflow", "ellipsis")
+			.should("have.css", "white-space", "nowrap");
+	});
+
+	it("tests maxLines > 1", () => {
+		cy.mount(<Text maxLines={2}>Text</Text>);
+
+		cy.get("[ui5-text]")
+			.should("have.css", "overflow", "hidden")
+			.should("have.css", "-webkit-line-clamp", "2")
+			.should("have.css", "-webkit-box-orient", "vertical");
 	});
 
 	it("tests emptyIndicatorMode", () => {

package/cypress/specs/Tokenizer.cy.tsx

@@ -170,4 +170,40 @@ describe("Tokenizer - multi-line and Clear All", () => {
 			.find("[ui5-token]")
 			.should("have.length", 6);
 	});
+
+	it("handles overflow mechanism as expected", () => {
+		cy.mount(
+			<Tokenizer style={{ width: "100%" }}>
+				<Token text="Andora"></Token>
+				<Token text="Bulgaria"></Token>
+				<Token text="Canada"></Token>
+				<Token text="Denmark"></Token>
+				<Token text="Estonia"></Token>
+				<Token text="Andora"></Token>
+			</Tokenizer>
+		);
+
+		cy.get("ui5-token")
+			.eq(5)
+			.as("lastToken");
+
+		cy.get("@lastToken")
+			.should("be.visible");
+
+		cy.viewport(500, 600);
+
+		cy.get("ui5-tokenizer")
+			.shadow()
+			.find("span")
+			.should("have.attr", "aria-haspopup", "dialog")
+			.as("n-more");
+
+		cy.get("@lastToken")
+			.should("be.hidden");
+
+		cy.viewport(600, 600);
+
+		cy.get("@lastToken")
+			.should("be.visible");
+	});
 });

package/cypress/specs/Toolbar.cy.tsx

@@ -170,3 +170,25 @@ describe("Toolbar general interaction", () => {
 			.should("have.been.calledOnce");
 	});
 });
+
+describe("Accessibility", () => {
+	it("Should apply accessibile-name to the popover", () => {
+		cy.mount(
+			<Toolbar>
+				<ToolbarButton text="Button 1"></ToolbarButton>
+				<ToolbarButton text="Button 2"></ToolbarButton>
+				<ToolbarButton text="Button 3"></ToolbarButton>
+				<ToolbarSelect accessible-name="Select">
+					<ToolbarSelectOption>1</ToolbarSelectOption>
+					<ToolbarSelectOption>2</ToolbarSelectOption>
+					<ToolbarSelectOption>3</ToolbarSelectOption>
+				</ToolbarSelect>
+			</Toolbar>
+		);
+
+		cy.get("ui5-toolbar")
+			.shadow()
+			.find(".ui5-overflow-popover")
+			.should("have.attr", "accessible-name", "Available Values");
+	});
+});