Skip to content

Commit ad5d7a5

Browse files
didip1000didip1000
authored
test(ui5-color-picker): migrate tests to cypress (#11038)
1 parent 712aae4 commit ad5d7a5

File tree

4 files changed

+247
-179
lines changed

4 files changed

+247
-179
lines changed

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

Lines changed: 232 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import ColorPicker from "../../src/ColorPicker.js";
22

3-
describe("Color Picker tests", () => {
3+
describe("Color Picker general interaction tests", () => {
44
it("should not display color channel inputs and alpha slider in simplified mode", () => {
55
cy.mount(<ColorPicker simplified={true}></ColorPicker>);
66

7-
cy.get("ui5-color-picker")
7+
cy.get("[ui5-color-picker]")
88
.as("colorPicker");
99

1010
cy.get<ColorPicker>("@colorPicker")
@@ -23,35 +23,104 @@ describe("Color Picker tests", () => {
2323
.should("not.exist");
2424
});
2525

26-
it("should toggle display to RGB or HSL when button is selected", () => {
26+
it("should fire change event when color is changed", () => {
27+
cy.mount(<ColorPicker></ColorPicker>);
28+
29+
cy.get("[ui5-color-picker]")
30+
.as("colorPicker");
31+
32+
cy.get<ColorPicker>("@colorPicker")
33+
.then($item => {
34+
$item.get(0).addEventListener("change", cy.stub().as("valueChanged"));
35+
});
36+
37+
cy.get<ColorPicker>("@colorPicker")
38+
.ui5ColorPickerUpdateInput("#red", "123");
39+
40+
cy.get("@valueChanged")
41+
.should("have.been.calledOnce");
42+
});
43+
44+
it("should correctly parse rgb value to color", () => {
45+
cy.mount(<ColorPicker value="rgb(0, 255, 0)"></ColorPicker>);
46+
47+
cy.get("[ui5-color-picker]")
48+
.ui5ColorPickerValidateInput(".ui5-color-picker-hex-input", "00ff00");
49+
});
50+
51+
it("should correctly parse rgba value color", () => {
52+
cy.mount(<ColorPicker value="rgba(255, 0, 255, 0.5)"></ColorPicker>);
53+
54+
cy.get("[ui5-color-picker]")
55+
.ui5ColorPickerValidateInput(".ui5-color-picker-hex-input", "ff00ff");
56+
57+
cy.get("[ui5-color-picker]")
58+
.ui5ColorPickerValidateInput("#alpha", "0.5");
59+
});
60+
61+
it("should correctly parse HEX value to color", () => {
62+
cy.mount(<ColorPicker value="#fafafa"></ColorPicker>);
63+
64+
cy.get("[ui5-color-picker]")
65+
.ui5ColorPickerValidateInput(".ui5-color-picker-hex-input", "fafafa");
66+
});
67+
68+
it("should correctly parse short form HEX value to color", () => {
69+
cy.mount(<ColorPicker value="#123"></ColorPicker>);
70+
71+
cy.get("[ui5-color-picker]")
72+
.ui5ColorPickerValidateInput(".ui5-color-picker-hex-input", "112233");
73+
});
74+
75+
it("should correctly parse CSS color value to color", () => {
76+
cy.mount(<ColorPicker value="gray"></ColorPicker>);
77+
78+
cy.get("[ui5-color-picker]")
79+
.ui5ColorPickerValidateInput(".ui5-color-picker-hex-input", "808080");
80+
});
81+
82+
it("should toggle display from RGB to HSL when arrow button is selected", () => {
2783
cy.mount(<ColorPicker value="rgba(112, 178, 225, 1)"></ColorPicker>);
2884

29-
cy.get("ui5-color-picker")
85+
cy.get("[ui5-color-picker]")
3086
.as("colorPicker");
3187

3288
cy.get<ColorPicker>("@colorPicker")
3389
.ui5ColorPickerToggleColorMode();
3490

3591
cy.get<ColorPicker>("@colorPicker")
36-
.shadow()
37-
.find("#hue")
38-
.should("have.attr", "value", "205");
92+
.ui5ColorPickerValidateInput("#hue", "205");
3993

4094
cy.get<ColorPicker>("@colorPicker")
41-
.shadow()
42-
.find("#saturation")
43-
.should("have.attr", "value", "65");
95+
.ui5ColorPickerValidateInput("#saturation", "65");
4496

4597
cy.get<ColorPicker>("@colorPicker")
46-
.shadow()
47-
.find("#light")
48-
.should("have.attr", "value", "66");
98+
.ui5ColorPickerValidateInput("#light", "66");
99+
});
100+
101+
it("should update value when color is changed via the RGB input fields", () => {
102+
cy.mount(<ColorPicker value="rgba(62, 128, 99, 1)"></ColorPicker>);
103+
104+
cy.get("[ui5-color-picker]")
105+
.as("colorPicker");
106+
107+
cy.get<ColorPicker>("@colorPicker")
108+
.ui5ColorPickerUpdateInput("#red", "123");
109+
110+
cy.get<ColorPicker>("@colorPicker")
111+
.ui5ColorPickerUpdateInput("#green", "56");
112+
113+
cy.get<ColorPicker>("@colorPicker")
114+
.ui5ColorPickerUpdateInput("#blue", "93");
115+
116+
cy.get<ColorPicker>("@colorPicker")
117+
.should("have.value", "rgba(123, 56, 93, 1)");
49118
});
50119

51-
it("should update value when hue is changed via the input field", () => {
120+
it("should update value when color is changed via the Hue input field", () => {
52121
cy.mount(<ColorPicker value="rgba(112, 178, 225, 1)"></ColorPicker>);
53122

54-
cy.get("ui5-color-picker")
123+
cy.get("[ui5-color-picker]")
55124
.as("colorPicker");
56125

57126
cy.get<ColorPicker>("@colorPicker")
@@ -61,13 +130,13 @@ describe("Color Picker tests", () => {
61130
.ui5ColorPickerUpdateInput("#hue", "130");
62131

63132
cy.get<ColorPicker>("@colorPicker")
64-
.should("have.attr", "value", "rgba(112, 225, 131, 1)");
133+
.should("have.value", "rgba(112, 225, 131, 1)");
65134
});
66135

67-
it("should update value when saturation is changed via the input field", () => {
136+
it("should update value when color is changed via the Saturation input field", () => {
68137
cy.mount(<ColorPicker value="rgba(112, 225, 131, 1)"></ColorPicker>);
69138

70-
cy.get("ui5-color-picker")
139+
cy.get("[ui5-color-picker]")
71140
.as("colorPicker");
72141

73142
cy.get<ColorPicker>("@colorPicker")
@@ -77,13 +146,13 @@ describe("Color Picker tests", () => {
77146
.ui5ColorPickerUpdateInput("#saturation", "44");
78147

79148
cy.get<ColorPicker>("@colorPicker")
80-
.should("have.attr", "value", "rgba(130, 206, 143, 1)");
149+
.should("have.value", "rgba(130, 206, 143, 1)");
81150
});
82151

83-
it("should update value when light is changed via the input field", () => {
152+
it("should update value when color is changed via the Light input field", () => {
84153
cy.mount(<ColorPicker value="rgba(130, 206, 143, 1)"></ColorPicker>);
85154

86-
cy.get("ui5-color-picker")
155+
cy.get("[ui5-color-picker]")
87156
.as("colorPicker");
88157

89158
cy.get<ColorPicker>("@colorPicker")
@@ -93,13 +162,126 @@ describe("Color Picker tests", () => {
93162
.ui5ColorPickerUpdateInput("#light", "30");
94163

95164
cy.get<ColorPicker>("@colorPicker")
96-
.should("have.attr", "value", "rgba(43, 110, 54, 1)");
165+
.should("have.value", "rgba(43, 110, 54, 1)");
166+
});
167+
168+
it("should update value when color is changed via the HEX input field", () => {
169+
cy.mount(<ColorPicker value="rgba(123, 56, 93, 1)"></ColorPicker>);
170+
171+
cy.get("[ui5-color-picker]")
172+
.as("colorPicker");
173+
174+
cy.get<ColorPicker>("@colorPicker")
175+
.ui5ColorPickerUpdateInput(".ui5-color-picker-hex-input", "7be");
176+
177+
cy.get<ColorPicker>("@colorPicker")
178+
.should("have.value", "rgba(119, 187, 238, 1)");
179+
});
180+
181+
it("should update value when alpha is changed via the Alpha input field", () => {
182+
cy.mount(<ColorPicker value="rgba(232, 128, 222, 0.89)"></ColorPicker>);
183+
184+
cy.get("[ui5-color-picker]")
185+
.as("colorPicker");
186+
187+
cy.get<ColorPicker>("@colorPicker")
188+
.ui5ColorPickerUpdateInput("#alpha", "0.30");
189+
190+
cy.get<ColorPicker>("@colorPicker")
191+
.should("have.value", "rgba(232, 128, 222, 0.3)");
192+
});
193+
194+
it("should update value when color is changed via the Hue slider", () => {
195+
cy.mount(<ColorPicker value="rgba(70, 64, 191, 1)"></ColorPicker>);
196+
197+
cy.get("[ui5-color-picker]")
198+
.as("colorPicker");
199+
200+
cy.get<ColorPicker>("@colorPicker")
201+
.shadow()
202+
.find(".ui5-color-picker-hue-slider")
203+
.realClick({ position: "center" });
204+
205+
cy.get<ColorPicker>("@colorPicker")
206+
.should("have.value", "rgba(64, 191, 189, 1)");
207+
});
208+
209+
it("should update value when alpha is changed via the Alpha slider", () => {
210+
cy.mount(<ColorPicker value="rgba(70, 64, 191, 0)"></ColorPicker>);
211+
212+
cy.get("[ui5-color-picker]")
213+
.as("colorPicker");
214+
215+
cy.get<ColorPicker>("@colorPicker")
216+
.shadow()
217+
.find(".ui5-color-picker-alpha-slider")
218+
.realClick({ position: "center" });
219+
220+
cy.get<ColorPicker>("@colorPicker")
221+
.should("have.value", "rgba(70, 64, 191, 0.5)");
222+
});
223+
224+
it("should update Saturation & Light inputs when selecting color from main color grid", () => {
225+
cy.mount(<ColorPicker value="rgba(136, 64, 101, 1)"></ColorPicker>);
226+
227+
cy.get("[ui5-color-picker]")
228+
.as("colorPicker");
229+
230+
cy.get<ColorPicker>("@colorPicker")
231+
.ui5ColorPickerToggleColorMode();
232+
233+
cy.get<ColorPicker>("@colorPicker")
234+
.ui5ColorPickerValidateInput("#hue", "329");
235+
236+
cy.get<ColorPicker>("@colorPicker")
237+
.ui5ColorPickerValidateInput("#saturation", "36");
238+
239+
cy.get<ColorPicker>("@colorPicker")
240+
.ui5ColorPickerValidateInput("#light", "39");
241+
242+
cy.get<ColorPicker>("@colorPicker")
243+
.shadow()
244+
.find(".ui5-color-picker-main-color")
245+
.realClick({ x: 200, y: 50 });
246+
247+
cy.get<ColorPicker>("@colorPicker")
248+
.ui5ColorPickerValidateInput("#hue", "329");
249+
250+
cy.get<ColorPicker>("@colorPicker")
251+
.ui5ColorPickerValidateInput("#saturation", "81");
252+
253+
cy.get<ColorPicker>("@colorPicker")
254+
.ui5ColorPickerValidateInput("#light", "78");
255+
});
256+
});
257+
258+
describe("Color Picker accessibility tests", () => {
259+
it("should show correct accessibility info for RGB inputs", () => {
260+
cy.mount(<ColorPicker></ColorPicker>);
261+
262+
cy.get("[ui5-color-picker]")
263+
.as("colorPicker");
264+
265+
cy.get<ColorPicker>("@colorPicker")
266+
.shadow()
267+
.find("#red")
268+
.should("have.attr", "accessible-name", "Red");
269+
270+
cy.get<ColorPicker>("@colorPicker")
271+
.shadow()
272+
.find("#green")
273+
.should("have.attr", "accessible-name", "Green");
274+
275+
cy.get<ColorPicker>("@colorPicker")
276+
.shadow()
277+
.find("#blue")
278+
.should("have.attr", "accessible-name", "Blue");
97279
});
98280

99281
it("should show correct accessibility info for HSL inputs", () => {
100282
cy.mount(<ColorPicker></ColorPicker>);
101283

102-
cy.get("ui5-color-picker")
284+
cy.get("[ui5-color-picker]")
103285
.as("colorPicker");
104286

105287
cy.get<ColorPicker>("@colorPicker")
@@ -120,4 +302,31 @@ describe("Color Picker tests", () => {
120302
.find("#light")
121303
.should("have.attr", "accessible-name", "Light");
122304
});
305+
306+
it("should show correct accessibility info for sliders and other input", () => {
307+
cy.mount(<ColorPicker></ColorPicker>);
308+
309+
cy.get("[ui5-color-picker]")
310+
.as("colorPicker");
311+
312+
cy.get<ColorPicker>("@colorPicker")
313+
.shadow()
314+
.find("#alpha")
315+
.should("have.attr", "accessible-name", "Alpha");
316+
317+
cy.get<ColorPicker>("@colorPicker")
318+
.shadow()
319+
.find(".ui5-color-picker-hex-input")
320+
.should("have.attr", "accessible-name", "Hexadecimal");
321+
322+
cy.get<ColorPicker>("@colorPicker")
323+
.shadow()
324+
.find(".ui5-color-picker-hue-slider")
325+
.should("have.attr", "accessible-name", "Hue control");
326+
327+
cy.get<ColorPicker>("@colorPicker")
328+
.shadow()
329+
.find(".ui5-color-picker-alpha-slider")
330+
.should("have.attr", "accessible-name", "Alpha control");
331+
});
123332
});

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ declare global {
6363
ui5CalendarGetMonth(calendarSelector: string, timestamp: string): Chainable<JQuery<HTMLElement>>
6464
ui5ColorPickerToggleColorMode(): Chainable<void>
6565
ui5ColorPickerUpdateInput(name: string, value: string): Chainable<void>
66+
ui5ColorPickerValidateInput(name: string, value: string): Chainable<void>
6667
ui5ColorPaletteCheckSelectedColor(colorPaletteItem: string, values: {r: string, g: string, b: string, a: string}): Chainable<void>
6768
ui5ColorPaletteNavigateAndCheckSelectedColor(colorPalette: string, startIndex: number, key: string, expectedValue: string): Chainable<void>
6869
ui5DatePickerGetInnerInput(): Chainable<JQuery<HTMLElement>>

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,17 @@ Cypress.Commands.add("ui5ColorPickerUpdateInput", { prevSubject: true }, (subjec
2222
.realType(value)
2323
.realPress("Enter");
2424
});
25+
26+
Cypress.Commands.add("ui5ColorPickerValidateInput", { prevSubject: true }, (subject, name, value) => {
27+
cy.wrap(subject)
28+
.as("colorPicker")
29+
.should("be.visible");
30+
31+
cy.get("@colorPicker")
32+
.shadow()
33+
.find(name)
34+
.as("input");
35+
36+
cy.get("@input")
37+
.should("have.value", value);
38+
});

0 commit comments

Comments
 (0)