Skip to content

Commit e8de3ae

Browse files
nnaydenowilhan007
nnaydenow
authored and
ilhan007
committed
chore: restore table navigation tests (#10828)
The `TableNavigation.spec.js` file was not restored correctly in [PR #10663](#10663) The `.click` command simulates a click at the center of the element. In certain resolutions, this causes the input field used in the test to receive focus, leading to flaky tests.
1 parent 1f063b6 commit e8de3ae

File tree

1 file changed

+366
-0
lines changed

1 file changed

+366
-0
lines changed

‎packages/main/test/specs/TableNavigation.spec.js‎

Lines changed: 366 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,366 @@
1+
import { assert } from "chai";
2+
3+
describe("Table - Keyboard Navigation", async () => {
4+
before(async () => {
5+
await browser.setWindowSize(1920, 1200);
6+
await browser.url("test/pages/TableNavigation.html");
7+
8+
});
9+
10+
it("should navigate on rows", async () => {
11+
const table = await browser.$("#table0");
12+
const rows = await table.$$("ui5-table-header-row,ui5-table-row");
13+
const growing = await browser.$("#growing");
14+
const rowsLength = rows.length;
15+
16+
await rows[1].click();
17+
assert.ok(await rows[1].isFocused(), `Click: Row 1 is focused.`);
18+
19+
await browser.keys("ArrowLeft");
20+
assert.ok(await rows[1].isFocused(), `ArrowLeft: Row 1 is still focused.`);
21+
22+
await browser.keys("ArrowUp");
23+
assert.ok(await rows[0].isFocused(), `ArrowUp: Row 0 is focused.`);
24+
25+
await browser.keys("ArrowUp");
26+
assert.ok(await rows[0].isFocused(), `ArrowUp: Row 0 is still focused.`);
27+
28+
await browser.keys("ArrowDown");
29+
await browser.keys("ArrowDown");
30+
assert.ok(await rows[2].isFocused(), `ArrowDown: Row 2 is focused.`);
31+
32+
await browser.keys("PageDown");
33+
assert.ok(await rows[22].isFocused(), `PageDown: Row 22 is focused.`);
34+
35+
await browser.keys("PageDown");
36+
assert.ok(await rows[25].isFocused(), `PageDown: Row 25 is focused.`);
37+
38+
await browser.keys("PageDown");
39+
assert.ok(await growing.isFocused(), `PageDown: Growing button is focused.`);
40+
41+
await browser.keys("PageUp");
42+
assert.ok(await rows[6].isFocused(), `PageUp: Row 6 is focused.`);
43+
44+
await browser.keys("PageUp");
45+
assert.ok(await rows[1].isFocused(), `PageUp: Row 1 is focused.`);
46+
47+
await browser.keys("PageUp");
48+
assert.ok(await rows[0].isFocused(), `PageUp: Row 0 is focused.`);
49+
50+
await browser.keys("End");
51+
assert.ok(await rows[25].isFocused(), `End: Row 25 is focused.`);
52+
53+
await browser.keys("End");
54+
assert.ok(await growing.isFocused(), `End: Growing button is focused.`);
55+
56+
await browser.keys("Home");
57+
assert.ok(await rows[1].isFocused(), `Home: Row 1 is focused.`);
58+
59+
await browser.keys("Home");
60+
assert.ok(await rows[0].isFocused(), `Home: Row 0 is focused.`);
61+
});
62+
63+
it("should navigate on cells", async () => {
64+
const table = await browser.$("#table0");
65+
const rows = await table.$$("ui5-table-header-row,ui5-table-row");
66+
const growing = await browser.$("#growing");
67+
68+
const rowCells = [];
69+
for (const row of rows) {
70+
const cells = await row.$$("ui5-table-header-cell,ui5-table-cell");
71+
rowCells.push(cells);
72+
}
73+
74+
const getCell = (rowIndex, cellIndex) => {
75+
return rowCells[rowIndex][cellIndex];
76+
}
77+
78+
await rows[1].click();
79+
assert.ok(await rows[1].isFocused(), `Click: Row 1 is focused.`);
80+
81+
await browser.keys("ArrowRight");
82+
assert.ok(await getCell(1, 0).isFocused(), `ArrowRight: Row1 Cell0 is focused.`);
83+
84+
await browser.keys("ArrowLeft");
85+
assert.ok(await rows[1].isFocused(), `ArrowLeft: Row1 is focused.`);
86+
87+
await browser.keys("ArrowRight");
88+
await browser.keys("ArrowRight");
89+
assert.ok(await getCell(1, 1).isFocused(), `ArrowRight: Row1 Cell1 is focused.`);
90+
91+
await browser.keys("Home");
92+
assert.ok(await getCell(1, 0).isFocused(), `Home: Row1 Cell0 is focused.`);
93+
94+
await browser.keys("End");
95+
assert.ok(await getCell(1, 3).isFocused(), `End: Row1 Cell3 is focused.`);
96+
97+
await browser.keys("ArrowRight");
98+
assert.ok(await getCell(1, 3).isFocused(), `ArrowRight: Row1 Cell3 is still focused.`);
99+
100+
await browser.keys("End");
101+
assert.ok(await rows[1].isFocused(), `End: Row1 is focused.`);
102+
103+
await browser.keys("End");
104+
assert.ok(await rows[25].isFocused(), `End: Row25 is focused.`);
105+
106+
await browser.keys("ArrowRight");
107+
await browser.keys("ArrowRight");
108+
await browser.keys("ArrowRight");
109+
assert.ok(await getCell(25, 2).isFocused(), `ArrowRight: Row25 Cell2 is focused.`);
110+
111+
await browser.keys("PageUp");
112+
assert.ok(await getCell(5, 0).isFocused(), `PageUp: Row5 Cell0 is focused.`);
113+
114+
await browser.keys("PageUp");
115+
assert.ok(await getCell(1, 0).isFocused(), `PageUp: Row1 Cell0 is focused.`);
116+
117+
await browser.keys("PageUp");
118+
assert.ok(await getCell(0, 0).isFocused(), `PageUp: Row0 Cell0 is focused.`);
119+
120+
await browser.keys("PageDown");
121+
assert.ok(await getCell(20, 0).isFocused(), `PageDown: Row20 Cell0 is focused.`);
122+
123+
await browser.keys("PageDown");
124+
assert.ok(await getCell(25, 0).isFocused(), `PageDown: Row25 Cell0 is focused.`);
125+
126+
await browser.keys("PageDown");
127+
assert.ok(await growing.isFocused(), `PageDown: Growing button is focused.`);
128+
129+
await browser.keys("Home");
130+
assert.ok(await rows[1].isFocused(), `Home: Row1 is focused.`);
131+
132+
await browser.keys("Home");
133+
assert.ok(await rows[0].isFocused(), `Home: Row0 is focused.`);
134+
135+
for (let i = 0; i < 4; i++) {
136+
await browser.keys("ArrowDown");
137+
await browser.keys("ArrowRight");
138+
assert.ok(await getCell(i + 1, i).isFocused(), `ArrowDown-ArrowRight: Row${i + 1} Cell${i} is focused.`);
139+
}
140+
141+
assert.ok(await getCell(4, 3).isFocused(), `Row4 Cell3 was focused.`);
142+
143+
await browser.keys("ArrowDown");
144+
assert.ok(await getCell(5, 0).isFocused(), `ArrowDown: Row5 Cell0 is focused.`);
145+
});
146+
147+
it("should handle F2/F7/Enter/Tab/Up/Down", async () => {
148+
const table = await browser.$("#table0");
149+
const rows = await table.$$("ui5-table-header-row,ui5-table-row");
150+
const row0Link = await table.$("#row0-link");
151+
const row1Input = await table.$("#row1-input");
152+
const row1Button = await table.$("#row1-button");
153+
const row2Input = await table.$("#row2-input");
154+
const row2Button = await table.$("#row2-button");
155+
const beforeTable = await browser.$("#before-table1");
156+
const afterTable = await browser.$("#after-table1");
157+
158+
const rowCells = [];
159+
for (const row of rows) {
160+
const cells = await row.$$("ui5-table-header-cell,ui5-table-cell");
161+
rowCells.push(cells);
162+
}
163+
164+
const getCell = (rowIndex, cellIndex) => {
165+
return rowCells[rowIndex][cellIndex];
166+
}
167+
168+
await rows[1].click();
169+
assert.ok(await rows[1].isFocused(), `Click: Row 1 is focused.`);
170+
171+
await browser.keys("F2");
172+
assert.ok(await row1Input.isFocused(), `F2: Row1 Input is focused.`);
173+
174+
await browser.keys("F2");
175+
assert.ok(await getCell(1, 1).isFocused(), `F2: Row1 Cell1 is focused.`);
176+
177+
await browser.keys("F2");
178+
assert.ok(await row1Input.isFocused(), `F2: Row1 Input is focused again.`);
179+
180+
await browser.keys("F7");
181+
assert.ok(await rows[1].isFocused(), `F7: Row1 is focused.`);
182+
183+
await browser.keys("F7");
184+
assert.ok(await row1Input.isFocused(), `F7: Row1 Input is focused.`);
185+
186+
await browser.keys("ArrowDown");
187+
assert.ok(await row1Input.isFocused(), `ArrowDown: Row1 Input is still focused.`);
188+
189+
await browser.keys("ArrowUp");
190+
assert.ok(await row1Input.isFocused(), `ArrowUp: Row1 Input is still focused.`);
191+
192+
await browser.keys("F2");
193+
await browser.keys("ArrowUp");
194+
assert.ok(await getCell(0, 1).isFocused(), `F2-ArrowUp: Row0 Cell1 is focused.`);
195+
196+
await browser.keys("F2");
197+
assert.ok(await getCell(0, 1).isFocused(), `F2: Row0 Cell1 is still focused.`);
198+
199+
await browser.keys("ArrowLeft");
200+
assert.ok(await getCell(0, 0).isFocused(), `ArrowLeft: Row0 Cell0 is focused.`);
201+
202+
await browser.keys("Return");
203+
assert.ok(await row0Link.isFocused(), `Enter: Row0 Link is focused.`);
204+
205+
await browser.keys("ArrowDown");
206+
assert.ok(await getCell(1, 0).isFocused(), `ArrowDown: Row1 Cell0 is focused.`);
207+
208+
await browser.keys("Tab");
209+
assert.ok(await afterTable.isFocused(), `Tab: After table is focused.`);
210+
211+
await browser.keys(["Shift", "Tab"]);
212+
assert.ok(await rows[1].isFocused(), `ShiftTab: Row1 is focused.`);
213+
214+
await browser.keys("ArrowDown");
215+
assert.ok(await rows[2].isFocused(), `ArrowDown: Row2 is focused.`);
216+
217+
await browser.keys("F7");
218+
assert.ok(await row2Input.isFocused(), `F7: Row2 Input is focused.`);
219+
220+
await browser.keys("Tab");
221+
assert.ok(await row2Button.isFocused(), `Tab: Row2 Button is focused.`);
222+
223+
await browser.keys("F7");
224+
assert.ok(await rows[2].isFocused(), `F7: Row2 is focused.`);
225+
226+
await browser.keys("ArrowUp");
227+
assert.ok(await rows[1].isFocused(), `ArrowUp: Row1 is focused.`);
228+
229+
await browser.keys("F7");
230+
assert.ok(await row1Button.isFocused(), `F7: Row1 Button is focused.`);
231+
232+
await browser.keys("ArrowUp");
233+
assert.ok(await getCell(0, 2).isFocused(), `ArrowUp: Row0 Cell2 is focused.`);
234+
235+
await browser.keys("F7");
236+
assert.ok(await rows[0].isFocused(), `F7: Row0 is focused.`);
237+
238+
await browser.keys("ArrowDown");
239+
assert.ok(await rows[1].isFocused(), `ArrowDown: Row1 is focused.`);
240+
241+
await browser.keys("F7");
242+
assert.ok(await getCell(1, 2).isFocused(), `F7: Row1 Cell2 is focused.`);
243+
244+
await browser.keys("F7");
245+
assert.ok(await rows[1].isFocused(), `F7: Row1 is focused.`);
246+
247+
await browser.keys("ArrowDown");
248+
assert.ok(await rows[2].isFocused(), `ArrowDown: Row2 is focused.`);
249+
250+
await browser.keys("F7");
251+
assert.ok(await getCell(2, 2).isFocused(), `F7: Row2 Cell2 is focused.`);
252+
253+
await browser.keys(["Shift", "Tab"]);
254+
assert.ok(await beforeTable.isFocused(), `ShiftTab: Before table is focused.`);
255+
256+
await browser.keys("Tab");
257+
assert.ok(await rows[2].isFocused(), `Tab: Row2 is focused.`);
258+
});
259+
260+
it("should should work correctly for interactive rows", async () => {
261+
const row = await browser.$("#interactive-row");
262+
const input = await browser.$("#before-table1");
263+
const rowButton = await browser.$("#row2-button");
264+
const anotherRow = await browser.$("#notinteractive-row");
265+
266+
await row.click();
267+
assert.equal(await input.getValue(), "1", `Interactive row is clicked and the row-click event result is correct.`);
268+
269+
await browser.keys("Enter");
270+
assert.equal(await input.getValue(), "2", `Enter is presed for the interactive row and the row-click event result is correct.`);
271+
272+
await anotherRow.click();
273+
assert.equal(await input.getValue(), "2", `Not interactive row is clicked and there is no row-click event triggered.`);
274+
275+
await rowButton.click();
276+
assert.equal(await input.getValue(), "2", `Button in a row is clicked and there is no row-click event triggered.`);
277+
278+
await browser.keys("Enter");
279+
assert.equal(await input.getValue(), "2", `Enter is presed for the row button and there is no row-click event triggered.`);
280+
281+
await browser.keys("F7");
282+
assert.ok(await row.isFocused(), `Interactive Row is focused.`);
283+
284+
await browser.keys("Space");
285+
assert.equal(await input.getValue(), "2", `Space is presed for the row and there is no row-click event triggered.`);
286+
287+
await browser.keys("Enter");
288+
assert.equal(await input.getValue(), "3", `Enter is finally presed for the interactive row and the row-click event result is correct.`);
289+
});
290+
});
291+
292+
293+
describe("Table - Keyboard Navigation with Fixed Headers", async() => {
294+
before(async() => {
295+
await browser.url("test/pages/TableFixedHeader.html");
296+
});
297+
298+
it("scrollable container - focused row should always be below the header", async() => {
299+
const table = await browser.$("#table0");
300+
const lastRow = await browser.$("#row-21");
301+
302+
await lastRow.scrollIntoView();
303+
await lastRow.click();
304+
assert.ok(await lastRow.isFocused(), `Click: Row 21 (last row) is focused.`);
305+
306+
const headerRow = await table.$("ui5-table-header-row");
307+
308+
// Scroll to the top one by one
309+
for (let i = 20; i > 0; i--) {
310+
const row = await browser.$(`#row-${i}`);
311+
await browser.keys("ArrowUp");
312+
313+
const headerRowLocation = await headerRow.getLocation("y");
314+
const rowLocation = await row.getLocation("y");
315+
assert.ok(await row.isFocused(), `ArrowUp: Row ${i} is focused.`);
316+
assert.ok(await headerRow.isDisplayedInViewport(), `ArrowUp: Header is still displayed in the viewport.`);
317+
assert.isAbove(rowLocation, headerRowLocation, `ArrowUp: Row ${i} is below the header.`);
318+
}
319+
});
320+
321+
it("scrollable table - focused row should always be below the header", async() => {
322+
const table = await browser.$("#table1");
323+
const lastRow = await browser.$("#row-21-1");
324+
325+
await lastRow.scrollIntoView();
326+
await lastRow.click();
327+
assert.ok(await lastRow.isFocused(), `Click: Row 21 (last row) is focused.`);
328+
329+
const headerRow = await table.$("ui5-table-header-row");
330+
331+
// Scroll to the top one by one
332+
for (let i = 20; i > 0; i--) {
333+
const row = await browser.$(`#row-${i}-1`);
334+
await browser.keys("ArrowUp");
335+
336+
const headerRowLocation = await headerRow.getLocation("y");
337+
const rowLocation = await row.getLocation("y");
338+
assert.ok(await row.isFocused(), `ArrowUp: Row ${i} is focused.`);
339+
assert.ok(await headerRow.isDisplayedInViewport(), `ArrowUp: Header is still displayed in the viewport.`);
340+
assert.isAbove(rowLocation, headerRowLocation, `ArrowUp: Row ${i} is below the header.`);
341+
}
342+
});
343+
344+
it("body as scroll container - focused row should always be below the header", async() => {
345+
const table = await browser.$("#table2");
346+
const lastRow = await browser.$("#row-100-2");
347+
348+
await lastRow.scrollIntoView();
349+
await lastRow.click();
350+
assert.ok(await lastRow.isFocused(), `Click: Row 100 (last row) is focused.`);
351+
352+
const headerRow = await table.$("ui5-table-header-row");
353+
354+
// Scroll to the top one by one
355+
for (let i = 99; i > 0; i--) {
356+
const row = await browser.$(`#row-${i}-2`);
357+
await browser.keys("ArrowUp");
358+
359+
const headerRowLocation = await headerRow.getLocation("y");
360+
const rowLocation = await row.getLocation("y");
361+
assert.ok(await row.isFocused(), `ArrowUp: Row ${i} is focused.`);
362+
assert.ok(await headerRow.isDisplayedInViewport(), `ArrowUp: Header is still displayed in the viewport.`);
363+
assert.isAbove(rowLocation, headerRowLocation, `ArrowUp: Row ${i} is below the header.`);
364+
}
365+
});
366+
});

0 commit comments

Comments
 (0)