Skip to content

Commit f722aa3

Browse files
NakataCodeNakataCode
authored
chore(ui5-icon): migrate wdio tests to cypress (#12103)
Convert Icon wdio tests to Cypress component tests while maintaining test coverage and functionality parity with original spec. JIRA: BGSOFUIPIRIN-6816
1 parent 2313daa commit f722aa3

File tree

2 files changed

+277
-138
lines changed

2 files changed

+277
-138
lines changed

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

Lines changed: 277 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,277 @@
1+
import Icon from "../../src/Icon.js";
2+
import Input from "../../src/Input.js";
3+
import Label from "../../src/Label.js";
4+
import "@ui5/webcomponents-icons/dist/add-equipment.js";
5+
import "@ui5/webcomponents-icons/dist/error.js";
6+
import "@ui5/webcomponents-icons/dist/add.js";
7+
import "@ui5/webcomponents-icons/dist/add-equipment.js";
8+
import testAssets from "../../src/bundle.esm.js";
9+
import { setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
10+
11+
describe("Icon general interaction", () => {
12+
it("Tests icon rendering", () => {
13+
cy.mount(
14+
<>
15+
<Icon name="add-equipment" mode="Interactive" />
16+
<Icon name="save" showTooltip />
17+
</>
18+
);
19+
20+
cy.get("[ui5-icon][name='add-equipment'][mode='Interactive']")
21+
.shadow()
22+
.find(".ui5-icon-root")
23+
.should("exist");
24+
25+
cy.get("[ui5-icon][show-tooltip]").then(($icon) => {
26+
cy.wrap($icon[0])
27+
.invoke("prop", "_id")
28+
.then((iconId) => {
29+
cy.get("[ui5-icon][show-tooltip]")
30+
.shadow()
31+
.find(`#${iconId}-tooltip`)
32+
.should("contain.text", "Save");
33+
});
34+
});
35+
});
36+
37+
it("Tests events 'click' and 'ui5-click' events", () => {
38+
cy.mount(
39+
<div style={{ padding: "20px" }}>
40+
<Icon
41+
name="add-equipment"
42+
mode="Interactive"
43+
style={{ display: "inline-block", margin: "10px" }}
44+
/>
45+
<br />
46+
<Label>"click"</Label>
47+
<Input value="0" />
48+
<Label>"ui5-click"</Label>
49+
<Input value="0" />
50+
<br />
51+
52+
<Icon
53+
name="add-equipment"
54+
style={{ display: "inline-block", margin: "10px" }}
55+
/>
56+
<br />
57+
<Label>"click"</Label>
58+
<Input value="0" />
59+
<Label>"ui5-click"</Label>
60+
<Input value="0" />
61+
</div>
62+
);
63+
64+
cy.get("[ui5-icon][mode='Interactive']")
65+
.as("interactiveIcon")
66+
.then($icon => {
67+
$icon.get(0).addEventListener("click", cy.stub().as("interactiveClickStub"));
68+
$icon.get(0).addEventListener("ui5-click", cy.stub().as("interactiveUI5ClickStub"));
69+
});
70+
71+
cy.get("[ui5-icon]:not([mode='Interactive'])")
72+
.as("nonInteractiveIcon")
73+
.then($icon => {
74+
$icon.get(0).addEventListener("click", cy.stub().as("nonInteractiveClickStub"));
75+
$icon.get(0).addEventListener("ui5-click", cy.stub().as("nonInteractiveUI5ClickStub"));
76+
});
77+
78+
cy.get("@interactiveIcon").then($icon => {
79+
let clickCount = 0;
80+
let ui5ClickCount = 0;
81+
82+
$icon.get(0).addEventListener("click", () => {
83+
clickCount++;
84+
const input = document.querySelectorAll("[ui5-input]")[0] as HTMLInputElement;
85+
input.value = clickCount.toString();
86+
});
87+
88+
$icon.get(0).addEventListener("ui5-click", () => {
89+
ui5ClickCount++;
90+
const input = document.querySelectorAll("[ui5-input]")[1] as HTMLInputElement;
91+
input.value = ui5ClickCount.toString();
92+
});
93+
});
94+
95+
cy.get("@nonInteractiveIcon").then($icon => {
96+
let clickCount = 0;
97+
let ui5ClickCount = 0;
98+
99+
$icon.get(0).addEventListener("click", () => {
100+
clickCount++;
101+
const input = document.querySelectorAll("[ui5-input]")[2] as HTMLInputElement;
102+
input.value = clickCount.toString();
103+
});
104+
105+
$icon.get(0).addEventListener("ui5-click", () => {
106+
ui5ClickCount++;
107+
const input = document.querySelectorAll("[ui5-input]")[3] as HTMLInputElement;
108+
input.value = ui5ClickCount.toString();
109+
});
110+
});
111+
112+
cy.get("@interactiveIcon").click();
113+
cy.get("[ui5-input]").eq(0).should("have.prop", "value", "1");
114+
cy.get("[ui5-input]").eq(1).should("have.prop", "value", "0");
115+
116+
cy.get("@interactiveIcon").realPress("Enter");
117+
cy.get("[ui5-input]").eq(0).should("have.prop", "value", "2");
118+
cy.get("[ui5-input]").eq(1).should("have.prop", "value", "1");
119+
120+
cy.get("@interactiveIcon").realPress("Space");
121+
cy.get("[ui5-input]").eq(0).should("have.prop", "value", "3");
122+
cy.get("[ui5-input]").eq(1).should("have.prop", "value", "2");
123+
124+
cy.get("@nonInteractiveIcon").click();
125+
cy.get("[ui5-input]").eq(2).should("have.prop", "value", "1");
126+
cy.get("[ui5-input]").eq(3).should("have.prop", "value", "0");
127+
128+
cy.get("@interactiveClickStub").should("have.been.calledThrice");
129+
cy.get("@interactiveUI5ClickStub").should("have.been.calledTwice");
130+
131+
cy.get("@nonInteractiveClickStub").should("have.been.calledOnce");
132+
cy.get("@nonInteractiveUI5ClickStub").should("not.have.been.called");
133+
});
134+
135+
it("Tests switch to sap_horizon", () => {
136+
cy.mount(
137+
<Icon
138+
name="add-equipment"
139+
showTooltip
140+
accessibleName="Hello SVG Icon"
141+
style={{ display: "inline-block" }}
142+
/>
143+
);
144+
145+
cy.get("[ui5-icon][name='add-equipment']")
146+
.shadow()
147+
.find("svg")
148+
.should("exist")
149+
.within(() => {
150+
cy.get("g")
151+
.should("not.be.empty")
152+
.children()
153+
.should("exist");
154+
});
155+
156+
let initialContent;
157+
cy.get("[ui5-icon][name='add-equipment']")
158+
.shadow()
159+
.find("svg")
160+
.invoke("prop", "innerHTML")
161+
.then((content) => {
162+
initialContent = content;
163+
cy.log("Initial SVG content:", content);
164+
expect(content).to.not.equal('<g role="presentation"></g>');
165+
});
166+
167+
cy.wrap({ setTheme })
168+
.invoke("setTheme", "sap_fiori_3");
169+
170+
cy.get("[ui5-icon][name='add-equipment']")
171+
.shadow()
172+
.find("svg")
173+
.invoke("prop", "innerHTML")
174+
.then((newContent) => {
175+
cy.log("New SVG content:", newContent);
176+
expect(newContent).to.not.equal(initialContent);
177+
expect(newContent).to.not.equal('<g role="presentation"></g>');
178+
});
179+
});
180+
181+
it("Tests icon modules' exported values", () => {
182+
const expectedExportedValues = "accept|SAP-icons-v4/accept|SAP-icons-v5/accept|tnt/actor|tnt-v2/actor|tnt-v3/actor|business-suite/3d|business-suite-v1/3d|business-suite-v2/3d";
183+
184+
const exportedIconValues = testAssets.getExportedIconsValues();
185+
const actualExportedValues = exportedIconValues.join("|");
186+
187+
expect(actualExportedValues).to.equal(expectedExportedValues);
188+
});
189+
190+
it("Icon svg aria-label cleaned after name change", () => {
191+
cy.mount(
192+
<Icon
193+
name="error"
194+
showTooltip
195+
/>
196+
);
197+
198+
cy.get("[ui5-icon][name='error']")
199+
.shadow()
200+
.find(".ui5-icon-root")
201+
.should("have.attr", "aria-label", "Error");
202+
203+
cy.get("[ui5-icon][name='error']")
204+
.invoke("attr", "name", "add");
205+
206+
cy.get("[ui5-icon][name='add']")
207+
.shadow()
208+
.find(".ui5-icon-root")
209+
.should("have.attr", "aria-label", "Add");
210+
211+
cy.get("[ui5-icon][name='add']")
212+
.invoke("attr", "name", "less");
213+
214+
cy.get("[ui5-icon][name='less']")
215+
.shadow()
216+
.find(".ui5-icon-root")
217+
.should("not.have.attr", "aria-label");
218+
});
219+
220+
it("Tests getIconAccessibleName", () => {
221+
const expectedAccNames = ["Add", "Back to Top", "Collapse", "Download"];
222+
const iconNames = ["add", "back-to-top", "collapse", "download"];
223+
224+
cy.then(async () => {
225+
const actualAccNames = await Promise.all(
226+
iconNames.map(iconName =>
227+
testAssets.getIconAccessibleName(iconName)
228+
)
229+
);
230+
231+
expect(actualAccNames.join()).to.equal(expectedAccNames.join());
232+
});
233+
});
234+
235+
it("Tests mode property", () => {
236+
const interactiveMode = "Interactive";
237+
const imageMode = "Image";
238+
const decorativeMode = "Decorative";
239+
240+
cy.mount(
241+
<Icon
242+
name="add-equipment"
243+
/>
244+
);
245+
246+
cy.get("[ui5-icon][name='add-equipment']")
247+
.should("have.prop", "mode", decorativeMode);
248+
249+
cy.get("[ui5-icon][name='add-equipment']")
250+
.shadow()
251+
.find(".ui5-icon-root")
252+
.should("have.attr", "role", "presentation")
253+
.should("have.attr", "aria-hidden", "true");
254+
255+
cy.get("[ui5-icon][name='add-equipment']")
256+
.invoke("prop", "mode", interactiveMode);
257+
258+
cy.get("[ui5-icon][name='add-equipment']")
259+
.should("have.prop", "mode", interactiveMode);
260+
261+
cy.get("[ui5-icon][name='add-equipment']")
262+
.shadow()
263+
.find(".ui5-icon-root")
264+
.should("have.attr", "role", "button");
265+
266+
cy.get("[ui5-icon][name='add-equipment']")
267+
.invoke("prop", "mode", imageMode);
268+
269+
cy.get("[ui5-icon][name='add-equipment']")
270+
.should("have.prop", "mode", imageMode);
271+
272+
cy.get("[ui5-icon][name='add-equipment']")
273+
.shadow()
274+
.find(".ui5-icon-root")
275+
.should("have.attr", "role", "img");
276+
});
277+
});

0 commit comments

Comments
 (0)