itemengine-cypress-automation 1.0.86 → 1.0.88

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 (48) hide show
  1. package/cypress/e2e/ILC/DrawingResponse/drawingResponseCustomizeAdditionalOptions.js +30 -30
  2. package/cypress/e2e/ILC/DrawingResponse/drawingResponseGradingViewAndCorrectAnswerViewContents.smoke.js +1 -1
  3. package/cypress/e2e/ILC/EssayResponse/createCustomCategory.smoke.js +568 -0
  4. package/cypress/e2e/ILC/EssayResponse/editAndPreviewTabScoringSection.js +86 -0
  5. package/cypress/e2e/ILC/EssayResponse/editTabBasicSections.js +389 -0
  6. package/cypress/e2e/ILC/EssayResponse/gradingViewAndCorrectAnswerViewContents.smoke.js +112 -0
  7. package/cypress/e2e/ILC/EssayResponse/headerSection.js +68 -0
  8. package/cypress/e2e/ILC/EssayResponse/previewAddTable.js +290 -0
  9. package/cypress/e2e/ILC/EssayResponse/previewContentsForAllViews.smoke.js +79 -0
  10. package/cypress/e2e/ILC/EssayResponse/previewEditTable.js +379 -0
  11. package/cypress/e2e/ILC/EssayResponseBasic/essayResponseBasicCustomizeFormattingOptions.js +207 -0
  12. package/cypress/e2e/ILC/EssayResponseBasic/gradingViewAndCorrectAnswerViewContents.smoke.js +115 -0
  13. package/cypress/e2e/ILC/EssayResponseBasic/previewContentsForAllViews.smoke.js +79 -0
  14. package/cypress/e2e/ILC/FillInTheGapsOverImageDragAndDrop/FillInTheGapsOverImageDragAndDropScoring/partialDifferentWeightsBasic.js +159 -0
  15. package/cypress/e2e/ILC/FillInTheGapsOverImageDragAndDrop/backgroundImageAndCanvasProperties.js +507 -29
  16. package/cypress/e2e/ILC/FillInTheGapsOverImageDragAndDrop/previewContentsForAllViews.smoke.js +6 -0
  17. package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/responseAnswersAndAcceptedStudentInput.js +272 -0
  18. package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/specialCharactersSection.js +300 -0
  19. package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/specifyCorrectAnswerSection.js +3 -3
  20. package/cypress/e2e/ILC/FillInTheGapsOverImageTextNew/studentViewSettings.js +204 -0
  21. package/cypress/e2e/ILC/Protractor/protractorEditTabBasicsSection.js +4 -4
  22. package/cypress/e2e/ILC/Protractor/protractorEditTabFunctionality.js +1 -1
  23. package/cypress/e2e/ILC/Ruler/rulerEditTabBasicsSection.js +4 -4
  24. package/cypress/e2e/ILC/Ruler/rulerEditTabFunctionality.js +1 -1
  25. package/cypress/e2e/ILC/SingleSelection/editTabScoringSection.js +1 -3
  26. package/cypress/e2e/ILC/TextEntryMath/editTabBasicSection.js +205 -0
  27. package/cypress/e2e/ILC/TextEntryMath/editTabScoringSection.js +259 -0
  28. package/cypress/e2e/ILC/TextEntryMath/minimumScoringPenaltyPointsAndRoundingDropdown.js +202 -0
  29. package/cypress/e2e/ILC/TextEntryMath/responseEvaluationMethodsAndCustomSettings.js +613 -0
  30. package/cypress/e2e/ILC/TextEntryMath/specifyCorrectAnswerSection.js +71 -0
  31. package/cypress/fixtures/equationEditorCategoriesAndSymbols .js +318 -318
  32. package/cypress/fixtures/theme/ilc.json +3 -0
  33. package/cypress/pages/components/backgroundImageUploadComponent.js +1 -2
  34. package/cypress/pages/components/colorPopupComponent.js +26 -3
  35. package/cypress/pages/components/createCustomCategoryFlyout.js +351 -46
  36. package/cypress/pages/components/customizeSpecialCharacterComponent.js +165 -0
  37. package/cypress/pages/components/equationEditorFlyout.js +124 -0
  38. package/cypress/pages/components/essayResponseCommonComponents.js +3 -0
  39. package/cypress/pages/components/figOverImageCanvasComponent.js +316 -7
  40. package/cypress/pages/components/index.js +3 -1
  41. package/cypress/pages/components/opacityComponent.js +31 -4
  42. package/cypress/pages/components/specialAndCustomSpecialCharactersComponent.js +1 -0
  43. package/cypress/pages/components/specialCharactersFlyoutComponent.js +1 -0
  44. package/cypress/pages/drawingResponsePage.js +33 -138
  45. package/cypress/pages/essayResponsePage.js +612 -26
  46. package/cypress/pages/fillInTheGapsOverImageDragAndDropPage.js +48 -7
  47. package/cypress/pages/fillInTheGapsOverImageTextPage.js +267 -13
  48. package/package.json +1 -1
@@ -0,0 +1,165 @@
1
+ import utilities from "../../support/helpers/utilities";
2
+
3
+ const selectors = {
4
+ groupByLanguageRadioButton: () => cy.get('[class*="CustomizedSpecialCharacterstyles__RadioGroupWrapper"] .ngie-radio-btn input').eq(0),
5
+ groupByLanguageLabel: () => cy.get('[class*="CustomizedSpecialCharacterstyles__RadioGroupWrapper"] .ngie-radio-label').eq(0),
6
+ showOnlyCustomSpecialCharactersRadioButton: () => cy.get('[class*="CustomizedSpecialCharacterstyles__RadioGroupWrapper"] .ngie-radio-btn input').eq(1),
7
+ showOnlyCustomSpecialCharactersLabel: () => cy.get('[class*="CustomizedSpecialCharacterstyles__RadioGroupWrapper"] .ngie-radio-label').eq(1),
8
+ selectSpecialCharacterLanguagesLabel: () => cy.get('[class*="CustomizedSpecialCharacterstyles__SpecialCharLabel"]'),
9
+ customizeSpecialCharactersPreviewButton: () => cy.get('[class*="CustomizedSpecialCharacterstyles__PreviewLabel"]'),
10
+ specialCharactersCategoryTileTickIcon: () => cy.get('.tick-icon-wrapper'),
11
+ TickIcon: () => cy.get('.tick-icon-wrapper'),
12
+ specialCharactersCategoryTilesWrapper: () => cy.get('[class*="CustomizedSpecialCharacterstyles__DragAndDropWrapper"]'),
13
+ specialCharacterTiles: (specialCharacterCategory = null) => {
14
+ if (specialCharacterCategory) {
15
+ return cy.get(`[id*="DraggableItem"] button[aria-label="${specialCharacterCategory}"]`)
16
+ } else {
17
+ return cy.get('[id*="DraggableItem"] button')
18
+ }
19
+ },
20
+ specialCharacterTileIcon: () => cy.get('.equation-editor-icon'),
21
+ specialCharacterTileCategoryName: () => cy.get('.equation-editor-label-wrapper'),
22
+ specialCharacterTileSectionCategoriesDragIcon: () => cy.get('.drag-icon-equation-editor-button'),
23
+ //Special characters preview popup
24
+ specialCharactersPreviewPopupCharactersCategoryWrapper: () => cy.get('[class*="special"][class*="accordion"]'),
25
+ specialCharactersPreviewPopupCategoryAccordionExpandIcon: () => cy.get('[class*="expandIconWrapper"]'),
26
+ specialCharactersPreviewPopupCategoryLabel: () => cy.get('[class*="CustomizedSpecialCharacterstyles__AccordionLabel"]'),
27
+ specialCharactersPreviewPopupSymbol: () => cy.get('[class*="CustomizedSpecialCharacterstyles__CharacterWrapper"]'),
28
+
29
+ //Show only custom special characters section
30
+ customSpecialCharactersLabel: () => cy.get('[class*="CustomizedSpecialCharacterstyles__SpecialCharLabel"]'),
31
+ customSpecialCharactersInputField: () => cy.get('input[aria-label="Custom special characters"]'),
32
+ }
33
+
34
+ const steps = {
35
+ verifyGroupedByLanguageRadioButtonIsSelected: () => {
36
+ customizeSpecialCharacterComponent.groupByLanguageRadioButton()
37
+ .should('be.checked');
38
+ },
39
+
40
+ selectGroupByLanguageRadioButton: () => {
41
+ customizeSpecialCharacterComponent.groupByLanguageRadioButton()
42
+ .click()
43
+ .should('be.checked');
44
+ },
45
+
46
+ selectShowOnlyCustomSpecialCharactersRadioButton: () => {
47
+ customizeSpecialCharacterComponent.showOnlyCustomSpecialCharactersRadioButton()
48
+ .click()
49
+ .should('be.checked');
50
+ },
51
+
52
+ clickOnCustomizeSpecialCharactersPreviewButton: () => {
53
+ customizeSpecialCharacterComponent.customizeSpecialCharactersPreviewButton()
54
+ .click();
55
+ },
56
+
57
+ /**
58
+ * @description Click on category accordion expand icon in special characters popup
59
+ * @param {number} index Index of category in popup
60
+ */
61
+ clickOnSpecialCharactersPreviewPopupCategoryAccordionExpandIcon: (index) => {
62
+ customizeSpecialCharacterComponent.specialCharactersPreviewPopupCategoryAccordionExpandIcon()
63
+ .eq(index)
64
+ .click();
65
+ },
66
+
67
+ /**
68
+ * @description Verify the special characters preview popup in edit tab
69
+ * @param {object[]} categoryAndSymbolsArray Array of list of categories and their symbols
70
+ */
71
+ verifySpecialCharactersPreviewPopupInEditTab: (categoryAndSymbolsArray) => {
72
+ categoryAndSymbolsArray.forEach((category, index) => {
73
+ utilities.verifyInnerText(customizeSpecialCharacterComponent.specialCharactersPreviewPopupCategoryLabel().eq(index), `${category.categoryName}`);
74
+ customizeSpecialCharacterComponent.specialCharactersPreviewPopupCharactersCategoryWrapper()
75
+ .eq(index)
76
+ .within(() => {
77
+ customizeSpecialCharacterComponent.specialCharactersPreviewPopupCategoryLabel()
78
+ .click();
79
+ category.symbols.forEach((symbolARIALabel, index) => {
80
+ customizeSpecialCharacterComponent.charactersPopupCharacterSymbol() //Check this
81
+ .eq(index)
82
+ .find('svg')
83
+ .should('have.attr', 'aria-label', `${symbolARIALabel}`);
84
+ });
85
+ });
86
+ });
87
+ },
88
+
89
+ /**
90
+ * @description Verify customized special character category tiles in edit tab
91
+ * @param {string[]} charactersCategoriesArray Array of special character categories
92
+ */
93
+ verifyCustomizeSpecialCharactersCategoryTiles: (charactersCategoriesArray) => {
94
+ customizeSpecialCharacterComponent.specialCharactersCategoryTilesWrapper()
95
+ .within(() => {
96
+ charactersCategoriesArray.forEach((characterCategory, index) => {
97
+ customizeSpecialCharacterComponent.specialCharacterTiles()
98
+ .eq(index)
99
+ .should('have.attr', 'aria-label', `${characterCategory}`);
100
+ });
101
+ });
102
+ utilities.verifyElementCount(customizeSpecialCharacterComponent.specialCharacterTiles(), charactersCategoriesArray.length);
103
+ },
104
+
105
+ /**
106
+ * @description Verify selected special characters category tiles
107
+ * @param {string[]} selectedSpecialCharactersCategoriesArray Array of selected special characters categories
108
+ */
109
+ verifySelectedCustomizeSpecialCharactersCategoryTiles: (selectedSpecialCharactersCategoriesArray) => {
110
+ customizeSpecialCharacterComponent.specialCharactersCategoryTilesWrapper()
111
+ .within(() => {
112
+ selectedSpecialCharactersCategoriesArray.forEach((characterCategory) => {
113
+ customizeSpecialCharacterComponent.specialCharacterTiles(characterCategory)
114
+ .should('have.class', 'Mui-selected')
115
+ .within(() => {
116
+ utilities.verifyElementVisibilityState(customizeSpecialCharacterComponent.specialCharactersCategoryTileTickIcon(), 'visible');
117
+ });
118
+ });
119
+ });
120
+ },
121
+
122
+ clickOnSpecialCharactersCategoryTile: (categoryName) => {
123
+ customizeSpecialCharacterComponent.specialCharacterTiles(categoryName)
124
+ .click();
125
+ },
126
+
127
+ verifySpecialCharacterCategoryTileIsSelected: (categoryName) => {
128
+ customizeSpecialCharacterComponent.specialCharacterTiles(categoryName)
129
+ .should('have.attr', 'data-aria-pressed', 'false')
130
+ .within(() => {
131
+ utilities.verifyElementVisibilityState(customizeSpecialCharacterComponent.TickIcon(), 'visible');
132
+ });
133
+ },
134
+
135
+ verifySpecialCharacterCategoryTileIsNotSelected: (categoryName) => {
136
+ customizeSpecialCharacterComponent.specialCharacterTiles(categoryName)
137
+ .should('have.attr', 'data-aria-pressed', 'false')
138
+ .within(() => {
139
+ utilities.verifyElementVisibilityState(customizeSpecialCharacterComponent.TickIcon(), 'hidden');
140
+ });
141
+ },
142
+
143
+ addInputToCustomSpecialCharactersInputField: (input) => {
144
+ customizeSpecialCharacterComponent.customSpecialCharactersInputField()
145
+ .type(`${input}`)
146
+ .should('have.value', `${input}`)
147
+ },
148
+
149
+ /**
150
+ * Verify custom special characters displayed in edit tab preview popup
151
+ * @param {string[]} customSpecialCharacters Array of custom special characters
152
+ */
153
+ verifyCustomSpecialCharactersDisplayedInPreviewPopupEditTab: (customSpecialCharacters) => {
154
+ customSpecialCharacters.forEach((customSpecialCharacter, index) => {
155
+ utilities.verifyInnerText(customizeSpecialCharacterComponent.specialCharactersPreviewPopupSymbol().eq(index), `${customSpecialCharacter}`);
156
+ utilities.verifyElementVisibilityState(customizeSpecialCharacterComponent.specialCharactersPreviewPopupSymbol().eq(index), 'visible');
157
+ });
158
+ utilities.verifyElementCount(customizeSpecialCharacterComponent.specialCharactersPreviewPopupSymbol(), `${customSpecialCharacters.length}`);
159
+ },
160
+ }
161
+
162
+ export const customizeSpecialCharacterComponent = {
163
+ ...selectors,
164
+ steps
165
+ }
@@ -1,6 +1,7 @@
1
1
  import { equationEditorCategoriesAndSymbols } from "../../fixtures/equationEditorCategoriesAndSymbols ";
2
2
  import constants from "../../fixtures/constants";
3
3
  import { dialogBoxBase } from "../dialogBoxBase";
4
+ import utilities from "../../support/helpers/utilities";
4
5
  const css = Cypress.env('css');
5
6
 
6
7
  const selectors = {
@@ -34,6 +35,129 @@ const selectors = {
34
35
  }
35
36
 
36
37
  const steps = {
38
+ /**
39
+ * @description verify category is not displayed in preview tab equation editor
40
+ * @param {string} categoryName Name of category
41
+ */
42
+ verifyCategoryIsNotDisplayedInEquationEditorPreviewTab: (categoryName) => {
43
+ utilities.verifyElementVisibilityState(equationEditorFlyout.categoryTab().contains(`${categoryName}`), 'notExist');
44
+ },
45
+
46
+ /**
47
+ * @description verify category in preview tab equation editor
48
+ * @param {string} categoryName Name of category
49
+ * @param {string} categoryIcon Icon of category
50
+ */
51
+ verifyCategoryInEquationEditorPreviewTab: (categoryName, categoryIcon) => {
52
+ equationEditorFlyout.categoryTab()
53
+ .contains(`${categoryName}`)
54
+ .parents('.tool-wrapper')
55
+ .within(() => {
56
+ utilities.verifyElementVisibilityState(equationEditorFlyout.categoryTabTitle(), 'visible');
57
+ utilities.verifyElementVisibilityState(equationEditorFlyout.categoryTabIcon(), 'visible');
58
+ utilities.verifyTextContent(equationEditorFlyout.categoryTabTitle(), `${categoryName}`);
59
+ utilities.verifyTextContent(equationEditorFlyout.categoryTabIcon(), `${categoryIcon}`);
60
+ });
61
+ },
62
+
63
+ /**
64
+ * @description select equation editor category in preview tab
65
+ * @param {string} categoryName Name of category
66
+ */
67
+ selectEquationEditorCategoryPreviewTab: (categoryName) => {
68
+ equationEditorFlyout.categoryTab()
69
+ .contains(`${categoryName}`)
70
+ .click();
71
+ },
72
+
73
+ /**
74
+ * @description Verify the symbols displayed in equation editor category in preview tab
75
+ * @param {string} categoryAccordionDisplayName Display name of category accordion in create custom category flyout
76
+ * @param {object[]} symbolsArray An array of objects which contain aria-label, title and text element of every symbol
77
+ * @param {string} symbolsArray[].title Title of symbol
78
+ * @param {string} symbolsArray[].textElement Text element of symbol
79
+ * @param {string} symbolsArray[].ariaLabel aria-label of symbol
80
+ * @example [
81
+ {
82
+ title: 'One',
83
+ textElement: '1',
84
+ ariaLabel: 'one'
85
+ },
86
+ {
87
+ title: 'Two',
88
+ textElement: '2',
89
+ ariaLabel: 'two'
90
+ },
91
+ ]
92
+ */
93
+ verifyCharactersDisplayedInEquationEditorCategoryPreviewTab: (symbolsArray) => {
94
+ equationEditorFlyout.categoryCharacters()
95
+ .each(($el, index) => {
96
+ cy.wrap($el)
97
+ .should('have.attr', 'aria-label', symbolsArray[index].ariaLabel)
98
+ utilities.verifyTextContent(cy.wrap($el).find('title'), `${symbolsArray[index].title}`);
99
+ if (symbolsArray[index].textElement !== null) {
100
+ utilities.verifyTextContent(cy.wrap($el), `${symbolsArray[index].textElement}`);
101
+ }
102
+ });
103
+ utilities.verifyElementCount(equationEditorFlyout.categoryCharacters(), symbolsArray.length);
104
+ },
105
+
106
+ /**
107
+ * @description Select category and enter the equations in equation editor input field
108
+ * @param {Object[]} responses - An array of objects containing the categoryName and symbolName
109
+ * @param {string} responses[].categoryName Name of the category
110
+ * @param {string} responses[].symbolName Name of the symbol from the selected category
111
+ */
112
+ enterEquation: (responses) => {
113
+ responses.forEach(({ categoryName, symbolName }) => {
114
+ equationEditorFlyout.categoryTab()
115
+ .contains(equationEditorCategoriesAndSymbols[categoryName].displayName, { matchCase: false })
116
+ .click();
117
+ symbolName.forEach((individualSymbol) => {
118
+ equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols[categoryName].symbols[individualSymbol].ariaLabel)
119
+ .click();
120
+ });
121
+ });
122
+ },
123
+
124
+ /**
125
+ * @description type in the equation editor input field
126
+ * @param {string} text - text to be entered in the input field
127
+ */
128
+ enterTextInPreviewInputField: (text) => {
129
+ equationEditorFlyout.previewInputField()
130
+ .type(text);
131
+ },
132
+
133
+ clickOnOkButton: () => {
134
+ equationEditorFlyout.buttonOk()
135
+ .click();
136
+ },
137
+
138
+ /**
139
+ * @description type in the equation editor input field first empty box
140
+ * @param {string} text - text to be entered in the first empty box of field
141
+ */
142
+ enterTextInFirstEmptyBox: (textArray) => {
143
+ textArray.forEach((text) => {
144
+ equationEditorFlyout.inputFieldFirstEmptyBox()
145
+ .click()
146
+ .type(text)
147
+ });
148
+ },
149
+
150
+ /**
151
+ * @description type in the equation editor cursor input field
152
+ * @param {string} text - text to be entered at the cursor
153
+ */
154
+ enterTextAtInputFieldCursor: (text) => {
155
+ equationEditorFlyout.inputFieldCursor()
156
+ .click()
157
+ .type(text)
158
+ },
159
+
160
+ ///Old
37
161
  addGenericEquationUsingEquationEditorToCKEditorInputField: () => {
38
162
  equationEditorFlyout.categoryTab(equationEditorCategoriesAndSymbols['basic'].displayName)
39
163
  .click();
@@ -155,6 +155,9 @@ const steps = {
155
155
  .should('be.checked');
156
156
  },
157
157
 
158
+
159
+ ///OLD
160
+
158
161
  //TODO: need to improve this, we are passing two parameters here, only one should suffice
159
162
  openAndSelectOptionFromDisplayWordLimitDropdown: (optionIndex, optionName) => {
160
163
  essayResponseCommonComponents.displayWordLimitDropdown()
@@ -1,12 +1,38 @@
1
1
  import utilities from "../../support/helpers/utilities";
2
2
  import { backgroundImageUploadComponent } from "./backgroundImageUploadComponent";
3
+ import { commonComponents } from "./commonComponents";
3
4
  import { createQuestionBasePage } from "./createQuestionBasePage";
4
5
 
5
6
  const selectors = {
6
7
  insertResponseAreaButton: () => cy.get('button[aria-label*="insert"]').eq(0),
7
8
  selectResponseAreaButton: () => cy.get('button[aria-label*="select"]').eq(0),
9
+ insertTextAreaButton: () => cy.get('button[aria-label*="insert text"]').eq(0),
8
10
  canvas: () => cy.get('[class*="Canvasstyle__DragAndDropCanvas"]'),
9
11
  canvasInPreviewTab: () => cy.get('[class*="PreviewTabstyles__ContentWrapper"] [class*="Canvasstyle__DragAndDropCanvas"]'),
12
+ canvasLabel: () => cy.get('[class*="Canvasstyle__CanvasTxt"]'),
13
+ selectDropzoneButton: () => cy.get('[aria-label="select dropzone"]'),
14
+ insertDropzoneButton: () => cy.get('[aria-label="insert dropzone"]'),
15
+ insertTextButton: () => cy.get('[aria-label="insert text"]'),
16
+ undoButton: () => cy.get('[aria-label="undo"]'),
17
+ redoButton: () => cy.get('[aria-label="redo"]'),
18
+ clearAllButton: () => cy.get('[aria-label="clear all"]'),
19
+ canvasSelectedMenuText: () => cy.get('[class*="Canvasstyle__CanvasSelectedMenuTxt"]'),
20
+ dropzoneWrapper: () => cy.get('[class*="Canvasstyle__ResponseDiv"]'),
21
+ dropzonePointer: () => cy.get('[class*="Canvasstyle__PointerWrapper"]'),
22
+ dropzone: () => cy.get('[class*="Canvasstyle__DropZone"]'),
23
+ dropzonePointerInPreviewTab: () => cy.get('.preview-content-wrapper [class*="Canvasstyle__PointerWrapper"]'),
24
+ dropzoneInPreviewTab: () => cy.get('.preview-content-wrapper [class*="Canvasstyle__DropzoneWrapper"]'),
25
+ textBoxInPreviewTab: () => cy.get('.preview-content-wrapper [class*="Canvasstyle__TextBoxContainer"] textarea'),
26
+ removeDropzoneButton: () => cy.get('.remove-button'),
27
+ dropzoneNumerationText: () => cy.get('[class*="Canvasstyle__DropzoneContent"]'),
28
+ dropzoneStyle: (ariaLabel = null) => {
29
+ if (ariaLabel) {
30
+ return cy.get(`.canvas-secondary-control[aria-label="${ariaLabel}"]`)
31
+ } else {
32
+ return cy.get('.canvas-secondary-control')
33
+ }
34
+ },
35
+ textResponse: () => cy.get('[class*="Canvasstyle__TextBoxContainer"] textarea'),
10
36
  canvasImage: () => cy.get('.canvas-image'),
11
37
  canvasImageInPreviewTab: () => cy.get('[class*="PreviewTabstyles__ContentWrapper"] .canvas-image'),
12
38
  imagePropertiesLabel: () => cy.get('[class*="ImagePropertiesstyles__SectionLabel"]'),
@@ -22,8 +48,10 @@ const selectors = {
22
48
  canvasHeightInputField: () => cy.get('.common-text-wrapper .text-field').eq(1),
23
49
  imageAlternativeTextLabel: () => cy.get('[class*="InlineTextFieldWithDebouncestyles__PropertyLabel"]'),
24
50
  imageAlternativeTextInputField: () => cy.get('[class*="ImagePropertiesstyles__AltTextWrapper"] input'),
25
- canvasImagePreviewTab: () => cy.get('.background-image'),
26
- removeDropzoneButton: () => cy.get('.remove-button')
51
+ editColorLabel: () => cy.get('[class*="Canvasstyle__TextColorArray"] p'),
52
+ selectedColorBlockInTextColorPopup: () => cy.get('.color-library-selected'),
53
+ textColorPopupWrapper: () => cy.get('[class*="Canvasstyle__TextColorPopupWrapper"]'),
54
+ textColorLabelInTextColorPopup: () => cy.get('[class*="Canvasstyle__PopupText"]'),
27
55
  }
28
56
 
29
57
  const steps = {
@@ -46,6 +74,25 @@ const steps = {
46
74
  .click();
47
75
  },
48
76
 
77
+ /**
78
+ * @param {number} xCoordinateInPercentage - The x co-ordinate for position of the response area
79
+ * @description Adds response area to the canvas.
80
+ */
81
+ insertTextArea: (yCoordinateInPercentage) => {
82
+ figOverImageCanvasComponent.insertTextAreaButton()
83
+ .click();
84
+ figOverImageCanvasComponent.canvasImage()
85
+ .then(($element) => {
86
+ const imageHeight = $element[0].clientHeight;
87
+ const xCoordinate = 80;
88
+ const yCoordinate = yCoordinateInPercentage * imageHeight / 100;
89
+ figOverImageCanvasComponent.canvasImage()
90
+ .click(xCoordinate, yCoordinate, { force: true });
91
+ });
92
+ figOverImageCanvasComponent.textResponse()
93
+ .type(text);
94
+ },
95
+
49
96
  verifyImageIsUploaded: () => {
50
97
  utilities.verifyElementVisibilityState(figOverImageCanvasComponent.canvasImage(), 'visible');
51
98
  utilities.verifyElementVisibilityState(backgroundImageUploadComponent.uploadImageProgressBar(), 'notExist');
@@ -149,11 +196,11 @@ const steps = {
149
196
  .should('have.attr', 'opacity', value);
150
197
  },
151
198
 
152
- /**
153
- * @param {number} value holds opacity value for image
154
- * @description function verifies opacity value for image
155
- */
156
- verifyOpacityValueForCanvasImageInPreviewTab: (value) => {
199
+ /**
200
+ * @param {number} value holds opacity value for image
201
+ * @description function verifies opacity value for image
202
+ */
203
+ verifyOpacityValueForCanvasImageInPreviewTab: (value) => {
157
204
  figOverImageCanvasComponent.canvasImageInPreviewTab()
158
205
  .should('have.attr', 'opacity', value);
159
206
  },
@@ -293,6 +340,246 @@ const steps = {
293
340
  figOverImageCanvasComponent.canvasInPreviewTab()
294
341
  .should('have.css', 'height', `${height}px`);
295
342
  },
343
+
344
+ /**
345
+ * @param {"Insert dropzone"|"Insert text"|"Select dropzone"} {String} button denotes selected button name
346
+ *@description function verifies button active state
347
+ */
348
+ verifyCanvasMenuButtonSelected: (button) => {
349
+ switch (button) {
350
+ case 'Insert dropzone': figOverImageCanvasComponent.insertDropzoneButton()
351
+ .should('have.class', 'active');
352
+ break;
353
+ case 'Insert text': figOverImageCanvasComponent.insertTextButton()
354
+ .should('have.class', 'active');
355
+ break;
356
+ case 'Select dropzone': figOverImageCanvasComponent.selectDropzoneButton()
357
+ .should('have.class', 'active');
358
+ break;
359
+ }
360
+ },
361
+
362
+ /**
363
+ * @param {"Insert dropzone"|"Insert text"|"Select dropzone"} {String} button denotes selected button name
364
+ *@description function selects button
365
+ */
366
+ selectCanvasMenuButton: (button) => {
367
+ switch (button) {
368
+ case 'Insert dropzone': figOverImageCanvasComponent.insertDropzoneButton()
369
+ .click()
370
+ .should('have.class', 'active');
371
+ break;
372
+ case 'Insert text': figOverImageCanvasComponent.insertTextButton()
373
+ .click()
374
+ .should('have.class', 'active');
375
+ break;
376
+ case 'Select dropzone': figOverImageCanvasComponent.selectDropzoneButton()
377
+ .click()
378
+ .should('have.class', 'active');
379
+ break;
380
+ }
381
+ },
382
+
383
+ redoAction: () => {
384
+ figOverImageCanvasComponent.redoButton()
385
+ .click();
386
+ },
387
+
388
+ undoAction: () => {
389
+ figOverImageCanvasComponent.undoButton()
390
+ .click();
391
+ },
392
+
393
+ clearAll: () => {
394
+ figOverImageCanvasComponent.clearAllButton()
395
+ .click();
396
+ },
397
+
398
+ verifyUndoButtonDisabled: () => {
399
+ utilities.verifyElementDisabled(figOverImageCanvasComponent.undoButton());
400
+ },
401
+
402
+ verifyRedoButtonDisabled: () => {
403
+ utilities.verifyElementDisabled(figOverImageCanvasComponent.redoButton());
404
+ },
405
+
406
+ verifyUndoButtonEnabled: () => {
407
+ utilities.verifyElementNotDisabled(figOverImageCanvasComponent.undoButton());
408
+ },
409
+
410
+ verifyRedoButtonEnabled: () => {
411
+ utilities.verifyElementNotDisabled(figOverImageCanvasComponent.redoButton());
412
+ },
413
+
414
+ /**
415
+ * @param {number} dropzoneIndex dropzone number
416
+ * @description function selects dropzone of a particular index
417
+ */
418
+ selectDropzone: (dropzoneIndex) => {
419
+ figOverImageCanvasComponent.dropzone()
420
+ .eq(dropzoneIndex)
421
+ .click();
422
+ },
423
+
424
+ /**
425
+ * @param {string} style dropzone pointer orientation
426
+ * @description function selects dropzone pointer style
427
+ */
428
+ selectDropzonePointerStyle: (style) => {
429
+ figOverImageCanvasComponent.dropzoneStyle(style)
430
+ .click();
431
+ },
432
+
433
+ clickOnCanvasSelectedMenuText: () => {
434
+ figOverImageCanvasComponent.canvasSelectedMenuText()
435
+ .click();
436
+ },
437
+
438
+ verifyDropzonePointerStyle: (style, dropzoneIndex) => {
439
+ const getPosition = (option) => {
440
+ switch (option) {
441
+ case 'bottom':
442
+ return { top: '-31.5px', left: '-37.5px' };
443
+ case 'bottom right':
444
+ return { top: '-25px', left: '-40px' };
445
+ case 'right':
446
+ return { top: '-21px', left: '-36.5px' };
447
+ case 'top right':
448
+ return { top: '-19px', left: '-31px' };
449
+ case 'top':
450
+ return { top: '-22.5px', left: '-25.5px' };
451
+ case 'top left':
452
+ return { top: '-27px', left: '-24px' };
453
+ case 'left':
454
+ return { bottom: '-20px', left: '-27px' };
455
+ case 'bottom left':
456
+ return { bottom: '-18px', left: '-32px' };
457
+ }
458
+ }
459
+ const expectedPosition = getPosition(style);
460
+ if (style == 'left' || style == 'bottom left') {
461
+ figOverImageCanvasComponent.dropzonePointer()
462
+ .eq(dropzoneIndex)
463
+ .should('have.css', 'bottom', expectedPosition.bottom)
464
+ .and('have.css', 'left', expectedPosition.left);
465
+ }
466
+ else if (style == 'none') {
467
+ figOverImageCanvasComponent.dropzone()
468
+ .parent()
469
+ .should('not.contain', '[class*="Canvasstyle__PointerWrapper"]');
470
+ }
471
+ else {
472
+ figOverImageCanvasComponent.dropzonePointer()
473
+ .eq(dropzoneIndex)
474
+ .should('have.css', 'top', expectedPosition.top)
475
+ .and('have.css', 'left', expectedPosition.left);
476
+ }
477
+ },
478
+
479
+ verifyDropzonePointerStyleInPreviewTab: (style, dropzoneIndex) => {
480
+ const getPosition = (option) => {
481
+ switch (option) {
482
+ case 'bottom':
483
+ return { top: '-31.5px', left: '-37.5px' };
484
+ case 'bottom right':
485
+ return { top: '-25px', left: '-40px' };
486
+ case 'right':
487
+ return { top: '-21px', left: '-36.5px' };
488
+ case 'top right':
489
+ return { top: '-19px', left: '-31px' };
490
+ case 'top':
491
+ return { top: '-22.5px', left: '-25.5px' };
492
+ case 'top left':
493
+ return { top: '-27px', left: '-24px' };
494
+ case 'left':
495
+ return { bottom: '-20px', left: '-27px' };
496
+ case 'bottom left':
497
+ return { bottom: '-18px', left: '-32px' };
498
+ }
499
+ }
500
+ const expectedPosition = getPosition(style);
501
+ if (style == 'left' || style == 'bottom left') {
502
+ figOverImageCanvasComponent.dropzonePointerInPreviewTab()
503
+ .eq(dropzoneIndex)
504
+ .should('have.css', 'bottom', expectedPosition.bottom)
505
+ .and('have.css', 'left', expectedPosition.left);
506
+ }
507
+ else if (style == 'none') {
508
+ figOverImageCanvasComponent.dropzonePointerInPreviewTab()
509
+ .eq(dropzoneIndex)
510
+ .should('not.have.css', 'bottom')
511
+ .and('not.have.css', 'left');
512
+ }
513
+ else {
514
+ figOverImageCanvasComponent.dropzonePointerInPreviewTab()
515
+ .eq(dropzoneIndex)
516
+ .should('have.css', 'top', expectedPosition.top)
517
+ .and('have.css', 'left', expectedPosition.left);
518
+ }
519
+ },
520
+
521
+ verifyDropzoneNotExistInPreviewTab: () => {
522
+ utilities.verifyElementVisibilityState(figOverImageCanvasComponent.dropzoneInPreviewTab(), 'notExist');
523
+ },
524
+
525
+ verifyTextBoxNotExistInPreviewTab: () => {
526
+ utilities.verifyElementVisibilityState(figOverImageCanvasComponent.textBoxInPreviewTab(), 'notExist');
527
+ },
528
+
529
+ verifyDropzoneExistInPreviewTab: () => {
530
+ figOverImageCanvasComponent.dropzoneInPreviewTab()
531
+ .should('be.visible');
532
+ },
533
+
534
+ verifyTextBoxExistInPreviewTab: () => {
535
+ figOverImageCanvasComponent.textBoxInPreviewTab()
536
+ .should('be.visible');
537
+ },
538
+
539
+ verifyTextColorOfTextBox: (color) => {
540
+ figOverImageCanvasComponent.textResponse()
541
+ .should('have.css', 'color', color);
542
+ },
543
+
544
+ verifyTextColorOfTextBoxInPreviewTab: (color) => {
545
+ figOverImageCanvasComponent.textBoxInPreviewTab()
546
+ .should('have.css', 'color', color);
547
+ },
548
+
549
+ verifyTextOfTextBox: (text) => {
550
+ figOverImageCanvasComponent.textResponse()
551
+ .invoke('text')
552
+ .should('eq', text);
553
+ },
554
+
555
+ verifyTextOfTextBoxInPreviewTab: (text) => {
556
+ figOverImageCanvasComponent.textBoxInPreviewTab()
557
+ .invoke('text')
558
+ .should('eq', text);
559
+ },
560
+
561
+ clickOnTextColorButton: () => {
562
+ figOverImageCanvasComponent.dropzoneStyle()
563
+ .click();
564
+ utilities.verifyElementVisibilityState(figOverImageCanvasComponent.textColorPopupWrapper(), 'visible');
565
+ },
566
+
567
+ clickOnEditColorButton: () => {
568
+ figOverImageCanvasComponent.editColorLabel()
569
+ .click();
570
+ },
571
+
572
+ verifyColorBlockSelectedState: () => {
573
+ figOverImageCanvasComponent.selectedColorBlockInTextColorPopup()
574
+ .find('[data-name="Selected card icon"]')
575
+ .should('be.visible');
576
+ },
577
+
578
+ verifyColorBlock: (color) => {
579
+ figOverImageCanvasComponent.selectedColorBlockInTextColorPopup()
580
+ .should('have.css', 'background-color', color);
581
+ },
582
+
296
583
  /**
297
584
  * @description this function removes a dropzone from the canvas
298
585
  * @param {number} index of the dropzone to be removed
@@ -301,6 +588,28 @@ const steps = {
301
588
  figOverImageCanvasComponent.removeDropzoneButton()
302
589
  .eq(index)
303
590
  .click({ force: true });
591
+ },
592
+
593
+ /**
594
+ * @param {string} selectedMenu denotes canvas selected menu text
595
+ * @description function verifies inner text and visibility of canvas selected menu text
596
+ */
597
+ verifyCanvasSelectedMenuText: (selectedMenu) => {
598
+ utilities.verifyInnerText(figOverImageCanvasComponent.canvasSelectedMenuText(), selectedMenu);
599
+ utilities.verifyElementVisibilityState(figOverImageCanvasComponent.canvasSelectedMenuText(), 'visible');
600
+ },
601
+
602
+ /**
603
+ * @param {string} element denotes element
604
+ * @param {string} text denotes tooltip text
605
+ * @description function is used to hover over element and verify innertext of its tooltip
606
+ */
607
+ verifyTooltipInnerText: (element, text) => {
608
+ element()
609
+ .trigger('mouseover', { force: true });
610
+ utilities.verifyInnerText(commonComponents.tooltipText(), text);
611
+ element()
612
+ .trigger('mouseout', { force: true });
304
613
  }
305
614
  }
306
615