Skip to content

Commit ab9e03c

Browse files
nowakdanielilhan007
nowakdaniel
authored and
ilhan007
committed
chore(ui5-table): migrate TableNavigation (fixedHeader) wdio tests to cypress (#10646)
Migration of TableNavigation.spec.js (fixedHeader) wdio tests to cypress.
1 parent 5928e95 commit ab9e03c

File tree

1 file changed

+199
-0
lines changed

1 file changed

+199
-0
lines changed

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

Lines changed: 199 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,199 @@
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 Label from "../../src/Label.js";
7+
import Bar from "../../src/Bar.js";
8+
import Title from "../../src/Title.js";
9+
import Slider from "../../src/Slider.js";
10+
11+
describe("Table - Keyboard Navigation with Fixed Headers", () => {
12+
function isDisplayedInsideViewport(element: string) {
13+
cy.get(element).then($el => {
14+
const el = $el[0];
15+
const rect = el.getBoundingClientRect();
16+
17+
expect(rect.top).to.be.at.least(0);
18+
expect(rect.left).to.be.at.least(0);
19+
expect(rect.bottom).to.be.lessThan(Cypress.config("viewportHeight"));
20+
expect(rect.right).to.be.lessThan(Cypress.config("viewportWidth"));
21+
});
22+
}
23+
24+
it("scrollable container - focused row should always be below the header", () => {
25+
cy.mount(
26+
<div style="height:300px; overflow:auto;">
27+
<Bar id="toolbar" design="Header" accessible-name-ref="title" style="position: sticky; top: 0; z-index: 2; height: 50px;">
28+
<Title tabindex={0} level="H3" id="title" slot="startContent">My Selectable Products (3)</Title>
29+
<Slider id="slider" min={0} max={100} step={1} value={100}
30+
label-interval="0"/>
31+
</Bar>
32+
<Table id="table0" overflow-mode="Popin" sticky-top="50px" accessible-name-ref="title" no-data-text="No data found">
33+
<TableHeaderRow sticky slot="headerRow">
34+
<TableHeaderCell id="colA" min-width="300px"><span>ColumnA</span></TableHeaderCell>
35+
<TableHeaderCell id="colB" min-width="200px">Column B</TableHeaderCell>
36+
<TableHeaderCell id="colC" min-width="200px">Column C</TableHeaderCell>
37+
<TableHeaderCell id="colD" min-width="150px">Column D</TableHeaderCell>
38+
</TableHeaderRow>
39+
<TableRow id="row-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
40+
<TableRow id="row-2"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
41+
<TableRow id="row-3"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
42+
<TableRow id="row-4"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
43+
<TableRow id="row-5"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
44+
<TableRow id="row-6"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
45+
<TableRow id="row-7"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
46+
<TableRow id="row-8"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
47+
<TableRow id="row-9"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
48+
<TableRow id="row-10"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
49+
<TableRow id="row-11"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
50+
<TableRow id="row-12"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
51+
<TableRow id="row-13"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
52+
<TableRow id="row-14"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
53+
<TableRow id="row-15"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
54+
<TableRow id="row-16"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
55+
<TableRow id="row-17"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
56+
<TableRow id="row-18"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
57+
<TableRow id="row-19"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
58+
<TableRow id="row-20"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
59+
<TableRow id="row-21"> <TableCell>A</TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
60+
</Table>
61+
</div>
62+
);
63+
64+
cy.get("#table0").children("ui5-table-row").as("rows");
65+
cy.get("#table0").children("ui5-table-header-row").as("headerRow");
66+
cy.get("@rows").get("#row-21").as("lastRow");
67+
68+
cy.get("@lastRow").scrollIntoView();
69+
cy.get("@lastRow").click("left");
70+
cy.get("@lastRow").should("be.focused");
71+
72+
for (let i = 20; i > 0; i--) {
73+
cy.realPress("{uparrow}");
74+
cy.get("@rows").get(`#row-${i}`).should("be.focused");
75+
76+
isDisplayedInsideViewport("@headerRow");
77+
78+
cy.get("@headerRow").then($headerRow => {
79+
cy.get("@rows").get(`#row-${i}`).then($row => {
80+
const headerRowBottom = $headerRow[0].getBoundingClientRect().bottom;
81+
const focusedRowTop = $row[0].getBoundingClientRect().top;
82+
83+
expect(focusedRowTop).to.be.at.least(headerRowBottom);
84+
});
85+
});
86+
}
87+
});
88+
89+
it("scrollable table - focused row should always be below the header", () => {
90+
cy.mount(
91+
<Table id="table1" overflow-mode="Popin" sticky-top="0" accessible-name-ref="title" no-data-text="No data found" style="height: 300px; overflow: auto;">
92+
<TableHeaderRow sticky slot="headerRow">
93+
<TableHeaderCell id="colA" min-width="300px"><span>ColumnA</span></TableHeaderCell>
94+
<TableHeaderCell id="colB" min-width="200px">Column B</TableHeaderCell>
95+
<TableHeaderCell id="colC" min-width="200px">Column C</TableHeaderCell>
96+
<TableHeaderCell id="colD" min-width="150px">Column D</TableHeaderCell>
97+
</TableHeaderRow>
98+
<TableRow id="row-1-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
99+
<TableRow id="row-2-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
100+
<TableRow id="row-3-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
101+
<TableRow id="row-4-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
102+
<TableRow id="row-5-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
103+
<TableRow id="row-6-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
104+
<TableRow id="row-7-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
105+
<TableRow id="row-8-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
106+
<TableRow id="row-9-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
107+
<TableRow id="row-10-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
108+
<TableRow id="row-11-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
109+
<TableRow id="row-12-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
110+
<TableRow id="row-13-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
111+
<TableRow id="row-14-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
112+
<TableRow id="row-15-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
113+
<TableRow id="row-16-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
114+
<TableRow id="row-17-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
115+
<TableRow id="row-18-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
116+
<TableRow id="row-19-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
117+
<TableRow id="row-20-1"> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
118+
<TableRow id="row-21-1"> <TableCell>A</TableCell> <TableCell></TableCell> <TableCell></TableCell> <TableCell></TableCell> </TableRow>
119+
</Table>
120+
);
121+
122+
cy.get("#table1").children("ui5-table-row").as("rows");
123+
cy.get("#table1").children("ui5-table-header-row").as("headerRow");
124+
cy.get("@rows").get("#row-21-1").as("lastRow");
125+
126+
cy.get("@lastRow").scrollIntoView();
127+
cy.get("@lastRow").click("left");
128+
cy.get("@lastRow").should("be.focused");
129+
130+
for (let i = 20; i > 0; i--) {
131+
cy.realPress("{uparrow}");
132+
cy.get("@rows").get(`#row-${i}-1`).should("be.focused");
133+
134+
isDisplayedInsideViewport("@headerRow");
135+
136+
cy.get("@headerRow").then($headerRow => {
137+
cy.get("@rows").get(`#row-${i}-1`).then($row => {
138+
const headerRowBottom = $headerRow[0].getBoundingClientRect().bottom;
139+
const focusedRowTop = $row[0].getBoundingClientRect().top;
140+
141+
expect(focusedRowTop).to.be.at.least(headerRowBottom);
142+
});
143+
});
144+
}
145+
});
146+
147+
it("body as scroll container - focused row should always be below the header", () => {
148+
cy.mount(
149+
<>
150+
<Bar id="toolbar2" design="Header" accessible-name-ref="title" style="position: sticky; top: 0; z-index: 2; height: 50px;">
151+
<Title tabindex={0} level="H3" id="title" slot="startContent">My Selectable Products (3)</Title>
152+
<Slider id="slider" min={0} max={100} step={1} value={100}
153+
label-interval="0"></Slider>
154+
</Bar>
155+
<Table id="table2" overflow-mode="Popin" sticky-top="50px" accessible-name-ref="title" no-data-text="No data found">
156+
<TableHeaderRow sticky slot="headerRow">
157+
<TableHeaderCell id="colA" min-width="300px"><span>ColumnA</span></TableHeaderCell>
158+
<TableHeaderCell id="colB" min-width="200px">Column B</TableHeaderCell>
159+
<TableHeaderCell id="colC" min-width="200px">Column C</TableHeaderCell>
160+
<TableHeaderCell id="colD" min-width="150px">Column D</TableHeaderCell>
161+
</TableHeaderRow>
162+
${Array.from({ length: 100 }).map((row, index) =>
163+
<TableRow id={`row-${index + 1}-2`}>
164+
<TableCell><Label><b>Notebook Basic ${index + 1}</b><br/>HT-100${index + 1}</Label></TableCell>
165+
<TableCell><Label>Technocom</Label></TableCell>
166+
<TableCell><Label>32 x 21 x 4 cm</Label></TableCell>
167+
<TableCell><Label style="color: #2b7c2b"><b>3.7</b> KG</Label></TableCell>
168+
<TableCell style="text-align: end;"><Label style="text-align: end;"><b>29</b> EUR</Label></TableCell>
169+
</TableRow>
170+
)}
171+
</Table>
172+
</>
173+
);
174+
175+
cy.get("#table2").children("ui5-table-row").as("rows");
176+
cy.get("#table2").children("ui5-table-header-row").as("headerRow");
177+
cy.get("@rows").get("#row-100-2").as("lastRow");
178+
179+
cy.get("@lastRow").scrollIntoView();
180+
cy.get("@lastRow").click("left");
181+
cy.get("@lastRow").should("be.focused");
182+
183+
for (let i = 99; i > 0; i--) {
184+
cy.realPress("{uparrow}");
185+
cy.get("@rows").get(`#row-${i}-2`).should("be.focused");
186+
187+
isDisplayedInsideViewport("@headerRow");
188+
189+
cy.get("@headerRow").then($headerRow => {
190+
cy.get("@rows").get(`#row-${i}-2`).then($row => {
191+
const headerRowBottom = $headerRow[0].getBoundingClientRect().bottom;
192+
const focusedRowTop = $row[0].getBoundingClientRect().top;
193+
194+
expect(focusedRowTop).to.be.at.least(headerRowBottom);
195+
});
196+
});
197+
}
198+
});
199+
});

0 commit comments

Comments
 (0)