Skip to content

Commit b4749c3

Browse files
hinzzxhinzzx
authored
test(ui5-time-picker): migrate tests to cypress (#11732)
Previously our ui5-time-picker's tests were written using WebDriver IO (wdio) technology. With this change we migrate our ui5-time-picker's tests to Cypress and also clear old outdated ones.
1 parent 6082798 commit b4749c3

File tree

4 files changed

+468
-262
lines changed

4 files changed

+468
-262
lines changed

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

Lines changed: 392 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,392 @@
1+
import "../../src/Assets.js";
2+
import { setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
3+
import TimePicker from "../../src/TimePicker.js";
4+
import Label from "../../src/Label.js";
5+
import ResponsivePopover from "../../src/ResponsivePopover.js";
6+
7+
function pressKeyNTimes(key: "ArrowDown" | "ArrowUp" | "Space" | "Tab" | "Enter", n: number) {
8+
for (let i = 0; i < n; i++) {
9+
cy.realPress(key);
10+
}
11+
}
12+
13+
describe("TimePicker Tests", () => {
14+
it("input receives value in format pattern depending on the set language", () => {
15+
cy.wrap({ setLanguage })
16+
.then(api => {
17+
return api.setLanguage("bg")
18+
})
19+
20+
cy.mount(<TimePicker value="03:16:16"></TimePicker>);
21+
22+
cy.get<TimePicker>("[ui5-time-picker]")
23+
.as("timePicker");
24+
25+
cy.get<TimePicker>("@timePicker")
26+
.ui5TimePickerGetInnerInput()
27+
.should("have.value", "3:16:16 ч.");
28+
29+
cy.wrap({ setLanguage })
30+
.then(api => {
31+
return api.setLanguage("en");
32+
});
33+
});
34+
35+
it("tests clocks value", () => {
36+
cy.mount(<TimePicker formatPattern="HH:mm:ss" value="11:12:13"></TimePicker>);
37+
38+
cy.get<TimePicker>("[ui5-time-picker]")
39+
.as("timePicker")
40+
.ui5TimePickerValueHelpIconPress();
41+
42+
cy.get<TimePicker>("@timePicker")
43+
.ui5TimePickerGetClock("hours")
44+
.should("have.prop", "valueNow", 11);
45+
46+
cy.get<TimePicker>("@timePicker")
47+
.ui5TimePickerGetClock("minutes")
48+
.should("have.prop", "valueNow", 12);
49+
50+
cy.get<TimePicker>("@timePicker")
51+
.ui5TimePickerGetClock("seconds")
52+
.should("have.prop", "valueNow", 13);
53+
});
54+
55+
it("tests clocks submit value", () => {
56+
cy.mount(<TimePicker formatPattern="hh:mm:ss" value="12:00:01"></TimePicker>);
57+
58+
cy.get<TimePicker>("[ui5-time-picker]")
59+
.as("timePicker")
60+
.ui5TimePickerValueHelpIconPress();
61+
62+
cy.get<TimePicker>("@timePicker")
63+
.ui5TimePickerGetClock("hours")
64+
.realClick()
65+
.should("be.focused")
66+
67+
68+
pressKeyNTimes("ArrowDown", 2);
69+
cy.realPress("Space");
70+
71+
cy.get<TimePicker>("@timePicker")
72+
.ui5TimePickerGetClock("minutes");
73+
74+
pressKeyNTimes("ArrowDown", 5);
75+
pressKeyNTimes("ArrowUp", 2);
76+
77+
cy.realPress("Space");
78+
79+
cy.get<TimePicker>("@timePicker")
80+
.ui5TimePickerGetClock("seconds");
81+
82+
pressKeyNTimes("ArrowUp", 4);
83+
84+
cy.realPress("Tab");
85+
cy.realPress("Enter");
86+
87+
cy.get<TimePicker>("@timePicker")
88+
.should("have.value", "10:57:05");
89+
});
90+
91+
it("tests submit wrong value", () => {
92+
cy.mount(<TimePicker></TimePicker>);
93+
94+
cy.get<TimePicker>("[ui5-time-picker]")
95+
.as("timePicker")
96+
.ui5TimePickerGetInnerInput()
97+
.realClick()
98+
.should("be.focused");
99+
100+
cy.realType("123123123");
101+
cy.realPress("Enter");
102+
103+
cy.get<TimePicker>("@timePicker")
104+
.shadow()
105+
.find("[ui5-datetime-input]")
106+
.should("have.attr", "value-state", "Negative");
107+
});
108+
109+
it("tests change event", () => {
110+
cy.mount(<TimePicker formatPattern="HH:mm" value="12:00" onChange={cy.stub().as("changeStub")}></TimePicker>);
111+
112+
cy.get<TimePicker>("[ui5-time-picker]")
113+
.as("timePicker");
114+
115+
// Open picker and submit without changes
116+
cy.get<TimePicker>("@timePicker")
117+
.ui5TimePickerValueHelpIconPress();
118+
119+
cy.get<TimePicker>("@timePicker")
120+
.ui5TimePickerGetSubmitButton()
121+
.realClick();
122+
123+
// Assert no change event was fired
124+
cy.get("@changeStub").should("not.have.been.called");
125+
126+
// Open picker, change time and submit
127+
cy.get<TimePicker>("@timePicker")
128+
.ui5TimePickerValueHelpIconPress();
129+
130+
cy.get<TimePicker>("@timePicker")
131+
.ui5TimePickerGetClock("hours")
132+
.realClick()
133+
.should("be.focused")
134+
135+
cy.realPress("PageDown");
136+
137+
pressKeyNTimes("ArrowDown", 2);
138+
cy.realPress("Space");
139+
140+
cy.get<TimePicker>("@timePicker")
141+
.ui5TimePickerGetSubmitButton()
142+
.realClick();
143+
144+
// Assert change event was fired once
145+
cy.get("@changeStub").should("have.been.calledOnce");
146+
147+
// Open picker and submit without changes
148+
cy.get<TimePicker>("@timePicker")
149+
.ui5TimePickerValueHelpIconPress();
150+
151+
cy.get<TimePicker>("@timePicker")
152+
.ui5TimePickerGetSubmitButton()
153+
.realClick();
154+
155+
// Assert change event was not fired again
156+
cy.get("@changeStub").should("have.been.calledOnce");
157+
158+
// Open picker, change time and submit
159+
cy.get<TimePicker>("@timePicker")
160+
.ui5TimePickerValueHelpIconPress();
161+
162+
cy.get<TimePicker>("@timePicker")
163+
.ui5TimePickerGetClock("hours")
164+
.realClick()
165+
.should("be.focused")
166+
.realPress("ArrowDown") // select 00
167+
.realPress("Space");
168+
169+
cy.get<TimePicker>("@timePicker")
170+
.ui5TimePickerGetSubmitButton()
171+
.realClick();
172+
173+
// Assert change event was fired again
174+
cy.get("@changeStub").should("have.been.calledTwice");
175+
176+
// Test direct input change
177+
cy.get<TimePicker>("@timePicker")
178+
.ui5TimePickerGetInnerInput()
179+
.realClick()
180+
.should("be.focused")
181+
.realPress("Backspace")
182+
.realType("7")
183+
.realPress("Enter");
184+
185+
// Assert change event was fired again
186+
cy.get("@changeStub").should("have.been.calledThrice");
187+
});
188+
189+
it("tests value state", () => {
190+
cy.mount(<TimePicker></TimePicker>);
191+
192+
cy.get<TimePicker>("[ui5-time-picker]")
193+
.as("timePicker")
194+
.ui5TimePickerGetInnerInput()
195+
.realClick();
196+
197+
// Clear the input
198+
cy.get<TimePicker>("@timePicker")
199+
.ui5TimePickerGetInnerInput()
200+
.realClick({ clickCount: 2 })
201+
.realPress("Backspace");
202+
203+
cy.get("body").realClick(); // Click outside to trigger blur
204+
205+
cy.get<TimePicker>("@timePicker")
206+
.shadow()
207+
.find("[ui5-datetime-input]")
208+
.should("have.attr", "value-state", "None");
209+
});
210+
211+
it("tests input keyboard handling", () => {
212+
cy.mount(<TimePicker formatPattern="hh:mm:ss" value="02:40:05"></TimePicker>);
213+
214+
cy.get<TimePicker>("[ui5-time-picker]")
215+
.as("timePicker")
216+
.ui5TimePickerGetInnerInput()
217+
.realClick()
218+
.should("be.focused")
219+
.realPress(["Shift", "PageUp"]);
220+
221+
cy.get<TimePicker>("@timePicker")
222+
.ui5TimePickerGetInnerInput()
223+
.should("have.value", "02:41:05");
224+
225+
cy.get<TimePicker>("@timePicker")
226+
.ui5TimePickerGetInnerInput()
227+
.realClick()
228+
.should("be.focused")
229+
.realPress(["Shift", "PageDown"]);
230+
231+
cy.get<TimePicker>("@timePicker")
232+
.ui5TimePickerGetInnerInput()
233+
.should("have.value", "02:40:05");
234+
235+
cy.get<TimePicker>("@timePicker")
236+
.ui5TimePickerGetInnerInput()
237+
.realClick()
238+
.should("be.focused")
239+
.realPress("PageUp");
240+
241+
cy.get<TimePicker>("@timePicker")
242+
.ui5TimePickerGetInnerInput()
243+
.should("have.value", "03:40:05");
244+
245+
cy.get<TimePicker>("@timePicker")
246+
.ui5TimePickerGetInnerInput()
247+
.realClick()
248+
.should("be.focused")
249+
.realPress("PageDown");
250+
251+
cy.get<TimePicker>("@timePicker")
252+
.ui5TimePickerGetInnerInput()
253+
.should("have.value", "02:40:05");
254+
255+
cy.get<TimePicker>("@timePicker")
256+
.ui5TimePickerGetInnerInput()
257+
.realClick()
258+
.should("be.focused")
259+
.realPress(["Shift", "Control", "PageUp"]);
260+
261+
cy.get<TimePicker>("@timePicker")
262+
.ui5TimePickerGetInnerInput()
263+
.should("have.value", "02:40:06");
264+
265+
cy.get<TimePicker>("@timePicker")
266+
.ui5TimePickerGetInnerInput()
267+
.realClick()
268+
.should("be.focused")
269+
.realPress(["Shift", "Control", "PageDown"]);
270+
271+
cy.get<TimePicker>("@timePicker")
272+
.ui5TimePickerGetInnerInput()
273+
.should("have.value", "02:40:05");
274+
});
275+
276+
it("test closing the picker with the keyboard", () => {
277+
cy.mount(<TimePicker></TimePicker>);
278+
279+
cy.get<TimePicker>("[ui5-time-picker]")
280+
.as("timePicker")
281+
.ui5TimePickerValueHelpIconPress();
282+
283+
cy.realPress(["Alt", "ArrowUp"]);
284+
285+
cy.get<TimePicker>("@timePicker")
286+
.should("not.have.attr", "open");
287+
});
288+
289+
it("the value 'now' returns the current time, instead of the string 'now'", () => {
290+
cy.mount(<TimePicker></TimePicker>);
291+
292+
cy.get<TimePicker>("[ui5-time-picker]")
293+
.as("timePicker")
294+
.ui5TimePickerGetInnerInput()
295+
.realClick()
296+
.should("be.focused")
297+
.realType("now")
298+
.realPress("Enter");
299+
300+
cy.get<TimePicker>("@timePicker")
301+
.ui5TimePickerGetInnerInput()
302+
.should("not.have.value", "now");
303+
});
304+
305+
it("opening time picker's value-help, sets the 'open' property to true", () => {
306+
cy.mount(<TimePicker></TimePicker>);
307+
308+
cy.get<TimePicker>("[ui5-time-picker]")
309+
.as("timePicker")
310+
.ui5TimePickerValueHelpIconPress();
311+
312+
cy.get<TimePicker>("@timePicker")
313+
.should("have.attr", "open");
314+
});
315+
316+
it("setting time picker's open property to true, opens the value-help", () => {
317+
cy.mount(<TimePicker></TimePicker>);
318+
319+
cy.get<TimePicker>("[ui5-time-picker]")
320+
.as("timePicker");
321+
322+
cy.get<TimePicker>("@timePicker")
323+
.invoke("prop", "open", true);
324+
325+
cy.get<TimePicker>("@timePicker")
326+
.shadow()
327+
.find<ResponsivePopover>("[ui5-responsive-popover]")
328+
.ui5ResponsivePopoverOpened()
329+
});
330+
331+
it("picker popover should have accessible name", () => {
332+
cy.mount(<TimePicker></TimePicker>);
333+
334+
cy.get<TimePicker>("[ui5-time-picker]")
335+
.as("timePicker")
336+
.ui5TimePickerGetInnerInput()
337+
.realClick()
338+
.should("be.focused")
339+
.realPress("F4");
340+
341+
cy.get<TimePicker>("@timePicker")
342+
.shadow()
343+
.find<ResponsivePopover>("[ui5-responsive-popover]")
344+
.ui5ResponsivePopoverOpened();
345+
346+
cy.get<TimePicker>("@timePicker")
347+
.shadow()
348+
.find<ResponsivePopover>("[ui5-responsive-popover]")
349+
.should("have.attr", "accessible-name", "Choose Time");
350+
});
351+
352+
it("input should have accessible name", () => {
353+
cy.mount(
354+
<>
355+
<Label id="timeLabel">Pick a time</Label>
356+
<TimePicker accessibleNameRef="timeLabel"></TimePicker>
357+
</>
358+
);
359+
360+
cy.get<TimePicker>("[ui5-time-picker]")
361+
.ui5TimePickerGetInnerInput()
362+
.should("have.attr", "aria-label", "Pick a time");
363+
});
364+
365+
it("should apply aria-label from the accessibleName property", () => {
366+
cy.mount(<TimePicker accessibleName="Pick a time"></TimePicker>);
367+
368+
cy.get<TimePicker>("[ui5-time-picker]")
369+
.ui5TimePickerGetInnerInput()
370+
.should("have.attr", "aria-label", "Pick a time");
371+
});
372+
373+
it("displays value state message header in popover when value state is set", () => {
374+
cy.mount(<TimePicker valueState="Negative"></TimePicker>);
375+
376+
cy.get<TimePicker>("[ui5-time-picker]")
377+
.as("timePicker")
378+
.ui5TimePickerValueHelpIconPress();
379+
380+
cy.get<TimePicker>("@timePicker")
381+
.shadow()
382+
.find<ResponsivePopover>("[ui5-responsive-popover]")
383+
.ui5ResponsivePopoverOpened();
384+
385+
cy.get<TimePicker>("@timePicker")
386+
.shadow()
387+
.find<ResponsivePopover>("[ui5-responsive-popover]")
388+
.find(".ui5-valuestatemessage-header")
389+
.should("exist")
390+
.and("have.class", "ui5-valuestatemessage--error");
391+
});
392+
});

0 commit comments

Comments
 (0)