Skip to content

Commit 6cfa4e9

Browse files
NakataCodeNakataCode
authored
chore(ui5-list-item-group): migrate wdio tests to cypress (#11908)
Convert ListItemGroup tests to Cypress component tests while maintaining test coverage and functionality parity with original spec. JIRA: BGSOFUIPIRIN-6816
1 parent 2acdbcc commit 6cfa4e9

File tree

2 files changed

+311
-133
lines changed

2 files changed

+311
-133
lines changed

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

Lines changed: 311 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,311 @@
1+
import ListItemGroup from "../../src/ListItemGroup.js";
2+
3+
describe("ListItemGroup Tests", () => {
4+
it("ListGroup is rendered", () => {
5+
cy.mount(<ListItemGroup headerText="New Items" />);
6+
7+
cy.get("[ui5-li-group]").should("exist");
8+
9+
cy.get("[ui5-li-group]")
10+
.shadow()
11+
.find("ui5-li-group-header")
12+
.should("exist");
13+
});
14+
15+
it("ListGroup renders header-text property correctly", () => {
16+
cy.mount(<ListItemGroup headerText="New Items" />);
17+
18+
cy.get("[ui5-li-group]")
19+
.shadow()
20+
.find("ui5-li-group-header")
21+
.should("contain.text", "New Items");
22+
});
23+
24+
it("ListGroup propagates focused property to header item", () => {
25+
cy.mount(<ListItemGroup headerText="New Items" />);
26+
27+
cy.get("[ui5-li-group]")
28+
.invoke("prop", "focused", true);
29+
30+
cy.get("[ui5-li-group]")
31+
.shadow()
32+
.find("ui5-li-group-header")
33+
.should("have.prop", "focused", true);
34+
35+
cy.get("[ui5-li-group]")
36+
.invoke("prop", "focused", false);
37+
38+
cy.get("[ui5-li-group]")
39+
.shadow()
40+
.find("ui5-li-group-header")
41+
.should("have.prop", "focused", false);
42+
});
43+
});
44+
45+
describe("List drag and drop tests", () => {
46+
const setupDragAndDrop = (listSelector, acceptExternal = false) => {
47+
cy.get(listSelector).then(($list) => {
48+
const list = $list[0];
49+
50+
list.addEventListener("ui5-move-over", cy.stub().as("moveOverStub").callsFake((e) => {
51+
const { destination, source } = e.detail;
52+
53+
if (!acceptExternal && !list.contains(source.element)) {
54+
return;
55+
}
56+
57+
if (destination.placement === "Before" || destination.placement === "After") {
58+
e.preventDefault();
59+
}
60+
61+
if (destination.placement === "On" && "allowsNesting" in destination.element.dataset) {
62+
e.preventDefault();
63+
}
64+
}));
65+
66+
list.addEventListener("ui5-move", cy.stub().as("moveStub").callsFake((e) => {
67+
const { destination, source } = e.detail;
68+
69+
if (source.element === destination.element) return;
70+
71+
const parent = destination.element.closest("[ui5-li-group]");
72+
73+
if (destination.placement === "Before") {
74+
parent.insertBefore(source.element, destination.element);
75+
} else if (destination.placement === "After") {
76+
const nextElement = Array.from(parent.children).at(
77+
Array.from(parent.children).indexOf(destination.element) + 1
78+
);
79+
parent.insertBefore(source.element, nextElement);
80+
} else if (destination.placement === "On") {
81+
destination.element.prepend(source.element);
82+
}
83+
}));
84+
});
85+
};
86+
87+
const dispatchMoveEvent = (sourceAlias: string, targetAlias: string, placement: string) => {
88+
cy.get(sourceAlias).then($source => {
89+
cy.get(targetAlias).then($target => {
90+
const moveEvent = new CustomEvent("ui5-move", {
91+
detail: {
92+
source: { element: $source[0] },
93+
destination: { element: $target[0], placement }
94+
}
95+
});
96+
97+
const listElement = $target[0].closest("[ui5-li-group]");
98+
if (listElement) {
99+
listElement.dispatchEvent(moveEvent);
100+
}
101+
});
102+
});
103+
};
104+
105+
it("Moving item After another", () => {
106+
cy.mount(
107+
<div>
108+
<ListItemGroup headerText="List 1" />
109+
</div>
110+
);
111+
112+
cy.get("[ui5-li-group]").eq(0).as("list1").should("exist");
113+
setupDragAndDrop("@list1", false);
114+
115+
cy.get("@list1").then($list => {
116+
$list[0].innerHTML = `
117+
<ui5-li movable>1. Bulgaria</ui5-li>
118+
<ui5-li movable>1. Germany</ui5-li>
119+
<ui5-li movable>1. Spain</ui5-li>
120+
`;
121+
});
122+
123+
cy.get("@list1").find("ui5-li").should("have.length", 3);
124+
cy.get("@list1").find("ui5-li").eq(0).as("first").should("contain.text", "1. Bulgaria");
125+
cy.get("@list1").find("ui5-li").eq(1).as("second").should("contain.text", "1. Germany");
126+
127+
dispatchMoveEvent("@first", "@second", "After");
128+
129+
cy.get("@list1").find("ui5-li").eq(0).should("contain.text", "1. Germany");
130+
cy.get("@list1").find("ui5-li").eq(1).should("contain.text", "1. Bulgaria");
131+
132+
cy.get("@list1").find("ui5-li").eq(1).as("currentFirst").should("contain.text", "1. Bulgaria");
133+
cy.get("@list1").find("ui5-li").eq(2).as("currentThird").should("contain.text", "1. Spain");
134+
135+
dispatchMoveEvent("@currentFirst", "@currentThird", "After");
136+
137+
cy.get("@list1").find("ui5-li").eq(0).should("contain.text", "1. Germany");
138+
cy.get("@list1").find("ui5-li").eq(1).should("contain.text", "1. Spain");
139+
cy.get("@list1").find("ui5-li").eq(2).should("contain.text", "1. Bulgaria");
140+
});
141+
142+
it("Moving item Before another", () => {
143+
cy.mount(
144+
<div>
145+
<ListItemGroup headerText="List 1" />
146+
</div>
147+
);
148+
149+
cy.get("[ui5-li-group]").eq(0).as("list1").should("exist");
150+
setupDragAndDrop("@list1", false);
151+
152+
cy.get("@list1").then($list => {
153+
$list[0].innerHTML = `
154+
<ui5-li movable>1. Bulgaria</ui5-li>
155+
<ui5-li movable>1. Germany</ui5-li>
156+
<ui5-li movable>1. Spain</ui5-li>
157+
`;
158+
});
159+
160+
cy.get("@list1").find("ui5-li").should("have.length", 3);
161+
cy.get("@list1").find("ui5-li").eq(0).as("first").should("contain.text", "1. Bulgaria");
162+
cy.get("@list1").find("ui5-li").eq(2).as("third").should("contain.text", "1. Spain");
163+
164+
dispatchMoveEvent("@first", "@third", "Before");
165+
166+
cy.get("@list1").find("ui5-li").eq(0).should("contain.text", "1. Germany");
167+
cy.get("@list1").find("ui5-li").eq(1).should("contain.text", "1. Bulgaria");
168+
cy.get("@list1").find("ui5-li").eq(2).should("contain.text", "1. Spain");
169+
170+
cy.get("@list1").find("ui5-li").eq(1).as("currentFirst").should("contain.text", "1. Bulgaria");
171+
cy.get("@list1").find("ui5-li").eq(0).as("currentSecond").should("contain.text", "1. Germany");
172+
173+
dispatchMoveEvent("@currentFirst", "@currentSecond", "Before");
174+
175+
cy.get("@list1").find("ui5-li").eq(0).should("contain.text", "1. Bulgaria");
176+
cy.get("@list1").find("ui5-li").eq(1).should("contain.text", "1. Germany");
177+
cy.get("@list1").find("ui5-li").eq(2).should("contain.text", "1. Spain");
178+
});
179+
180+
it("Moving item ON another", () => {
181+
cy.mount(
182+
<div>
183+
<ListItemGroup headerText="List 2" />
184+
</div>
185+
);
186+
187+
cy.get("[ui5-li-group]").eq(0).as("list2").should("exist");
188+
setupDragAndDrop("@list2", true);
189+
190+
cy.get("@list2").then($list => {
191+
$list[0].innerHTML = `
192+
<ui5-li movable>2. Bulgaria</ui5-li>
193+
<ui5-li movable data-allows-nesting>2. Germany (Allows nesting)</ui5-li>
194+
<ui5-li movable>2. Spain</ui5-li>
195+
`;
196+
});
197+
198+
cy.get("@list2").find("ui5-li").should("have.length", 3);
199+
cy.get("@list2").find("ui5-li").eq(0).as("first").should("contain.text", "2. Bulgaria");
200+
cy.get("@list2").find("ui5-li").eq(1).as("second").should("contain.text", "2. Germany (Allows nesting)");
201+
202+
dispatchMoveEvent("@first", "@second", "On");
203+
204+
cy.get("@list2").children("ui5-li").should("have.length", 2);
205+
cy.get("@list2").children("ui5-li").eq(0).find("ui5-li").should("contain.text", "2. Bulgaria");
206+
});
207+
208+
it("Moving item from one list to another", () => {
209+
cy.mount(
210+
<div>
211+
<ListItemGroup headerText="List 1" />
212+
<ListItemGroup headerText="List 2" />
213+
</div>
214+
);
215+
216+
cy.get("[ui5-li-group]").eq(0).as("list1").should("exist");
217+
cy.get("[ui5-li-group]").eq(1).as("list2").should("exist");
218+
219+
setupDragAndDrop("@list1", false);
220+
setupDragAndDrop("@list2", true);
221+
222+
cy.get("@list1").then($list => {
223+
$list[0].innerHTML = `
224+
<ui5-li movable>1. Bulgaria</ui5-li>
225+
<ui5-li movable>1. Germany</ui5-li>
226+
<ui5-li movable>1. Spain</ui5-li>
227+
`;
228+
});
229+
230+
cy.get("@list2").then($list => {
231+
$list[0].innerHTML = `
232+
<ui5-li movable>2. Bulgaria</ui5-li>
233+
<ui5-li movable data-allows-nesting>2. Germany (Allows nesting)</ui5-li>
234+
<ui5-li movable>2. Spain</ui5-li>
235+
`;
236+
});
237+
238+
cy.get("@list1").find("ui5-li").should("have.length", 3);
239+
cy.get("@list2").find("ui5-li").should("have.length", 3);
240+
241+
cy.get("@list2").find("ui5-li").eq(0).as("listTwoItem").should("contain.text", "2. Bulgaria");
242+
cy.get("@list1").find("ui5-li").eq(0).as("listOneFirst").should("contain.text", "1. Bulgaria");
243+
244+
dispatchMoveEvent("@listTwoItem", "@listOneFirst", "After");
245+
246+
cy.get("@list1").find("ui5-li").should("have.length", 4);
247+
cy.get("@list2").find("ui5-li").should("have.length", 2);
248+
});
249+
250+
it("Moving link to list that doesn't accept it", () => {
251+
cy.mount(
252+
<div>
253+
<a draggable={true} style={{ display: "block", marginBottom: "10px" }}>
254+
http://sap.com
255+
</a>
256+
<ListItemGroup headerText="List 1" />
257+
</div>
258+
);
259+
260+
cy.get("[ui5-li-group]").eq(0).as("list1").should("exist");
261+
setupDragAndDrop("@list1", false);
262+
263+
cy.get("@list1").then($list => {
264+
$list[0].innerHTML = `
265+
<ui5-li movable>1. Bulgaria</ui5-li>
266+
<ui5-li movable>1. Germany</ui5-li>
267+
<ui5-li movable>1. Spain</ui5-li>
268+
`;
269+
});
270+
271+
cy.get("@list1").find("ui5-li").should("have.length", 3);
272+
cy.get("a").as("link").should("contain.text", "http://sap.com");
273+
cy.get("@list1").find("ui5-li").eq(0).as("first").should("contain.text", "1. Bulgaria");
274+
275+
dispatchMoveEvent("@link", "@first", "After");
276+
277+
cy.get("@list1").find("ui5-li").should("have.length", 3);
278+
cy.get("a").should("exist").and("contain.text", "http://sap.com");
279+
});
280+
281+
it("Moving link to list that accepts it", () => {
282+
cy.mount(
283+
<div>
284+
<a draggable={true} style={{ display: "block", marginBottom: "10px" }}>
285+
http://sap.com
286+
</a>
287+
<ListItemGroup headerText="List 2" />
288+
</div>
289+
);
290+
291+
cy.get("[ui5-li-group]").eq(0).as("list2").should("exist");
292+
setupDragAndDrop("@list2", true);
293+
294+
cy.get("@list2").then($list => {
295+
$list[0].innerHTML = `
296+
<ui5-li movable>2. Bulgaria</ui5-li>
297+
<ui5-li movable data-allows-nesting>2. Germany (Allows nesting)</ui5-li>
298+
<ui5-li movable>2. Spain</ui5-li>
299+
`;
300+
});
301+
302+
cy.get("@list2").find("ui5-li").should("have.length", 3);
303+
cy.get("a").as("link").should("contain.text", "http://sap.com");
304+
cy.get("@list2").find("ui5-li").eq(1).as("second").should("contain.text", "2. Germany (Allows nesting)");
305+
306+
dispatchMoveEvent("@link", "@second", "Before");
307+
308+
cy.get("@list2").children().should("have.length", 4);
309+
cy.get("@list2").find("a").should("exist").and("contain.text", "http://sap.com");
310+
});
311+
});

0 commit comments

Comments
 (0)