itemengine-cypress-automation 1.0.38 → 1.0.39
Sign up to get free protection for your applications and to get access to all the features.
@@ -8,40 +8,6 @@ describe('Create item page: Feedback scale: Additional settings', () => {
|
|
8
8
|
cy.loginAs('admin');
|
9
9
|
});
|
10
10
|
|
11
|
-
describe('Additional settings accordion', () => {
|
12
|
-
abortEarlySetup();
|
13
|
-
before(() => {
|
14
|
-
cy.log('Navigate to Feedback scale question type');
|
15
|
-
feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
|
16
|
-
});
|
17
|
-
|
18
|
-
feedbackScalePage.tests.verifyAdditonalSettingsAccordionProperties();
|
19
|
-
});
|
20
|
-
|
21
|
-
describe('Additional settings: Student response area and layout', () => {
|
22
|
-
abortEarlySetup();
|
23
|
-
before(() => {
|
24
|
-
cy.log('Navigate to Feedback scale question type');
|
25
|
-
feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
|
26
|
-
feedbackScalePage.steps.expandAdditonalSettings();
|
27
|
-
});
|
28
|
-
|
29
|
-
it('\'Student response area and layout\' label should be displayed', () => {
|
30
|
-
utilities.verifyInnerText(feedbackScalePage.studentResponseAreaAndLayoutLabel(), 'Student response area and layout');
|
31
|
-
utilities.verifyElementVisibilityState(feedbackScalePage.studentResponseAreaAndLayoutLabel(), 'visible');
|
32
|
-
});
|
33
|
-
|
34
|
-
it('CSS of \'Student response area and layout\' section', { tags: 'css' }, () => {
|
35
|
-
utilities.verifyCSS(feedbackScalePage.studentResponseAreaAndLayoutLabel(), {
|
36
|
-
'color': css.color.labels,
|
37
|
-
'font-size': css.fontSize.default,
|
38
|
-
'font-weight': css.fontWeight.semibold
|
39
|
-
});
|
40
|
-
});
|
41
|
-
|
42
|
-
//Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
|
43
|
-
});
|
44
|
-
|
45
11
|
describe('Additional settings: \'Display additional information\' - edit tab', () => {
|
46
12
|
abortEarlySetup();
|
47
13
|
before(() => {
|
@@ -193,80 +159,4 @@ describe('Create item page: Feedback scale: Additional settings', () => {
|
|
193
159
|
feedbackScalePage.steps.addInputToDescribeYourExperienceInputField('It was a challenging questionnaire')
|
194
160
|
});
|
195
161
|
});
|
196
|
-
|
197
|
-
describe('Additional settings: Font size contents', () => {
|
198
|
-
abortEarlySetup();
|
199
|
-
before(() => {
|
200
|
-
cy.log('Navigate to Feedback scale question type');
|
201
|
-
feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
|
202
|
-
feedbackScalePage.steps.expandAdditonalSettings();
|
203
|
-
});
|
204
|
-
|
205
|
-
feedbackScalePage.tests.verifyFontSizeSectionContents();
|
206
|
-
});
|
207
|
-
|
208
|
-
describe('Additional settings: Font size contents preview tab section', () => {
|
209
|
-
const fontSizeDropdownOptions = ['Default', 'Small', 'Normal', 'Large', 'Extra large', 'Huge'];
|
210
|
-
const fontSizes = ['16px', '12px', '14px', '17px', '20px', '24px'];
|
211
|
-
const moreInfoFontSizes = { 'Default': '14px', 'Small': '12px', 'Normal': '14px', 'Large': '17px', 'Extra large': '20px', 'Huge': '24px' };
|
212
|
-
abortEarlySetup();
|
213
|
-
before(() => {
|
214
|
-
cy.log('Navigate to Feedback scale question type');
|
215
|
-
feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
|
216
|
-
feedbackScalePage.steps.addQuestionInstructions();
|
217
|
-
feedbackScalePage.steps.expandAdditonalSettings();
|
218
|
-
feedbackScalePage.steps.checkAllowStudentsToAddCommentCheckbox();
|
219
|
-
});
|
220
|
-
|
221
|
-
fontSizeDropdownOptions.forEach((option, fontsIndex) => {
|
222
|
-
it(`When the user selects \'${option}\' option from the Font size dropdown, then font size of the preview contents should be changed to ${option} in the preview tab`, () => {
|
223
|
-
feedbackScalePage.steps.selectFontSizeOptionFromFontSizeDropdown(fontsIndex)
|
224
|
-
utilities.verifyInnerText(feedbackScalePage.fontSizeDropdown(), `${option}`);
|
225
|
-
feedbackScalePage.steps.switchToPreviewTab();
|
226
|
-
utilities.verifyCSS(feedbackScalePage.questionInstructionsText(), {
|
227
|
-
'font-size': fontSizes[fontsIndex]
|
228
|
-
});
|
229
|
-
utilities.verifyCSS(feedbackScalePage.feedbackButton(), {
|
230
|
-
'font-size': fontSizes[fontsIndex]
|
231
|
-
});
|
232
|
-
feedbackScalePage.steps.hoverOnFeedBackButton();
|
233
|
-
utilities.verifyCSS(feedbackScalePage.tooltipText(), {
|
234
|
-
'font-size': fontSizes[fontsIndex]
|
235
|
-
});
|
236
|
-
feedbackScalePage.steps.hoverAwayFromFeedbackButton();
|
237
|
-
utilities.verifyCSS(feedbackScalePage.moreInfoButton().find('.customize_info_label'), {
|
238
|
-
'font-size': moreInfoFontSizes[option]
|
239
|
-
});
|
240
|
-
feedbackScalePage.steps.expandMoreInfoAccordion();
|
241
|
-
utilities.verifyCSS(feedbackScalePage.moreInfoFeedbackLabel(), {
|
242
|
-
'font-size': moreInfoFontSizes[option]
|
243
|
-
});
|
244
|
-
utilities.verifyCSS(feedbackScalePage.moreInfoTooltipText(), {
|
245
|
-
'font-size': moreInfoFontSizes[option]
|
246
|
-
});
|
247
|
-
utilities.verifyCSS(feedbackScalePage.moreInfoDescriptionText(), {
|
248
|
-
'font-size': moreInfoFontSizes[option]
|
249
|
-
});
|
250
|
-
//TODO: will need to update below assertions after https://redmine.zeuslearning.com/issues/539201 gets resolved
|
251
|
-
utilities.verifyCSS(feedbackScalePage.describeYourExperienceLabel(), {
|
252
|
-
'font-size': fontSizes[fontsIndex]
|
253
|
-
});
|
254
|
-
utilities.verifyCSS(feedbackScalePage.describeYourExperienceInputField(), {
|
255
|
-
'font-size': fontSizes[fontsIndex]
|
256
|
-
});
|
257
|
-
feedbackScalePage.steps.switchToEditTab();
|
258
|
-
});
|
259
|
-
});
|
260
|
-
});
|
261
|
-
|
262
|
-
describe('Additional Settings: Details section', () => {
|
263
|
-
abortEarlySetup();
|
264
|
-
before(() => {
|
265
|
-
cy.log('Navigate to Feedback scale question type');
|
266
|
-
feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
|
267
|
-
feedbackScalePage.steps.expandAdditonalSettings();
|
268
|
-
});
|
269
|
-
|
270
|
-
feedbackScalePage.tests.verifyDetailsSection();
|
271
|
-
});
|
272
162
|
});
|
@@ -0,0 +1,120 @@
|
|
1
|
+
import { feedbackScalePage } from "../../../pages/feedbackScalePage";
|
2
|
+
import abortEarlySetup from "../../../support/helpers/abortEarly";
|
3
|
+
import utilities from "../../../support/helpers/utilities";
|
4
|
+
const css = Cypress.env('css');
|
5
|
+
|
6
|
+
describe('Create item page: Feedback scale: Additional settings', () => {
|
7
|
+
before(() => {
|
8
|
+
cy.loginAs('admin');
|
9
|
+
});
|
10
|
+
|
11
|
+
describe('Additional settings accordion', () => {
|
12
|
+
abortEarlySetup();
|
13
|
+
before(() => {
|
14
|
+
cy.log('Navigate to Feedback scale question type');
|
15
|
+
feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
|
16
|
+
});
|
17
|
+
|
18
|
+
feedbackScalePage.tests.verifyAdditonalSettingsAccordionProperties();
|
19
|
+
});
|
20
|
+
|
21
|
+
describe('Additional settings: Student response area and layout', () => {
|
22
|
+
abortEarlySetup();
|
23
|
+
before(() => {
|
24
|
+
cy.log('Navigate to Feedback scale question type');
|
25
|
+
feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
|
26
|
+
feedbackScalePage.steps.expandAdditonalSettings();
|
27
|
+
});
|
28
|
+
|
29
|
+
it('\'Student response area and layout\' label should be displayed', () => {
|
30
|
+
utilities.verifyInnerText(feedbackScalePage.studentResponseAreaAndLayoutLabel(), 'Student response area and layout');
|
31
|
+
utilities.verifyElementVisibilityState(feedbackScalePage.studentResponseAreaAndLayoutLabel(), 'visible');
|
32
|
+
});
|
33
|
+
|
34
|
+
it('CSS of \'Student response area and layout\' section', { tags: 'css' }, () => {
|
35
|
+
utilities.verifyCSS(feedbackScalePage.studentResponseAreaAndLayoutLabel(), {
|
36
|
+
'color': css.color.labels,
|
37
|
+
'font-size': css.fontSize.default,
|
38
|
+
'font-weight': css.fontWeight.semibold
|
39
|
+
});
|
40
|
+
});
|
41
|
+
|
42
|
+
//Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
|
43
|
+
});
|
44
|
+
|
45
|
+
describe('Additional settings: Font size contents', () => {
|
46
|
+
abortEarlySetup();
|
47
|
+
before(() => {
|
48
|
+
cy.log('Navigate to Feedback scale question type');
|
49
|
+
feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
|
50
|
+
feedbackScalePage.steps.expandAdditonalSettings();
|
51
|
+
});
|
52
|
+
|
53
|
+
feedbackScalePage.tests.verifyFontSizeSectionContents();
|
54
|
+
});
|
55
|
+
|
56
|
+
describe('Additional settings: Font size contents preview tab section', () => {
|
57
|
+
const fontSizeDropdownOptions = ['Default', 'Small', 'Normal', 'Large', 'Extra large', 'Huge'];
|
58
|
+
const fontSizes = ['16px', '12px', '14px', '17px', '20px', '24px'];
|
59
|
+
const moreInfoFontSizes = { 'Default': '14px', 'Small': '12px', 'Normal': '14px', 'Large': '17px', 'Extra large': '20px', 'Huge': '24px' };
|
60
|
+
abortEarlySetup();
|
61
|
+
before(() => {
|
62
|
+
cy.log('Navigate to Feedback scale question type');
|
63
|
+
feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
|
64
|
+
feedbackScalePage.steps.addQuestionInstructions();
|
65
|
+
feedbackScalePage.steps.expandAdditonalSettings();
|
66
|
+
feedbackScalePage.steps.checkAllowStudentsToAddCommentCheckbox();
|
67
|
+
});
|
68
|
+
|
69
|
+
fontSizeDropdownOptions.forEach((option, fontsIndex) => {
|
70
|
+
it(`When the user selects \'${option}\' option from the Font size dropdown, then font size of the preview contents should be changed to ${option} in the preview tab`, () => {
|
71
|
+
feedbackScalePage.steps.selectFontSizeOptionFromFontSizeDropdown(fontsIndex)
|
72
|
+
utilities.verifyInnerText(feedbackScalePage.fontSizeDropdown(), `${option}`);
|
73
|
+
feedbackScalePage.steps.switchToPreviewTab();
|
74
|
+
utilities.verifyCSS(feedbackScalePage.questionInstructionsText(), {
|
75
|
+
'font-size': fontSizes[fontsIndex]
|
76
|
+
});
|
77
|
+
utilities.verifyCSS(feedbackScalePage.feedbackButton(), {
|
78
|
+
'font-size': fontSizes[fontsIndex]
|
79
|
+
});
|
80
|
+
feedbackScalePage.steps.hoverOnFeedBackButton();
|
81
|
+
utilities.verifyCSS(feedbackScalePage.tooltipText(), {
|
82
|
+
'font-size': fontSizes[fontsIndex]
|
83
|
+
});
|
84
|
+
feedbackScalePage.steps.hoverAwayFromFeedbackButton();
|
85
|
+
utilities.verifyCSS(feedbackScalePage.moreInfoButton().find('.customize_info_label'), {
|
86
|
+
'font-size': moreInfoFontSizes[option]
|
87
|
+
});
|
88
|
+
feedbackScalePage.steps.expandMoreInfoAccordion();
|
89
|
+
utilities.verifyCSS(feedbackScalePage.moreInfoFeedbackLabel(), {
|
90
|
+
'font-size': moreInfoFontSizes[option]
|
91
|
+
});
|
92
|
+
utilities.verifyCSS(feedbackScalePage.moreInfoTooltipText(), {
|
93
|
+
'font-size': moreInfoFontSizes[option]
|
94
|
+
});
|
95
|
+
utilities.verifyCSS(feedbackScalePage.moreInfoDescriptionText(), {
|
96
|
+
'font-size': moreInfoFontSizes[option]
|
97
|
+
});
|
98
|
+
//TODO: will need to update below assertions after https://redmine.zeuslearning.com/issues/539201 gets resolved
|
99
|
+
utilities.verifyCSS(feedbackScalePage.describeYourExperienceLabel(), {
|
100
|
+
'font-size': fontSizes[fontsIndex]
|
101
|
+
});
|
102
|
+
utilities.verifyCSS(feedbackScalePage.describeYourExperienceInputField(), {
|
103
|
+
'font-size': fontSizes[fontsIndex]
|
104
|
+
});
|
105
|
+
feedbackScalePage.steps.switchToEditTab();
|
106
|
+
});
|
107
|
+
});
|
108
|
+
});
|
109
|
+
|
110
|
+
describe('Additional Settings: Details section', () => {
|
111
|
+
abortEarlySetup();
|
112
|
+
before(() => {
|
113
|
+
cy.log('Navigate to Feedback scale question type');
|
114
|
+
feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
|
115
|
+
feedbackScalePage.steps.expandAdditonalSettings();
|
116
|
+
});
|
117
|
+
|
118
|
+
feedbackScalePage.tests.verifyDetailsSection();
|
119
|
+
});
|
120
|
+
});
|
@@ -0,0 +1,237 @@
|
|
1
|
+
import { colorPopupComponent } from "../../../pages/components";
|
2
|
+
import { feedbackScalePage } from "../../../pages/feedbackScalePage";
|
3
|
+
import abortEarlySetup from "../../../support/helpers/abortEarly";
|
4
|
+
import utilities from "../../../support/helpers/utilities";
|
5
|
+
const css = Cypress.env('css');
|
6
|
+
|
7
|
+
describe('Create item page: Feedback scale: Color popup', () => {
|
8
|
+
before(() => {
|
9
|
+
cy.loginAs('admin');
|
10
|
+
});
|
11
|
+
|
12
|
+
describe('Color popup contents', () => {
|
13
|
+
abortEarlySetup();
|
14
|
+
before(() => {
|
15
|
+
cy.log('Navigate to Feedback scale question type');
|
16
|
+
feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
|
17
|
+
});
|
18
|
+
|
19
|
+
it('When the user clicks on the color block present in an option accordion, a color popup should be displayed', () => {
|
20
|
+
colorPopupComponent.steps.clickOnColorBlock(0);
|
21
|
+
colorPopupComponent.steps.verifyColorPopupIsDisplayed();
|
22
|
+
});
|
23
|
+
|
24
|
+
it('A title \'Select color\' should be displayed on the color popup', () => {
|
25
|
+
colorPopupComponent.steps.verifyColorPopupSelectColorTitle();
|
26
|
+
});
|
27
|
+
|
28
|
+
it('A \'Color saturation palette\' should be displayed on the color popup along with a color picker and the color picker should be set on the selected color', () => {
|
29
|
+
colorPopupComponent.steps.verifyColorSaturationPaletteAndPicker();
|
30
|
+
colorPopupComponent.steps.verifySaturationPaletteColor('rgb(230, 77, 26)');
|
31
|
+
|
32
|
+
});
|
33
|
+
|
34
|
+
it('A \'Color hue palette\' should be displayed on the color popup along with a color picker and the color picker should be set on the selected color', () => {
|
35
|
+
colorPopupComponent.steps.verifyColorHuePaletteAndPicker();
|
36
|
+
colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 64, 0)');
|
37
|
+
});
|
38
|
+
|
39
|
+
it('A \'Selected color\' label and color block displaying the selected color should be displayed', () => {
|
40
|
+
colorPopupComponent.steps.verifySelectedColorLabelAndSelectedColorBlock();
|
41
|
+
colorPopupComponent.steps.verifySelectedColorBlock('rgb(229, 76, 25)');
|
42
|
+
});
|
43
|
+
|
44
|
+
it('A \'Hex\' label and input field with pre-filled hex code value of the selected color should be displayed', () => {
|
45
|
+
colorPopupComponent.steps.verifyHexLabelAndInputField();
|
46
|
+
colorPopupComponent.steps.verifyHexValue('#E54C19');
|
47
|
+
});
|
48
|
+
|
49
|
+
it('A \'Opacity\' label, a slider at 100% and an input field with pre-filled value - 100% should be displayed', () => {
|
50
|
+
colorPopupComponent.steps.verifyOpacityLabelSliderAndInputField();
|
51
|
+
colorPopupComponent.steps.verifyOpacityInputFieldValue('100');
|
52
|
+
colorPopupComponent.steps.verifyOpacitySliderValue('100');
|
53
|
+
});
|
54
|
+
|
55
|
+
it('A \'Recommended colors\' label along with recommended color blocks - Red, Yellow, Green, Black should be displayed', () => {
|
56
|
+
colorPopupComponent.steps.verifyRecommendedColorsLabel();
|
57
|
+
colorPopupComponent.steps.verifyRecommendedColorBlocksLabel();
|
58
|
+
});
|
59
|
+
|
60
|
+
it('When the selected color is one of the recommended color, then a \'selected\' icon should appear on the respective recommended color block', () => {
|
61
|
+
colorPopupComponent.steps.verifyRecommendedColorBlockSelectedState(0);
|
62
|
+
});
|
63
|
+
|
64
|
+
it('\'Cancel\' and \'Ok\' buttons should be displayed', () => {
|
65
|
+
colorPopupComponent.steps.verifyColorPopupCancelButton();
|
66
|
+
colorPopupComponent.steps.verifyColorPopupOkButton();
|
67
|
+
});
|
68
|
+
|
69
|
+
colorPopupComponent.tests.verifyCSSAnda11yOfColourPopupContents();
|
70
|
+
});
|
71
|
+
|
72
|
+
describe('Color popup - updating the selected color', () => {
|
73
|
+
abortEarlySetup();
|
74
|
+
before(() => {
|
75
|
+
cy.log('Navigate to Feedback scale question type');
|
76
|
+
feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
|
77
|
+
colorPopupComponent.steps.clickOnColorBlock(0);
|
78
|
+
});
|
79
|
+
|
80
|
+
it('When the user moves the color picker in the color saturation palette, color in the selected color block and the hex code should change, color in the hue color palette and the opacity value should not change', () => {
|
81
|
+
colorPopupComponent.steps.clickInColorSaturationPalette();
|
82
|
+
colorPopupComponent.steps.verifySelectedColorBlock('rgb(122, 76, 61)');
|
83
|
+
colorPopupComponent.steps.verifySaturationPaletteColor('rgb(122, 77, 62)');
|
84
|
+
colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 64, 0)');
|
85
|
+
colorPopupComponent.steps.verifyHexValue('#7a4c3d');
|
86
|
+
colorPopupComponent.steps.verifyOpacityInputFieldValue('100');
|
87
|
+
colorPopupComponent.steps.verifyOpacitySliderValue('100');
|
88
|
+
});
|
89
|
+
|
90
|
+
it('When the user has set a custom color apart from the recommended colors, then the selected icon from the recommended color block should get removed', () => {
|
91
|
+
utilities.verifyElementVisibilityState(colorPopupComponent.recommendedColorBlockSelectedIcon(), 'notExist');
|
92
|
+
});
|
93
|
+
|
94
|
+
it('When the user moves the color picker in the color hue palette, color in the selected color block, the hex code and the saturation color palette should change and the opacity value should not change', () => {
|
95
|
+
colorPopupComponent.steps.clickInColorHuePalette();
|
96
|
+
colorPopupComponent.steps.verifySelectedColorBlock('rgb(61, 122, 122)');
|
97
|
+
colorPopupComponent.steps.verifyHuePaletteColor('rgb(0, 255, 255)');
|
98
|
+
colorPopupComponent.steps.verifyHexValue('#3d7a7a');
|
99
|
+
colorPopupComponent.steps.verifyOpacityInputFieldValue('100');
|
100
|
+
colorPopupComponent.steps.verifyOpacitySliderValue('100');
|
101
|
+
});
|
102
|
+
|
103
|
+
it('When the user changes the color using hex code, the color in color saturation palette and color hue palette should change and the opacity value should not change', () => {
|
104
|
+
colorPopupComponent.steps.addInputToHexInputField('#ff0000');
|
105
|
+
colorPopupComponent.steps.verifyHexValue('#ff0000');
|
106
|
+
colorPopupComponent.steps.verifySaturationPaletteColor('rgb(255, 0, 0)');
|
107
|
+
colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
|
108
|
+
colorPopupComponent.steps.verifyOpacityInputFieldValue('100');
|
109
|
+
colorPopupComponent.steps.verifyOpacitySliderValue('100');
|
110
|
+
});
|
111
|
+
// failing due to https://redmine.zeuslearning.com/issues/541405
|
112
|
+
it('When the user changes the opacity slider value, value in the opacity input field and the opacity of the selected color should change and the color in color saturation palette and color hue palette should not change', () => {
|
113
|
+
colorPopupComponent.steps.clickOnOpacitySlider();
|
114
|
+
colorPopupComponent.steps.verifyOpacityInputFieldValue('50');
|
115
|
+
colorPopupComponent.steps.verifyOpacitySliderValue('50');
|
116
|
+
colorPopupComponent.steps.verifyHexValue('#ff0000');
|
117
|
+
colorPopupComponent.steps.verifySaturationPaletteColor('rgb(255, 0, 0)');
|
118
|
+
colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
|
119
|
+
colorPopupComponent.steps.verifySelectedColorBlock('rgba(255, 0, 0, 0.5)')
|
120
|
+
});
|
121
|
+
|
122
|
+
it('When the user changes value in the opacity input field, the slider value and the opacity of the selected color should change and the color in color saturation palette and color hue palette should not change', () => {
|
123
|
+
colorPopupComponent.steps.addInputToOpacityInputField('20');
|
124
|
+
colorPopupComponent.steps.verifyOpacityInputFieldValue('20');
|
125
|
+
colorPopupComponent.steps.verifyOpacitySliderValue('20');
|
126
|
+
colorPopupComponent.steps.verifyHexValue('#ff0000');
|
127
|
+
colorPopupComponent.steps.verifySaturationPaletteColor('rgb(255, 0, 0)');
|
128
|
+
colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
|
129
|
+
colorPopupComponent.steps.verifySelectedColorBlock('rgba(255, 0, 0, 0.2)');
|
130
|
+
});
|
131
|
+
|
132
|
+
it('When the user selects a color block from the recommended colors, the selected color should change, the opacity values should not change and the selected icon should be displayed on the newly selected recommended color', () => {
|
133
|
+
colorPopupComponent.steps.selectRecommendedColorBlock(1);
|
134
|
+
colorPopupComponent.steps.verifyRecommendedColorBlockSelectedState(1);
|
135
|
+
colorPopupComponent.steps.verifyOpacityInputFieldValue('20');
|
136
|
+
colorPopupComponent.steps.verifyOpacitySliderValue('20');
|
137
|
+
colorPopupComponent.steps.verifyHexValue('#FFF019');
|
138
|
+
colorPopupComponent.steps.verifySaturationPaletteColor('rgb(255, 240, 26)');
|
139
|
+
colorPopupComponent.steps.verifyHuePaletteColor('rgb(255, 238, 0)');
|
140
|
+
colorPopupComponent.steps.verifySelectedColorBlock('rgba(255, 240, 25, 0.2)')
|
141
|
+
});
|
142
|
+
});
|
143
|
+
|
144
|
+
describe('Color popup - \'Cancel\' and \'Ok\' buttons', () => {
|
145
|
+
abortEarlySetup();
|
146
|
+
before(() => {
|
147
|
+
cy.log('Navigate to Feedback scale question type');
|
148
|
+
feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
|
149
|
+
colorPopupComponent.steps.clickOnColorBlock(0);
|
150
|
+
});
|
151
|
+
|
152
|
+
it('When the user modifies the selected color in the color popup and clicks on \'Cancel\' button, then the popup should close, the color block should not change and the modifications in the color popup should not persist', () => {
|
153
|
+
colorPopupComponent.steps.addInputToHexInputField('#ff0000');
|
154
|
+
colorPopupComponent.steps.addInputToOpacityInputField('20');
|
155
|
+
colorPopupComponent.steps.clickOnCancelButton();
|
156
|
+
utilities.verifyElementVisibilityState(feedbackScalePage.dialogBox(), 'notExist');
|
157
|
+
colorPopupComponent.steps.verifyColorBlockInOptionAccordion(0, 'rgb(229, 76, 25)');
|
158
|
+
});
|
159
|
+
|
160
|
+
// failing due to https://redmine.zeuslearning.com/issues/541462
|
161
|
+
it('When the user modifies the selected color in the color popup and clicks on \'Ok\' button, then the popup should close, the color block should change to the new selected color and the modifications in the color popup should persist', () => {
|
162
|
+
cy.log('Pre-step: clicking on the color block to open color popup')
|
163
|
+
colorPopupComponent.steps.clickOnColorBlock(0);
|
164
|
+
colorPopupComponent.steps.addInputToHexInputField('#ff0000');
|
165
|
+
colorPopupComponent.steps.addInputToOpacityInputField('20');
|
166
|
+
colorPopupComponent.steps.clickOnOkButton();
|
167
|
+
utilities.verifyElementVisibilityState(feedbackScalePage.dialogBox(), 'notExist');
|
168
|
+
colorPopupComponent.steps.verifyColorBlockInOptionAccordion(0, 'rgba(255, 0, 0, 0.2)');
|
169
|
+
});
|
170
|
+
});
|
171
|
+
|
172
|
+
describe('Color popup - preview tab for \'Button\' layout', () => {
|
173
|
+
const newFeedbackColorBlock = 'rgba(255, 0, 0, 0.7)';
|
174
|
+
abortEarlySetup();
|
175
|
+
before(() => {
|
176
|
+
cy.log('Navigate to Feedback scale question type');
|
177
|
+
feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
|
178
|
+
colorPopupComponent.steps.clickOnColorBlock(0);
|
179
|
+
colorPopupComponent.steps.addInputToHexInputField('#ff0000');
|
180
|
+
colorPopupComponent.steps.addInputToOpacityInputField('70');
|
181
|
+
colorPopupComponent.steps.clickOnOkButton();
|
182
|
+
feedbackScalePage.steps.switchToPreviewTab();
|
183
|
+
});
|
184
|
+
|
185
|
+
it('When the user modifies the selected color for a feedback option, then in the preview tab the color block that appears on the tooltip and the color block that appears in the more info accordion should be as per the newly selected color', () => {
|
186
|
+
feedbackScalePage.steps.verifyColorBlockOnFeedbackButtonTooltip(0, newFeedbackColorBlock);
|
187
|
+
feedbackScalePage.steps.expandMoreInfoAccordion();
|
188
|
+
feedbackScalePage.steps.verifyMoreInfoAccordionColorBlock(0, newFeedbackColorBlock);
|
189
|
+
});
|
190
|
+
});
|
191
|
+
|
192
|
+
describe('Color popup - preview tab for \'Star\' layout', () => {
|
193
|
+
const newFeedbackStarColor = 'rgba(255, 0, 0, 0.7)';
|
194
|
+
abortEarlySetup();
|
195
|
+
before(() => {
|
196
|
+
cy.log('Navigate to Feedback scale question type');
|
197
|
+
feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
|
198
|
+
feedbackScalePage.steps.clickOnFeedbackStyleLayoutDropdown();
|
199
|
+
feedbackScalePage.steps.selectFeedbackStyleLayoutDropdown('Star');
|
200
|
+
colorPopupComponent.steps.clickOnColorBlock(0);
|
201
|
+
colorPopupComponent.steps.addInputToHexInputField('#ff0000');
|
202
|
+
colorPopupComponent.steps.addInputToOpacityInputField('70');
|
203
|
+
colorPopupComponent.steps.clickOnOkButton();
|
204
|
+
feedbackScalePage.steps.switchToPreviewTab();
|
205
|
+
});
|
206
|
+
|
207
|
+
it('When the user modifies the selected color for a feedback star option, then in the preview tab the color of that particular feedback star should change and feedback stars that appears in the more info accordion for that particular feedback star should be as per the newly selected color', () => {
|
208
|
+
utilities.verifyCSS(feedbackScalePage.feedbackStarButton().eq(0).find('svg'), {
|
209
|
+
'fill': css.color.defaultBackground,
|
210
|
+
'stroke': newFeedbackStarColor,
|
211
|
+
});
|
212
|
+
for (let index = 1; index < 5; index++) {
|
213
|
+
utilities.verifyCSS(feedbackScalePage.feedbackStarButton().eq(index).find('svg'), {
|
214
|
+
'fill': css.color.defaultBackground,
|
215
|
+
'stroke': css.color.feedbackStar,
|
216
|
+
});
|
217
|
+
};
|
218
|
+
feedbackScalePage.steps.expandMoreInfoAccordion();
|
219
|
+
feedbackScalePage.steps.verifyMoreInfoAccordionStarIconsColor(0, newFeedbackStarColor);
|
220
|
+
for (let index = 1; index < 5; index++) {
|
221
|
+
feedbackScalePage.steps.verifyMoreInfoAccordionStarIconsColor(index, css.color.feedbackStar);
|
222
|
+
};
|
223
|
+
});
|
224
|
+
|
225
|
+
it('When the user selects the feedback star with the new color, the feedback stars should get filled with the new color', () => {
|
226
|
+
feedbackScalePage.steps.clickOnFeedbackStarButton(0);
|
227
|
+
feedbackScalePage.steps.verifyFeedbackStarButtonSelectedState([0], newFeedbackStarColor);
|
228
|
+
feedbackScalePage.steps.verifyFeedbackStarButtonUnselectedState([1, 2, 3, 4]);
|
229
|
+
});
|
230
|
+
|
231
|
+
it('When the user selects the feedback star with the default set color, the feedback stars should get filled with the default set color', () => {
|
232
|
+
feedbackScalePage.steps.clickOnFeedbackStarButton(3);
|
233
|
+
feedbackScalePage.steps.verifyFeedbackStarButtonSelectedState([0, 1, 2, 3], css.color.feedbackStar);
|
234
|
+
feedbackScalePage.steps.verifyFeedbackStarButtonUnselectedState([4]);
|
235
|
+
});
|
236
|
+
});
|
237
|
+
});
|