Skip to content

Commit 9d03b12

Browse files
nowakdanielilhan007
nowakdaniel
authored and
ilhan007
committed
chore(ui5-table): migrate TableNavigation wdio tests to cypress (#10620)
Migration of TableNavigation.spec.js wdio tests to cypress. This change does not include the fixed header tests which were migrated in another PR.
1 parent ab9e03c commit 9d03b12

File tree

1 file changed

+223
-0
lines changed

1 file changed

+223
-0
lines changed

‎packages/main/cypress/specs/TableNavigation.cy.tsx‎

Lines changed: 223 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,223 @@
1+
import Table from "../../src/Table.js";
2+
import TableHeaderRow from "../../src/TableHeaderRow.js";
3+
import TableHeaderCell from "../../src/TableHeaderCell.js";
4+
import TableRow from "../../src/TableRow.js";
5+
import TableCell from "../../src/TableCell.js";
6+
import TableGrowing from "../../src/TableGrowing.js";
7+
8+
describe("Table - Keyboard Navigation", () => {
9+
beforeEach(() => {
10+
cy.mount(
11+
<>
12+
<input id="before-table1" type="Number" value="0"/>
13+
<Table id="table0">
14+
<TableGrowing id="growing" type="Button" slot="features"></TableGrowing>
15+
<TableHeaderRow slot="headerRow">
16+
<TableHeaderCell><a id="row0-link" href="test.html">Link</a></TableHeaderCell>
17+
<TableHeaderCell>Header2</TableHeaderCell>
18+
<TableHeaderCell>Header3</TableHeaderCell>
19+
<TableHeaderCell>Header4</TableHeaderCell>
20+
</TableHeaderRow>
21+
<TableRow>
22+
<TableCell>Row1Cell0</TableCell>
23+
<TableCell><input id="row1-input"/></TableCell>
24+
<TableCell><button id="row1-button">Button 1</button></TableCell>
25+
<TableCell>Row1Cell3</TableCell>
26+
</TableRow>
27+
<TableRow id="interactive-row" interactive>
28+
<TableCell>Row2Cell0</TableCell>
29+
<TableCell><input id="row2-input"/></TableCell>
30+
<TableCell><button id="row2-button">Button 2</button></TableCell>
31+
<TableCell>Row2Cell3</TableCell>
32+
</TableRow>
33+
<TableRow id="notinteractive-row"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
34+
<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
35+
<TableRow> <TableCell> Here the table structure is broken. There is only one cell in row 5. </TableCell> </TableRow>
36+
<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
37+
<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
38+
<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
39+
<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
40+
<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
41+
<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
42+
<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
43+
<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
44+
<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
45+
<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
46+
<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
47+
<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
48+
<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
49+
<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
50+
<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
51+
<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
52+
<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
53+
<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
54+
<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
55+
<TableRow> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
56+
</Table>
57+
<input id="after-table1"/>
58+
</>
59+
);
60+
61+
cy.document().then(doc => {
62+
const table = doc.getElementById("table0");
63+
const input = doc.getElementById("before-table1");
64+
table?.addEventListener("ui5-row-click", () => {
65+
if (input instanceof HTMLInputElement) {
66+
input.valueAsNumber++;
67+
}
68+
});
69+
});
70+
71+
cy.get("#table0").children("ui5-table-row").as("rows");
72+
cy.get("#table0").children("ui5-table-header-row").as("headerRow");
73+
});
74+
75+
function getCell(row: number, cell: number, headerRow: boolean) {
76+
if (headerRow) {
77+
return cy.get("@headerRow").children("ui5-table-header-cell").eq(cell);
78+
}
79+
return cy.get("@rows").eq(row)
80+
.children("ui5-table-cell")
81+
.eq(cell);
82+
}
83+
84+
function performActions(actions: { element: Cypress.Chainable, click?: string, condition?: string, conditionValue?:string, type?: string, press?: string | string[] }[]) {
85+
actions.forEach(action => {
86+
if (action.click) {
87+
// @ts-ignore
88+
action.element.click(action.click);
89+
}
90+
if (action.condition) {
91+
if (action.conditionValue) {
92+
// timing issue - without wait the check is failing
93+
action.element.wait(0).should(action.condition, action.conditionValue);
94+
} else {
95+
action.element.wait(0).should(action.condition);
96+
}
97+
}
98+
if (action.type) {
99+
action.element.type(action.type);
100+
}
101+
if (action.press) {
102+
// @ts-ignore
103+
action.element.realPress(action.press);
104+
}
105+
});
106+
}
107+
108+
it("should navigate on rows", () => {
109+
performActions([
110+
// left click is needed to focus the row
111+
// otherwise the it would click in the center of the row where an input is
112+
// resulting in a focus on the input instead of the row
113+
{ element: cy.get("@rows").eq(0), click: "left" },
114+
{ element: cy.get("@rows").eq(0), type: "{leftarrow}", condition: "be.focused" },
115+
{ element: cy.get("@rows").eq(0), type: "{uparrow}", condition: "be.focused" },
116+
{ element: cy.get("@headerRow"), type: "{uparrow}", condition: "be.focused" },
117+
{ element: cy.get("@headerRow"), type: "{downarrow}{downarrow}", condition: "be.focused" },
118+
{ element: cy.get("@rows").eq(1), type: "{pagedown}", condition: "be.focused" },
119+
{ element: cy.get("@rows").eq(21), type: "{pagedown}", condition: "be.focused" },
120+
{ element: cy.get("@rows").eq(24), type: "{pagedown}", condition: "be.focused" },
121+
{ element: cy.get("#growing").shadow().find("#growing-button"), type: "{pageup}", condition: "be.focused" },
122+
{ element: cy.get("@rows").eq(5), type: "{pageup}", condition: "be.focused" },
123+
{ element: cy.get("@rows").eq(0), type: "{end}", condition: "be.focused" },
124+
{ element: cy.get("@rows").eq(24), type: "{end}", condition: "be.focused" },
125+
{ element: cy.get("#growing").shadow().find("#growing-button"), type: "{home}", condition: "be.focused" },
126+
{ element: cy.get("@rows").eq(0), type: "{home}", condition: "be.focused" },
127+
{ element: cy.get("@headerRow"), condition: "be.focused" }
128+
]);
129+
});
130+
131+
it("should navigate on cells", () => {
132+
performActions([
133+
{ element: cy.get("@rows").eq(0), click: "left" },
134+
{ element: cy.get("@rows").eq(0), type: "{rightarrow}", condition: "be.focused" },
135+
{ element: getCell(0, 0, false), type: "{leftarrow}", condition: "be.focused" },
136+
{ element: cy.get("@rows").eq(0), type: "{rightarrow}{rightarrow}", condition: "be.focused" },
137+
{ element: getCell(0, 1, false), type: "{home}", condition: "be.focused" },
138+
{ element: getCell(0, 0, false), type: "{end}", condition: "be.focused" },
139+
{ element: getCell(0, 3, false), type: "{rightarrow}", condition: "be.focused" },
140+
{ element: getCell(0, 3, false), type: "{end}", condition: "be.focused" },
141+
{ element: cy.get("@rows").eq(0), type: "{end}", condition: "be.focused" },
142+
{ element: cy.get("@rows").eq(24), type: "{rightarrow}{rightarrow}{rightarrow}", condition: "be.focused" },
143+
{ element: getCell(24, 2, false), type: "{pageup}", condition: "be.focused" },
144+
{ element: getCell(4, 0, false), type: "{pageup}", condition: "be.focused" },
145+
{ element: getCell(0, 0, false), type: "{pageup}", condition: "be.focused" },
146+
{ element: getCell(0, 0, true), type: "{pagedown}", condition: "be.focused" },
147+
{ element: getCell(19, 0, false), type: "{pagedown}", condition: "be.focused" },
148+
{ element: getCell(24, 0, false), type: "{pagedown}", condition: "be.focused" },
149+
{ element: cy.get("#growing").shadow().find("#growing-button"), type: "{home}", condition: "be.focused" },
150+
{ element: cy.get("@rows").eq(0), type: "{home}", condition: "be.focused" },
151+
{ element: cy.get("@headerRow"), type: "{downarrow}{rightarrow}", condition: "be.focused" },
152+
{ element: getCell(0, 0, false), type: "{downarrow}{rightarrow}", condition: "be.focused" },
153+
{ element: getCell(1, 1, false), type: "{downarrow}{rightarrow}", condition: "be.focused" },
154+
{ element: getCell(2, 2, false), type: "{downarrow}{rightarrow}", condition: "be.focused" },
155+
{ element: getCell(3, 3, false), type: "{downarrow}", condition: "be.focused" },
156+
{ element: getCell(4, 0, false), condition: "be.focused" }
157+
]);
158+
});
159+
160+
it("should handle F2/F7/Enter/Tab/Up/Down", () => {
161+
cy.get("@rows").eq(0).get("#row1-input").as("row1Input");
162+
cy.get("@rows").eq(1).get("#row2-input").as("row2Input");
163+
164+
performActions([
165+
{ element: cy.get("@rows").eq(0), click: "left" },
166+
{ element: cy.get("@rows").eq(0), press: "F2", condition: "be.focused" },
167+
{ element: cy.get("@row1Input"), press: "F2", condition: "be.focused" },
168+
{ element: getCell(0, 1, false), press: "F2", condition: "be.focused" },
169+
{ element: cy.get("@row1Input"), press: "F7", condition: "be.focused" },
170+
{ element: cy.get("@rows").eq(0), press: "F7", condition: "be.focused" },
171+
{ element: cy.get("@row1Input").eq(0), type: "{downarrow}", condition: "be.focused" },
172+
{ element: cy.get("@row1Input").eq(0), type: "{uparrow}", condition: "be.focused" },
173+
{ element: cy.get("@row1Input").eq(0), press: ["F2", "{uparrow}"], condition: "be.focused" },
174+
{ element: getCell(0, 1, true), press: "F2", condition: "be.focused" },
175+
{ element: getCell(0, 1, true), type: "{leftarrow}", condition: "be.focused" },
176+
{ element: getCell(0, 0, true), type: "{enter}", condition: "be.focused" },
177+
{ element: cy.get("@headerRow").get("#row0-link"), type: "{downarrow}", condition: "be.focused" },
178+
{ element: getCell(0, 0, false), press: "Tab", condition: "be.focused" },
179+
{ element: cy.get("#after-table1"), press: ["Shift", "Tab"], condition: "be.focused" },
180+
{ element: cy.get("@rows").eq(0), type: "{downarrow}", condition: "be.focused" },
181+
{ element: cy.get("@rows").eq(1), press: "F7", condition: "be.focused" },
182+
{ element: cy.get("@row2Input").eq(0), press: "Tab", condition: "be.focused" },
183+
{ element: cy.get("@rows").eq(1).get("#row2-button"), press: "F7", condition: "be.focused" },
184+
{ element: cy.get("@rows").eq(1), type: "{uparrow}", condition: "be.focused" },
185+
{ element: cy.get("@rows").eq(0), press: "F7", condition: "be.focused" },
186+
{ element: cy.get("@rows").eq(0).get("#row1-button"), type: "{uparrow}", condition: "be.focused" },
187+
{ element: getCell(0, 2, true), press: "F7", condition: "be.focused" },
188+
{ element: cy.get("@headerRow"), type: "{downarrow}", condition: "be.focused" },
189+
{ element: cy.get("@rows").eq(0), press: "F7", condition: "be.focused" },
190+
{ element: getCell(0, 2, false), press: "F7", condition: "be.focused" },
191+
{ element: cy.get("@rows").eq(0), type: "{downarrow}", condition: "be.focused" },
192+
{ element: cy.get("@rows").eq(1), press: "F7", condition: "be.focused" },
193+
{ element: getCell(1, 2, false), press: ["Shift", "Tab"], condition: "be.focused" },
194+
{ element: cy.get("#before-table1"), press: "Tab", condition: "be.focused" },
195+
{ element: cy.get("@rows").eq(1), press: "Tab", condition: "be.focused" }
196+
]);
197+
});
198+
199+
it("should should work correctly for interactive rows", () => {
200+
cy.get("@rows").eq(1).get("#row2-button").as("row2Button");
201+
cy.get("#table0").get("#before-table1").as("input");
202+
cy.get("@rows").get("#interactive-row").as("row");
203+
204+
performActions([
205+
{ element: cy.get("@row"), click: "left" },
206+
{ element: cy.get("@input"), condition: "have.value", conditionValue: "1" },
207+
{ element: cy.get("@row"), type: "{enter}" },
208+
{ element: cy.get("@input"), condition: "have.value", conditionValue: "2" },
209+
{ element: cy.get("@rows").get("#notinteractive-row"), click: "left" },
210+
{ element: cy.get("@input"), condition: "have.value", conditionValue: "2" },
211+
{ element: cy.get("@row2Button"), click: "left" },
212+
{ element: cy.get("@input"), condition: "have.value", conditionValue: "2" },
213+
{ element: cy.get("@row2Button"), type: "{enter}" },
214+
{ element: cy.get("@input"), condition: "have.value", conditionValue: "2" },
215+
{ element: cy.get("@row2Button"), press: "F7" },
216+
{ element: cy.get("@row"), condition: "be.focused" },
217+
{ element: cy.get("@row"), press: "Space" },
218+
{ element: cy.get("@input"), condition: "have.value", conditionValue: "2" },
219+
{ element: cy.get("@row"), type: "{enter}" },
220+
{ element: cy.get("@input"), condition: "have.value", conditionValue: "3" }
221+
]);
222+
});
223+
});

0 commit comments

Comments
 (0)