Skip to content

Commit f9e8b33

Browse files
NHristov-sapNHristov-sap
authored
test(ui5-time-picker-clock): TimePickerClock cypress tests (#11680)
Cypress tests for TimePickerClock component
1 parent cbd2a54 commit f9e8b33

File tree

1 file changed

+202
-0
lines changed

1 file changed

+202
-0
lines changed

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

Lines changed: 202 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,202 @@
1+
import TimePickerClock from "../../src/TimePickerClock.js";
2+
import Input from "../../src/Input.js";
3+
4+
5+
describe("Clock API", () => {
6+
7+
it("'disabled' property", () => {
8+
cy.mount(
9+
<>
10+
<div style="display: inline-block; text-align: center; width: 18rem; height: 18rem; touch-action: none; margin: 2rem;">
11+
<TimePickerClock id="myHours12" label="myHours12" itemMin={1} itemMax={12} displayStep={1} selectedValue={12} active></TimePickerClock>
12+
</div>
13+
<div style="display: inline-block; text-align: center; width: 18rem; height: 18rem; touch-action: none; margin: 2rem;">
14+
<TimePickerClock id="myHours12Disabled" label="myHours12 (disabled)" itemMin={1} itemMax={12} displayStep={1} selectedValue={12} active disabled></TimePickerClock>
15+
</div>
16+
</>
17+
);
18+
19+
cy.get("#myHours12")
20+
.shadow()
21+
.find(".ui5-tp-clock-cover")
22+
.as("enabled");
23+
24+
cy.get("#myHours12Disabled")
25+
.shadow()
26+
.find(".ui5-tp-clock-cover")
27+
.as("disabled");
28+
29+
cy.get("@disabled")
30+
.realClick({x: 210, y: 50});
31+
32+
cy.get("#myHours12Disabled")
33+
.should("have.prop", "selectedValue", 12);
34+
35+
cy.get("@enabled")
36+
.realClick({x: 210, y: 50});
37+
38+
cy.get("#myHours12")
39+
.should("have.prop", "selectedValue", 1);
40+
});
41+
42+
it("'active' property", () => {
43+
cy.mount(
44+
<>
45+
<div style="display: inline-block; text-align: center; width: 18rem; height: 18rem; touch-action: none; margin: 2rem;">
46+
<TimePickerClock id="myMinutes" label="myMinutes" itemMin={1} itemMax={60} lastItemReplacement={0} selectedValue={0} active></TimePickerClock>
47+
</div>
48+
<div style="display: inline-block; text-align: center; width: 18rem; height: 18rem; touch-action: none; margin: 2rem;">
49+
<TimePickerClock id="myMinutesInactive" label="myMinutes" itemMin={1} itemMax={60} lastItemReplacement={0} selectedValue={0}></TimePickerClock>
50+
</div>
51+
</>
52+
);
53+
54+
cy.get("#myMinutes")
55+
.shadow()
56+
.find(".ui5-tp-clock")
57+
.should("be.visible");
58+
59+
cy.get("#myMinutesInactive")
60+
.shadow()
61+
.find(".ui5-tp-clock")
62+
.should("not.be.visible");
63+
});
64+
65+
it("'displayStep' and 'valueStep' properties", () => {
66+
cy.mount(
67+
<>
68+
<div style="display: inline-block; text-align: center; width: 18rem; height: 18rem; touch-action: none; margin: 2rem;">
69+
<TimePickerClock id="myHours12" label="myHours12" itemMin={1} itemMax={12} displayStep={1} selectedValue={12} active></TimePickerClock>
70+
</div>
71+
<div style="display: inline-block; text-align: center; width: 18rem; height: 18rem; touch-action: none; margin: 2rem;">
72+
<TimePickerClock id="myMinutes" label="myMinutes" itemMin={1} itemMax={60} lastItemReplacement={0} selectedValue={0} active></TimePickerClock>
73+
</div>
74+
<div style="display: inline-block; text-align: center; width: 18rem; height: 18rem; touch-action: none; margin: 2rem;">
75+
<TimePickerClock id="myMinutes10" label="myMinutes10" itemMin={1} itemMax={60} lastItemReplacement={0} selectedValue={10} displayStep={10} valueStep={10} active></TimePickerClock>
76+
</div>
77+
</>
78+
);
79+
80+
cy.get("#myHours12")
81+
.shadow()
82+
.find(".ui5-tp-clock-items .ui5-tp-clock-item:not(.ui5-tp-clock-item-with-marker) .ui5-tp-clock-number")
83+
.should("have.length", 12);
84+
85+
cy.get("#myMinutes")
86+
.shadow()
87+
.find(".ui5-tp-clock-items .ui5-tp-clock-item:not(.ui5-tp-clock-item-with-marker) .ui5-tp-clock-number")
88+
.should("have.length", 12);
89+
cy.get("#myMinutes10")
90+
.shadow()
91+
.find(".ui5-tp-clock-items .ui5-tp-clock-item:not(.ui5-tp-clock-item-with-marker) .ui5-tp-clock-number")
92+
.should("have.length", 6);
93+
});
94+
95+
it("'lastItemReplacement' and 'prependZero' properties", () => {
96+
cy.mount(
97+
<>
98+
<div style="display: inline-block; text-align: center; width: 18rem; height: 18rem; touch-action: none; margin: 2rem;">
99+
<TimePickerClock id="myHours24" label="myHours24" itemMin={1} itemMax={24} lastItemReplacement={0} displayStep={1} selectedValue={1} prependZero active></TimePickerClock>
100+
</div>
101+
<div style="display: inline-block; text-align: center; width: 18rem; height: 18rem; touch-action: none; margin: 2rem;">
102+
<TimePickerClock id="myMinutes" label="myMinutes" itemMin={1} itemMax={60} lastItemReplacement={0} selectedValue={0} active></TimePickerClock>
103+
</div>
104+
</>
105+
);
106+
107+
cy.get("#myHours24")
108+
.shadow()
109+
.find(".ui5-tp-clock-items .ui5-tp-clock-item:not(.ui5-tp-clock-item-with-marker) .ui5-tp-clock-number")
110+
.last()
111+
.should("have.text", "0");
112+
cy.get("#myMinutes")
113+
.shadow()
114+
.find(".ui5-tp-clock-items .ui5-tp-clock-item:not(.ui5-tp-clock-item-with-marker) .ui5-tp-clock-number")
115+
.last()
116+
.should("have.text", "0");
117+
});
118+
119+
it("should not select value when clicking outside clock numbers", () => {
120+
cy.mount(
121+
<>
122+
<div style="display: inline-block; text-align: center; width: 18rem; height: 18rem; touch-action: none; margin: 2rem;">
123+
<TimePickerClock id="myHours12" label="myHours12" itemMin={1} itemMax={12} displayStep={1} selectedValue={12} active></TimePickerClock>
124+
</div>
125+
</>
126+
);
127+
128+
cy.get("#myHours12")
129+
.shadow()
130+
.find(".ui5-tp-clock-cover")
131+
.realClick({x: 200, y: 200});
132+
133+
cy.get("#myHours12")
134+
.should("have.prop", "selectedValue", 12);
135+
});
136+
137+
it("should keep selected value after clicking same number", () => {
138+
cy.mount(
139+
<>
140+
<div style="display: inline-block; text-align: center; width: 18rem; height: 18rem; touch-action: none; margin: 2rem;">
141+
<TimePickerClock id="myHours12" label="myHours12" itemMin={1} itemMax={12} displayStep={1} selectedValue={12} active></TimePickerClock>
142+
</div>
143+
</>
144+
);
145+
146+
cy.get("#myHours12")
147+
.shadow()
148+
.find(".ui5-tp-clock-cover")
149+
.realClick({x: 45, y: 110});
150+
151+
cy.get("#myHours12")
152+
.invoke("prop", "selectedValue")
153+
.then(val => {
154+
cy.get("#myHours12")
155+
.shadow()
156+
.find(".ui5-tp-clock-cover")
157+
.realClick({x: 45, y: 110});
158+
159+
cy.get("#myHours12")
160+
.should("have.prop", "selectedValue", val);
161+
});
162+
});
163+
});
164+
165+
describe("Clock item selection", () => {
166+
it("select clock item and 'change' event", () => {
167+
cy.mount(
168+
<>
169+
<div style="display: inline-block; text-align: center; width: 18rem; height: 18rem; touch-action: none; margin: 2rem;">
170+
<TimePickerClock id="myHours12" label="myHours12" itemMin={1} itemMax={12} displayStep={1} selectedValue={12} active></TimePickerClock>
171+
</div>
172+
</>
173+
);
174+
175+
cy.get("#myHours12").then(tpc => {
176+
tpc.get(0).addEventListener("ui5-change", cy.stub().as("changed"));
177+
});
178+
179+
cy.get("#myHours12")
180+
.shadow()
181+
.find(".ui5-tp-clock-cover")
182+
.as("hours12Cover");
183+
184+
cy.get("@hours12Cover")
185+
.realClick({x: 210, y: 50});
186+
187+
cy.get("#myHours12")
188+
.should("have.prop", "selectedValue", 1);
189+
190+
cy.get("@changed")
191+
.should("have.been.calledOnce");
192+
193+
cy.get("@hours12Cover")
194+
.realClick({x: 150, y: 35});
195+
196+
cy.get("#myHours12")
197+
.should("have.prop", "selectedValue", 12);
198+
199+
cy.get("@changed")
200+
.should("have.been.calledTwice");
201+
});
202+
});

0 commit comments

Comments
 (0)