@ui5/webcomponents 0.0.0-4e88b8243 → 0.0.0-50f1454ef

package/cypress/specs/{TableDragAndDrop.cy.ts → TableDragAndDrop.cy.tsx}

@@ -1,10 +1,10 @@
-import { html } from "lit";
-
-import "../../src/Table.js";
-import "../../src/TableHeaderRow.js";
-import "../../src/TableCell.js";
-import "../../src/TableRow.js";
 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) {
@@ -71,24 +71,27 @@ describe("API & Events", () => {
 
 	beforeEach(() => {
 		cy.viewport(1920, 1080);
-		cy.mount(html`
-			<ui5-table id="table">
-				<ui5-table-header-row slot="headerRow">
-					<ui5-table-header-cell><span>ColumnA</span></ui5-table-header-cell>
-					<ui5-table-header-cell><span>ColumnB</span></ui5-table-header-cell>
-				</ui5-table-header-row>
-				${Array.from({ length: 10 }).map((_, index) => html`
-					<ui5-table-row row-key="${index}" movable>
-						<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
-						<ui5-table-cell><ui5-label>Cell B</ui5-label></ui5-table-cell>
-					</ui5-table-row>
-				`)}
-				<ui5-table-row row-key="10">
-						<ui5-table-cell><ui5-label>Cell A</ui5-label></ui5-table-cell>
-						<ui5-table-cell><ui5-label>Cell B</ui5-label></ui5-table-cell>
-				</ui5-table-row>
-			</ui5-table>
-		`);
+		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", () => {

package/cypress/specs/TableGrowing.cy.tsx

@@ -0,0 +1,336 @@
+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

@@ -0,0 +1,48 @@
+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");
+	});
+});

package/cypress/specs/TableNavigation.cy.tsx

@@ -0,0 +1,223 @@
+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";
+
+describe("Table - Keyboard Navigation", () => {
+	beforeEach(() => {
+		cy.mount(
+			<>
+				<input id="before-table1" type="Number" value="0"/>
+				<Table id="table0">
+					<TableGrowing id="growing" type="Button" slot="features"></TableGrowing>
+					<TableHeaderRow slot="headerRow">
+						<TableHeaderCell><a id="row0-link" href="test.html">Link</a></TableHeaderCell>
+						<TableHeaderCell>Header2</TableHeaderCell>
+						<TableHeaderCell>Header3</TableHeaderCell>
+						<TableHeaderCell>Header4</TableHeaderCell>
+					</TableHeaderRow>
+					<TableRow>
+						<TableCell>Row1Cell0</TableCell>
+						<TableCell><input id="row1-input"/></TableCell>
+						<TableCell><button id="row1-button">Button 1</button></TableCell>
+						<TableCell>Row1Cell3</TableCell>
+					</TableRow>
+					<TableRow id="interactive-row" interactive>
+						<TableCell>Row2Cell0</TableCell>
+						<TableCell><input id="row2-input"/></TableCell>
+						<TableCell><button id="row2-button">Button 2</button></TableCell>
+						<TableCell>Row2Cell3</TableCell>
+					</TableRow>
+					<TableRow id="notinteractive-row"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell> Here the table structure is broken. There is only one cell in row 5. </TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+					<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
+				</Table>
+				<input id="after-table1"/>
+			</>
+		);
+
+		cy.document().then(doc => {
+			const table = doc.getElementById("table0");
+			const input = doc.getElementById("before-table1");
+			table?.addEventListener("ui5-row-click", () => {
+				if (input instanceof HTMLInputElement) {
+					input.valueAsNumber++;
+				}
+			});
+		});
+
+		cy.get("#table0").children("ui5-table-row").as("rows");
+		cy.get("#table0").children("ui5-table-header-row").as("headerRow");
+	});
+
+	function getCell(row: number, cell: number, headerRow: boolean) {
+		if (headerRow) {
+			return cy.get("@headerRow").children("ui5-table-header-cell").eq(cell);
+		}
+		return cy.get("@rows").eq(row)
+			.children("ui5-table-cell")
+			.eq(cell);
+	}
+
+	function performActions(actions: { element: Cypress.Chainable, click?: string, condition?: string, conditionValue?:string, type?: string, press?: string | string[] }[]) {
+		actions.forEach(action => {
+			if (action.click) {
+				// @ts-ignore
+				action.element.click(action.click);
+			}
+			if (action.condition) {
+				if (action.conditionValue) {
+					// timing issue - without wait the check is failing
+					action.element.wait(0).should(action.condition, action.conditionValue);
+				} else {
+					action.element.wait(0).should(action.condition);
+				}
+			}
+			if (action.type) {
+				action.element.type(action.type);
+			}
+			if (action.press) {
+				// @ts-ignore
+				action.element.realPress(action.press);
+			}
+		});
+	}
+
+	it("should navigate on rows", () => {
+		performActions([
+			// left click is needed to focus the row
+			// otherwise the it would click in the center of the row where an input is
+			// resulting in a focus on the input instead of the row
+			{ element: cy.get("@rows").eq(0), click: "left" },
+			{ element: cy.get("@rows").eq(0), type: "{leftarrow}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(0), type: "{uparrow}", condition: "be.focused" },
+			{ element: cy.get("@headerRow"), type: "{uparrow}", condition: "be.focused" },
+			{ element: cy.get("@headerRow"), type: "{downarrow}{downarrow}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(1), type: "{pagedown}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(21), type: "{pagedown}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(24), type: "{pagedown}", condition: "be.focused" },
+			{ element: cy.get("#growing").shadow().find("#button"), type: "{pageup}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(5), type: "{pageup}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(0), type: "{end}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(24), type: "{end}", condition: "be.focused" },
+			{ element: cy.get("#growing").shadow().find("#button"), type: "{home}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(0), type: "{home}", condition: "be.focused" },
+			{ element: cy.get("@headerRow"), condition: "be.focused" }
+		]);
+	});
+
+	it("should navigate on cells", () => {
+		performActions([
+			{ element: cy.get("@rows").eq(0), click: "left" },
+			{ element: cy.get("@rows").eq(0), type: "{rightarrow}", condition: "be.focused" },
+			{ element: getCell(0, 0, false), type: "{leftarrow}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(0), type: "{rightarrow}{rightarrow}", condition: "be.focused" },
+			{ element: getCell(0, 1, false), type: "{home}", condition: "be.focused" },
+			{ element: getCell(0, 0, false), type: "{end}", condition: "be.focused" },
+			{ element: getCell(0, 3, false), type: "{rightarrow}", condition: "be.focused" },
+			{ element: getCell(0, 3, false), type: "{end}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(0), type: "{end}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(24), type: "{rightarrow}{rightarrow}{rightarrow}", condition: "be.focused" },
+			{ element: getCell(24, 2, false), type: "{pageup}", condition: "be.focused" },
+			{ element: getCell(4, 0, false), type: "{pageup}", condition: "be.focused" },
+			{ element: getCell(0, 0, false), type: "{pageup}", condition: "be.focused" },
+			{ element: getCell(0, 0, true), type: "{pagedown}", condition: "be.focused" },
+			{ element: getCell(19, 0, false), type: "{pagedown}", condition: "be.focused" },
+			{ element: getCell(24, 0, false), type: "{pagedown}", condition: "be.focused" },
+			{ element: cy.get("#growing").shadow().find("#button"), type: "{home}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(0), type: "{home}", condition: "be.focused" },
+			{ element: cy.get("@headerRow"), type: "{downarrow}{rightarrow}", condition: "be.focused" },
+			{ element: getCell(0, 0, false), type: "{downarrow}{rightarrow}", condition: "be.focused" },
+			{ element: getCell(1, 1, false), type: "{downarrow}{rightarrow}", condition: "be.focused" },
+			{ element: getCell(2, 2, false), type: "{downarrow}{rightarrow}", condition: "be.focused" },
+			{ element: getCell(3, 3, false), type: "{downarrow}", condition: "be.focused" },
+			{ element: getCell(4, 0, false), condition: "be.focused" }
+		]);
+	});
+
+	it("should handle F2/F7/Enter/Tab/Up/Down", () => {
+		cy.get("@rows").eq(0).get("#row1-input").as("row1Input");
+		cy.get("@rows").eq(1).get("#row2-input").as("row2Input");
+
+		performActions([
+			{ element: cy.get("@rows").eq(0), click: "left" },
+			{ element: cy.get("@rows").eq(0), press: "F2", condition: "be.focused" },
+			{ element: cy.get("@row1Input"), press: "F2", condition: "be.focused" },
+			{ element: getCell(0, 1, false), press: "F2", condition: "be.focused" },
+			{ element: cy.get("@row1Input"), press: "F7", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(0), press: "F7", condition: "be.focused" },
+			{ element: cy.get("@row1Input").eq(0), type: "{downarrow}", condition: "be.focused" },
+			{ element: cy.get("@row1Input").eq(0), type: "{uparrow}", condition: "be.focused" },
+			{ element: cy.get("@row1Input").eq(0), press: ["F2", "{uparrow}"], condition: "be.focused" },
+			{ element: getCell(0, 1, true), press: "F2", condition: "be.focused" },
+			{ element: getCell(0, 1, true), type: "{leftarrow}", condition: "be.focused" },
+			{ element: getCell(0, 0, true), type: "{enter}", condition: "be.focused" },
+			{ element: cy.get("@headerRow").get("#row0-link"), type: "{downarrow}", condition: "be.focused" },
+			{ element: getCell(0, 0, false), press: "Tab", condition: "be.focused" },
+			{ element: cy.get("#after-table1"), press: ["Shift", "Tab"], condition: "be.focused" },
+			{ element: cy.get("@rows").eq(0), type: "{downarrow}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(1), press: "F7", condition: "be.focused" },
+			{ element: cy.get("@row2Input").eq(0), press: "Tab", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(1).get("#row2-button"), press: "F7", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(1), type: "{uparrow}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(0), press: "F7", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(0).get("#row1-button"), type: "{uparrow}", condition: "be.focused" },
+			{ element: getCell(0, 2, true), press: "F7", condition: "be.focused" },
+			{ element: cy.get("@headerRow"), type: "{downarrow}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(0), press: "F7", condition: "be.focused" },
+			{ element: getCell(0, 2, false), press: "F7", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(0), type: "{downarrow}", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(1), press: "F7", condition: "be.focused" },
+			{ element: getCell(1, 2, false), press: ["Shift", "Tab"], condition: "be.focused" },
+			{ element: cy.get("#before-table1"), press: "Tab", condition: "be.focused" },
+			{ element: cy.get("@rows").eq(1), press: "Tab", condition: "be.focused" }
+		]);
+	});
+
+	it("should should work correctly for interactive rows", () => {
+		cy.get("@rows").eq(1).get("#row2-button").as("row2Button");
+		cy.get("#table0").get("#before-table1").as("input");
+		cy.get("@rows").get("#interactive-row").as("row");
+
+		performActions([
+			{ element: cy.get("@row"), click: "left" },
+			{ element: cy.get("@input"), condition: "have.value", conditionValue: "1" },
+			{ element: cy.get("@row"), type: "{enter}" },
+			{ element: cy.get("@input"), condition: "have.value", conditionValue: "2" },
+			{ element: cy.get("@rows").get("#notinteractive-row"), click: "left" },
+			{ element: cy.get("@input"), condition: "have.value", conditionValue: "2" },
+			{ element: cy.get("@row2Button"), click: "left" },
+			{ element: cy.get("@input"), condition: "have.value", conditionValue: "2" },
+			{ element: cy.get("@row2Button"), type: "{enter}" },
+			{ element: cy.get("@input"), condition: "have.value", conditionValue: "2" },
+			{ element: cy.get("@row2Button"), press: "F7" },
+			{ element: cy.get("@row"), condition: "be.focused" },
+			{ element: cy.get("@row"), press: "Space" },
+			{ element: cy.get("@input"), condition: "have.value", conditionValue: "2" },
+			{ element: cy.get("@row"), type: "{enter}" },
+			{ element: cy.get("@input"), condition: "have.value", conditionValue: "3" }
+		]);
+	});
+});