@ui5/webcomponents 2.11.0-rc.1 → 2.11.0-rc.3

package/cypress/specs/TableSelections.cy.tsx

@@ -1,332 +0,0 @@
-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));
-		}
-	});
-}
-
-function checkSelectionChangeSpy(expectedCalls: number) {
-	cy.get("@selectionChangeSpy").should("have.callCount", expectedCalls);
-}
-
-Object.entries(testConfig).forEach(([mode, testConfigEntry]) => {
-	describe(`Mode - ${mode}`, () => {
-		beforeEach(() => {
-			mountTestpage(testConfigEntry.config.mode);
-			cy.get("#selection").as("selection");
-			cy.get("@selection").then($selection => {
-				$selection.get(0)?.addEventListener("change", cy.stub().as("selectionChangeSpy"));
-			});
-		});
-
-		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();
-			cy.get("@row0").realPress("Space");
-			checkSelection(testConfigEntry.cases.SPACE.space_0);
-			checkSelectionChangeSpy(1);
-
-			cy.get("@row4").realClick();
-			cy.get("@row4").realPress("Space");
-			checkSelection(testConfigEntry.cases.SPACE.space_4);
-			checkSelectionChangeSpy(2);
-		});
-
-		it("select row via arrows (radio focus)", () => {
-			cy.get("@row0").shadow().find("#selection-component").realClick();
-			checkSelection(testConfigEntry.cases.ARROWS_BOX.arrow_initial);
-			checkSelectionChangeSpy(1);
-
-			cy.realPress("ArrowDown");
-			checkSelection(testConfigEntry.cases.ARROWS_BOX.arrow_down);
-			let callCount = mode === "Single" ? 2 : 1;
-			checkSelectionChangeSpy(callCount);
-
-			cy.realPress("ArrowUp");
-			checkSelection(testConfigEntry.cases.ARROWS_BOX.arrow_up);
-			callCount = mode === "Single" ? 3 : 1;
-			checkSelectionChangeSpy(callCount);
-		});
-
-		it("select row via mouse", () => {
-			cy.get("@row0").shadow().find("#selection-component").realClick();
-			checkSelection(testConfigEntry.cases.MOUSE.mouse_0);
-			checkSelectionChangeSpy(1);
-
-			cy.get("@row4").shadow().find("#selection-component").realClick();
-			checkSelection(testConfigEntry.cases.MOUSE.mouse_4);
-			checkSelectionChangeSpy(2);
-		});
-
-		it("range selection with mouse", () => {
-			cy.get("@row0").shadow().find("#selection-component").realClick();
-			checkSelection(testConfigEntry.cases.RANGE_MOUSE.range_mouse_initial);
-			checkSelectionChangeSpy(1);
-
-			cy.get("@row4").shadow().find("#selection-component").realClick({ shiftKey: true });
-			checkSelection(testConfigEntry.cases.RANGE_MOUSE.range_mouse_final);
-			checkSelectionChangeSpy(2);
-
-			cy.get("@row0").shadow().find("#selection-component").realClick({ shiftKey: true });
-			checkSelection(testConfigEntry.cases.RANGE_MOUSE.range_mouse_edge);
-			let callCount = mode === "Single" ? 3 : 2;
-			checkSelectionChangeSpy(callCount);
-		});
-
-		it("range selection with mouse with SHIFT constantly pressed", () => {
-			cy.get("@row0").shadow().find("#selection-component").realClick({ shiftKey: true });
-			checkSelection(testConfigEntry.cases.RANGE_MOUSE.range_mouse_initial);
-			checkSelectionChangeSpy(1);
-
-			cy.get("@row4").shadow().find("#selection-component").realClick({ shiftKey: true });
-			checkSelection(testConfigEntry.cases.RANGE_MOUSE.range_mouse_final);
-			checkSelectionChangeSpy(2);
-
-			cy.get("@row0").shadow().find("#selection-component").realClick({ shiftKey: true });
-			checkSelection(testConfigEntry.cases.RANGE_MOUSE.range_mouse_edge);
-			let callCount = mode === "Single" ? 3 : 2;
-			checkSelectionChangeSpy(callCount);
-		});
-
-		it("range selection with keyboard", () => {
-			cy.get("@row0").realClick({ position: "center" });
-			cy.get("@row0").realPress("Space");
-			checkSelection(testConfigEntry.cases.RANGE_KEYBOARD.initial);
-			checkSelectionChangeSpy(1);
-
-			cy.realPress(["Shift", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowUp", "ArrowUp"]);
-			checkSelection(testConfigEntry.cases.RANGE_KEYBOARD.block_1);
-			let callCount = mode === "Single" ? 1 : 6;
-			checkSelectionChangeSpy(callCount);
-
-			cy.realPress(["ArrowDown", "ArrowDown", "Space"]);
-			cy.realPress(["Shift", "ArrowDown"]);
-			checkSelection(testConfigEntry.cases.RANGE_KEYBOARD.block_2);
-			callCount = mode === "Single" ? 2 : 8;
-			checkSelectionChangeSpy(callCount);
-		});
-	});
-});
-
-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/TableUtils.cy.tsx

@@ -1,63 +0,0 @@
-import { isInstanceOfTable, isValidColumnWidth } 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");
-	});
-});
-
-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/TableVirtualizer.cy.tsx

@@ -1,243 +0,0 @@
-import Table from "../../src/Table.js";
-import TableHeaderRow from "../../src/TableHeaderRow.js";
-import TableHeaderCell from "../../src/TableHeaderCell.js";
-import "../../src/TableRow.js";
-import "../../src/TableCell.js";
-
-import TableVirtualizer from "../../src/TableVirtualizer.js";
-import type { RangeChangeEventDetail } from "../../src/TableVirtualizer.js";
-
-describe("TableVirtualizer", () => {
-	function mountTable(rowHeight = 50, rowCount = 100, tableHeight = 250) {
-		cy.mount(
-			<Table style={{ height: `${tableHeight}px` }}>
-				<TableHeaderRow slot="headerRow" hidden>
-					<TableHeaderCell>Column</TableHeaderCell>
-				</TableHeaderRow>
-				<TableVirtualizer slot="features" rowHeight={rowHeight} rowCount={rowCount}></TableVirtualizer>
-			</Table>
-		);
-
-		cy.get<TableVirtualizer>("[ui5-table-virtualizer]").as("virtualizer").then($virtualizer => {
-			$virtualizer[0].addEventListener("range-change", updateRows as EventListener);
-			$virtualizer[0].reset();
-		});
-
-		cy.get("[ui5-table]").shadow().find("#table").as("innerTable");
-		cy.get("[ui5-table]").children("ui5-table-row").as("rows");
-		cy.get("@rows").first().as("firstRow");
-		cy.get("@rows").last().as("lastRow");
-	}
-
-	function updateRows(e: CustomEvent<RangeChangeEventDetail>) {
-		const table = document.querySelector("ui5-table") as Table;
-		for (let i = e.detail.first; i < e.detail.last; i++) {
-			const row = table.rows[i - e.detail.first];
-			if (row) {
-				row.position = i;
-				row.cells[0].textContent = `${i}`;
-			} else {
-				const newRow = `<ui5-table-row position="${i}"><ui5-table-cell>${i}</ui5-table-cell></ui5-table-row>`;
-				table.insertAdjacentHTML("beforeend", newRow);
-			}
-		}
-		for (let i = e.detail.last; i < table.rows.length; i++) {
-			table.rows[i].remove();
-		}
-	}
-
-	function testRows(start: number, end: number) {
-		for (let i = start; i < end; i++) {
-			cy.get("[ui5-table-row]")
-				.eq(i - start)
-				.should("have.attr", "position", `${i}`)
-				.should("have.attr", "aria-rowindex", `${i + 1}`)
-				.find("ui5-table-cell")
-				.should("have.text", `${i}`);
-		}
-
-		cy.get("[ui5-table]")
-			.shadow()
-			.find("#spacer")
-			.then($spacer => {
-				const transform = getComputedStyle($spacer[0]).transform;
-				return new DOMMatrix(transform);
-			})
-			.its("f")
-			.should("equal", start * 50);
-	}
-
-	describe("Rendering", () => {
-		it("should render initially 5 rows", () => {
-			mountTable();
-
-			cy.get("@innerTable")
-				.should("have.attr", "aria-rowcount", "100")
-				.should("have.css", "overflow-y", "auto")
-				.then($innerTable => window.getComputedStyle($innerTable[0]))
-				.invoke("getPropertyValue", "--row-height")
-				.and("equal", "50px");
-
-			cy.get("@innerTable")
-				.children("#rows")
-				.should("have.css", "height", "5000px");
-
-			cy.get("@innerTable")
-				.find("#spacer")
-				.should("have.css", "will-change", "transform");
-
-			testRows(0, 5);
-		});
-
-		it("should react to rowHeight changes", () => {
-			mountTable();
-
-			cy.get("@virtualizer").invoke("attr", "row-height", "60");
-
-			cy.get("@innerTable")
-				.then($innerTable => window.getComputedStyle($innerTable[0]))
-				.invoke("getPropertyValue", "--row-height")
-				.and("equal", "60px");
-
-			cy.get("@innerTable")
-				.children("#rows")
-				.should("have.css", "height", "6000px");
-		});
-
-		it("should react to rowCount changes", () => {
-			mountTable();
-
-			cy.get("@virtualizer").invoke("attr", "row-count", "200");
-
-			cy.get("@innerTable")
-				.should("have.attr", "aria-rowcount", "200")
-				.children("#rows")
-				.should("have.css", "height", "10000px");
-		});
-
-		it("should update rows on scroll", () => {
-			mountTable();
-
-			cy.get("@innerTable").scrollTo(0, 250);
-			testRows(5, 10);
-
-			cy.get("@innerTable").scrollTo("bottom");
-			testRows(95, 100);
-
-			cy.get("@innerTable").scrollTo(0, 4000);
-			testRows(80, 85);
-
-			cy.get("@innerTable").scrollTo("top");
-			testRows(0, 5);
-		});
-
-		it("should update rows via keyboard while focus is on the row", () => {
-			mountTable();
-
-			cy.get("@firstRow").realClick();
-			cy.get("@firstRow").should("have.focus");
-
-			cy.realPress("PageDown");
-			cy.get("@lastRow").should("have.focus");
-
-			cy.realPress("PageDown");
-			testRows(5, 10);
-
-			cy.realPress("ArrowDown");
-			testRows(6, 11);
-
-			cy.realPress("PageUp");
-			cy.get("@firstRow").should("have.focus");
-
-			cy.realPress("PageUp");
-			testRows(1, 6);
-
-			cy.realPress("ArrowUp");
-			testRows(0, 5);
-
-			cy.realPress("End");
-			cy.get("@lastRow").should("have.focus");
-
-			cy.realPress("End");
-			testRows(95, 100);
-
-			cy.realPress("Home");
-			cy.get("@firstRow").should("have.focus");
-
-			cy.realPress("Home");
-			testRows(0, 5);
-		});
-
-		it("should update rows via keyboard while focus is on the cell", () => {
-			mountTable();
-
-			cy.get("@firstRow").find("ui5-table-cell").first().as("firstRowFirstCell");
-			cy.get("@lastRow").find("ui5-table-cell").first().as("lastRowFirstCell");
-
-			cy.get("@firstRow").realClick().realPress("ArrowRight");
-			cy.get("@firstRowFirstCell").should("have.focus");
-
-			cy.realPress("PageDown");
-			cy.get("@lastRowFirstCell").should("have.focus");
-
-			cy.realPress("PageDown");
-			testRows(5, 10);
-
-			cy.realPress("ArrowDown");
-			testRows(6, 11);
-
-			cy.realPress("PageUp");
-			cy.get("@firstRowFirstCell").should("have.focus");
-
-			cy.realPress("PageUp");
-			testRows(1, 6);
-
-			cy.realPress("ArrowUp");
-			testRows(0, 5);
-
-			cy.realPress("End");
-			cy.get("@firstRow").should("have.focus");
-
-			cy.realPress("End");
-			cy.get("@lastRow").should("have.focus");
-
-			cy.realPress("End");
-			testRows(95, 100);
-
-			cy.get("@lastRow").realPress("ArrowRight");
-			cy.get("@lastRowFirstCell").should("have.focus");
-
-			cy.realPress("Home");
-			cy.get("@lastRow").should("have.focus");
-
-			cy.realPress("Home");
-			cy.get("@firstRow").should("have.focus");
-
-			cy.realPress("Home");
-			testRows(0, 5);
-		});
-
-		it("should have the reset() API", () => {
-			mountTable();
-
-			cy.get("@virtualizer").then($virtualizer => {
-				$virtualizer[0].addEventListener("range-change", cy.stub().as("rangeChange"));
-			});
-
-			cy.get("@innerTable").scrollTo("bottom");
-			cy.get("@rangeChange").should("have.been.calledOnce");
-			testRows(95, 100);
-
-			cy.get("@virtualizer").invoke("get", 0).invoke("reset");
-			cy.get("@rangeChange").should("have.been.calledTwice");
-			testRows(0, 5);
-
-			cy.get("@virtualizer").invoke("get", 0).invoke("reset");
-			cy.get("@rangeChange").should("have.been.calledThrice");
-
-			cy.get("@virtualizer").invoke("attr", "row-count", "2");
-			cy.get("@virtualizer").invoke("get", 0).invoke("reset");
-			testRows(0, 2);
-		});
-	});
-});