Skip to content

Commit 47c55be

Browse files
didip1000didip1000
authoredMar 13, 2025··
test(ui5-segmented-button): migrate tests to cypress (#11022)
·
v2.9.0-rc.1
1 parent 14e57c4 commit 47c55be

File tree

4 files changed

+250
-168
lines changed

4 files changed

+250
-168
lines changed
 

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

+215
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
import SegmentedButton from "../../src/SegmentedButton.js";
2+
import SegmentedButtonItem from "../../src/SegmentedButtonItem.js";
3+
4+
describe("SegmentedButton general interaction tests", () => {
5+
it("should have first item selected by default", () => {
6+
cy.mount(
7+
<SegmentedButton>
8+
<SegmentedButtonItem>First</SegmentedButtonItem>
9+
<SegmentedButtonItem>Second</SegmentedButtonItem>
10+
</SegmentedButton>
11+
);
12+
13+
cy.get("[ui5-segmented-button]")
14+
.as("segmentedButton");
15+
16+
cy.get<SegmentedButton>("@segmentedButton")
17+
.find("[ui5-segmented-button-item]")
18+
.first()
19+
.should("have.attr", "selected");
20+
});
21+
22+
it("should select second item with enter", () => {
23+
cy.mount(
24+
<SegmentedButton>
25+
<SegmentedButtonItem>First</SegmentedButtonItem>
26+
<SegmentedButtonItem>Second</SegmentedButtonItem>
27+
</SegmentedButton>
28+
);
29+
30+
cy.get("[ui5-segmented-button]")
31+
.as("segmentedButton");
32+
33+
cy.get<SegmentedButton>("@segmentedButton")
34+
.find("[ui5-segmented-button-item]")
35+
.as("items");
36+
37+
cy.get<SegmentedButtonItem>("@items")
38+
.ui5SegmentedButtonFocusFirstItem();
39+
40+
cy.realPress("ArrowRight");
41+
42+
cy.get<SegmentedButtonItem>("@items")
43+
.eq(1)
44+
.as("secondItem");
45+
46+
cy.get<SegmentedButtonItem>("@secondItem")
47+
.should("be.focused");
48+
49+
cy.get<SegmentedButtonItem>("@secondItem")
50+
.should("not.have.attr", "selected");
51+
52+
cy.realPress("Enter");
53+
54+
cy.get<SegmentedButtonItem>("@secondItem")
55+
.should("have.attr", "selected");
56+
});
57+
58+
it("should select second item with space", () => {
59+
cy.mount(
60+
<SegmentedButton>
61+
<SegmentedButtonItem>First</SegmentedButtonItem>
62+
<SegmentedButtonItem>Second</SegmentedButtonItem>
63+
</SegmentedButton>
64+
);
65+
66+
cy.get("[ui5-segmented-button]")
67+
.as("segmentedButton");
68+
69+
cy.get<SegmentedButton>("@segmentedButton")
70+
.find("[ui5-segmented-button-item]")
71+
.as("items");
72+
73+
cy.get<SegmentedButtonItem>("@items")
74+
.ui5SegmentedButtonFocusFirstItem();
75+
76+
cy.realPress("ArrowRight");
77+
78+
cy.get<SegmentedButtonItem>("@items")
79+
.eq(1)
80+
.as("secondItem");
81+
82+
cy.get<SegmentedButtonItem>("@secondItem")
83+
.should("be.focused");
84+
85+
cy.get<SegmentedButtonItem>("@secondItem")
86+
.should("not.have.attr", "selected");
87+
88+
cy.realPress("Space");
89+
90+
cy.get<SegmentedButtonItem>("@secondItem")
91+
.should("have.attr", "selected");
92+
});
93+
94+
it("should select last item with mouse", () => {
95+
cy.mount(
96+
<SegmentedButton>
97+
<SegmentedButtonItem>First</SegmentedButtonItem>
98+
<SegmentedButtonItem>Second</SegmentedButtonItem>
99+
<SegmentedButtonItem>Third</SegmentedButtonItem>
100+
</SegmentedButton>
101+
);
102+
103+
cy.get("[ui5-segmented-button]")
104+
.as("segmentedButton");
105+
106+
cy.get<SegmentedButton>("@segmentedButton")
107+
.find("[ui5-segmented-button-item]")
108+
.as("items");
109+
110+
cy.get<SegmentedButtonItem>("@items")
111+
.last()
112+
.as("lastItem");
113+
114+
cy.get<SegmentedButtonItem>("@lastItem")
115+
.ui5SegmentedButtonItemToggleSelect();
116+
});
117+
118+
it("should be able to select multple items in multiple selection mode", () => {
119+
cy.mount(
120+
<SegmentedButton selectionMode="Multiple">
121+
<SegmentedButtonItem selected={true}>First</SegmentedButtonItem>
122+
<SegmentedButtonItem>Second</SegmentedButtonItem>
123+
</SegmentedButton>
124+
);
125+
126+
cy.get("[ui5-segmented-button]")
127+
.as("segmentedButton");
128+
129+
cy.get<SegmentedButton>("@segmentedButton")
130+
.find("[ui5-segmented-button-item]")
131+
.as("items");
132+
133+
cy.get<SegmentedButtonItem>("@items")
134+
.first()
135+
.as("firstItem");
136+
137+
cy.get<SegmentedButtonItem>("@items")
138+
.last()
139+
.as("lastItem");
140+
141+
// Select second item
142+
cy.get<SegmentedButtonItem>("@lastItem")
143+
.ui5SegmentedButtonItemToggleSelect();
144+
145+
// First item should still be selected
146+
cy.get<SegmentedButtonItem>("@firstItem")
147+
.should("have.attr", "selected");
148+
});
149+
150+
it("should be able to deselect items in multiple selection mode", () => {
151+
cy.mount(
152+
<SegmentedButton selectionMode="Multiple">
153+
<SegmentedButtonItem selected={true}>First</SegmentedButtonItem>
154+
<SegmentedButtonItem selected={true}>Second</SegmentedButtonItem>
155+
</SegmentedButton>
156+
);
157+
158+
cy.get("[ui5-segmented-button]")
159+
.as("segmentedButton");
160+
161+
cy.get<SegmentedButton>("@segmentedButton")
162+
.find("[ui5-segmented-button-item]")
163+
.as("items");
164+
165+
cy.get<SegmentedButtonItem>("@items")
166+
.first()
167+
.as("firstItem");
168+
169+
cy.get<SegmentedButtonItem>("@items")
170+
.last()
171+
.as("lastItem");
172+
173+
const deselect = true;
174+
// Deselect first item
175+
cy.get<SegmentedButtonItem>("@firstItem")
176+
.ui5SegmentedButtonItemToggleSelect(deselect);
177+
178+
// Second item is still selected
179+
cy.get<SegmentedButtonItem>("@lastItem")
180+
.should("have.attr", "selected");
181+
});
182+
});
183+
184+
describe("Accessibility", () => {
185+
it("should have correct aria labels", () => {
186+
cy.mount(
187+
<>
188+
<SegmentedButton selectionMode="Multiple">
189+
<SegmentedButtonItem accessibleName="accessible text">First</SegmentedButtonItem>
190+
<SegmentedButtonItem accessibleNameRef="reference">Second</SegmentedButtonItem>
191+
</SegmentedButton>
192+
<span id="reference">accessible ref text</span>
193+
</>
194+
);
195+
196+
cy.get("[ui5-segmented-button]")
197+
.as("segmentedButton");
198+
199+
cy.get<SegmentedButton>("@segmentedButton")
200+
.find("[ui5-segmented-button-item]")
201+
.as("items");
202+
203+
cy.get<SegmentedButtonItem>("@items")
204+
.first()
205+
.shadow()
206+
.find("li")
207+
.should("have.attr", "aria-label", "accessible text");
208+
209+
cy.get<SegmentedButtonItem>("@items")
210+
.last()
211+
.shadow()
212+
.find("li")
213+
.should("have.attr", "aria-label", "accessible ref text");
214+
});
215+
});

‎packages/main/cypress/support/commands.ts

+3
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ import "./commands/Calendar.commands.js";
4444
import "./commands/ColorPalette.commands.js";
4545
import "./commands/ColorPicker.commands.js";
4646
import "./commands/Menu.commands.js";
47+
import "./commands/SegmentedButton.commands.js";
4748

4849
type SimulationDevices = "phone"
4950

@@ -62,6 +63,8 @@ declare global {
6263
ui5ColorPickerUpdateInput(name: string, value: string): Chainable<void>
6364
ui5ColorPaletteCheckSelectedColor(colorPaletteItem: string, values: {r: string, g: string, b: string, a: string}): Chainable<void>
6465
ui5ColorPaletteNavigateAndCheckSelectedColor(colorPalette: string, startIndex: number, key: string, expectedValue: string): Chainable<void>
66+
ui5SegmentedButtonItemToggleSelect(deselect?: boolean): Chainable<void>
67+
ui5SegmentedButtonFocusFirstItem(): Chainable<void>
6568
}
6669
}
6770
}

‎packages/main/cypress/support/commands/SegmentedButton.commands.ts

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import type SegmentedButtonItem from "../../../src/SegmentedButtonItem.js";
2+
3+
Cypress.Commands.add("ui5SegmentedButtonItemToggleSelect", { prevSubject: true }, (subject, deselect) => {
4+
const arg = deselect ? "have.attr" : "not.have.attr";
5+
const arg2 = deselect ? "not.have.attr" : "have.attr";
6+
7+
cy.wrap(subject)
8+
.as("segmentedButtonItem")
9+
.should("be.visible");
10+
11+
cy.get<SegmentedButtonItem>("@segmentedButtonItem")
12+
.should(arg, "selected");
13+
14+
cy.get<SegmentedButtonItem>("@segmentedButtonItem")
15+
.realClick();
16+
17+
cy.get<SegmentedButtonItem>("@segmentedButtonItem")
18+
.should(arg2, "selected");
19+
});
20+
21+
Cypress.Commands.add("ui5SegmentedButtonFocusFirstItem", { prevSubject: true }, subject => {
22+
cy.wrap(subject)
23+
.as("items")
24+
.should("be.visible");
25+
26+
cy.get<SegmentedButtonItem>("@items")
27+
.first()
28+
.realClick();
29+
30+
cy.get<SegmentedButtonItem>("@items")
31+
.should("be.focused");
32+
});

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

-168
This file was deleted.

0 commit comments

Comments
 (0)
Please sign in to comment.