Skip to content

Commit ab1cbfb

Browse files
nowakdanielilhan007
nowakdaniel
authored and
ilhan007
committed
chore(ui5-table): migrate TableSelection wdio tests to cypress (#10790)
Migration of TableSelection.spec.js wdio tests to cypress.
1 parent e8de3ae commit ab1cbfb

File tree

2 files changed

+243
-271
lines changed

2 files changed

+243
-271
lines changed

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

Lines changed: 243 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,243 @@
1+
import Label from "../../src/Label.js";
2+
import Table from "../../src/Table.js";
3+
import TableHeaderRow from "../../src/TableHeaderRow.js";
4+
import TableHeaderCell from "../../src/TableHeaderCell.js";
5+
import TableRow from "../../src/TableRow.js";
6+
import TableCell from "../../src/TableCell.js";
7+
import TableSelectionMode from "../../src/types/TableSelectionMode.js";
8+
import TableSelection from "../../src/TableSelection.js";
9+
10+
function mountTestpage(selectionMode: TableSelectionMode) {
11+
cy.mount(
12+
<>
13+
<Table id="table0" noDataText="No data found">
14+
<TableSelection id="selection" slot="features" mode={selectionMode}></TableSelection>
15+
<TableHeaderRow slot="headerRow">
16+
<TableHeaderCell id="colA"><span>ColumnA</span></TableHeaderCell>
17+
<TableHeaderCell id="colB">Column B</TableHeaderCell>
18+
<TableHeaderCell id="colC">Column C</TableHeaderCell>
19+
<TableHeaderCell id="colD">Column D</TableHeaderCell>
20+
</TableHeaderRow>
21+
<TableRow rowKey="0">
22+
<TableCell><Label>Cell A</Label></TableCell>
23+
<TableCell><Label>Cell B</Label></TableCell>
24+
<TableCell><Label>Cell C</Label></TableCell>
25+
<TableCell><Label>Cell D</Label></TableCell>
26+
</TableRow>
27+
<TableRow rowKey="1">
28+
<TableCell><Label>Cell A</Label></TableCell>
29+
<TableCell><Label>Cell B</Label></TableCell>
30+
<TableCell><Label>Cell C</Label></TableCell>
31+
<TableCell><Label>Cell D</Label></TableCell>
32+
</TableRow>
33+
<TableRow rowKey="2">
34+
<TableCell><Label>Cell A</Label></TableCell>
35+
<TableCell><Label>Cell B</Label></TableCell>
36+
<TableCell><Label>Cell C</Label></TableCell>
37+
<TableCell><Label>Cell D</Label></TableCell>
38+
</TableRow>
39+
<TableRow rowKey="3">
40+
<TableCell><Label>Cell A</Label></TableCell>
41+
<TableCell><Label>Cell B</Label></TableCell>
42+
<TableCell><Label>Cell C</Label></TableCell>
43+
<TableCell><Label>Cell D</Label></TableCell>
44+
</TableRow>
45+
<TableRow rowKey="4">
46+
<TableCell><Label>Cell A</Label></TableCell>
47+
<TableCell><Label>Cell B</Label></TableCell>
48+
<TableCell><Label>Cell C</Label></TableCell>
49+
<TableCell><Label>Cell D</Label></TableCell>
50+
</TableRow>
51+
</Table>
52+
</>
53+
);
54+
55+
cy.get("#table0").children("ui5-table-header-row").first().as("headerRow");
56+
cy.get("#table0").children("ui5-table-row").get("[row-key=\"0\"]").as("row0");
57+
cy.get("#table0").children("ui5-table-row").get("[row-key=\"4\"]").as("row4");
58+
}
59+
60+
describe("Mode - None", () => {
61+
before(() => {
62+
mountTestpage(TableSelectionMode.None);
63+
});
64+
65+
it("selection should be not active", () => {
66+
cy.get("#selection").should("have.attr", "mode", TableSelectionMode.None);
67+
cy.get("@headerRow").shadow().find("#selection-cell")
68+
.should("not.exist");
69+
cy.get("@row0").shadow().find("#selection-cell")
70+
.should("not.exist");
71+
});
72+
});
73+
74+
const testConfig = {
75+
"Single": {
76+
"config": {
77+
"mode": "Single",
78+
},
79+
"cases": {
80+
"BOXES": {
81+
"header": {
82+
"exists": true,
83+
"checkbox": false,
84+
},
85+
"row": {
86+
"exists": true,
87+
"checkbox": true,
88+
},
89+
},
90+
"SPACE": {
91+
"space_0": "0",
92+
"space_4": "4",
93+
},
94+
"ARROWS_BOX": {
95+
"arrow_initial": "0",
96+
"arrow_down": "1",
97+
"arrow_up": "0",
98+
},
99+
"MOUSE": {
100+
"mouse_0": "0",
101+
"mouse_4": "4",
102+
},
103+
"RANGE_MOUSE": {
104+
"range_mouse_initial": "0",
105+
"range_mouse_final": "4",
106+
"range_mouse_edge": "0",
107+
},
108+
"RANGE_KEYBOARD": {
109+
"initial": "0",
110+
"block_1": "0",
111+
"block_2": "3",
112+
},
113+
},
114+
},
115+
"Multiple": {
116+
"config": {
117+
"mode": "Multiple",
118+
},
119+
"cases": {
120+
"BOXES": {
121+
"header": {
122+
"exists": true,
123+
"checkbox": true
124+
},
125+
"row": {
126+
"exists": true,
127+
"checkbox": true
128+
}
129+
},
130+
"SPACE": {
131+
"space_0": "0",
132+
"space_4": "0 4"
133+
},
134+
"ARROWS_BOX": {
135+
"arrow_initial": "0",
136+
"arrow_down": "0",
137+
"arrow_up": "0"
138+
},
139+
"MOUSE": {
140+
"mouse_0": "0",
141+
"mouse_4": "0 4"
142+
},
143+
"RANGE_MOUSE": {
144+
"range_mouse_initial": "0",
145+
"range_mouse_final": "0 1 2 3 4",
146+
"range_mouse_edge": "0 1 2 3 4"
147+
},
148+
"RANGE_KEYBOARD": {
149+
"initial": "0",
150+
"block_1": "0 1",
151+
"block_2": "0 1 3 4"
152+
}
153+
}
154+
}
155+
};
156+
157+
// I've had to check the attribute this way because
158+
// should("have.attr"... and similar functions always returned '' instead of the actual value
159+
// It could be a timing issue but .wait didn't help either
160+
function checkSelection(rowIndex: string) {
161+
cy.get("#selection").then(sel => {
162+
expect(sel.get(0).getAttribute("selected")).to.equal(rowIndex);
163+
});
164+
}
165+
166+
Object.entries(testConfig).forEach(([mode, testConfigEntry]) => {
167+
describe(`Mode - ${mode}`, () => {
168+
beforeEach(() => {
169+
mountTestpage(testConfigEntry.config.mode as TableSelectionMode);
170+
});
171+
172+
it("Correct boxes are shown", () => {
173+
cy.get("@headerRow").shadow().find("#selection-cell")
174+
.should(testConfigEntry.cases.BOXES.header.exists ? "exist" : "not.exist");
175+
cy.get("@row0").shadow().find("#selection-cell")
176+
.should(testConfigEntry.cases.BOXES.row.exists ? "exist" : "not.exist");
177+
178+
cy.get("@headerRow").shadow().find("#selection-component")
179+
.should(testConfigEntry.cases.BOXES.header.checkbox ? "exist" : "not.exist");
180+
cy.get("@row0").shadow().find("#selection-component")
181+
.should(testConfigEntry.cases.BOXES.row.checkbox ? "exist" : "not.exist");
182+
});
183+
184+
it("select row via SPACE", () => {
185+
cy.get("@row0").realClick({ position: "left" });
186+
cy.get("@row0").realPress("Space");
187+
checkSelection(testConfigEntry.cases.SPACE.space_0);
188+
189+
cy.get("@row4").realClick();
190+
cy.get("@row4").realPress("Space");
191+
cy.get("#selection").should("have.attr", "mode", testConfigEntry.config.mode);
192+
checkSelection(testConfigEntry.cases.SPACE.space_4);
193+
});
194+
195+
it("select row via arrows (radio focus)", () => {
196+
cy.get("@row0").shadow().find("#selection-component").realClick();
197+
checkSelection(testConfigEntry.cases.ARROWS_BOX.arrow_initial);
198+
199+
cy.realPress("ArrowDown");
200+
checkSelection(testConfigEntry.cases.ARROWS_BOX.arrow_down);
201+
202+
cy.realPress("ArrowUp");
203+
checkSelection(testConfigEntry.cases.ARROWS_BOX.arrow_up);
204+
});
205+
206+
it("select row via mouse", () => {
207+
cy.get("@row0").shadow().find("#selection-component").realClick();
208+
checkSelection(testConfigEntry.cases.MOUSE.mouse_0);
209+
210+
cy.get("@row4").shadow().find("#selection-component").realClick();
211+
checkSelection(testConfigEntry.cases.MOUSE.mouse_4);
212+
});
213+
214+
it("range selection with mouse", () => {
215+
cy.get("@row0").shadow().find("#selection-component").realClick();
216+
checkSelection(testConfigEntry.cases.RANGE_MOUSE.range_mouse_initial);
217+
218+
// Need to simulate keydown with SHIFT key to set range selection flag shiftKeyPressed
219+
// Cypress does not trigger keydown when just calling realClick with shiftKey: true
220+
// That is why selection of the row is not supressed, and we end up with 0 4 1 2 3
221+
cy.get("@row4").trigger("keydown", { bubbles: true, key: "Shift", shiftKey: true });
222+
cy.get("@row4").shadow().find("#selection-component").realClick({ shiftKey: true });
223+
checkSelection(testConfigEntry.cases.RANGE_MOUSE.range_mouse_final);
224+
225+
cy.get("@row4").trigger("keydown", { bubbles: true, key: "Shift", shiftKey: true });
226+
cy.get("@row0").shadow().find("#selection-component").realClick();
227+
checkSelection(testConfigEntry.cases.RANGE_MOUSE.range_mouse_edge);
228+
});
229+
230+
it("range selection with keyboard", () => {
231+
cy.get("@row0").realClick({ position: "center" });
232+
cy.get("@row0").realPress("Space");
233+
checkSelection(testConfigEntry.cases.RANGE_KEYBOARD.initial);
234+
235+
cy.realPress(["Shift", "ArrowDown", "ArrowDown", "ArrowDown", "ArrowUp", "ArrowUp"]);
236+
checkSelection(testConfigEntry.cases.RANGE_KEYBOARD.block_1);
237+
238+
cy.realPress(["ArrowDown", "ArrowDown", "Space"]);
239+
cy.realPress(["Shift", "ArrowDown"]);
240+
checkSelection(testConfigEntry.cases.RANGE_KEYBOARD.block_2);
241+
});
242+
});
243+
});

0 commit comments

Comments
 (0)