Skip to content

Commit f598573

Browse files
Todor-adsTodor-ads
authored
test(ui5-time-picker): migrate tests to cypress (#11838)
1 parent af1eb0b commit f598573

File tree

3 files changed

+250
-240
lines changed

3 files changed

+250
-240
lines changed

‎packages/main/cypress/specs/TimePicker.mobile.cy.tsx

Lines changed: 231 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,231 @@
1+
import TimePicker from "../../src/TimePicker.js";
2+
import { setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
3+
4+
describe("TimePicker on phone - general interactions", () => {
5+
beforeEach(() => {
6+
cy.ui5SimulateDevice("phone");
7+
8+
// Set the language to Bulgarian for the tests
9+
cy.wrap({ setLanguage })
10+
.then(api => {
11+
return api.setLanguage("bg")
12+
})
13+
});
14+
15+
it("opening of popover with numeric inputs", () => {
16+
cy.mount(<TimePicker format-pattern="HH:mm:ss" value="11:12:13"></TimePicker>);
17+
18+
cy.get<TimePicker>("[ui5-time-picker]")
19+
.as("timePicker")
20+
.ui5TimePickerValueHelpIconPress();
21+
22+
cy.get<TimePicker>("@timePicker")
23+
.ui5TimePickerGetClock("hours")
24+
.should("have.prop", "valueNow", 11);
25+
26+
cy.get<TimePicker>("@timePicker")
27+
.ui5TimePickerGetClock("minutes")
28+
.should("have.prop", "valueNow", 12);
29+
30+
cy.get<TimePicker>("@timePicker")
31+
.ui5TimePickerGetClock("seconds")
32+
.should("have.prop", "valueNow", 13);
33+
});
34+
35+
it("value change with numeric inputs on OK and Cancel button press", () => {
36+
cy.mount(<TimePicker format-pattern="hh:mm:ss a" value="10:20:30 AM"></TimePicker>);
37+
38+
cy.get<TimePicker>("[ui5-time-picker]")
39+
.ui5TimePickerGetInnerInput()
40+
.should("have.value", "10:20:30 AM");
41+
42+
cy.get<TimePicker>("[ui5-time-picker]")
43+
.as("timePicker")
44+
.ui5TimePickerValueHelpIconPress();
45+
46+
cy.get<TimePicker>("@timePicker")
47+
.shadow()
48+
.find("[ui5-responsive-popover]")
49+
.find("[ui5-time-selection-clocks]")
50+
.shadow()
51+
.find("[ui5-segmented-button-item]")
52+
.last()
53+
.realClick()
54+
.should("be.focused");
55+
56+
cy.get<TimePicker>("@timePicker")
57+
.ui5TimePickerGetClock("hours")
58+
.should("have.prop", "valueNow", 10);
59+
60+
cy.get<TimePicker>("@timePicker")
61+
.ui5TimePickerGetClock("minutes")
62+
.should("have.prop", "valueNow", 20);
63+
64+
cy.get<TimePicker>("@timePicker")
65+
.ui5TimePickerGetClock("seconds")
66+
.should("have.prop", "valueNow", 30);
67+
68+
cy.get<TimePicker>("@timePicker")
69+
.ui5TimePickerGetSubmitButton()
70+
.realClick();
71+
72+
cy.get<TimePicker>("@timePicker")
73+
.ui5TimePickerGetInnerInput()
74+
.should("have.value", "10:20:30 PM");
75+
});
76+
77+
it("direct number typing", () => {
78+
cy.mount(<TimePicker></TimePicker>);
79+
80+
cy.get<TimePicker>("[ui5-time-picker]")
81+
.as("timePicker")
82+
.ui5TimePickerGetInnerInput()
83+
.realClick();
84+
85+
cy.get<TimePicker>("@timePicker")
86+
.ui5TimePickerGetInputsMobile()
87+
.first()
88+
.should("be.focused");
89+
90+
cy.realType("082413")
91+
92+
cy.get<TimePicker>("@timePicker")
93+
.shadow()
94+
.find("[ui5-popover]")
95+
.find("[ui5-time-selection-inputs]")
96+
.shadow()
97+
.find("[ui5-segmented-button-item]")
98+
.last()
99+
.realClick()
100+
.should("be.focused");
101+
102+
cy.get<TimePicker>("@timePicker")
103+
.shadow()
104+
.find("[ui5-popover]")
105+
.find("#submitInputs")
106+
.realClick();
107+
108+
cy.get<TimePicker>("@timePicker")
109+
.ui5TimePickerGetInnerInput()
110+
.should("have.value", "8:24:13 PM");
111+
112+
cy.get<TimePicker>("[ui5-time-picker]")
113+
.as("timePicker")
114+
.ui5TimePickerValueHelpIconPress();
115+
116+
cy.get<TimePicker>("@timePicker")
117+
.ui5TimePickerGetClock("hours")
118+
.should("have.prop", "valueNow", 8);
119+
120+
cy.get<TimePicker>("@timePicker")
121+
.ui5TimePickerGetClock("minutes")
122+
.should("have.prop", "valueNow", 24);
123+
124+
cy.get<TimePicker>("@timePicker")
125+
.ui5TimePickerGetClock("seconds")
126+
.should("have.prop", "valueNow", 13);
127+
128+
cy.realType("092233");
129+
130+
cy.get<TimePicker>("@timePicker")
131+
.ui5TimePickerGetSubmitButton()
132+
.realClick();
133+
134+
cy.get<TimePicker>("@timePicker")
135+
.ui5TimePickerGetInnerInput()
136+
.should("have.value", "9:22:33 PM");
137+
});
138+
});
139+
describe("TimePicker on phone - accessibility and other input attributes", () => {
140+
beforeEach(() => {
141+
cy.ui5SimulateDevice("phone");
142+
143+
// Set the language to Bulgarian for the tests
144+
cy.wrap({ setLanguage })
145+
.then(api => {
146+
return api.setLanguage("bg")
147+
})
148+
});
149+
150+
it("accessibility attributes of numeric inputs", () => {
151+
cy.mount(<TimePicker></TimePicker>);
152+
153+
cy.get<TimePicker>("[ui5-time-picker]")
154+
.as("timePicker")
155+
.ui5TimePickerGetInnerInput()
156+
.realClick();
157+
158+
cy.get<TimePicker>("@timePicker")
159+
.ui5TimePickerGetInputsMobile()
160+
.as("inputs")
161+
.should("have.length", 3);
162+
163+
cy.get<TimePicker>("@inputs")
164+
.first()
165+
.shadow()
166+
.find("input")
167+
.should("have.attr", "step", "1")
168+
.and("have.attr", "min", "1")
169+
.and("have.attr", "max", "12")
170+
.and("have.attr", "aria-label", "Please enter hours");
171+
172+
cy.get<TimePicker>("@inputs")
173+
.eq(1)
174+
.shadow()
175+
.find("input")
176+
.should("have.attr", "step", "1")
177+
.and("have.attr", "min", "0")
178+
.and("have.attr", "max", "59")
179+
.and("have.attr", "aria-label", "Please enter minutes");
180+
181+
cy.get<TimePicker>("@inputs")
182+
.last()
183+
.shadow()
184+
.find("input")
185+
.should("have.attr", "step", "1")
186+
.and("have.attr", "min", "0")
187+
.and("have.attr", "max", "59")
188+
.and("have.attr", "aria-label", "Please enter seconds");
189+
});
190+
191+
it("other important attributes of numeric inputs", () => {
192+
cy.mount(<TimePicker></TimePicker>);
193+
194+
cy.get<TimePicker>("[ui5-time-picker]")
195+
.as("timePicker")
196+
.ui5TimePickerGetInnerInput()
197+
.realClick();
198+
199+
cy.get<TimePicker>("@timePicker")
200+
.ui5TimePickerGetInputsMobile()
201+
.as("inputs")
202+
.should("have.length", 3);
203+
204+
cy.get<TimePicker>("@inputs")
205+
.first()
206+
.shadow()
207+
.find("input")
208+
.should("have.attr", "type", "number")
209+
.and("have.attr", "autocomplete", "off")
210+
.and("have.attr", "pattern", "[0-9]*")
211+
.and("have.attr", "inputmode", "numeric");
212+
213+
cy.get<TimePicker>("@inputs")
214+
.eq(1)
215+
.shadow()
216+
.find("input")
217+
.should("have.attr", "type", "number")
218+
.and("have.attr", "autocomplete", "off")
219+
.and("have.attr", "pattern", "[0-9]*")
220+
.and("have.attr", "inputmode", "numeric");
221+
222+
cy.get<TimePicker>("@inputs")
223+
.last()
224+
.shadow()
225+
.find("input")
226+
.should("have.attr", "type", "number")
227+
.and("have.attr", "autocomplete", "off")
228+
.and("have.attr", "pattern", "[0-9]*")
229+
.and("have.attr", "inputmode", "numeric");
230+
});
231+
});

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

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,21 @@ Cypress.Commands.add("ui5TimePickerGetClock", { prevSubject: true }, (subject, c
4141
.find(`ui5-toggle-spin-button[data-ui5-clock="${clockType}"]`);
4242
});
4343

44+
Cypress.Commands.add("ui5TimePickerGetInputsMobile", { prevSubject: true }, (subject) => {
45+
cy.wrap(subject)
46+
.as("timePicker");
47+
48+
cy.get("@timePicker")
49+
.should("not.have.attr", "open");
50+
51+
return cy.get("@timePicker")
52+
.shadow()
53+
.find("[ui5-popover]")
54+
.find("[ui5-time-selection-inputs]")
55+
.shadow()
56+
.find(`[ui5-input]`)
57+
});
58+
4459
Cypress.Commands.add("ui5TimePickerGetSubmitButton", { prevSubject: true }, subject => {
4560
cy.wrap(subject)
4661
.as("timePicker");
@@ -67,9 +82,12 @@ declare global {
6782
this: Chainable<JQuery<TimePicker>>,
6883
clockType: string
6984
): Chainable<JQuery<TimePicker>>;
85+
ui5TimePickerGetInputsMobile(
86+
this: Chainable<JQuery<TimePicker>>,
87+
): Chainable<JQuery<TimePicker>>;
7088
ui5TimePickerGetSubmitButton(
7189
this: Chainable<JQuery<TimePicker>>
7290
): Chainable<JQuery<Button>>;
7391
}
7492
}
75-
}
93+
}

0 commit comments

Comments
 (0)