itemengine-cypress-automation 1.0.25 → 1.0.27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (22) hide show
  1. package/cypress/e2e/ILC/HighlightImage/highlightImageAdditionalSettings.js +219 -0
  2. package/cypress/e2e/ILC/HighlightImage/highlightImageAdditionalSettingsBasic.js +252 -0
  3. package/cypress/e2e/ILC/HighlightImage/highlightImageAllOrNothingScoring.js +235 -0
  4. package/cypress/e2e/ILC/HighlightImage/highlightImageAllOrNothingWithAlternateAnswer.js +810 -0
  5. package/cypress/e2e/ILC/HighlightImage/highlightImageCustomizeHighlightProperties.js +669 -0
  6. package/cypress/e2e/ILC/HighlightImage/highlightImageCustomizeHighlightPropertiesFunctionality.js +356 -0
  7. package/cypress/e2e/ILC/HighlightImage/highlightImageEditTabBasic.js +125 -0
  8. package/cypress/e2e/ILC/HighlightImage/highlightImageEditTabHighlightSectionContents.js +318 -0
  9. package/cypress/e2e/ILC/HighlightImage/highlightImageEditTabScoring.js +403 -0
  10. package/cypress/e2e/ILC/HighlightImage/highlightImageHeaderSection.js +86 -0
  11. package/cypress/e2e/ILC/HighlightImage/highlightImageManuallyAndNonScoredScoring.js +176 -0
  12. package/cypress/e2e/ILC/HighlightImage/highlightImagePartialDifferentWeightsScoring.js +210 -0
  13. package/cypress/e2e/ILC/HighlightImage/highlightImagePartialDifferentWeightsWithAlternateAnswer.js +898 -0
  14. package/cypress/e2e/ILC/HighlightImage/highlightImagePartialEqualWeightsScoring.js +208 -0
  15. package/cypress/e2e/ILC/HighlightImage/highlightImagePartialEqualWeightsWithAlternateAnswer.js +894 -0
  16. package/cypress/e2e/ILC/HighlightImage/highlightImagePreviewTab.js +88 -0
  17. package/cypress/e2e/ILC/HighlightImage/highlightImageSetCorrectAnswerCheckboxes.js +244 -0
  18. package/cypress/e2e/ILC/HighlightImage/highlightImageSetCorrectAnswerSection.js +186 -0
  19. package/cypress/e2e/ILC/HighlightImage/highlightImageSupportedFileTypes.js +86 -0
  20. package/cypress/e2e/ILC/HighlightImage/highlightImageToolsFunctionalityEditTab.js +160 -0
  21. package/cypress/e2e/ILC/HighlightImage/highlightImageToolsFunctionalityPreviewTab.js +163 -0
  22. package/package.json +1 -1
@@ -0,0 +1,318 @@
1
+ import constants from "../../../fixtures/constants";
2
+ import { dialogBoxBase, highlightImagePage } from "../../../pages";
3
+ import { uploadImageSectionComponent } from "../../../pages/components/uploadImageSectionComponent";
4
+ import abortEarlySetup from "../../../support/helpers/abortEarly";
5
+ import utilities from "../../../support/helpers/utilities";
6
+ const css = Cypress.env('css');
7
+
8
+ describe('Create Item page - Highlight image: Edit tab tools, content and functionality', () => {
9
+ before(() => {
10
+ cy.loginAs('admin');
11
+ });
12
+
13
+ describe('Highlight image contents - Edit tab', () => {
14
+ abortEarlySetup();
15
+ before(() => {
16
+ cy.log('Navigating to highlight image question type');
17
+ highlightImagePage.steps.navigateToCreateQuestion('highlight image');
18
+ cy.log('Uploading an image');
19
+ uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
20
+ uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
21
+ uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
22
+ });
23
+
24
+ it('\'Pen\' tool should be visible and should be in selected state by default', () => {
25
+ utilities.verifyElementVisibilityState(highlightImagePage.penTool(), 'visible');
26
+ highlightImagePage.steps.verifySelectedStateOfPenTool();
27
+ });
28
+
29
+ it('\'Select\' tool should be visible and should be in unselected state by default', () => {
30
+ utilities.verifyElementVisibilityState(highlightImagePage.selectTool(), 'visible');
31
+ highlightImagePage.steps.verifyUnselectedStateOfSelectTool();
32
+ });
33
+
34
+ it('\'Undo\' tool should be visible and should be in unselected state by default', () => {
35
+ utilities.verifyElementVisibilityState(highlightImagePage.undoTool(), 'visible');
36
+ highlightImagePage.steps.verifyUnselectedStateOfUndoTool();
37
+ });
38
+
39
+ it('\'Redo\' tool should be visible and should be in unselected state by default', () => {
40
+ utilities.verifyElementVisibilityState(highlightImagePage.redoTool(), 'visible');
41
+ highlightImagePage.steps.verifyUnselectedStateOfRedoTool();
42
+ });
43
+
44
+ it('\'Item Eraser\' tool should be visible and should be in unselected state by default', () => {
45
+ utilities.verifyElementVisibilityState(highlightImagePage.itemEraserTool(), 'visible');
46
+ highlightImagePage.steps.verifyUnselectedStateOfItemEraserTool();
47
+ });
48
+
49
+ it('\'Clear All\' tool should be visible and should be in unselected state by default', () => {
50
+ utilities.verifyElementVisibilityState(highlightImagePage.clearAllTool(), 'visible');
51
+ highlightImagePage.steps.verifyUnselectedStateOfClearAllTool();
52
+ });
53
+
54
+ it('\'Highlight count\' label having value 0 should be displayed by default', () => {
55
+ utilities.verifyElementVisibilityState(highlightImagePage.highlightCount(), 'visible')
56
+ highlightImagePage.steps.verifyHighlightCountInHighlightImageSection(0);
57
+ });
58
+
59
+ it('\'Edit image\' and \'Delete image\' button should be visible', () => {
60
+ utilities.verifyInnerText(uploadImageSectionComponent.editImageButton(), 'Edit image');
61
+ utilities.verifyElementVisibilityState(uploadImageSectionComponent.editImageButton(), 'visible');
62
+ utilities.verifyInnerText(uploadImageSectionComponent.deleteImageButton(), 'Delete image');
63
+ utilities.verifyElementVisibilityState(uploadImageSectionComponent.deleteImageButton(), 'visible');
64
+ });
65
+
66
+ //TODO: Need to update script after https://redmine.zeuslearning.com/issues/518498 is resolved
67
+ it('When the user hovers overs the tools, tooltips with texts should be displayed and on moving the focus away from the tools, the tooltips should disappear', () => {
68
+ const tools = [highlightImagePage.selectTool, highlightImagePage.penTool, highlightImagePage.undoTool, highlightImagePage.redoTool, highlightImagePage.itemEraserTool, highlightImagePage.clearAllTool];
69
+ const tooltip = ['SelectSelect, move, rotate and re-size', 'PenDraw a polygon', 'UndoUndo last action', 'RedoRedo last action', 'Item EraserRemove the item hovered', 'Clear AllRemove all the highlights']
70
+ for (let index = 0; index < tools.length; index++) {
71
+ highlightImagePage.steps.verifyTooltip(tools[index](), tooltip[index])
72
+ }
73
+ });
74
+
75
+ //Failing due to https://redmine.zeuslearning.com/issues/543603
76
+ it('CSS of \'Highlight image\' section', { tags: 'css' }, () => {
77
+ utilities.verifyCSS(highlightImagePage.penTool(), {
78
+ 'background-color': css.color.liTextSelectedBg,
79
+ 'font-weight': css.fontWeight.regular
80
+ });
81
+ utilities.verifyCSS(highlightImagePage.selectTool(), {
82
+ 'background-color': css.color.secondaryBtnBg,
83
+ 'font-weight': css.fontWeight.regular
84
+ });
85
+ utilities.verifyCSS(uploadImageSectionComponent.editImageButton().find('span'), {
86
+ 'color': css.color.secondaryBtnActive,
87
+ 'font-size': css.fontSize.default,
88
+ 'font-weight': css.fontWeight.regular
89
+ });
90
+ cy.log('Verifying color of edit image icon')
91
+ uploadImageSectionComponent.editImageButton()
92
+ .verifyPseudoClassBeforeProperty('color', css.color.secondaryBtnActive);
93
+ utilities.verifyCSS(uploadImageSectionComponent.deleteImageButton().find('span'), {
94
+ 'color': css.color.errorText,
95
+ 'font-size': css.fontSize.default,
96
+ 'font-weight': css.fontWeight.regular
97
+ });
98
+ cy.log('Verifying color of delete image icon')
99
+ uploadImageSectionComponent.deleteImageButton()
100
+ .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
101
+ utilities.verifyCSS(highlightImagePage.highlightCount(), {
102
+ 'color': css.color.labels,
103
+ 'font-size': css.fontSize.small,
104
+ 'font-weight': css.fontWeight.regular,
105
+ 'background-color': css.color.liTextBg
106
+ });
107
+ const tools = [highlightImagePage.selectTool, highlightImagePage.penTool, highlightImagePage.undoTool, highlightImagePage.redoTool, highlightImagePage.itemEraserTool, highlightImagePage.clearAllTool]
108
+ tools.forEach(tool => {
109
+ utilities.verifyCSS(tool().find('svg'), {
110
+ 'color': css.color.activeButtons,
111
+ });
112
+ });
113
+ });
114
+
115
+ it('Accessibility of upload image section', { tags: 'a11y' }, () => {
116
+ cy.checkAccessibility(highlightImagePage.highlightImageSectionWrapper());
117
+ });
118
+ });
119
+
120
+ describe('Edit image popup contents and functionality', () => {
121
+ abortEarlySetup();
122
+ before(() => {
123
+ cy.log('Navigating to highlight image question type');
124
+ highlightImagePage.steps.navigateToCreateQuestion('highlight image');
125
+ cy.log('Uploading an image');
126
+ uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
127
+ uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
128
+ uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
129
+ uploadImageSectionComponent.steps.clickOnEditImageButton();
130
+ });
131
+
132
+ uploadImageSectionComponent.tests.verifyUploadImagePopupImageTitle();
133
+
134
+ uploadImageSectionComponent.tests.uploadImagePopupContents(500, 500);
135
+
136
+ uploadImageSectionComponent.tests.verifyButtonReplaceInImagePopup();
137
+
138
+ uploadImageSectionComponent.tests.uploadImageHeightWidthAspectRatioAndResetDimensionsFunctionality(500, 500);
139
+
140
+ it('When user clicks on \'Cancel\' button the popup should close and image should not get edited', () => {
141
+ uploadImageSectionComponent.steps.clickOnImagePopupCancelButton();
142
+ highlightImagePage.steps.verifyEditTabWidthInputFieldValue(500);
143
+ cy.log('Post step: Clicking on edit image button')
144
+ uploadImageSectionComponent.steps.clickOnEditImageButton();
145
+ });
146
+
147
+ uploadImageSectionComponent.tests.uploadImageReplaceButtonFunctionality();
148
+
149
+ it('When user makes some edits and clicks on the \'Ok\' button the popup should close and the edited image should be uploaded', () => {
150
+ uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
151
+ highlightImagePage.steps.verifyEditTabWidthInputFieldValue(225);
152
+ });
153
+ });
154
+
155
+ describe('Edit image pop up content - source URL', () => {
156
+ abortEarlySetup();
157
+ before(() => {
158
+ cy.log('Navigating to highlight image question type');
159
+ highlightImagePage.steps.navigateToCreateQuestion('highlight image');
160
+ cy.log('Uploading an image using source url');
161
+ uploadImageSectionComponent.steps.clickOnSourceURL();
162
+ uploadImageSectionComponent.steps.uploadImageUsingSourceURL(constants.flowerImage);
163
+ uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
164
+ uploadImageSectionComponent.steps.clickOnEditImageButton();
165
+ });
166
+
167
+ //Failing due to https://redmine.zeuslearning.com/issues/543833
168
+ it('When user selects source URL, a popup should be displayed with title \'Add source URL\'', () => {
169
+ utilities.verifyInnerText(uploadImageSectionComponent.imagePopupTitle(), 'Add source URL');
170
+ utilities.verifyElementVisibilityState(uploadImageSectionComponent.imagePopupTitle(), 'visible');
171
+ });
172
+
173
+ uploadImageSectionComponent.tests.verifyUploadImageSourceURLLabelAndInputFieldInEditSourceURLPopup();
174
+
175
+ uploadImageSectionComponent.tests.uploadImagePopupContents(650, 684);
176
+ });
177
+
178
+ describe('Delete image - Edit tab', () => {
179
+ abortEarlySetup();
180
+ before(() => {
181
+ cy.log('Navigating to highlight image question type');
182
+ highlightImagePage.steps.navigateToCreateQuestion('highlight image');
183
+ cy.log('Uploading an image');
184
+ uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
185
+ uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
186
+ uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
187
+ });
188
+
189
+ uploadImageSectionComponent.tests.verifyDeleteImagePopup();
190
+
191
+ it('When user clicks on \'Cancel\' button the popup should close and image should not get deleted', () => {
192
+ dialogBoxBase.steps.clickOnRejectButtonInDialogBox();
193
+ utilities.verifyElementVisibilityState(highlightImagePage.highlighImageCanvas(), 'visible');
194
+ });
195
+
196
+ it('When user clicks on \'Delete image\' button the popup should close and image should get deleted', () => {
197
+ uploadImageSectionComponent.steps.clickOnDeleteImageButton();
198
+ dialogBoxBase.steps.clickOnAcceptButtonInDialogBox();
199
+ utilities.verifyElementVisibilityState(highlightImagePage.highlighImageCanvas(), 'notExist')
200
+ });
201
+ });
202
+
203
+ describe('Width(px) and Image alternative text: contents and Set correct answer section', () => {
204
+ abortEarlySetup();
205
+ before(() => {
206
+ cy.log('Navigating to highlight image question type');
207
+ highlightImagePage.steps.navigateToCreateQuestion('highlight image');
208
+ cy.barsPreLoaderWait();
209
+ });
210
+
211
+ it('When user has not uploaded an image then \'Width(px)\' and \'Image alternative text\' label and input field should not be displayed', () => {
212
+ utilities.verifyElementVisibilityState(highlightImagePage.widthLabel(), 'notExist');
213
+ utilities.verifyElementVisibilityState(highlightImagePage.widthInputField(), 'notExist');
214
+ utilities.verifyElementVisibilityState(highlightImagePage.imageAlternativeTextLabel(), 'notExist');
215
+ utilities.verifyElementVisibilityState(highlightImagePage.imageAlternativeTextInputField(), 'notExist');
216
+ });
217
+
218
+ it('When user uploads an image \'Width(px)\' label and input field should be displayed and by default the input field should be prefilled with the width of the uploaded image', () => {
219
+ uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
220
+ uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
221
+ uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
222
+ highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
223
+ utilities.verifyInnerText(highlightImagePage.widthLabel(), 'Width (px)');
224
+ utilities.verifyElementVisibilityState(highlightImagePage.widthLabel(), 'visible');
225
+ highlightImagePage.steps.verifyEditTabWidthInputFieldValue(500);
226
+ utilities.verifyElementVisibilityState(highlightImagePage.widthInputField(), 'visible');
227
+ });
228
+
229
+ it('When user has uploaded an image \'Image alternative text\' label and input field should be displayed and by default the input field should be empty', () => {
230
+ utilities.verifyInnerText(highlightImagePage.imageAlternativeTextLabel(), 'Image alternative text');
231
+ utilities.verifyElementVisibilityState(highlightImagePage.imageAlternativeTextLabel(), 'visible');
232
+ highlightImagePage.steps.verifyImageAlternativeTextInputField('');
233
+ utilities.verifyElementVisibilityState(highlightImagePage.imageAlternativeTextInputField(), 'visible');
234
+ });
235
+
236
+ it('When the user enters a value in the \'Width\' input field then the width of the image in \'Highlight image\' section and \'Set correct answer\' section should be updated accordingly', () => {
237
+ highlightImagePage.steps.addInputToEditTabWidthInputField(250);
238
+ highlightImagePage.steps.verifyImageWidthInHighlightImageSection(250);
239
+ highlightImagePage.steps.verifyHeightAndWidthOfImageInSetCorrectAnswerSection(500, 250);
240
+ });
241
+
242
+ it('When user has edited the value of image in \'Highlight image\' section then the width of image should be edited in the \'Edit image\' popup', () => {
243
+ uploadImageSectionComponent.steps.clickOnEditImageButton();
244
+ uploadImageSectionComponent.steps.verifyWidthInputFieldValueInImagePopup(250);
245
+ uploadImageSectionComponent.steps.clickOnImagePopupCancelButton();
246
+ });
247
+
248
+ it('When user enters text in the \'Image alternative text\' input field the alternative text should be displayed in the \'Set correct answer\' section', () => {
249
+ highlightImagePage.steps.addInputToImageAlternativeTextInputField(constants.flowerImageAltText);
250
+ highlightImagePage.steps.verifyImageAlternativeTextOfImageInSetCorrectAnswerSection(constants.flowerImageAltText);
251
+ });
252
+
253
+ it('CSS of Width(px) and Image alternative text section', { tags: 'css' }, () => {
254
+ utilities.verifyCSS(highlightImagePage.widthLabel(), {
255
+ 'color': css.color.labels,
256
+ 'font-size': css.fontSize.normal,
257
+ 'font-weight': css.fontWeight.semibold
258
+ });
259
+ utilities.verifyCSS(highlightImagePage.widthInputField(), {
260
+ 'color': css.color.text,
261
+ 'font-size': css.fontSize.default,
262
+ 'font-weight': css.fontWeight.regular
263
+ });
264
+ utilities.verifyCSS(highlightImagePage.imageAlternativeTextLabel(), {
265
+ 'color': css.color.labels,
266
+ 'font-size': css.fontSize.normal,
267
+ 'font-weight': css.fontWeight.semibold
268
+ });
269
+ utilities.verifyCSS(highlightImagePage.imageAlternativeTextInputField(), {
270
+ 'color': css.color.text,
271
+ 'font-size': css.fontSize.default,
272
+ 'font-weight': css.fontWeight.regular
273
+ });
274
+ });
275
+
276
+ it('Accessibility of Width(px) and Image alternative text section', { tags: 'a11y' }, () => {
277
+ cy.checkAccessibility(highlightImagePage.imageAlternativeTextLabel().parents('.width-alternative-text-wrapper'));
278
+ });
279
+
280
+ it('When user clears the \'Image alternative text\' input field then the alternative text should not be displayed in the \'Set correct answer\' section', () => {
281
+ highlightImagePage.steps.clearImageAlternativeTextInputField();
282
+ highlightImagePage.steps.verifyImageAlternativeTextOfImageInSetCorrectAnswerSection('');
283
+ });
284
+ });
285
+
286
+ describe('Width(px) and Image alternative text: preview tab', () => {
287
+ abortEarlySetup();
288
+ before(() => {
289
+ cy.log('Navigating to highlight image question type');
290
+ highlightImagePage.steps.navigateToCreateQuestion('highlight image');
291
+ cy.log('Uploading an image');
292
+ uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
293
+ uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
294
+ uploadImageSectionComponent.steps.clickOnImagePopupOkButton();
295
+ highlightImagePage.steps.verifyImageUploadedInHighlightRegion();
296
+ });
297
+
298
+ it('When the user enters a value in the \'Width\' input field then the width of the image should be updated accordingly in the \'Preview tab\'', () => {
299
+ highlightImagePage.steps.addInputToEditTabWidthInputField(250);
300
+ highlightImagePage.steps.switchToPreviewTab();
301
+ highlightImagePage.steps.verifyHeightAndWidthOfImageInPreviewTab(500, 250);
302
+ });
303
+
304
+ it('When user enters text in the \'Image alternative text\' input field the alternative text should be displayed in the \'Preview tab\'', () => {
305
+ highlightImagePage.steps.switchToEditTab();
306
+ highlightImagePage.steps.addInputToImageAlternativeTextInputField(constants.flowerImageAltText);
307
+ highlightImagePage.steps.switchToPreviewTab();
308
+ highlightImagePage.steps.verifyImageAlternativeTextOfImageInPreviewTab(constants.flowerImageAltText);
309
+ });
310
+
311
+ it('When user clears the \'Image alternative text\' input field then the alternative text should not be displayed in the \'Preview tab\'', () => {
312
+ highlightImagePage.steps.switchToEditTab();
313
+ highlightImagePage.steps.clearImageAlternativeTextInputField();
314
+ highlightImagePage.steps.switchToPreviewTab();
315
+ highlightImagePage.steps.verifyImageAlternativeTextOfImageInPreviewTab('');
316
+ });
317
+ });
318
+ });