Skip to content

Commit bc756b9

Browse files
NakataCodeNakataCode
authored
chore(ui5-toolbar): migrate wdio tests to cypress (#11861)
* chore(ui5-toolbar): migrate wdio tests to cypress * refactor: optimize tests * refactor: address comments
1 parent 005f17e commit bc756b9

File tree

6 files changed

+281
-142
lines changed

6 files changed

+281
-142
lines changed

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

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -321,6 +321,103 @@ describe("Toolbar general interaction", () => {
321321
.eq(3)
322322
.should("be.focused");
323323
});
324+
325+
it("Should render ui5-button by toolbar template, when slotting ui5-toolbar-button elements", () => {
326+
cy.mount(
327+
<Toolbar>
328+
<ToolbarButton
329+
icon="decline"
330+
stableDomRef="tb-button-decline"
331+
overflowPriority="NeverOverflow"
332+
text="Left 2"
333+
/>
334+
<ToolbarButton
335+
icon="employee"
336+
overflowPriority="NeverOverflow"
337+
text="Left 3"
338+
/>
339+
</Toolbar>
340+
);
341+
342+
cy.get("[ui5-toolbar]")
343+
.find("[ui5-toolbar-button]")
344+
.first()
345+
.shadow()
346+
.find("ui5-button")
347+
.should("have.prop", "tagName", "UI5-BUTTON");
348+
349+
cy.viewport(200, 400);
350+
351+
cy.get("[ui5-toolbar]")
352+
.find("[ui5-toolbar-button][overflow-priority='NeverOverflow']")
353+
.should("be.visible")
354+
.should("have.length", 2);
355+
});
356+
357+
it("Should call child events only once", () => {
358+
cy.mount(
359+
<>
360+
<Toolbar data-testid="clickCountToolbar">
361+
<ToolbarButton
362+
icon="add"
363+
text="Left 1 (long)"
364+
data-testid="clickCounter"
365+
/>
366+
<ToolbarButton
367+
icon="decline"
368+
text="Left 2"
369+
data-testid="clearCounter"
370+
/>
371+
</Toolbar>
372+
<input data-testid="input" defaultValue="0" />
373+
</>
374+
);
375+
376+
// Create stubs for event tracking
377+
cy.get("[data-testid='clickCountToolbar']")
378+
.as("toolbar")
379+
.then($toolbar => {
380+
$toolbar.get(0).addEventListener("click", cy.stub().as("toolbarClickStub"));
381+
});
382+
383+
cy.get("[data-testid='clickCounter']")
384+
.as("clickCounter")
385+
.then($button => {
386+
$button.get(0).addEventListener("click", cy.stub().as("counterClickStub"));
387+
});
388+
389+
cy.get("[data-testid='clearCounter']")
390+
.as("clearCounter")
391+
.then($button => {
392+
$button.get(0).addEventListener("click", cy.stub().as("clearClickStub"));
393+
});
394+
395+
// Set up input manipulation logic
396+
cy.get("@toolbar").then($toolbar => {
397+
$toolbar.get(0).addEventListener("click", (e) => {
398+
const input = document.querySelector("[data-testid='input']") as HTMLInputElement;
399+
const target = e.target as HTMLElement;
400+
401+
if (target.dataset.testid === "clearCounter") {
402+
input.value = "0";
403+
} else if (target.dataset.testid === "clickCounter") {
404+
let currentValue = parseInt(input.value);
405+
input.value = `${++currentValue}`;
406+
}
407+
});
408+
});
409+
410+
cy.get("[data-testid='input']").invoke("val", "0");
411+
412+
cy.get("@clickCounter").realClick();
413+
414+
cy.get("[data-testid='input']").should("have.prop", "value", "1");
415+
416+
cy.get("@toolbarClickStub").should("have.been.calledOnce");
417+
cy.get("@counterClickStub").should("have.been.calledOnce");
418+
419+
cy.get("[data-testid='input']").invoke("val", "0");
420+
});
324421
});
325422

326423
describe("Accessibility", () => {

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

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
import Toolbar from "../../src/Toolbar.js";
2+
import ToolbarButton from "../../src/ToolbarButton.js";
3+
import add from "@ui5/webcomponents-icons/dist/add.js";
4+
import employee from "@ui5/webcomponents-icons/dist/employee.js";
5+
6+
describe("Toolbar general interaction", () => {
7+
it("Should render the button with the correct text", () => {
8+
cy.mount(
9+
<Toolbar>
10+
<ToolbarButton
11+
text="Back"
12+
design="Emphasized"
13+
disabled
14+
icon={add}
15+
endIcon={employee}
16+
tooltip="Add"
17+
/>
18+
</Toolbar>
19+
);
20+
21+
cy.get("[ui5-toolbar]")
22+
.find("[ui5-toolbar-button]")
23+
.shadow()
24+
.find("[ui5-button]")
25+
.should("contain.text", "Back")
26+
.should("have.attr", "design", "Emphasized")
27+
.should("have.attr", "disabled", "disabled")
28+
.should("have.attr", "icon", "add")
29+
.should("have.attr", "end-icon", "employee")
30+
.should("have.attr", "tooltip", "Add");
31+
});
32+
33+
34+
it("Should render the button with the correct accessible name", () => {
35+
cy.mount(
36+
<Toolbar>
37+
<ToolbarButton
38+
accessibleName="Add"
39+
accessibleNameRef="btn"
40+
/>
41+
</Toolbar>
42+
);
43+
44+
cy.get("[ui5-toolbar]")
45+
.find("[ui5-toolbar-button][accessible-name]")
46+
.shadow()
47+
.find("[ui5-button]")
48+
.should("have.prop", "accessibleName", "Add")
49+
.should("have.attr", "accessible-name-ref", "btn");
50+
});
51+
52+
it("Should render the button with the correct accessibilityAttributes", () => {
53+
cy.mount(
54+
<Toolbar>
55+
<ToolbarButton
56+
accessibleName="Add"
57+
accessibilityAttributes={{ expanded: "true", controls: "btn", hasPopup: "dialog" }}
58+
/>
59+
</Toolbar>
60+
);
61+
62+
cy.get("[ui5-toolbar]")
63+
.find("[ui5-toolbar-button][accessible-name]")
64+
.shadow()
65+
.find("[ui5-button]")
66+
.invoke("prop", "accessibilityAttributes")
67+
.then((accessibilityAttributes) => {
68+
expect(accessibilityAttributes).to.have.property("expanded", "true");
69+
});
70+
});
71+
});

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

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import Toolbar from "../../src/Toolbar.js";
2+
import ToolbarSelect from "../../src/ToolbarSelect.js";
3+
import ToolbarSelectOption from "../../src/ToolbarSelectOption.js";
4+
5+
describe("Toolbar general interaction", () => {
6+
it("Should render the select with the correct attributes", () => {
7+
cy.mount(
8+
<Toolbar>
9+
<ToolbarSelect valueState="Critical">
10+
<ToolbarSelectOption>1</ToolbarSelectOption>
11+
<ToolbarSelectOption selected>2</ToolbarSelectOption>
12+
<ToolbarSelectOption>3</ToolbarSelectOption>
13+
</ToolbarSelect>
14+
</Toolbar>
15+
);
16+
17+
cy.get("[ui5-toolbar]")
18+
.find("[ui5-toolbar-select]")
19+
.shadow()
20+
.find("[ui5-select]")
21+
.should("have.attr", "value-state", "Critical");
22+
});
23+
24+
it("Should render the select with disabled property correctly", () => {
25+
cy.mount(
26+
<Toolbar>
27+
<ToolbarSelect disabled>
28+
<ToolbarSelectOption>1</ToolbarSelectOption>
29+
<ToolbarSelectOption selected>2</ToolbarSelectOption>
30+
<ToolbarSelectOption>3</ToolbarSelectOption>
31+
</ToolbarSelect>
32+
</Toolbar>
33+
);
34+
35+
cy.get("[ui5-toolbar]")
36+
.find("[ui5-toolbar-select][disabled]")
37+
.shadow()
38+
.find("[ui5-select]")
39+
.should("have.attr", "disabled", "disabled");
40+
});
41+
42+
it("Should render accessible name correctly", () => {
43+
cy.mount(
44+
<Toolbar>
45+
<ToolbarSelect
46+
accessibleName="Add"
47+
accessibleNameRef="title"
48+
>
49+
<ToolbarSelectOption>1</ToolbarSelectOption>
50+
<ToolbarSelectOption selected>2</ToolbarSelectOption>
51+
<ToolbarSelectOption>3</ToolbarSelectOption>
52+
</ToolbarSelect>
53+
</Toolbar>
54+
);
55+
56+
cy.get("[ui5-toolbar]")
57+
.find("[ui5-toolbar-select]")
58+
.shadow()
59+
.find("[ui5-select]")
60+
.should("have.attr", "accessible-name", "Add")
61+
.should("have.attr", "accessible-name-ref", "title");
62+
});
63+
64+
it("Should fire change event on selection change", () => {
65+
cy.mount(
66+
<>
67+
<Toolbar>
68+
<ToolbarSelect>
69+
<ToolbarSelectOption>1</ToolbarSelectOption>
70+
<ToolbarSelectOption selected>2</ToolbarSelectOption>
71+
<ToolbarSelectOption>3</ToolbarSelectOption>
72+
</ToolbarSelect>
73+
</Toolbar>
74+
<input placeholder="Changed" data-testid="selectResult" />
75+
</>
76+
);
77+
78+
cy.get("[ui5-toolbar-select]")
79+
.as("toolbarSelect")
80+
.then($select => {
81+
$select.get(0).addEventListener("ui5-change", cy.stub().as("changeStub"));
82+
});
83+
84+
cy.get("@toolbarSelect").then($select => {
85+
$select.get(0).addEventListener("ui5-change", (e) => {
86+
const input = document.querySelector("[data-testid='selectResult']") as HTMLInputElement;
87+
input.value = "1";
88+
});
89+
});
90+
91+
cy.get("[ui5-toolbar]")
92+
.find("[ui5-toolbar-select]")
93+
.shadow()
94+
.find("[ui5-select]")
95+
.realClick();
96+
97+
cy.get("[ui5-toolbar]")
98+
.find("[ui5-toolbar-select]")
99+
.shadow()
100+
.find("[ui5-select]")
101+
.realPress("ArrowUp");
102+
103+
cy.get("[ui5-toolbar]")
104+
.find("[ui5-toolbar-select]")
105+
.shadow()
106+
.find("[ui5-select]")
107+
.realPress("Enter");
108+
109+
cy.get("[data-testid='selectResult']").should("have.prop", "value", "1");
110+
111+
cy.get("@changeStub").should("have.been.called");
112+
});
113+
});

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

Lines changed: 0 additions & 48 deletions
This file was deleted.

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

Lines changed: 0 additions & 44 deletions
This file was deleted.

0 commit comments

Comments
 (0)