From 64e391c7b193a120781134a4547e75bb9d517ffb Mon Sep 17 00:00:00 2001 From: Daniel Phillip Nowak Date: Wed, 22 Jan 2025 11:09:09 +0100 Subject: [PATCH 1/6] chore(ui5-table): migrate TableNavigation wdio tests to cypress Migration of wdio tests (excluding fixed header tests) to the new cypress framework. --- .../main/cypress/specs/TableNavigation.cy.ts | 339 ++++++++++++++++++ 1 file changed, 339 insertions(+) create mode 100644 packages/main/cypress/specs/TableNavigation.cy.ts diff --git a/packages/main/cypress/specs/TableNavigation.cy.ts b/packages/main/cypress/specs/TableNavigation.cy.ts new file mode 100644 index 000000000000..eb04ef866579 --- /dev/null +++ b/packages/main/cypress/specs/TableNavigation.cy.ts @@ -0,0 +1,339 @@ +import { html } from "lit"; + +import "../../src/Table.js"; +import "../../src/TableHeaderRow.js"; +import "../../src/TableHeaderCell.js"; +import "../../src/TableRow.js"; +import "../../src/TableCell.js"; +import "../../src/TableGrowing.js"; + +describe("Table - Keyboard Navigation", () => { + beforeEach(() => { + cy.mount(html` + + + + + Link + Header2 + Header3 + Header4 + + + Row1Cell0 + + + Row1Cell3 + + + Row2Cell0 + + + Row2Cell3 + + + + Here the table structure is broken. There is only one cell in row 5. + + + + + + + + + + + + + + + + + + + + + + + `); + + 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++; + } + }); + }); + }); + + 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); + } + + it("should navigate on rows", () => { + cy.get("#table0").children("ui5-table-row").as("rows"); + cy.get("#table0").children("ui5-table-header-row").as("headerRow"); + + cy.get("@rows").eq(0) + // 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 + .click("left"); + cy.get("@rows").eq(0).should("be.focused") + + .type("{leftarrow}"); + cy.get("@rows").eq(0).should("be.focused") + + .type("{uparrow}"); + cy.get("@headerRow").should("be.focused") + + .type("{uparrow}"); + cy.get("@headerRow").should("be.focused") + + .type("{downarrow}{downarrow}"); + cy.get("@rows").eq(1).should("be.focused") + + .type("{pagedown}"); + cy.get("@rows").eq(21).should("be.focused") + + .type("{pagedown}"); + cy.get("@rows").eq(24).should("be.focused") + + .type("{pagedown}"); + cy.get("#growing").shadow().find("#growing-button").should("be.focused") + + .type("{pageup}"); + cy.get("@rows").eq(5).should("be.focused") + + .type("{pageup}"); + cy.get("@rows").eq(0).should("be.focused") + + .type("{end}"); + cy.get("@rows").eq(24).should("be.focused") + + .type("{end}"); + cy.get("#growing").shadow().find("#growing-button").should("be.focused") + + .type("{home}"); + cy.get("@rows").eq(0).should("be.focused") + + .type("{home}"); + cy.get("@headerRow").should("be.focused"); + }); + + it("should navigate on cells", () => { + cy.get("#table0").children("ui5-table-row").as("rows"); + cy.get("#table0").children("ui5-table-header-row").as("headerRow"); + + cy.get("@rows").eq(0) + .click("left"); + + cy.get("@rows").eq(0).should("be.focused") + + .type("{rightarrow}"); + getCell(0, 0, false).should("be.focused") + + .type("{leftarrow}"); + cy.get("@rows").eq(0).should("be.focused") + + .type("{rightarrow}{rightarrow}"); + getCell(0, 1, false).should("be.focused") + + .type("{home}"); + getCell(0, 0, false).should("be.focused") + + .type("{end}"); + getCell(0, 3, false).should("be.focused") + + .type("{rightarrow}"); + getCell(0, 3, false).should("be.focused") + + .type("{end}"); + cy.get("@rows").eq(0).should("be.focused") + + .type("{end}"); + cy.get("@rows").eq(24).should("be.focused") + + .type("{rightarrow}{rightarrow}{rightarrow}"); + getCell(24, 2, false).should("be.focused") + + .type("{pageup}"); + getCell(4, 0, false).should("be.focused") + + .type("{pageup}"); + getCell(0, 0, false).should("be.focused") + + .type("{pageup}"); + getCell(0, 0, true).should("be.focused") + + .type("{pagedown}"); + getCell(19, 0, false).should("be.focused") + + .type("{pagedown}"); + getCell(24, 0, false).should("be.focused") + + .type("{pagedown}"); + cy.get("#growing").shadow().find("#growing-button").should("be.focused") + + .type("{home}"); + cy.get("@rows").eq(0).should("be.focused") + + .type("{home}"); + cy.get("@headerRow").should("be.focused"); + + cy.get("@headerRow").type("{downarrow}{rightarrow}"); + + // differs from originial test where condition was i < 4 + // changed due to cy.type after last assertion + // TBD just a reminder for reviewers + for (let i = 0; i < 3; i++) { + getCell(i, i, false).should("be.focused") + .type("{downarrow}{rightarrow}"); + } + + getCell(3, 3, false).should("be.focused") + .type("{downarrow}"); + + getCell(4, 0, false).should("be.focused"); + }); + + it("should handle F2/F7/Enter/Tab/Up/Down", () => { + cy.get("#table0").children("ui5-table-row").as("rows"); + cy.get("#table0").children("ui5-table-header-row").as("headerRow"); + cy.get("@headerRow").get("#row0-link").as("row0Link"); + cy.get("@rows").eq(0).get("#row1-input").as("row1Input"); + cy.get("@rows").eq(0).get("#row1-button").as("row1Button"); + cy.get("@rows").eq(1).get("#row2-input").as("row2Input"); + cy.get("@rows").eq(1).get("#row2-button").as("row2Button"); + + cy.get("@rows").eq(0).click("left"); + cy.get("@rows").eq(0).should("be.focused"); + + cy.get("@rows").eq(0).realPress("F2"); + cy.get("@row1Input").eq(0).should("be.focused") + + .realPress("F2"); + getCell(0, 1, false).should("be.focused") + + .realPress("F2"); + cy.get("@row1Input").eq(0).should("be.focused") + + .realPress("F7"); + cy.get("@rows").eq(0).should("be.focused") + + .realPress("F7"); + cy.get("@row1Input").eq(0).should("be.focused") + + .type("{downarrow}"); + cy.get("@row1Input").eq(0).should("be.focused") + + .type("{uparrow}"); + cy.get("@row1Input").eq(0).should("be.focused") + + .realPress(["F2", "{uparrow}"]); + getCell(0, 1, true).should("be.focused") + + .realPress("F2"); + getCell(0, 1, true).should("be.focused") + + .type("{leftarrow}"); + getCell(0, 0, true).should("be.focused") + + .type("{enter}"); + cy.get("@row0Link").should("be.focused") + + .type("{downarrow}"); + getCell(0, 0, false).should("be.focused") + + .realPress("Tab"); + cy.get("#after-table1").should("be.focused") + + .realPress(["Shift", "Tab"]); + cy.get("@rows").eq(0).should("be.focused") + + .type("{downarrow}"); + cy.get("@rows").eq(1).should("be.focused") + + .realPress("F7"); + cy.get("@row2Input").eq(0).should("be.focused") + + .realPress("Tab"); + cy.get("@row2Button").should("be.focused") + + .realPress("F7"); + cy.get("@rows").eq(1).should("be.focused") + + .type("{uparrow}"); + cy.get("@rows").eq(0).should("be.focused") + + .realPress("F7"); + cy.get("@row1Button").eq(0).should("be.focused") + + .type("{uparrow}"); + getCell(0, 2, true).should("be.focused") + + .realPress("F7"); + cy.get("@headerRow").should("be.focused") + + .type("{downarrow}"); + cy.get("@rows").eq(0).should("be.focused") + + .realPress("F7"); + getCell(0, 2, false).should("be.focused") + + .realPress("F7"); + cy.get("@rows").eq(0).should("be.focused") + + .type("{downarrow}"); + cy.get("@rows").eq(1).should("be.focused") + + .realPress("F7"); + getCell(1, 2, false).should("be.focused") + + .realPress(["Shift", "Tab"]); + cy.get("#before-table1").should("be.focused") + + .realPress("Tab"); + cy.get("@rows").eq(1).should("be.focused"); + }); + + it("should should work correctly for interactive rows", () => { + cy.get("#table0").children("ui5-table-row").as("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"); + cy.get("@rows").get("#notinteractive-row").as("anotherRow"); + + cy.get("@row").click("left"); + cy.get("@input").should("have.value", "1"); + + cy.get("@row").type("{enter}"); + cy.get("@input").should("have.value", "2"); + + cy.get("@anotherRow").click("left"); + cy.get("@input").should("have.value", "2"); + + cy.get("@row2Button").click("left"); + cy.get("@input").should("have.value", "2"); + + cy.get("@row2Button").type("{enter}"); + cy.get("@input").should("have.value", "2"); + + cy.get("@row2Button").realPress("F7"); + cy.get("@row").should("be.focused"); + + cy.get("@row").realPress("Space"); + cy.get("@input").should("have.value", "2"); + + cy.get("@row").type("{enter}"); + cy.get("@input").should("have.value", "3"); + }); +}); From e9b9fd9a3232a58475aeb7134f1b59fe0fce9de2 Mon Sep 17 00:00:00 2001 From: Daniel Phillip Nowak Date: Wed, 29 Jan 2025 11:01:35 +0100 Subject: [PATCH 2/6] chore(ui5-table): deleted comment --- packages/main/cypress/specs/TableNavigation.cy.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/main/cypress/specs/TableNavigation.cy.ts b/packages/main/cypress/specs/TableNavigation.cy.ts index eb04ef866579..30c2bc591f5f 100644 --- a/packages/main/cypress/specs/TableNavigation.cy.ts +++ b/packages/main/cypress/specs/TableNavigation.cy.ts @@ -191,9 +191,6 @@ describe("Table - Keyboard Navigation", () => { cy.get("@headerRow").type("{downarrow}{rightarrow}"); - // differs from originial test where condition was i < 4 - // changed due to cy.type after last assertion - // TBD just a reminder for reviewers for (let i = 0; i < 3; i++) { getCell(i, i, false).should("be.focused") .type("{downarrow}{rightarrow}"); From c658054aa4e467f604cafd87b56a704934307eba Mon Sep 17 00:00:00 2001 From: Daniel Phillip Nowak Date: Mon, 10 Feb 2025 13:39:11 +0100 Subject: [PATCH 3/6] fix: changed *.ts to *.tsx file extension and removed lit-html --- ...avigation.cy.ts => TableNavigation.cy.tsx} | 112 +++++++++--------- 1 file changed, 56 insertions(+), 56 deletions(-) rename packages/main/cypress/specs/{TableNavigation.cy.ts => TableNavigation.cy.tsx} (57%) diff --git a/packages/main/cypress/specs/TableNavigation.cy.ts b/packages/main/cypress/specs/TableNavigation.cy.tsx similarity index 57% rename from packages/main/cypress/specs/TableNavigation.cy.ts rename to packages/main/cypress/specs/TableNavigation.cy.tsx index 30c2bc591f5f..71fd7cbca8ab 100644 --- a/packages/main/cypress/specs/TableNavigation.cy.ts +++ b/packages/main/cypress/specs/TableNavigation.cy.tsx @@ -1,62 +1,62 @@ -import { html } from "lit"; - -import "../../src/Table.js"; -import "../../src/TableHeaderRow.js"; -import "../../src/TableHeaderCell.js"; -import "../../src/TableRow.js"; -import "../../src/TableCell.js"; -import "../../src/TableGrowing.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 TableGrowing from "../../src/TableGrowing.js"; describe("Table - Keyboard Navigation", () => { beforeEach(() => { - cy.mount(html` - - - - - Link - Header2 - Header3 - Header4 - - - Row1Cell0 - - - Row1Cell3 - - - Row2Cell0 - - - Row2Cell3 - - - - Here the table structure is broken. There is only one cell in row 5. - - - - - - - - - - - - - - - - - - - - - - - `); + cy.mount( + <> + + + + + Link + Header2 + Header3 + Header4 + + + Row1Cell0 + + + Row1Cell3 + + + Row2Cell0 + + + Row2Cell3 + + + + Here the table structure is broken. There is only one cell in row 5. + + + + + + + + + + + + + + + + + + + + +
+ + + ); cy.document().then(doc => { const table = doc.getElementById("table0"); From 9f2115ff1b15ea467d4520369caa2a9a54cc06c8 Mon Sep 17 00:00:00 2001 From: Daniel Phillip Nowak Date: Thu, 13 Feb 2025 11:30:50 +0100 Subject: [PATCH 4/6] chore: moved reused alias to beforeEach + removed unused alias --- .../main/cypress/specs/TableNavigation.cy.tsx | 24 ++++++------------- 1 file changed, 7 insertions(+), 17 deletions(-) diff --git a/packages/main/cypress/specs/TableNavigation.cy.tsx b/packages/main/cypress/specs/TableNavigation.cy.tsx index 71fd7cbca8ab..a16c84e2232a 100644 --- a/packages/main/cypress/specs/TableNavigation.cy.tsx +++ b/packages/main/cypress/specs/TableNavigation.cy.tsx @@ -67,6 +67,9 @@ describe("Table - Keyboard Navigation", () => { } }); }); + + 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) { @@ -79,9 +82,6 @@ describe("Table - Keyboard Navigation", () => { } it("should navigate on rows", () => { - cy.get("#table0").children("ui5-table-row").as("rows"); - cy.get("#table0").children("ui5-table-header-row").as("headerRow"); - cy.get("@rows").eq(0) // left click is needed to focus the row // otherwise the it would click in the center of the row where an input is @@ -130,9 +130,6 @@ describe("Table - Keyboard Navigation", () => { }); it("should navigate on cells", () => { - cy.get("#table0").children("ui5-table-row").as("rows"); - cy.get("#table0").children("ui5-table-header-row").as("headerRow"); - cy.get("@rows").eq(0) .click("left"); @@ -203,13 +200,8 @@ describe("Table - Keyboard Navigation", () => { }); it("should handle F2/F7/Enter/Tab/Up/Down", () => { - cy.get("#table0").children("ui5-table-row").as("rows"); - cy.get("#table0").children("ui5-table-header-row").as("headerRow"); - cy.get("@headerRow").get("#row0-link").as("row0Link"); cy.get("@rows").eq(0).get("#row1-input").as("row1Input"); - cy.get("@rows").eq(0).get("#row1-button").as("row1Button"); cy.get("@rows").eq(1).get("#row2-input").as("row2Input"); - cy.get("@rows").eq(1).get("#row2-button").as("row2Button"); cy.get("@rows").eq(0).click("left"); cy.get("@rows").eq(0).should("be.focused"); @@ -245,7 +237,7 @@ describe("Table - Keyboard Navigation", () => { getCell(0, 0, true).should("be.focused") .type("{enter}"); - cy.get("@row0Link").should("be.focused") + cy.get("@headerRow").get("#row0-link").should("be.focused") .type("{downarrow}"); getCell(0, 0, false).should("be.focused") @@ -263,7 +255,7 @@ describe("Table - Keyboard Navigation", () => { cy.get("@row2Input").eq(0).should("be.focused") .realPress("Tab"); - cy.get("@row2Button").should("be.focused") + cy.get("@rows").eq(1).get("#row2-button").should("be.focused") .realPress("F7"); cy.get("@rows").eq(1).should("be.focused") @@ -272,7 +264,7 @@ describe("Table - Keyboard Navigation", () => { cy.get("@rows").eq(0).should("be.focused") .realPress("F7"); - cy.get("@row1Button").eq(0).should("be.focused") + cy.get("@rows").eq(0).get("#row1-button").should("be.focused") .type("{uparrow}"); getCell(0, 2, true).should("be.focused") @@ -303,11 +295,9 @@ describe("Table - Keyboard Navigation", () => { }); it("should should work correctly for interactive rows", () => { - cy.get("#table0").children("ui5-table-row").as("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"); - cy.get("@rows").get("#notinteractive-row").as("anotherRow"); cy.get("@row").click("left"); cy.get("@input").should("have.value", "1"); @@ -315,7 +305,7 @@ describe("Table - Keyboard Navigation", () => { cy.get("@row").type("{enter}"); cy.get("@input").should("have.value", "2"); - cy.get("@anotherRow").click("left"); + cy.get("@rows").get("#notinteractive-row").click("left"); cy.get("@input").should("have.value", "2"); cy.get("@row2Button").click("left"); From e8e3c2369f53bc7ca9374f5ed573bd00047a3057 Mon Sep 17 00:00:00 2001 From: Daniel Phillip Nowak Date: Tue, 18 Feb 2025 16:14:45 +0100 Subject: [PATCH 5/6] chore: new function to minimize repeating code lines --- .../main/cypress/specs/TableNavigation.cy.tsx | 338 ++++++------------ 1 file changed, 117 insertions(+), 221 deletions(-) diff --git a/packages/main/cypress/specs/TableNavigation.cy.tsx b/packages/main/cypress/specs/TableNavigation.cy.tsx index a16c84e2232a..ccf6de3c8e66 100644 --- a/packages/main/cypress/specs/TableNavigation.cy.tsx +++ b/packages/main/cypress/specs/TableNavigation.cy.tsx @@ -81,217 +81,118 @@ describe("Table - Keyboard Navigation", () => { .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) { + 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", () => { - cy.get("@rows").eq(0) + 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 - .click("left"); - cy.get("@rows").eq(0).should("be.focused") - - .type("{leftarrow}"); - cy.get("@rows").eq(0).should("be.focused") - - .type("{uparrow}"); - cy.get("@headerRow").should("be.focused") - - .type("{uparrow}"); - cy.get("@headerRow").should("be.focused") - - .type("{downarrow}{downarrow}"); - cy.get("@rows").eq(1).should("be.focused") - - .type("{pagedown}"); - cy.get("@rows").eq(21).should("be.focused") - - .type("{pagedown}"); - cy.get("@rows").eq(24).should("be.focused") - - .type("{pagedown}"); - cy.get("#growing").shadow().find("#growing-button").should("be.focused") - - .type("{pageup}"); - cy.get("@rows").eq(5).should("be.focused") - - .type("{pageup}"); - cy.get("@rows").eq(0).should("be.focused") - - .type("{end}"); - cy.get("@rows").eq(24).should("be.focused") - - .type("{end}"); - cy.get("#growing").shadow().find("#growing-button").should("be.focused") - - .type("{home}"); - cy.get("@rows").eq(0).should("be.focused") - - .type("{home}"); - cy.get("@headerRow").should("be.focused"); + { 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("#growing-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("#growing-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", () => { - cy.get("@rows").eq(0) - .click("left"); - - cy.get("@rows").eq(0).should("be.focused") - - .type("{rightarrow}"); - getCell(0, 0, false).should("be.focused") - - .type("{leftarrow}"); - cy.get("@rows").eq(0).should("be.focused") - - .type("{rightarrow}{rightarrow}"); - getCell(0, 1, false).should("be.focused") - - .type("{home}"); - getCell(0, 0, false).should("be.focused") - - .type("{end}"); - getCell(0, 3, false).should("be.focused") - - .type("{rightarrow}"); - getCell(0, 3, false).should("be.focused") - - .type("{end}"); - cy.get("@rows").eq(0).should("be.focused") - - .type("{end}"); - cy.get("@rows").eq(24).should("be.focused") - - .type("{rightarrow}{rightarrow}{rightarrow}"); - getCell(24, 2, false).should("be.focused") - - .type("{pageup}"); - getCell(4, 0, false).should("be.focused") - - .type("{pageup}"); - getCell(0, 0, false).should("be.focused") - - .type("{pageup}"); - getCell(0, 0, true).should("be.focused") - - .type("{pagedown}"); - getCell(19, 0, false).should("be.focused") - - .type("{pagedown}"); - getCell(24, 0, false).should("be.focused") - - .type("{pagedown}"); - cy.get("#growing").shadow().find("#growing-button").should("be.focused") - - .type("{home}"); - cy.get("@rows").eq(0).should("be.focused") - - .type("{home}"); - cy.get("@headerRow").should("be.focused"); - - cy.get("@headerRow").type("{downarrow}{rightarrow}"); - - for (let i = 0; i < 3; i++) { - getCell(i, i, false).should("be.focused") - .type("{downarrow}{rightarrow}"); - } - - getCell(3, 3, false).should("be.focused") - .type("{downarrow}"); - - getCell(4, 0, false).should("be.focused"); + 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("#growing-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"); - cy.get("@rows").eq(0).click("left"); - cy.get("@rows").eq(0).should("be.focused"); - - cy.get("@rows").eq(0).realPress("F2"); - cy.get("@row1Input").eq(0).should("be.focused") - - .realPress("F2"); - getCell(0, 1, false).should("be.focused") - - .realPress("F2"); - cy.get("@row1Input").eq(0).should("be.focused") - - .realPress("F7"); - cy.get("@rows").eq(0).should("be.focused") - - .realPress("F7"); - cy.get("@row1Input").eq(0).should("be.focused") - - .type("{downarrow}"); - cy.get("@row1Input").eq(0).should("be.focused") - - .type("{uparrow}"); - cy.get("@row1Input").eq(0).should("be.focused") - - .realPress(["F2", "{uparrow}"]); - getCell(0, 1, true).should("be.focused") - - .realPress("F2"); - getCell(0, 1, true).should("be.focused") - - .type("{leftarrow}"); - getCell(0, 0, true).should("be.focused") - - .type("{enter}"); - cy.get("@headerRow").get("#row0-link").should("be.focused") - - .type("{downarrow}"); - getCell(0, 0, false).should("be.focused") - - .realPress("Tab"); - cy.get("#after-table1").should("be.focused") - - .realPress(["Shift", "Tab"]); - cy.get("@rows").eq(0).should("be.focused") - - .type("{downarrow}"); - cy.get("@rows").eq(1).should("be.focused") - - .realPress("F7"); - cy.get("@row2Input").eq(0).should("be.focused") - - .realPress("Tab"); - cy.get("@rows").eq(1).get("#row2-button").should("be.focused") - - .realPress("F7"); - cy.get("@rows").eq(1).should("be.focused") - - .type("{uparrow}"); - cy.get("@rows").eq(0).should("be.focused") - - .realPress("F7"); - cy.get("@rows").eq(0).get("#row1-button").should("be.focused") - - .type("{uparrow}"); - getCell(0, 2, true).should("be.focused") - - .realPress("F7"); - cy.get("@headerRow").should("be.focused") - - .type("{downarrow}"); - cy.get("@rows").eq(0).should("be.focused") - - .realPress("F7"); - getCell(0, 2, false).should("be.focused") - - .realPress("F7"); - cy.get("@rows").eq(0).should("be.focused") - - .type("{downarrow}"); - cy.get("@rows").eq(1).should("be.focused") - - .realPress("F7"); - getCell(1, 2, false).should("be.focused") - - .realPress(["Shift", "Tab"]); - cy.get("#before-table1").should("be.focused") - - .realPress("Tab"); - cy.get("@rows").eq(1).should("be.focused"); + 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", () => { @@ -299,28 +200,23 @@ describe("Table - Keyboard Navigation", () => { cy.get("#table0").get("#before-table1").as("input"); cy.get("@rows").get("#interactive-row").as("row"); - cy.get("@row").click("left"); - cy.get("@input").should("have.value", "1"); - - cy.get("@row").type("{enter}"); - cy.get("@input").should("have.value", "2"); - - cy.get("@rows").get("#notinteractive-row").click("left"); - cy.get("@input").should("have.value", "2"); - - cy.get("@row2Button").click("left"); - cy.get("@input").should("have.value", "2"); - - cy.get("@row2Button").type("{enter}"); - cy.get("@input").should("have.value", "2"); - - cy.get("@row2Button").realPress("F7"); - cy.get("@row").should("be.focused"); - - cy.get("@row").realPress("Space"); - cy.get("@input").should("have.value", "2"); - - cy.get("@row").type("{enter}"); - cy.get("@input").should("have.value", "3"); + 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" } + ]); }); }); From d63286123d3469a76cecf640e1af6becece09476 Mon Sep 17 00:00:00 2001 From: Daniel Phillip Nowak Date: Thu, 20 Feb 2025 09:32:38 +0100 Subject: [PATCH 6/6] chore: info about the timing issue --- packages/main/cypress/specs/TableNavigation.cy.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/main/cypress/specs/TableNavigation.cy.tsx b/packages/main/cypress/specs/TableNavigation.cy.tsx index ccf6de3c8e66..9843061b4269 100644 --- a/packages/main/cypress/specs/TableNavigation.cy.tsx +++ b/packages/main/cypress/specs/TableNavigation.cy.tsx @@ -89,6 +89,7 @@ describe("Table - Keyboard Navigation", () => { } 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);