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

package/cypress/specs/TableRowActions.cy.tsx

@@ -1,239 +0,0 @@
-/* eslint-disable cypress/no-unnecessary-waiting */
-/* eslint-disable newline-per-chained-call */
-import Table from "../../src/Table.js";
-import "../../src/TableHeaderCell.js";
-import "../../src/TableCell.js";
-import "../../src/Menu.js";
-import "../../src/MenuItem.js";
-import add from "@ui5/webcomponents-icons/dist/add.js";
-import edit from "@ui5/webcomponents-icons/dist/edit.js";
-import share from "@ui5/webcomponents-icons/dist/share.js";
-import deleteIcon from "@ui5/webcomponents-icons/dist/delete.js";
-import "@ui5/webcomponents-icons/dist/overflow.js";
-import "@ui5/webcomponents-icons/dist/navigation-right-arrow.js";
-import TableHeaderRow from "../../src/TableHeaderRow.js";
-import TableRowAction from "../../src/TableRowAction.js";
-import TableRowActionNavigation from "../../src/TableRowActionNavigation.js";
-import TableRow from "../../src/TableRow.js";
-import type { JSX } from "@ui5/webcomponents-base/jsx-runtime";
-
-describe("TableRowActions", () => {
-	function mountTable(rowActionCount = 0, content: () => JSX.Element) {
-		cy.mount(
-			<Table rowActionCount={rowActionCount}>
-				<TableHeaderRow slot="headerRow"></TableHeaderRow>
-				{content()}
-			</Table>
-		);
-
-		cy.get("[ui5-table]").as("table").children("ui5-table-row").as("rows");
-		cy.get("@table").children("ui5-table-header-row").first().as("headerRow");
-		cy.get("@table").shadow().find("#table").as("innerTable");
-		cy.get("@rows").then($rows => {
-			$rows.each(index => {
-				cy.get("@rows").eq(index).as(`row${index + 1}`);
-			});
-		});
-		cy.get("@table").then($table => {
-			$table[0].addEventListener("row-action-click", cy.stub().as("rowActionClick"));
-		});
-	}
-
-	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, () => <>
-				<TableRow id="addRow">
-					<TableRowAction slot="actions" id="addAction" icon={add} text="Add"></TableRowAction>
-				</TableRow>
-				<TableRow>
-					<TableRowAction slot="actions" icon={add} text="Add" invisible={true}></TableRowAction>
-				</TableRow>
-				<TableRow>
-					<TableRowActionNavigation slot="actions"></TableRowActionNavigation>
-				</TableRow>
-				<TableRow id="navigationRow">
-					<TableRowActionNavigation slot="actions" id="navigationAction" interactive={true}></TableRowActionNavigation>
-				</TableRow>
-			</>
-			);
-
-			cy.get("@headerRow").shadow().find("#actions-cell").should("exist");
-			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");
-			cy.get("@row4").find("ui5-table-row-action-navigation").shadow().find("ui5-button").should("have.attr", "icon", "navigation-right-arrow");
-
-			cy.get("#addAction").invoke("on", "click", cy.stub().as("addActionClick"));
-			cy.get("#addAction").realClick();
-			cy.get("@addActionClick").should("have.been.calledOnce");
-			cy.get("@rowActionClick").invoke("getCall", 0).its("args.0.detail.row.id").should("equal", "addRow");
-			cy.get("@rowActionClick").invoke("getCall", 0).its("args.0.detail.action.id").should("equal", "addAction");
-			cy.get("#navigationAction").invoke("on", "click", cy.stub().as("navigationActionClick"));
-			cy.get("#navigationAction").realClick();
-			cy.get("@navigationActionClick").should("have.been.calledOnce");
-			cy.get("@rowActionClick").invoke("getCall", 1).its("args.0.detail.row.id").should("equal", "navigationRow");
-			cy.get("@rowActionClick").invoke("getCall", 1).its("args.0.detail.action.id").should("equal", "navigationAction");
-
-			cy.get("@table").invoke("attr", "row-action-count", "0");
-			cy.get("@headerRow").shadow().find("#actions-cell").should("not.exist");
-			cy.get("@row1").shadow().find("#actions-cell").should("not.exist");
-		});
-
-		it("tests multiple row actions - all visible", () => {
-			mountTable(2, () => <>
-				<TableRow>
-					<TableRowActionNavigation slot="actions" interactive={true}></TableRowActionNavigation>
-					<TableRowAction slot="actions" id="addAction" icon={add} text="Add"></TableRowAction>
-					<TableRowAction slot="actions" id="editAction" icon={edit} text="Edit"></TableRowAction>
-					<TableRowAction slot="actions" icon={deleteIcon} text="Delete"></TableRowAction>
-				</TableRow>
-			</>
-			);
-
-			cy.get("@table").then($table => {
-				$table[0].addEventListener("row-click", cy.stub().as("rowClick"));
-			});
-
-			cy.get("@headerRow").shadow().find("#actions-cell").should("exist");
-			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");
-			cy.get("@overflowButton").should("have.attr", "ui5-button");
-			cy.get("@overflowButton").and("have.attr", "icon", "overflow");
-			cy.get("@actions").eq(1).should("have.attr", "name", "actions-1");
-
-			cy.get("@overflowButton").realClick();
-			cy.wait(200);
-			cy.get("ui5-menu").should("exist");
-			cy.get("[ui5-menu-item]").as("menuItems").should("have.length", 3);
-			cy.get("@menuItems").eq(0).should("have.attr", "text", "Add").and("have.attr", "icon", "add");
-			cy.get("@menuItems").eq(1).should("have.attr", "text", "Edit").and("have.attr", "icon", "edit");
-			cy.get("@menuItems").eq(2).should("have.attr", "text", "Delete").and("have.attr", "icon", "delete");
-
-			cy.get("#addAction").invoke("on", "click", cy.stub().as("addActionClick"));
-			cy.get("@menuItems").eq(0).ui5MenuItemClick();
-			cy.get("@addActionClick").should("have.been.calledOnce");
-			cy.get("@rowActionClick").invoke("getCall", 0).its("args.0.detail.action.id").should("equal", "addAction");
-			cy.get("ui5-menu").invoke("get", 0).its("open").should("be.false");
-
-			cy.get("@overflowButton").realClick();
-			cy.wait(200);
-			cy.get("ui5-menu").should("have.length", 1);
-			cy.get("[ui5-menu-item]").as("menuItems").should("have.length", 3);
-			cy.get("@menuItems").eq(1).ui5MenuItemClick();
-			cy.get("@rowActionClick").invoke("getCall", 1).its("args.0.detail.action.id").should("equal", "editAction");
-
-			cy.get("@table").invoke("attr", "row-action-count", "3");
-			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");
-			cy.get("@actions").eq(2).should("have.attr", "name", "actions-1");
-			cy.get("@overflowButton").realClick();
-			cy.wait(200);
-			cy.get("[ui5-menu-item]").as("menuItems").should("have.length", 2);
-			cy.get("@menuItems").eq(0).should("have.attr", "text", "Edit").and("have.attr", "icon", "edit");
-			cy.get("@menuItems").eq(1).should("have.attr", "text", "Delete").and("have.attr", "icon", "delete");
-			cy.get("@menuItems").eq(0).ui5MenuItemClick();
-			cy.get("@rowActionClick").invoke("getCall", 2).its("args.0.detail.action.id").should("equal", "editAction");
-
-			cy.get("@table").invoke("attr", "row-action-count", "4");
-			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");
-			cy.get("@actions").eq(2).should("have.attr", "name", "actions-4");
-			cy.get("@actions").eq(3).should("have.attr", "name", "actions-1");
-
-			cy.get("@table").invoke("attr", "row-action-count", "5");
-			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];
-				const penultimateAction = $lastActions[1];
-				const distanceBetweenLastActions = lastAction.getBoundingClientRect().left - penultimateAction.getBoundingClientRect().right;
-				return distanceBetweenLastActions > lastAction.clientWidth;
-			}).should("be.true");
-
-			cy.get("@table").invoke("attr", "row-action-count", "1");
-			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", () => {
-			mountTable(3, () => <>
-				<TableRow>
-					<TableRowAction slot="actions" icon={add} text="Add"></TableRowAction>
-					<TableRowAction slot="actions" icon={edit} text="Edit" invisible={true}></TableRowAction>
-					<TableRowAction slot="actions" icon={deleteIcon} text="Delete"></TableRowAction>
-				</TableRow>
-			</>
-			);
-
-			cy.get("@row1").find("ui5-table-row-action").then($actions => {
-				const firstAction = $actions[0];
-				const lastAction = $actions[2];
-				const distanceBetweenActions = lastAction.getBoundingClientRect().left - firstAction.getBoundingClientRect().right;
-				return distanceBetweenActions > lastAction.clientWidth;
-			}).should("be.true");
-		});
-
-		it("tests that avoiding overflow is more important than aligment", () => {
-			mountTable(3, () => <>
-				<TableRow>
-					<TableRowAction slot="actions" icon={add} text="Add" invisible={true}></TableRowAction>
-					<TableRowAction slot="actions" icon={edit} text="Edit"></TableRowAction>
-					<TableRowAction slot="actions" icon={deleteIcon} text="Delete"></TableRowAction>
-					<TableRowAction slot="actions" icon={share} text="Share" invisible={true}></TableRowAction>
-				</TableRow>
-			</>
-			);
-
-			cy.get("@row1").shadow().find("#actions-cell").children().as("actions");
-			cy.get("@actions").should("have.length", 2);
-			cy.get("@actions").eq(0).should("have.attr", "name", "actions-2");
-			cy.get("@actions").eq(1).should("have.attr", "name", "actions-3");
-		});
-
-		it("tests that the aligment of navigation is more important than avoiding overflow", () => {
-			mountTable(3, () => <>
-				<TableRow>
-					<TableRowActionNavigation slot="actions" invisible={true}></TableRowActionNavigation>
-					<TableRowAction slot="actions" icon={add} text="Add"></TableRowAction>
-					<TableRowAction slot="actions" icon={edit} text="Edit"></TableRowAction>
-					<TableRowAction slot="actions" icon={deleteIcon} text="Delete"></TableRowAction>
-				</TableRow>
-			</>
-			);
-
-			cy.get("@row1").shadow().find("#actions-cell").children().as("actions");
-			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");
-			cy.get("@actions").eq(2).should("have.attr", "name", "actions-1");
-
-			cy.get("@overflowButton").realClick();
-			cy.wait(200);
-			cy.get("ui5-menu").should("have.length", 1);
-			cy.get("[ui5-menu-item]").as("menuItems").should("have.length", 2);
-			cy.get("@menuItems").eq(0).should("have.attr", "text", "Edit").and("have.attr", "icon", "edit");
-			cy.get("@menuItems").eq(1).should("have.attr", "text", "Delete").and("have.attr", "icon", "delete");
-			cy.get("@menuItems").eq(0).ui5MenuItemPress("Enter");
-			cy.get("@rowActionClick").invoke("getCall", 0).its("args.0.detail.action.icon").should("equal", "edit");
-		});
-	});
-});

package/cypress/specs/TableSelection.cy.tsx

@@ -1,275 +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 TableSelectionMode from "../../src/types/TableSelectionMode.js";
-import TableSelection from "../../src/TableSelection.js";
-
-function mountTestpage(selectionMode: TableSelectionMode) {
-	cy.mount(
-		<>
-			<Table id="table0" noDataText="No data found">
-				<TableSelection id="selection" slot="features" mode={selectionMode}></TableSelection>
-				<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(TableSelectionMode.None);
-	});
-
-	it("selection should be not active", () => {
-		cy.get("#selection").should("have.attr", "mode", TableSelectionMode.None);
-		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(rowIndex: string) {
-	cy.get("#selection").then(sel => {
-		expect(sel.get(0).getAttribute("selected")).to.equal(rowIndex);
-	});
-}
-
-Object.entries(testConfig).forEach(([mode, testConfigEntry]) => {
-	describe(`Mode - ${mode}`, () => {
-		beforeEach(() => {
-			mountTestpage(testConfigEntry.config.mode as TableSelectionMode);
-		});
-
-		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);
-
-			cy.get("@row4").realClick();
-			cy.get("@row4").realPress("Space");
-			cy.get("#selection").should("have.attr", "mode", testConfigEntry.config.mode);
-			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);
-
-			cy.get("@row4").shadow().find("#selection-component").realClick({ shiftKey: true });
-			checkSelection(testConfigEntry.cases.RANGE_MOUSE.range_mouse_final);
-
-			cy.get("@row0").shadow().find("#selection-component").realClick({ shiftKey: true });
-			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("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");
-	});
-});