@ui5/webcomponents 2.11.0-rc.2 → 2.11.0-rc.4

package/cypress/specs/TableDragAndDrop.cy.tsx

@@ -1,236 +0,0 @@
-import MovePlacement from "@ui5/webcomponents-base/dist/types/MovePlacement.js";
-import TableHeaderRow from "../../src/TableHeaderRow.js";
-import TableHeaderCell from "../../src/TableHeaderCell.js";
-import Table from "../../src/Table.js";
-import TableRow from "../../src/TableRow.js";
-import TableCell from "../../src/TableCell.js";
-import Label from "../../src/Label.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(
-			<Table id="table">
-				<TableHeaderRow slot="headerRow">
-					<TableHeaderCell><span>ColumnA</span></TableHeaderCell>
-					<TableHeaderCell><span>ColumnB</span></TableHeaderCell>
-				</TableHeaderRow>
-				{Array.from({ length: 10 }).map((_, index) =>
-					<TableRow rowKey={`${index}`} movable={true}>
-						<TableCell><Label>Cell A</Label></TableCell>
-						<TableCell><Label>Cell B</Label></TableCell>
-					</TableRow>
-				)}
-				<TableRow rowKey="10">
-					<TableCell><Label>Cell A</Label></TableCell>
-					<TableCell><Label>Cell B</Label></TableCell>
-				</TableRow>
-			</Table>
-		);
-
-		cy.get("[ui5-table]")
-			.should("be.visible");
-	});
-
-	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.tsx

@@ -1,336 +0,0 @@
-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 TableGrowing from "../../src/TableGrowing.js";
-import Label from "../../src/Label.js";
-
-function TableSample() {
-	return <Table id="table">
-		<TableGrowing slot="features"></TableGrowing>
-		<TableHeaderRow slot="headerRow">
-			<TableHeaderCell><span>ColumnA</span></TableHeaderCell>
-		</TableHeaderRow>
-		<TableRow>
-			<TableCell><Label>Cell A</Label></TableCell>
-		</TableRow>
-	</Table>;
-}
-
-function TableGrowingSample(props: { rowCount: number, overflow: boolean }) {
-	return (
-		<div id="wrapper" style={{ height: "200px", overflow: props.overflow ? "auto" : "" }}>
-			<Table id="table">
-				<TableGrowing slot="features" mode="Scroll"></TableGrowing>
-				<TableHeaderRow slot="headerRow">
-					<TableHeaderCell><span>ColumnA</span></TableHeaderCell>
-				</TableHeaderRow>
-				{Array.from({ length: props.rowCount }).map(() => (
-					<TableRow>
-						<TableCell><Label>Cell A</Label></TableCell>
-					</TableRow>
-				))}
-			</Table>
-		</div>
-	);
-}
-
-describe("TableGrowing - Button", () => {
-	describe("Rendering", () => {
-		it("tests button is rendered", () => {
-			cy.mount(<TableSample></TableSample>);
-
-			cy.get("[ui5-table-growing]")
-				.shadow()
-				.find("#button")
-				.should("exist")
-				.should("have.attr", "role", "button")
-				.should("have.attr", "aria-labelledby", "text subtext");
-
-			cy.get("[ui5-table")
-				.shadow()
-				.find("#growing-row")
-				.should("exist");
-
-			cy.get("[ui5-table-growing]")
-				.shadow()
-				.find("#text")
-				.should("have.text", "More");
-		});
-
-		it("tests correct custom texts are rendered", () => {
-			const text = "My Custom Growing Text",
-				subtext = "My Custom Growing Subtext";
-
-			cy.mount(
-				<Table>
-					<TableGrowing slot="features" text={text} subtext={subtext} />
-					<TableHeaderRow slot="headerRow">
-						<TableHeaderCell><span>ColumnA</span></TableHeaderCell>
-					</TableHeaderRow>
-					<TableRow>
-						<TableCell><Label>Cell A</Label></TableCell>
-					</TableRow>
-				</Table>
-			);
-
-			cy.get("[ui5-table-growing]")
-				.shadow()
-				.find("#button")
-				.should("exist")
-				.should("have.attr", "role", "button")
-				.should("have.attr", "aria-labelledby", "text subtext");
-
-			cy.get("[ui5-table-growing]")
-				.shadow()
-				.find("#text")
-				.should("have.text", text);
-
-			cy.get("[ui5-table-growing]")
-				.shadow()
-				.find("#subtext")
-				.should("have.text", subtext);
-		});
-
-		it("tests growing button not shown when no data", () => {
-			cy.mount(
-				<Table>
-					<TableGrowing slot="features"></TableGrowing>
-					<TableHeaderRow slot="headerRow">
-						<TableHeaderCell><span>ColumnA</span></TableHeaderCell>
-					</TableHeaderRow>
-				</Table>
-			);
-
-			cy.get("[ui5-table]")
-				.shadow()
-				.find("#growing-row")
-				.should("not.exist");
-		});
-	});
-
-	describe("Event & Focus", () => {
-		it("tests loadMore event fired upon pressing button", () => {
-			cy.mount(<TableSample></TableSample>);
-
-			cy.get<TableGrowing>("[ui5-table-growing]")
-				.then(tableGrowing => tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore")))
-				.realClick();
-
-			cy.get("@loadMore")
-				.should("have.been.calledOnce");
-		});
-
-		it("test loadMore event fired upon pressing Enter", () => {
-			cy.mount(<TableSample></TableSample>);
-
-			cy.get<TableGrowing>("[ui5-table-growing]")
-				.then(tableGrowing => tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore")));
-
-			cy.get<TableGrowing>("[ui5-table-growing]")
-				.shadow()
-				.find("#button")
-				.should("be.visible")
-				.focus();
-
-			cy.realPress("Enter");
-
-			cy.get("@loadMore")
-				.should("have.been.calledOnce");
-
-			cy.get<TableGrowing>("[ui5-table-growing]")
-				.shadow()
-				.find("#button")
-				.should("be.visible")
-				.focus();
-
-			cy.realPress("Space");
-
-			cy.get("@loadMore")
-				.should("have.been.calledTwice");
-		});
-
-		it("tests focus is set to first newly added row - click", () => {
-			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);
-					});
-				})
-				.realClick();
-
-			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 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>);
-
-			cy.get<TableGrowing>("[ui5-table-growing]")
-				.realClick();
-
-			cy.get("[ui5-table-growing]")
-				.should("have.focus");
-		});
-	});
-});
-
-describe("TableGrowing - Scroll", () => {
-	describe("Rendering", () => {
-		it("tests no button shown, when scrollable", () => {
-			cy.mount(<TableGrowingSample rowCount={10} overflow={true}></TableGrowingSample>);
-
-			cy.get("[ui5-table-growing]")
-				.shadow()
-				.find("#button")
-				.should("not.be.visible");
-
-			cy.get("[ui5-table]")
-				.shadow()
-				.find("#growing-row")
-				.should("not.exist");
-		});
-
-		it("tests button shown when not scrollable", () => {
-			cy.mount(<TableGrowingSample rowCount={1} overflow={false}></TableGrowingSample>);
-
-			cy.get("[ui5-table-growing]")
-				.shadow()
-				.find("#button")
-				.should("exist");
-
-			cy.get("[ui5-table]")
-				.shadow()
-				.find("#growing-row")
-				.should("exist");
-		});
-	});
-
-	describe("Event", () => {
-		it("tests loadMore event fire upon scrolling to table end", () => {
-			cy.mount(<TableGrowingSample rowCount={10} overflow={true}></TableGrowingSample>);
-
-			cy.get("[ui5-table]")
-				.should("be.visible");
-
-			cy.get<TableGrowing>("[ui5-table-growing]")
-				.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);
-						});
-					});
-				});
-
-			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("@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", () => {
-			cy.mount(<TableGrowingSample rowCount={1} overflow={true}></TableGrowingSample>);
-
-			cy.get<TableGrowing>("[ui5-table-growing]")
-				.then(tableGrowing => {
-					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);
-						});
-					});
-					tableGrowing.get(0).addEventListener("load-more", cy.stub().as("loadMore"));
-				})
-				.realClick();
-
-			cy.get("@loadMore")
-				.should("have.been.calledOnce");
-
-			cy.get("[ui5-table]")
-				.children("ui5-table-row")
-				.should("have.length", 11);
-
-			cy.get("[ui5-table-growing]")
-				.shadow()
-				.find("#button")
-				.should("not.be.visible");
-
-			cy.get("[ui5-table]")
-				.shadow()
-				.find("#growing-row")
-				.should("not.exist");
-
-			for (let i = 2; i <= 6; i++) {
-				cy.get("#wrapper")
-					.scrollTo("bottom", { duration: 300 });
-
-				cy.get("@loadMore")
-					.should("have.callCount", i);
-
-				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/TableLoading.cy.tsx

@@ -1,48 +0,0 @@
-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";
-
-describe("Table - loading", () => {
-	it("tests busy indicator is displayed", () => {
-		cy.mount(
-			<>
-				<input id="before" />
-				<Table loading={true} loadingDelay={0}>
-					<TableHeaderRow slot="headerRow">
-						<TableHeaderCell ><span>ColumnA</span></TableHeaderCell>
-					</TableHeaderRow>
-					<TableRow>
-						<TableCell><Label>Cell A</Label></TableCell>
-					</TableRow>
-				</Table>
-				<input id="after" />
-			</>
-		);
-
-		cy.get("[ui5-table]")
-			.shadow()
-			.find("#loading")
-			.shadow()
-			.find(".ui5-busy-indicator-busy-area")
-			.should("exist");
-
-		cy.get("#before")
-			.realClick();
-
-		cy.get("#before")
-			.should("be.focused");
-
-		cy.realPress("Tab");
-
-		cy.focused()
-			.should("have.class", "ui5-busy-indicator-busy-area");
-
-		cy.realPress("Tab");
-
-		cy.get("#after")
-			.should("be.focused");
-	});
-});