itemengine-cypress-automation 1.0.37 → 1.0.38

Sign up to get free protection for your applications and to get access to all the features.
Files changed (5) hide show
  1. package/cypress/e2e/ILC/FeedbackScale/feedbackScaleAdditionalSettings.js +272 -0
  2. package/cypress/e2e/ILC/FeedbackScale/feedbackScaleEditTab.js +346 -0
  3. package/cypress/e2e/ILC/FeedbackScale/feedbackScaleHeaderSection.js +72 -0
  4. package/cypress/e2e/ILC/FeedbackScale/feedbackScalePreviewTab.js +389 -0
  5. package/package.json +1 -1
package/cypress/e2e/ILC/FeedbackScale/feedbackScaleAdditionalSettings.js ADDED
@@ -0,0 +1,272 @@
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: \'Display additional information\' - edit tab', () => {
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
+ it('\'Display additional information\' label and checkbox should be displayed and by default it should be checked', () => {
54
+ utilities.verifyInnerText(feedbackScalePage.displayAdditionalInformationCheckboxLabel(), 'Display additional information');
55
+ utilities.verifyElementVisibilityState(feedbackScalePage.displayAdditionalInformationCheckboxLabel(), 'visible');
56
+ feedbackScalePage.steps.verifyDisplayAdditionalInformationCheckboxCheckedState();
57
+ });
58
+
59
+ it('CSS of \'Display additional information\' label and checkbox - checked state', { tags: 'css' }, () => {
60
+ utilities.verifyCSS(feedbackScalePage.displayAdditionalInformationCheckboxLabel(), {
61
+ 'color': css.color.labelText,
62
+ 'font-size': css.fontSize.normal,
63
+ 'font-weight': css.fontWeight.regular
64
+ });
65
+ utilities.verifyCSS(feedbackScalePage.displayAdditionalInformationCheckbox().parent('.icon-checkbox-selected').find('.checkbox-icon-border-rect'), {
66
+ 'fill': css.color.activeButtons
67
+ });
68
+ });
69
+
70
+ it('The user should be able to uncheck \'Display additional information\' checkbox', () => {
71
+ feedbackScalePage.steps.uncheckDisplayAdditionalInformationCheckbox();
72
+ });
73
+
74
+ it('CSS of \'Display additional information\' checkbox - unchecked state', { tags: 'css' }, () => {
75
+ utilities.verifyCSS(feedbackScalePage.displayAdditionalInformationCheckboxLabel().parent().find('svg'), {
76
+ 'fill': css.color.uncheckedCheckbox
77
+ });
78
+ });
79
+
80
+ it('Accessibility of \'Display additional information\' checkbox - unchecked state', { tags: 'a11y' }, () => {
81
+ cy.checkAccessibility(feedbackScalePage.displayAdditionalInformationCheckbox().parents('[data-ngie-testid="display-additional-information-checkbox"]'));
82
+ });
83
+ });
84
+
85
+ describe('Additional settings: \'Display additional information\' - preview tab', () => {
86
+ abortEarlySetup();
87
+ before(() => {
88
+ cy.log('Navigate to Feedback scale question type');
89
+ feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
90
+ feedbackScalePage.steps.expandAdditonalSettings();
91
+ });
92
+
93
+ it('When the \'Display additional information\' checkbox is in checked state, the more info accordion should be displayed in the preview tab ', () => {
94
+ feedbackScalePage.steps.switchToPreviewTab();
95
+ utilities.verifyElementVisibilityState(feedbackScalePage.moreInfoButton(), 'visible');
96
+ });
97
+
98
+ it('When the user unchecks the \'Display additional information\' checkbox, the more info accordion should not be displayed in the preview tab ', () => {
99
+ cy.log('Pre-step: Switching to edit tab')
100
+ feedbackScalePage.steps.switchToEditTab();
101
+ feedbackScalePage.steps.uncheckDisplayAdditionalInformationCheckbox();
102
+ feedbackScalePage.steps.switchToPreviewTab();
103
+ utilities.verifyElementVisibilityState(feedbackScalePage.moreInfoButton(), 'notExist');
104
+ });
105
+ });
106
+
107
+ describe('Additional settings: \'Allow students to add comment\' - edit tab', () => {
108
+ abortEarlySetup();
109
+ before(() => {
110
+ cy.log('Navigate to Feedback scale question type');
111
+ feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
112
+ feedbackScalePage.steps.expandAdditonalSettings();
113
+ });
114
+
115
+ it('\'Allow students to add comment\' label and checkbox should be displayed and by default it should be unchecked', () => {
116
+ utilities.verifyInnerText(feedbackScalePage.allowStudentsToAddCommentCheckboxLabel(), 'Allow students to add comment');
117
+ utilities.verifyElementVisibilityState(feedbackScalePage.allowStudentsToAddCommentCheckboxLabel(), 'visible');
118
+ feedbackScalePage.steps.verifyAllowStudentsToAddCommentCheckboxUncheckedState();
119
+ });
120
+
121
+ it('CSS of \'Allow students to add comment\' - unchecked state', { tags: 'css' }, () => {
122
+ utilities.verifyCSS(feedbackScalePage.studentResponseAreaAndLayoutLabel(), {
123
+ 'color': css.color.labels,
124
+ 'font-size': css.fontSize.default,
125
+ 'font-weight': css.fontWeight.semibold
126
+ });
127
+ utilities.verifyCSS(feedbackScalePage.allowStudentsToAddCommentCheckboxLabel(), {
128
+ 'color': css.color.labelText,
129
+ 'font-size': css.fontSize.normal,
130
+ 'font-weight': css.fontWeight.regular
131
+ });
132
+ utilities.verifyCSS(feedbackScalePage.allowStudentsToAddCommentCheckboxLabel().parent().find('svg'), {
133
+ 'fill': css.color.uncheckedCheckbox
134
+ });
135
+ });
136
+
137
+ it('The user should be able to check \'Allow students to add comment\'checkbox', () => {
138
+ feedbackScalePage.steps.checkAllowStudentsToAddCommentCheckbox();
139
+ });
140
+
141
+ it('CSS of \'Allow students to add comment\'checkbox - checked state', { tags: 'css' }, () => {
142
+ utilities.verifyCSS(feedbackScalePage.allowStudentsToAddCommentCheckbox().parent('.icon-checkbox-selected').find('.checkbox-icon-border-rect'), {
143
+ 'fill': css.color.activeButtons
144
+ });
145
+ });
146
+
147
+ it('Accessibility of \'Allow students to add comment\' checkbox - checked state', { tags: 'a11y' }, () => {
148
+ cy.checkAccessibility(feedbackScalePage.allowStudentsToAddCommentCheckbox().parents('[data-ngie-testid="allow-students-to-add-comment-checkbox"]'));
149
+ });
150
+ });
151
+
152
+ describe('Additional settings: \'Allow students to add comment\' - preview tab', () => {
153
+ abortEarlySetup();
154
+ before(() => {
155
+ cy.log('Navigate to Feedback scale question type');
156
+ feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
157
+ feedbackScalePage.steps.expandAdditonalSettings();
158
+ });
159
+
160
+ it('When the \'Allow students to add comment\' checkbox is in unchecked state, the \'Describe your experience\' label and input field should not be displayed in the preview tab', () => {
161
+ feedbackScalePage.steps.switchToPreviewTab();
162
+ utilities.verifyElementVisibilityState(feedbackScalePage.describeYourExperienceLabel(), 'notExist');
163
+ utilities.verifyElementVisibilityState(feedbackScalePage.describeYourExperienceInputField(), 'notExist');
164
+ });
165
+
166
+ it('When the user checks the \'Allow students to add comment\' checkbox, the \'Describe your experience\' label and input field should be displayed in the preview tab', () => {
167
+ feedbackScalePage.steps.switchToEditTab();
168
+ feedbackScalePage.steps.checkAllowStudentsToAddCommentCheckbox();
169
+ feedbackScalePage.steps.switchToPreviewTab();
170
+ utilities.verifyInnerText(feedbackScalePage.describeYourExperienceLabel(), 'Describe your experience');
171
+ utilities.verifyElementVisibilityState(feedbackScalePage.describeYourExperienceLabel(), 'visible');
172
+ utilities.verifyElementVisibilityState(feedbackScalePage.describeYourExperienceInputField(), 'visible');
173
+ });
174
+
175
+ it('CSS of \'Describe your experience\' label and input field', { tags: 'css' }, () => {
176
+ utilities.verifyCSS(feedbackScalePage.describeYourExperienceLabel(), {
177
+ 'color': css.color.labels,
178
+ 'font-size': css.fontSize.default,
179
+ 'font-weight': css.fontWeight.semibold
180
+ });
181
+ utilities.verifyCSS(feedbackScalePage.describeYourExperienceInputField(), {
182
+ 'color': css.color.text,
183
+ 'font-size': css.fontSize.default,
184
+ 'font-weight': css.fontWeight.regular
185
+ });
186
+ });
187
+
188
+ it('Accessibility of \'Describe your experience\' label and input field', { tags: 'a11y' }, () => {
189
+ cy.checkAccessibility(feedbackScalePage.describeYourExperienceLabel().parents('.describe-your-experience'));
190
+ });
191
+
192
+ it('The user should be able to enter text in the \'Describe your experience\' input field', () => {
193
+ feedbackScalePage.steps.addInputToDescribeYourExperienceInputField('It was a challenging questionnaire')
194
+ });
195
+ });
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
+ });
package/cypress/e2e/ILC/FeedbackScale/feedbackScaleEditTab.js ADDED
@@ -0,0 +1,346 @@
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: Edit tab - Question instructions, Feedback layout style dropdown, Default state of option accordions, Option accordion contents for \'Button\' and \'Star\' layout styles, Add, delete option accordion', () => {
8
+ before(() => {
9
+ cy.loginAs('admin');
10
+ });
11
+
12
+ describe('Question instructions input field - Edit tab', () => {
13
+ abortEarlySetup();
14
+ before(() => {
15
+ cy.log('Navigate to Feedback scale question type');
16
+ feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
17
+ cy.barsPreLoaderWait();
18
+ });
19
+
20
+ feedbackScalePage.tests.verifyQuestionInstructionsInputFieldEditTab();
21
+ });
22
+
23
+ describe('Question instructions input field - Preview tab', () => {
24
+ abortEarlySetup();
25
+ before(() => {
26
+ cy.log('Navigate to Feedback scale question type');
27
+ feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
28
+ cy.barsPreLoaderWait();
29
+ });
30
+
31
+ feedbackScalePage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
32
+ });
33
+
34
+ describe('Feedback layout style dropdown', () => {
35
+ abortEarlySetup();
36
+ before(() => {
37
+ cy.log('Navigate to Feedback scale question type');
38
+ feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
39
+ cy.barsPreLoaderWait();
40
+ });
41
+
42
+ it('\'Feedback layout style\' label and dropdown should be displayed and in the \'Feedback layout style\' dropdown, \'Button\' option should be selected by default', () => {
43
+ utilities.verifyInnerText(feedbackScalePage.feedbackLayoutStyleLabel(), 'Feedback layout style');
44
+ utilities.verifyElementVisibilityState(feedbackScalePage.feedbackLayoutStyleLabel(), 'visible');
45
+ utilities.verifyInnerText(feedbackScalePage.feedbackLayoutStyleDropdown(), 'Button');
46
+ utilities.verifyElementVisibilityState(feedbackScalePage.feedbackLayoutStyleDropdown(), 'visible');
47
+ });
48
+
49
+ it('CSS of \'Feedback layout style\' label and \'Feedback layout style\' dropdown in default state', { tags: 'css' }, () => {
50
+ utilities.verifyCSS(feedbackScalePage.feedbackLayoutStyleLabel(), {
51
+ 'color': css.color.labels,
52
+ 'font-size': css.fontSize.normal,
53
+ 'font-weight': css.fontWeight.semibold
54
+ });
55
+ utilities.verifyCSS(feedbackScalePage.feedbackLayoutStyleDropdown(), {
56
+ 'background-color': css.color.secondaryBtnBg,
57
+ 'border': `1px solid ${css.color.defaultDropdownBorder}`
58
+ });
59
+ utilities.verifyCSS(feedbackScalePage.feedbackLayoutStyleDropdown().find('.dropdown-label-text'), {
60
+ 'color': css.color.liText,
61
+ 'font-size': css.fontSize.default,
62
+ 'font-weight': css.fontWeight.regular
63
+ });
64
+ });
65
+
66
+ it('Accessibility of \'Feedback layout style\' label and \'Feedback layout style\' dropdown in default state', { tags: 'a11y' }, () => {
67
+ cy.checkAccessibility(feedbackScalePage.feedbackLayoutStyleLabel().parents('[arialabel="feedback layout style"]'));
68
+ });
69
+
70
+ it('When the user clicks on \'Feedback layout style\' dropdown, a list of 2 layout options should open - \'Button\', \'Star\'', () => {
71
+ let dropdownOptions = ['Button', 'Star'];
72
+ feedbackScalePage.steps.clickOnFeedbackStyleLayoutDropdown();
73
+ utilities.verifyElementVisibilityState(feedbackScalePage.feedbackLayoutStyleDropdownOptions(), 'visible');
74
+ feedbackScalePage.steps.verifyFeedbackStyleLayoutOptions(dropdownOptions);
75
+ });
76
+
77
+ it('CSS of \'Feedback layout style\' label and \'Feedback layout style\' dropdown in active state', { tags: 'css' }, () => {
78
+ utilities.verifyCSS(feedbackScalePage.feedbackLayoutStyleDropdown(), {
79
+ 'background-color': css.color.secondaryBtnBg,
80
+ 'border': `1px solid ${css.color.activeComponentBorder}`,
81
+ });
82
+ utilities.verifyCSS(feedbackScalePage.feedbackLayoutStyleDropdownOptions('Button'), {
83
+ 'color': css.color.liText,
84
+ 'font-size': css.fontSize.default,
85
+ 'font-weight': css.fontWeight.regular,
86
+ 'background-color': css.color.liTextSelectedBg,
87
+ });
88
+ utilities.verifyCSS(feedbackScalePage.feedbackLayoutStyleDropdownOptions('Star'), {
89
+ 'color': css.color.liText,
90
+ 'font-size': css.fontSize.default,
91
+ 'font-weight': css.fontWeight.regular,
92
+ 'background-color': css.color.transparent,
93
+ });
94
+ });
95
+
96
+ it('Accessibility of \'Feedback layout style\' label and \'Feedback layout style\' dropdown in active state', { tags: 'a11y' }, () => {
97
+ cy.checkAccessibility(feedbackScalePage.feedbackLayoutStyleLabel().parents('[arialabel="feedback layout style"]'));
98
+ cy.checkAccessibility(feedbackScalePage.feedbackLayoutStyleDropdownOptions().parents('.dropdown-list-ul'));
99
+ });
100
+ });
101
+
102
+ describe('Feedback scale - Default state of option accordions, add image, bold text in tooltip and description input fields', () => {
103
+ abortEarlySetup();
104
+ before(() => {
105
+ cy.log('Navigate to Feedback scale question type');
106
+ feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
107
+ cy.barsPreLoaderWait();
108
+ });
109
+
110
+ it('\'Feedback scale\' label should be displayed', () => {
111
+ utilities.verifyInnerText(feedbackScalePage.feedbackScaleLabel(), 'Feedback scale');
112
+ utilities.verifyElementVisibilityState(feedbackScalePage.feedbackScaleLabel(), 'visible');
113
+ });
114
+
115
+ //Failing due to https://redmine.zeuslearning.com/issues/531554
116
+ it('By default, 3 option accordions should be displayed for \'Button\' layout style and \'Option 1\' accordion should be in expanded state and all other accordions should be in collapsed state', () => {
117
+ utilities.verifyElementCount(feedbackScalePage.optionAccordion(), 3);
118
+ feedbackScalePage.steps.verifyOptionAccordionInExpandedState(0);
119
+ feedbackScalePage.steps.verifyOptionAccordionInCollapsedState(1);
120
+ feedbackScalePage.steps.verifyOptionAccordionInCollapsedState(2);
121
+ });
122
+
123
+ it('All accordions should have an \'Option #\' label, \'delete option\' button and a chevron icon', () => {
124
+ for (let index = 0; index < 3; index++) {
125
+ feedbackScalePage.steps.verifyOptionAccordionPanelContents(index, `Option ${index + 1}`);
126
+ }
127
+ });
128
+
129
+ it('\'Label\' label and input field should be displayed', () => {
130
+ utilities.verifyInnerText(feedbackScalePage.labelsLabel(), 'Label');
131
+ utilities.verifyElementVisibilityState(feedbackScalePage.labelsLabel(), 'visible');
132
+ utilities.verifyElementVisibilityState(feedbackScalePage.labelsInputField(), 'visible');
133
+ });
134
+
135
+ it('\'Color\' label and a color block with pre filled color should be displayed', () => {
136
+ utilities.verifyInnerText(feedbackScalePage.colorLabel(), 'Color');
137
+ utilities.verifyElementVisibilityState(feedbackScalePage.colorLabel(), 'visible');
138
+ utilities.verifyElementVisibilityState(colorPopupComponent.colorBlock(), 'visible');
139
+ });
140
+
141
+ it('\'Tooltip\' label and input field should be displayed', () => {
142
+ utilities.verifyInnerText(feedbackScalePage.tooltipLabel(), 'Tooltip');
143
+ utilities.verifyElementVisibilityState(feedbackScalePage.tooltipLabel(), 'visible');
144
+ utilities.verifyElementVisibilityState(feedbackScalePage.tooltipInputField(), 'visible');
145
+ });
146
+
147
+ it('\'Description\' label and input field should be displayed', () => {
148
+ utilities.verifyInnerText(feedbackScalePage.descriptionLabel(), 'Description');
149
+ utilities.verifyElementVisibilityState(feedbackScalePage.descriptionLabel(), 'visible');
150
+ utilities.verifyElementVisibilityState(feedbackScalePage.descriptionInputField(), 'visible');
151
+ });
152
+
153
+ it('CSS of option accordion contents', { tags: 'css' }, () => {
154
+ const labels = [feedbackScalePage.labelsLabel, feedbackScalePage.colorLabel, feedbackScalePage.tooltipLabel, feedbackScalePage.descriptionLabel];
155
+ const inputFields = [feedbackScalePage.labelsInputField, feedbackScalePage.tooltipInputField, feedbackScalePage.descriptionInputField];
156
+ utilities.verifyCSS(feedbackScalePage.feedbackScaleLabel(), {
157
+ 'color': css.color.labels,
158
+ 'font-size': css.fontSize.default,
159
+ 'font-weight': css.fontWeight.semibold
160
+ });
161
+ utilities.verifyCSS(feedbackScalePage.optionAccordionLabel(), {
162
+ 'color': css.color.panelLabel,
163
+ 'font-size': css.fontSize.default,
164
+ 'font-weight': css.fontWeight.bold
165
+ });
166
+ feedbackScalePage.deleteOptionAccordionButton()
167
+ .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
168
+ labels.forEach((label) => {
169
+ utilities.verifyCSS(label(), {
170
+ 'color': css.color.labels,
171
+ 'font-size': css.fontSize.normal,
172
+ 'font-weight': css.fontWeight.semibold
173
+ });
174
+ });
175
+ inputFields.forEach((inputField) => {
176
+ utilities.verifyCSS(inputField(), {
177
+ 'color': css.color.text,
178
+ 'font-size': css.fontSize.default,
179
+ 'font-weight': css.fontWeight.regular
180
+ });
181
+ });
182
+ });
183
+
184
+ //Failing due to https://redmine.zeuslearning.com/issues/541472
185
+ it('Accessibility of option accordion contents', { tags: 'a11y' }, () => {
186
+ cy.checkAccessibility(feedbackScalePage.feedbackScaleLabel());
187
+ cy.checkAccessibility(feedbackScalePage.optionAccordion().parents('.feedback-scale-panel'));
188
+ });
189
+
190
+ it('When the user expands another option accordion, \'Option 1\' accordion should still be in expanded state', () => {
191
+ feedbackScalePage.steps.expandOptionAccordion(1);
192
+ feedbackScalePage.steps.verifyOptionAccordionInExpandedState(0);
193
+ feedbackScalePage.steps.verifyOptionAccordionInExpandedState(1);
194
+ });
195
+
196
+ it('The user should be able to collapse an option accordion and state of another accordions should not change', () => {
197
+ feedbackScalePage.steps.collapseOptionAccordion(0);
198
+ feedbackScalePage.steps.verifyOptionAccordionInCollapsedState(0);
199
+ feedbackScalePage.steps.verifyOptionAccordionInExpandedState(1);
200
+ feedbackScalePage.steps.verifyOptionAccordionInCollapsedState(2);
201
+ });
202
+
203
+ it('\'Add option\' button should be present', () => {
204
+ utilities.verifyInnerText(feedbackScalePage.addOptionButton(), 'Add option');
205
+ utilities.verifyElementVisibilityState(feedbackScalePage.addOptionButton(), 'visible');
206
+ });
207
+
208
+ it('When user adds an image to the tooltip input field then it should be displayed in the tooltip input field', () => {
209
+ feedbackScalePage.steps.focusInTooltipInputField(1);
210
+ feedbackScalePage.steps.selectImageOptionFromCKEditorToolbar();
211
+ feedbackScalePage.steps.addImageToInputField();
212
+ feedbackScalePage.steps.verifyImageAndAltTextInTooltipInputField(1);
213
+ });
214
+
215
+ it('When user adds \'Bold\' text to the description input field then it should be displayed in the description input field', () => {
216
+ feedbackScalePage.steps.expandOptionAccordion(2);
217
+ feedbackScalePage.steps.focusInDescriptionInputField(1);
218
+ feedbackScalePage.steps.selectBoldOptionFromCKEditorToolbar();
219
+ feedbackScalePage.steps.addInputToDescriptionInputField(1, 'I\'m very comfortable with the learning target');
220
+ feedbackScalePage.steps.verifyBoldTextInDescriptionInputField(1, '​​​​​​​I\'m very comfortable with the learning target');
221
+ });
222
+ });
223
+
224
+ describe('Feedback scale - Option accordion contents for \'Button\' layout style', () => {
225
+ const options = ['Option 1', 'Option 2', 'Option 3'];
226
+ const optionsContent = [
227
+ {
228
+ 'labels': 'Uncomfortable',
229
+ 'color': 'rgb(229, 76, 25)',
230
+ 'tooltip': 'Made me uneasy and unsettled.',
231
+ 'description': 'I am uncomfortable with the learning target.'
232
+ },
233
+ {
234
+ 'labels': 'Somewhat comfortable',
235
+ 'color': 'rgb(255, 240, 25)',
236
+ 'tooltip': 'I would like some help.',
237
+ 'description': 'I am somewhat comfortable with the learning target.'
238
+ },
239
+ {
240
+ 'labels': 'Comfortable',
241
+ 'color': 'rgb(9, 179, 33)',
242
+ 'tooltip': 'I\'m feeling confident.',
243
+ 'description': 'I am comfortable with the learning target.'
244
+ }
245
+ ];
246
+ abortEarlySetup();
247
+ before(() => {
248
+ cy.log('Navigate to Feedback scale question type');
249
+ feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
250
+ cy.barsPreLoaderWait();
251
+ });
252
+
253
+ options.forEach((option, optionIndex) => {
254
+ it(`Option accordion contents for \'${option}\' - \'Button\' layout style`, () => {
255
+ feedbackScalePage.steps.verifyOptionAccordionInputFieldContents(optionIndex, optionsContent[optionIndex]);
256
+ });
257
+ });
258
+ });
259
+
260
+ describe('Feedback scale - Option accordion contents for \'Star\' layout style', () => {
261
+ const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'];
262
+ const optionsContent = [
263
+ {
264
+ 'labels': '20%',
265
+ 'color': 'rgb(226, 121, 0)',
266
+ 'tooltip': 'Needs improvement',
267
+ 'description': 'Your attempt could be better. Keep practicing!'
268
+ },
269
+ {
270
+ 'labels': '40%',
271
+ 'color': 'rgb(226, 121, 0)',
272
+ 'tooltip': 'Getting there',
273
+ 'description': 'You\'ve made progress, but more effort is needed to pass.'
274
+ },
275
+ {
276
+ 'labels': '60%',
277
+ 'color': 'rgb(226, 121, 0)',
278
+ 'tooltip': 'Good job',
279
+ 'description': 'You tried well and made a good attempt.'
280
+ },
281
+ {
282
+ 'labels': '80%',
283
+ 'color': 'rgb(226, 121, 0)',
284
+ 'tooltip': 'Great work',
285
+ 'description': 'You did an outstanding job and answered all questions correctly!'
286
+ },
287
+ {
288
+ 'labels': '100%',
289
+ 'color': 'rgb(226, 121, 0)',
290
+ 'tooltip': 'Excellent',
291
+ 'description': 'Exceptional job! All answers are perfect. You\'re doing amazing!'
292
+ }
293
+ ];
294
+ abortEarlySetup();
295
+ before(() => {
296
+ cy.log('Navigate to Feedback scale question type');
297
+ feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
298
+ cy.barsPreLoaderWait();
299
+ feedbackScalePage.steps.clickOnFeedbackStyleLayoutDropdown();
300
+ feedbackScalePage.steps.selectFeedbackStyleLayoutDropdown('Star');
301
+ });
302
+
303
+ it('By default, 5 option accordions should be displayed for \'Star\' layout style and \'Option 1\' accordion should be in expanded state and all other accordions should be in collapsed state', () => {
304
+ utilities.verifyElementCount(feedbackScalePage.optionAccordion(), 5);
305
+ feedbackScalePage.steps.verifyOptionAccordionInExpandedState(0);
306
+ for (let index = 1; index < 4; index++) {
307
+ feedbackScalePage.steps.verifyOptionAccordionInCollapsedState(index);
308
+ };
309
+ });
310
+
311
+ //Failing due to https://redmine.zeuslearning.com/issues/541449
312
+ options.forEach((option, optionIndex) => {
313
+ it(`Option accordion contents for \'${option}\' - \'Star\' layout style`, () => {
314
+ feedbackScalePage.steps.verifyOptionAccordionInputFieldContents(optionIndex, optionsContent[optionIndex]);
315
+ });
316
+ });
317
+ });
318
+
319
+ describe('Feedback scale - Add, delete option accordion - edit tab', () => {
320
+ abortEarlySetup();
321
+ before(() => {
322
+ cy.log('Navigate to Feedback scale question type');
323
+ feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
324
+ cy.barsPreLoaderWait();
325
+ });
326
+
327
+ it('When the user clicks on \'Add option\' button, a new option accordion should get added and the added option accordion should be in collapsed state', () => {
328
+ feedbackScalePage.steps.addOption();
329
+ utilities.verifyElementCount(feedbackScalePage.optionAccordion(), 4);
330
+ utilities.verifyElementVisibilityState(feedbackScalePage.optionAccordion(), 'visible');
331
+ feedbackScalePage.steps.verifyOptionAccordionInCollapsedState(3);
332
+ });
333
+
334
+ it('By default all input fields of the newly added option should be empty and default color in color block should be #00007C', () => {
335
+ feedbackScalePage.steps.verifyOptionAccordionInputFieldContents(3, { 'labels': '', 'color': 'rgb(0, 0, 124)', 'tooltip': '', 'description': '' });
336
+ });
337
+
338
+ it('When the user deletes an option accordion, the option accordion should get removed and labels of existing option accordions should get updated accordingly', () => {
339
+ feedbackScalePage.steps.deleteOptionAccordion(1);
340
+ utilities.verifyElementCount(feedbackScalePage.optionAccordion(), 3);
341
+ for (let index = 0; index < 3; index++) {
342
+ feedbackScalePage.steps.verifyOptionAccordionPanelContents(index, `Option ${index + 1}`);
343
+ };
344
+ });
345
+ });
346
+ });
package/cypress/e2e/ILC/FeedbackScale/feedbackScaleHeaderSection.js ADDED
@@ -0,0 +1,72 @@
1
+ import { dialogBoxBase } from "../../../pages";
2
+ import { feedbackScalePage } from "../../../pages/feedbackScalePage";
3
+ import abortEarlySetup from "../../../support/helpers/abortEarly";
4
+
5
+ describe('Create question page - Feedback scale: Header section and Saving question', () => {
6
+ before(() => {
7
+ cy.loginAs('admin');
8
+ });
9
+
10
+ describe('Header section contents', () => {
11
+ abortEarlySetup();
12
+ before(() => {
13
+ cy.log('Navigating to feedback scale question type');
14
+ feedbackScalePage.steps.navigateToCreateQuestion('feedback scale')
15
+ });
16
+
17
+ feedbackScalePage.tests.verifyCreateQuestionPageQuestionTypeHeader('Feedback scale');
18
+ });
19
+
20
+ describe('Tabs section', () => {
21
+ abortEarlySetup();
22
+ before(() => {
23
+ cy.log('Navigating to feedback scale question type');
24
+ feedbackScalePage.steps.navigateToCreateQuestion('feedback scale')
25
+ });
26
+
27
+ feedbackScalePage.tests.verifyTabsSection();
28
+ });
29
+
30
+ describe('Cancel button', () => {
31
+ abortEarlySetup();
32
+ before(() => {
33
+ cy.log('Navigating to feedback scale question type');
34
+ feedbackScalePage.steps.navigateToCreateQuestion('feedback scale')
35
+ });
36
+
37
+ feedbackScalePage.tests.verifyCancelButton('feedback scale');
38
+ });
39
+
40
+ describe('Save Question button', () => {
41
+ abortEarlySetup();
42
+ before(() => {
43
+ cy.log('Navigating to feedback scale question type');
44
+ feedbackScalePage.steps.navigateToCreateQuestion('feedback scale')
45
+ cy.barsPreLoaderWait();
46
+ });
47
+
48
+
49
+ describe('Validation error messages', () => {
50
+ dialogBoxBase.tests.verifyRequiredFieldsWarningPopupOnClickingSaveButton();
51
+
52
+ it('Validation error messages should be displayed below required input fields', () => {
53
+ feedbackScalePage.steps.verifyQuestionInstructionsErrorMessage()
54
+ });
55
+
56
+ it('Validation error messages should disappear when required input fields are filled', () => {
57
+ feedbackScalePage.steps.addQuestionInstructions();
58
+ feedbackScalePage.steps.verifyQuestionInstructionsErrorMessageIsNotDisplayed();
59
+ });
60
+
61
+ // Failing due to https://redmine.zeuslearning.com/issues/541472
62
+ feedbackScalePage.tests.verifya11yOfCreateItemWrapperContents();
63
+ });
64
+
65
+ describe('Saving a question', () => {
66
+ it('When user has filled all the mandatory fields then on clicking on Save question button the question should get saved and a snackbar with text \'Saved successfully!\' should be displayed', () => {
67
+ feedbackScalePage.steps.saveAQuestionAndVerifySnackbar();
68
+ });
69
+ feedbackScalePage.tests.verifySavedSuccessfullySnackbarCSSanda11y();
70
+ });
71
+ });
72
+ });
package/cypress/e2e/ILC/FeedbackScale/feedbackScalePreviewTab.js ADDED
@@ -0,0 +1,389 @@
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
+ const optionsContentForButtonLayout = [
6
+ {
7
+ 'labels': 'Uncomfortable',
8
+ 'color': 'rgb(229, 76, 25)',
9
+ 'tooltip': 'Made me uneasy and unsettled.',
10
+ 'description': 'I am uncomfortable with the learning target.'
11
+ },
12
+ {
13
+ 'labels': 'Somewhat comfortable',
14
+ 'color': 'rgb(255, 240, 25)',
15
+ 'tooltip': 'I would like some help.',
16
+ 'description': 'I am somewhat comfortable with the learning target.'
17
+ },
18
+ {
19
+ 'labels': 'Comfortable',
20
+ 'color': 'rgb(9, 179, 33)',
21
+ 'tooltip': 'I\'m feeling confident.',
22
+ 'description': 'I am comfortable with the learning target.'
23
+ }
24
+ ];
25
+ const optionsContentForStarLayout = [
26
+ {
27
+ 'labels': '20%',
28
+ 'starsCount': 1,
29
+ 'tooltip': 'Needs improvement',
30
+ 'description': 'Your attempt could be better. Keep practicing!'
31
+ },
32
+ {
33
+ 'labels': '40%',
34
+ 'starsCount': 2,
35
+ 'tooltip': 'Getting there',
36
+ 'description': 'You\'ve made progress, but more effort is needed to pass.'
37
+ },
38
+ {
39
+ 'labels': '60%',
40
+ 'starsCount': 3,
41
+ 'tooltip': 'Good job',
42
+ 'description': 'You tried well and made a good attempt.'
43
+ },
44
+ {
45
+ 'labels': '80%',
46
+ 'starsCount': 4,
47
+ 'tooltip': 'Great work',
48
+ 'description': 'You did an outstanding job and answered all questions correctly!'
49
+ },
50
+ {
51
+ 'labels': '100%',
52
+ 'starsCount': 5,
53
+ 'tooltip': 'Excellent',
54
+ 'description': 'Exceptional job! All answers are perfect. You\'re doing amazing!'
55
+ }
56
+ ];
57
+
58
+ describe('Create item page: Feedback scale: Preview tab: \'Button\' and \'Star\' layouts, add, delete option accordion', () => {
59
+ before(() => {
60
+ cy.loginAs('admin');
61
+ });
62
+
63
+ describe('Feedback scale - \'Button\' layout style in the preview tab', () => {
64
+ abortEarlySetup();
65
+ before(() => {
66
+ cy.log('Navigate to Feedback scale question type');
67
+ feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
68
+ cy.barsPreLoaderWait();
69
+ feedbackScalePage.steps.expandOptionAccordion(2);
70
+ feedbackScalePage.steps.focusInTooltipInputField(2);
71
+ feedbackScalePage.steps.clearTooltipInputField(2);
72
+ feedbackScalePage.steps.selectImageOptionFromCKEditorToolbar();
73
+ feedbackScalePage.steps.addImageToInputField();
74
+ feedbackScalePage.steps.focusInDescriptionInputField(2);
75
+ feedbackScalePage.steps.clearDescriptionInputField(2);
76
+ feedbackScalePage.steps.selectBoldOptionFromCKEditorToolbar();
77
+ feedbackScalePage.steps.addInputToDescriptionInputField(2, 'I\'m very comfortable with the learning target');
78
+ feedbackScalePage.steps.switchToPreviewTab();
79
+ });
80
+
81
+ it('By default three feedback buttons - \'Uncomfortable\', \'Somewhat comfortable\' and \'Comfortable\' should be displayed', () => {
82
+ utilities.verifyElementCount(feedbackScalePage.feedbackButton(), 3);
83
+ optionsContentForButtonLayout.forEach((buttonContent, buttonIndex) => {
84
+ feedbackScalePage.steps.verifyFeedbackButtonInPreviewTab(buttonIndex, buttonContent.labels);
85
+ });
86
+ });
87
+
88
+ //Failing due to https://redmine.zeuslearning.com/issues/544606
89
+ it('CSS of feedback buttons - unselected state', { tags: 'css' }, () => {
90
+ utilities.verifyCSS(feedbackScalePage.feedbackButton(), {
91
+ 'color': css.color.text,
92
+ 'font-size': css.fontSize.default,
93
+ 'font-weight': css.fontWeight.regular,
94
+ 'background-color': css.color.transparent,
95
+ 'border': `1px solid ${css.color.figDefaultComponentBorder}`
96
+ });
97
+ });
98
+
99
+ it('Accessibility of preview tab contents', { tags: 'a11y' }, () => {
100
+ cy.checkAccessibility(feedbackScalePage.previewTabQuestionWrapper());
101
+ });
102
+
103
+ it('When the user hovers overs a feedback button, a tooltip with a color block and tooltip text should be displayed and on moving the focus away from the button, the tooltip should disappear', () => {
104
+ feedbackScalePage.steps.verifyTooltipFeedbackButton(1, 'I would like some help.');
105
+ });
106
+
107
+ //Failing due to https://redmine.zeuslearning.com/issues/548050
108
+ it('CSS of feedback button tooltip', { tags: 'css' }, () => {
109
+ feedbackScalePage.feedbackButton()
110
+ .eq(1)
111
+ .trigger('mouseover');
112
+ utilities.verifyElementVisibilityState(feedbackScalePage.tooltipText(), 'visible');
113
+ utilities.verifyCSS(feedbackScalePage.tooltipText(), {
114
+ 'background-color': css.color.defaultBackground,
115
+ 'color': css.color.labels,
116
+ 'font-size': css.fontSize.normal,
117
+ 'font-weight': css.fontWeight.regular
118
+ });
119
+ feedbackScalePage.feedbackButton()
120
+ .eq(1)
121
+ .trigger('mouseout')
122
+ utilities.verifyElementVisibilityState(feedbackScalePage.tooltipText(), 'notExist');
123
+ });
124
+
125
+ it('Accessibility of feedback button tooltip', { tags: 'a11y' }, () => {
126
+ feedbackScalePage.feedbackButton()
127
+ .eq(1)
128
+ .trigger('mouseover');
129
+ utilities.verifyElementVisibilityState(feedbackScalePage.tooltipText(), 'visible');
130
+ cy.checkAccessibility(feedbackScalePage.tooltipText());
131
+ feedbackScalePage.feedbackButton()
132
+ .eq(1)
133
+ .trigger('mouseout')
134
+ utilities.verifyElementVisibilityState(feedbackScalePage.tooltipText(), 'notExist');
135
+ });
136
+
137
+ it('When the user has added an image in the tooltip input field, the image should be displayed on the tooltip when the user hovers over the feedback button and on moving the focus away from the button, the tooltip should disappear', () => {
138
+ feedbackScalePage.steps.verifyTooltipImageFeedbackButton(2);
139
+ });
140
+
141
+ it('A \'More info\' accordion should be present and by default it should be in collapsed state', () => {
142
+ utilities.verifyInnerText(feedbackScalePage.moreInfoButton(), 'More info');
143
+ utilities.verifyElementVisibilityState(feedbackScalePage.moreInfoButton(), 'visible');
144
+ feedbackScalePage.steps.verifyMoreInfoAccordionInCollapsedState();
145
+ });
146
+
147
+ //Failing due to https://redmine.zeuslearning.com/issues/544612
148
+ it('When the user expands the \'More info\' accordion, additional information about the feedback buttons should be displayed', () => {
149
+ feedbackScalePage.steps.expandMoreInfoAccordion();
150
+ for (let index = 0; index < optionsContentForButtonLayout.length - 1; index++) {
151
+ feedbackScalePage.steps.verifyMoreInfoAccordionColorBlock(index, optionsContentForButtonLayout[index].color);
152
+ feedbackScalePage.steps.verifyMoreInfoAccordionOptionsListLabelTooltipAndDescription(index, [optionsContentForButtonLayout[index].labels, optionsContentForButtonLayout[index].tooltip, optionsContentForButtonLayout[index].description]);
153
+ }
154
+ feedbackScalePage.steps.verifyMoreInfoAccordionColorBlock(2, optionsContentForButtonLayout[2].color);
155
+ feedbackScalePage.steps.verifyMoreInfoOptionListLabelTooltipAndDescriptionForImageTooltipAndBoldDescription(2);
156
+ });
157
+
158
+ it('The user should be able to mark feedback by clicking on any feedback button and when the user selects a feedback button, the more info contents of the particular feedback button should get highlighted', () => {
159
+ feedbackScalePage.steps.clickOnFeedbackButton(0);
160
+ feedbackScalePage.steps.verifyFeedbackButtonSelectedState(0);
161
+ feedbackScalePage.steps.verifyMoreInfoOptionListHighlightedState(0);
162
+ });
163
+
164
+ it('CSS of feedback buttons - selected state', { tags: 'css' }, () => {
165
+ utilities.verifyCSS(feedbackScalePage.feedbackButton().eq(0), {
166
+ 'color': css.color.text,
167
+ 'font-size': css.fontSize.default,
168
+ 'font-weight': css.fontWeight.regular,
169
+ 'background-color': css.color.liTextSelectedBg,
170
+ 'border-color': `${css.color.activeComponentBorder}`
171
+ });
172
+ });
173
+
174
+ it('Accessibility of feedback buttons - selected state', { tags: 'a11y' }, () => {
175
+ cy.checkAccessibility(feedbackScalePage.previewTabQuestionWrapper());
176
+ });
177
+
178
+ it('When the user clicks on any other feedback button, then the previously selected button should return to default state', () => {
179
+ feedbackScalePage.steps.clickOnFeedbackButton(1);
180
+ feedbackScalePage.steps.verifyFeedbackButtonSelectedState(1);
181
+ feedbackScalePage.steps.verifyFeedbackButtonUnselectedState(0);
182
+ feedbackScalePage.steps.verifyMoreInfoOptionListHighlightedState(1);
183
+ feedbackScalePage.steps.verifyMoreInfoOptionListHighlightedStateNotExists(0);
184
+ });
185
+ });
186
+
187
+ describe('Feedback scale - \'Star\' layout style in the preview tab', () => {
188
+ abortEarlySetup();
189
+ before(() => {
190
+ cy.log('Navigate to Feedback scale question type');
191
+ feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
192
+ cy.barsPreLoaderWait();
193
+ feedbackScalePage.steps.clickOnFeedbackStyleLayoutDropdown();
194
+ feedbackScalePage.steps.selectFeedbackStyleLayoutDropdown('Star');
195
+ feedbackScalePage.steps.expandOptionAccordion(4);
196
+ feedbackScalePage.steps.focusInTooltipInputField(4);
197
+ feedbackScalePage.steps.clearTooltipInputField(4);
198
+ feedbackScalePage.steps.selectBoldOptionFromCKEditorToolbar();
199
+ feedbackScalePage.steps.addInputToTooltipInputField(4, 'Keep up the good work!');
200
+ feedbackScalePage.steps.focusInDescriptionInputField(4);
201
+ feedbackScalePage.steps.clearDescriptionInputField(4);
202
+ feedbackScalePage.steps.selectImageOptionFromCKEditorToolbar();
203
+ feedbackScalePage.steps.addImageToInputField();
204
+ feedbackScalePage.steps.switchToPreviewTab();
205
+ });
206
+
207
+ it('By default five stars should be displayed in the preview tab', () => {
208
+ utilities.verifyElementCount(feedbackScalePage.feedbackStarButton(), 5);
209
+ utilities.verifyElementVisibilityState(feedbackScalePage.feedbackStarButton(), 'visible');
210
+ });
211
+
212
+ it('CSS of feedback stars - unselected state', { tags: 'css' }, () => {
213
+ utilities.verifyCSS(feedbackScalePage.feedbackStarButton().find('svg'), {
214
+ 'fill': css.color.defaultBackground,
215
+ 'stroke': css.color.feedbackStar,
216
+ });
217
+ });
218
+
219
+ it('Accessibility of preview tab contents', { tags: 'a11y' }, () => {
220
+ cy.checkAccessibility(feedbackScalePage.previewTabQuestionWrapper());
221
+ });
222
+
223
+ it('When the user hovers overs a feedback star button, a tooltip with text should be displayed and on moving the focus away from the button, the tooltip should disappear', () => {
224
+ feedbackScalePage.steps.verifyTooltipFeedbackStarButton(1, 'Getting there');
225
+ });
226
+
227
+ //Failing due to https://redmine.zeuslearning.com/issues/548050
228
+ it('CSS of feedback star button tooltip', { tags: 'css' }, () => {
229
+ feedbackScalePage.feedbackStarButton()
230
+ .eq(1)
231
+ .trigger('mouseover');
232
+ utilities.verifyElementVisibilityState(feedbackScalePage.tooltipText(), 'visible');
233
+ utilities.verifyCSS(feedbackScalePage.tooltipText(), {
234
+ 'background-color': css.color.defaultBackground,
235
+ 'color': css.color.labels,
236
+ 'font-size': css.fontSize.normal,
237
+ 'font-weight': css.fontWeight.regular
238
+ });
239
+ feedbackScalePage.feedbackStarButton()
240
+ .eq(1)
241
+ .trigger('mouseout')
242
+ utilities.verifyElementVisibilityState(feedbackScalePage.tooltipText(), 'notExist');
243
+
244
+ });
245
+
246
+ it('Accessibility of feedback star button tooltip', { tags: 'a11y' }, () => {
247
+ feedbackScalePage.feedbackStarButton()
248
+ .eq(1)
249
+ .trigger('mouseover');
250
+ utilities.verifyElementVisibilityState(feedbackScalePage.tooltipText(), 'visible');
251
+ cy.checkAccessibility(feedbackScalePage.tooltipText());
252
+ feedbackScalePage.feedbackStarButton()
253
+ .eq(1)
254
+ .trigger('mouseout')
255
+ utilities.verifyElementVisibilityState(feedbackScalePage.tooltipText(), 'notExist');
256
+ });
257
+
258
+ it('When the user has added bold text in the tooltip input field, the bold text should be displayed on the tooltip when the user hovers over the feedback star button, and on moving the focus away from the button, the tooltip should disappear', () => {
259
+ feedbackScalePage.steps.verifyTooltipBoldTextFeedbackStarButton(4, 'Keep up the good work!');
260
+ });
261
+
262
+ it('A \'More info\' accordion should be present and by default it should be in collapsed state', () => {
263
+ utilities.verifyInnerText(feedbackScalePage.moreInfoButton(), 'More info');
264
+ utilities.verifyElementVisibilityState(feedbackScalePage.moreInfoButton(), 'visible');
265
+ feedbackScalePage.steps.verifyMoreInfoAccordionInCollapsedState();
266
+ });
267
+
268
+ it('When the user expands the \'More info\' accordion, additional information about the feedback star buttons should be displayed', () => {
269
+ feedbackScalePage.steps.expandMoreInfoAccordion();
270
+ for (let index = 0; index < optionsContentForStarLayout.length - 1; index++) {
271
+ feedbackScalePage.steps.verifyMoreInfoAccordionStarIcons(index, optionsContentForStarLayout[index].starsCount);
272
+ feedbackScalePage.steps.verifyMoreInfoAccordionOptionsListLabelTooltipAndDescription(index, [optionsContentForStarLayout[index].labels, optionsContentForStarLayout[index].tooltip, optionsContentForStarLayout[index].description]);
273
+ }
274
+ feedbackScalePage.steps.verifyMoreInfoAccordionStarIcons(4, optionsContentForStarLayout[4].starsCount);
275
+ feedbackScalePage.steps.verifyMoreInfoOptionListLabelTooltipAndDescriptionForBoldTooltipAndImageDescription(4);
276
+ });
277
+
278
+ //TODO: Need to update selected state function for feedback star when https://redmine.zeuslearning.com/issues/538420 gets resolved
279
+ it('The user should be able to mark feedback by clicking on any feedback star button and when the user selects a feedback star button, the more info contents of the particular feedback star button should get highlighted', () => {
280
+ feedbackScalePage.steps.clickOnFeedbackStarButton(3);
281
+ feedbackScalePage.steps.verifyFeedbackStarButtonSelectedState([0, 1, 2, 3], css.color.feedbackStar);
282
+ feedbackScalePage.steps.verifyFeedbackStarButtonUnselectedState([4]);
283
+ feedbackScalePage.steps.verifyMoreInfoOptionListHighlightedState(3);
284
+ });
285
+
286
+ it('CSS of feedback stars - selected state', { tags: 'css' }, () => {
287
+ utilities.verifyCSS(feedbackScalePage.feedbackStarButton().find('svg'), {
288
+ 'fill': css.color.feedbackStar,
289
+ 'stroke': css.color.feedbackStar,
290
+ });
291
+ });
292
+
293
+ it('Accessibility of feedback stars - selected state', { tags: 'a11y' }, () => {
294
+ cy.checkAccessibility(feedbackScalePage.previewTabQuestionWrapper());
295
+ });
296
+
297
+ it('When the user clicks on any other feedback star, then the selected state of feedback stars should get updated accordingly', () => {
298
+ feedbackScalePage.steps.clickOnFeedbackStarButton(2);
299
+ feedbackScalePage.steps.verifyFeedbackStarButtonSelectedState([0, 1, 2], css.color.feedbackStar);
300
+ feedbackScalePage.steps.verifyFeedbackStarButtonUnselectedState([3, 4]);
301
+ feedbackScalePage.steps.verifyMoreInfoOptionListHighlightedState(2);
302
+ feedbackScalePage.steps.verifyMoreInfoOptionListHighlightedStateNotExists(3);
303
+ });
304
+ });
305
+
306
+ describe('Feedback scale - Add, delete option accordions - preview tab for \'Button\' layout style', () => {
307
+ abortEarlySetup();
308
+ before(() => {
309
+ cy.log('Navigate to Feedback scale question type');
310
+ feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
311
+ cy.barsPreLoaderWait();
312
+ });
313
+
314
+ it('When the user adds a new option, a new feedback button should be displayed in the preview tab', () => {
315
+ feedbackScalePage.steps.addOption();
316
+ feedbackScalePage.steps.switchToPreviewTab();
317
+ utilities.verifyElementCount(feedbackScalePage.feedbackButton(), 4);
318
+ utilities.verifyElementVisibilityState(feedbackScalePage.feedbackButton(), 'visible');
319
+ });
320
+
321
+ it('CSS of the newly added feedback button', { tags: 'css' }, () => {
322
+ utilities.verifyCSS(feedbackScalePage.feedbackButton().eq(3), {
323
+ 'color': css.color.text,
324
+ 'font-size': css.fontSize.default,
325
+ 'font-weight': css.fontWeight.regular,
326
+ 'background-color': css.color.transparent,
327
+ 'border': `1px solid ${css.color.figDefaultComponentBorder}`
328
+ });
329
+ });
330
+
331
+ it('When the user hovers over the new feedback button, a tooltip with #00007C color block should be displayed on the tooltip', () => {
332
+ feedbackScalePage.steps.verifyTooltipFeedbackButton(3, '');
333
+ });
334
+
335
+ it('When the user deletes an option accordion, then the corresponding feedback star should get removed from the preview tab', () => {
336
+ feedbackScalePage.steps.switchToEditTab();
337
+ feedbackScalePage.steps.deleteOptionAccordion(3);
338
+ feedbackScalePage.steps.switchToPreviewTab();
339
+ utilities.verifyElementCount(feedbackScalePage.feedbackButton(), 3);
340
+ feedbackScalePage.steps.expandMoreInfoAccordion();
341
+ for (let index = 0; index < 3; index++) {
342
+ feedbackScalePage.steps.verifyMoreInfoAccordionColorBlock(index, optionsContentForButtonLayout[index].color);
343
+ feedbackScalePage.steps.verifyMoreInfoAccordionOptionsListLabelTooltipAndDescription(index, [optionsContentForButtonLayout[index].labels, optionsContentForButtonLayout[index].tooltip, optionsContentForButtonLayout[index].description]);
344
+ }
345
+ });
346
+ });
347
+
348
+ describe('Feedback scale - Add, delete option accordions- preview tab for \'Star\' layout style', () => {
349
+ abortEarlySetup();
350
+ before(() => {
351
+ cy.log('Navigate to Feedback scale question type');
352
+ feedbackScalePage.steps.navigateToCreateQuestion('feedback scale');
353
+ cy.barsPreLoaderWait();
354
+ feedbackScalePage.steps.clickOnFeedbackStyleLayoutDropdown();
355
+ feedbackScalePage.steps.selectFeedbackStyleLayoutDropdown('Star');
356
+ });
357
+
358
+ it('When the user adds a new option, a new feedback star should be displayed in the preview tab', () => {
359
+ feedbackScalePage.steps.addOption();
360
+ feedbackScalePage.steps.switchToPreviewTab();
361
+ utilities.verifyElementCount(feedbackScalePage.feedbackStarButton(), 6);
362
+ utilities.verifyElementVisibilityState(feedbackScalePage.feedbackStarButton(), 'visible');
363
+ });
364
+
365
+ it('CSS of the newly added feedback star', { tags: 'css' }, () => {
366
+ utilities.verifyCSS(feedbackScalePage.feedbackStarButton().eq(5).find('svg'), {
367
+ 'fill': css.color.defaultBackground,
368
+ 'stroke': css.color.secondaryBtn,
369
+ });
370
+ });
371
+
372
+ it('When the user hovers over the new feedback star, a blank tooltip should be displayed', () => {
373
+ feedbackScalePage.steps.verifyTooltipFeedbackStarButton(5, '');
374
+ });
375
+
376
+ //Failing due to https://redmine.zeuslearning.com/issues/544612
377
+ it('When the user deletes an option accordion, then the corresponding feedback star should get removed from the preview tab', () => {
378
+ feedbackScalePage.steps.switchToEditTab();
379
+ feedbackScalePage.steps.deleteOptionAccordion(5);
380
+ feedbackScalePage.steps.switchToPreviewTab();
381
+ utilities.verifyElementCount(feedbackScalePage.feedbackStarButton(), 5);
382
+ feedbackScalePage.steps.expandMoreInfoAccordion();
383
+ for (let index = 0; index < 5; index++) {
384
+ feedbackScalePage.steps.verifyMoreInfoAccordionStarIcons(index, optionsContentForStarLayout[index].starsCount);
385
+ feedbackScalePage.steps.verifyMoreInfoAccordionOptionsListLabelTooltipAndDescription(index, [optionsContentForStarLayout[index].labels, optionsContentForStarLayout[index].tooltip, optionsContentForStarLayout[index].description]);
386
+ }
387
+ });
388
+ });
389
+ });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "itemengine-cypress-automation",
3
- "version": "1.0.37",
3
+ "version": "1.0.38",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "scripts": {