itemengine-cypress-automation 1.0.86 → 1.0.87

Sign up to get free protection for your applications and to get access to all the features.
Files changed (49) 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/evaluationMethods2.js +217 -0
  29. package/cypress/e2e/ILC/TextEntryMath/minimumScoringPenaltyPointsAndRoundingDropdown.js +202 -0
  30. package/cypress/e2e/ILC/TextEntryMath/responseEvaluationMethodsAndCustomSettings.js +613 -0
  31. package/cypress/e2e/ILC/TextEntryMath/specifyCorrectAnswerSection.js +71 -0
  32. package/cypress/fixtures/equationEditorCategoriesAndSymbols .js +318 -318
  33. package/cypress/fixtures/theme/ilc.json +3 -0
  34. package/cypress/pages/components/backgroundImageUploadComponent.js +1 -2
  35. package/cypress/pages/components/colorPopupComponent.js +26 -3
  36. package/cypress/pages/components/createCustomCategoryFlyout.js +351 -46
  37. package/cypress/pages/components/customizeSpecialCharacterComponent.js +165 -0
  38. package/cypress/pages/components/equationEditorFlyout.js +124 -0
  39. package/cypress/pages/components/essayResponseCommonComponents.js +3 -0
  40. package/cypress/pages/components/figOverImageCanvasComponent.js +316 -7
  41. package/cypress/pages/components/index.js +3 -1
  42. package/cypress/pages/components/opacityComponent.js +31 -4
  43. package/cypress/pages/components/specialAndCustomSpecialCharactersComponent.js +1 -0
  44. package/cypress/pages/components/specialCharactersFlyoutComponent.js +1 -0
  45. package/cypress/pages/drawingResponsePage.js +33 -138
  46. package/cypress/pages/essayResponsePage.js +612 -26
  47. package/cypress/pages/fillInTheGapsOverImageDragAndDropPage.js +48 -7
  48. package/cypress/pages/fillInTheGapsOverImageTextPage.js +267 -13
  49. package/package.json +1 -1
@@ -97,6 +97,9 @@
97
97
  "draggableOptionsContainerBg": "rgb(238, 241, 251)",
98
98
  "draggableOptionsContainerBorder": "rgb(186, 201, 255)",
99
99
  "draggableOptionBorder": "rgb(107, 139, 255)",
100
+ "warningMessage": "rgb(67, 0, 0)",
101
+ "warningContainerBorder": "rgb(255, 192, 176)",
102
+ "warningContainerBackground": "rgb(255, 248, 240)",
100
103
  "matrixDropzoneCellBg": "rgb(245, 248, 255)",
101
104
  "dropzoneCellIcon": "rgb(186, 201, 255)",
102
105
  "noneCellIcon": "rgb(0, 0, 124)",
@@ -10,8 +10,7 @@ const selectors = {
10
10
  noFileChosenLabel: () => cy.get('[aria-label="No file chosen"]'),
11
11
  uploadImageProgressBar: () => cy.get('[class*="ProgressBar"]'),
12
12
  uploadedFileNameLabel: () => cy.get('[class*="UploadImagestyles__SelectedFileWithIcon"]'),
13
- deleteImageIcon: () => cy.get('[aria-label="Delete image"]'),
14
- errorMessage: () => cy.get('.ErrorMessageContainer')
13
+ deleteImageIcon: () => cy.get('[aria-label="Delete image"]')
15
14
  }
16
15
 
17
16
  const steps = {
@@ -20,8 +20,10 @@ const selectors = {
20
20
  recommendedColorBlockLabel: () => cy.get('[class*="ColorPickerstyles__ColorLabel"]'),
21
21
  cancelButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(0),
22
22
  okButton: () => cy.get('.compact-popup-action-button-wrapper button').eq(1),
23
- dialogBox: () => cy.get('[aria-describedby="alert-dialog-description"]'),
24
- dialogBoxTitle: () => cy.get('#alert-dialog-title')
23
+ dialogBox: () => cy.get('#alert-dialog-description'),
24
+ dialogBoxTitle: () => cy.get('#alert-dialog-title'),
25
+ opacityGradientHue: () => cy.get('.react-colorful__last-control [class="react-colorful__interactive"]'),
26
+ opacityGradientPicker: () => cy.get('.react-colorful__last-control .react-colorful__pointer-fill')
25
27
  }
26
28
 
27
29
  const steps = {
@@ -236,7 +238,28 @@ const steps = {
236
238
  .within(() => {
237
239
  utilities.verifyElementVisibilityState(colorPopupComponent.recommendedColorBlockSelectedIcon(), 'visible');
238
240
  });
239
- }
241
+ },
242
+
243
+ //updated color popup. Need to check for update in feedback form and other qtypes
244
+ verifyOpacityGradientHuePaletteAndPicker: () => {
245
+ utilities.verifyElementVisibilityState(colorPopupComponent.opacityGradientHue(), 'visible');
246
+ utilities.verifyElementVisibilityState(colorPopupComponent.opacityGradientPicker(), 'visible');
247
+ },
248
+
249
+ /**
250
+ * @param {string} color on the hue palette in rgb format
251
+ * @description this function is used to verify color on the hue palette
252
+ */
253
+ verifyOpacityGradientPaletteColor: (color) => {
254
+ utilities.verifyCSS(colorPopupComponent.opacityGradientPicker(), {
255
+ 'background-color': color
256
+ });
257
+ },
258
+
259
+ clickOnOpacityGradientHuePalette: () => {
260
+ colorPopupComponent.opacityGradientHue()
261
+ .click();
262
+ },
240
263
  }
241
264
 
242
265
  const tests = {
@@ -1,9 +1,12 @@
1
1
  import { equationEditorCategoriesAndSymbols } from "../../fixtures/equationEditorCategoriesAndSymbols ";
2
+ import utilities from "../../support/helpers/utilities";
2
3
  import { dialogBoxBase } from "../dialogBoxBase";
3
- import { essayResponsePage } from "../essayResponsePage";
4
+
5
+ const allCategories = Object.keys(equationEditorCategoriesAndSymbols)
4
6
 
5
7
  const selectors = {
6
8
  ...dialogBoxBase,
9
+ createCustomCategoryButton: () => cy.get('.equation-editor-wrapper button'),
7
10
  createCustomCategoryFlyoutTitle: () => cy.get('.custom-category-popup-header'),
8
11
  categoryNameLabel: () => cy.get('.custom-category-flyout-content .input-label').eq(0),
9
12
  categoryIconLabel: () => cy.get('.custom-category-flyout-content .input-label').eq(1),
@@ -19,84 +22,389 @@ const selectors = {
19
22
  categoryAccordionLabel: () => cy.get('.accordian-label'),
20
23
  buttonSave: () => cy.get('.action-btn-wrapper button').eq(0),
21
24
  buttonCancel: () => cy.get('.action-btn-wrapper button').eq(1),
22
- cateogoryCharacters: (ariaLabel = null) => {
25
+ categoryCharacters: (ariaLabel = null) => {
23
26
  if (ariaLabel) {
24
27
  return cy.get(`.icon-button-custom-format[aria-label="${ariaLabel}"]`)
25
28
  } else {
26
29
  return cy.get('.icon-button-custom-format')
27
30
  }
28
31
  },
29
- selectedCharacterDragIcon: () => cy.get('.drag-icon-button-custom-format')
32
+ selectedCharacterDragIcon: () => cy.get('.drag-icon-button-custom-format'),
33
+ symbolTickIcon: () => cy.get('.tick-icon-wrapper')
30
34
  }
31
35
 
32
36
  const steps = {
33
- createCustomCategoryWithMultipleCategoryCharacters: () => {
34
- cy.log('Creating a custom category by selecting \'Keypad\' category, partially selecting \'Basic\' and \'Greek\' categories')
35
- essayResponsePage.createCustomCategoryButton()
37
+ saveCustomCategory: () => {
38
+ createCustomCategoryFlyout.buttonSave()
36
39
  .click();
40
+ },
41
+
42
+ /**
43
+ * @description Add input to custom category name input field
44
+ * @param {string} categoryName Name of custom category
45
+ */
46
+ addInputToCustomCategoryNameInputField: (categoryName) => {
47
+ createCustomCategoryFlyout.categoryNameInputField()
48
+ .clear()
49
+ .type(categoryName);
50
+ },
51
+
52
+ /**
53
+ * @description Add input to category icon input field in custom category flyout
54
+ * @param {string} categoryIcon Icon for custom category
55
+ */
56
+ addInputToCategoryIconInputField: (categoryIcon) => {
57
+ createCustomCategoryFlyout.categoryIconInputField()
58
+ .clear()
59
+ .type(`${categoryIcon}`);
60
+ },
61
+
62
+ /**
63
+ * @description verify text in custom category name input field in custom category flyout
64
+ * @param {string} categoryName Name of custom category
65
+ */
66
+ verifyCustomCategoryNameInputField: (categoryName) => {
67
+ createCustomCategoryFlyout.categoryNameInputField()
68
+ .should('have.value', categoryName);
69
+ },
70
+
71
+ /**
72
+ * @description verify text in category icon input field in custom category flyout
73
+ * @param {string} categoryIcon Icon for custom category
74
+ */
75
+ verifyCategoryIconInputField: (categoryIcon) => {
76
+ createCustomCategoryFlyout.categoryIconInputField()
77
+ .should('have.value', categoryIcon);
78
+ },
79
+
80
+ openCreateCustomCategoryFlyout: () => {
81
+ createCustomCategoryFlyout.createCustomCategoryButton()
82
+ .click();
83
+ utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
84
+ },
85
+
86
+ verifyCreateCustomCategoryAccordionLabelsAndDefaultCheckbox: () => {
87
+ createCustomCategoryFlyout.categoryAccordions()
88
+ .each(($el, index) => {
89
+ cy.wrap($el)
90
+ .parents('.accordian-structure-equation-editor')
91
+ .within(() => {
92
+ createCustomCategoryFlyout.categoryAccordionCheckbox()
93
+ .should('not.be.checked');
94
+ utilities.verifyElementVisibilityState(createCustomCategoryFlyout.categoryAccordionCheckbox(), 'exist');
95
+ utilities.verifyInnerText(createCustomCategoryFlyout.categoryAccordionLabel(), `${equationEditorCategoriesAndSymbols[allCategories[index]].displayName}`)
96
+ createCustomCategoryFlyout.categoryAccordionLabel()
97
+ });
98
+ });
99
+ },
100
+
101
+ /**
102
+ * @description verify category accordion is expanded in create custom category flyout
103
+ * @param {string} categoryAccordionDisplayName Display name of category accordion in create custom category flyout
104
+ */
105
+ verifyCategoryAccordionIsExpanded: (categoryAccordionDisplayName) => {
37
106
  createCustomCategoryFlyout.categoryAccordions()
38
- .contains(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`)
107
+ .contains(`${categoryAccordionDisplayName}`, { matchCase: false })
39
108
  .parents('.accordian-structure-equation-editor')
40
109
  .within(() => {
41
- createCustomCategoryFlyout.categoryAccordionCheckbox()
42
- .click();
110
+ createCustomCategoryFlyout.categoryAccordionIcon()
111
+ .should('have.class', 'Mui-expanded');
112
+ });
113
+ },
114
+
115
+ /**
116
+ * @description verify category accordion is collapsed in create custom category flyout
117
+ * @param {string} categoryAccordionDisplayName Display name of category accordion in create custom category flyout
118
+ */
119
+ verifyCategoryAccordionIsCollapsed: (categoryAccordionDisplayName) => {
120
+ createCustomCategoryFlyout.categoryAccordions()
121
+ .contains(`${categoryAccordionDisplayName}`, { matchCase: false })
122
+ .parents('.accordian-structure-equation-editor')
123
+ .within(() => {
124
+ createCustomCategoryFlyout.categoryAccordionIcon()
125
+ .should('not.have.class', 'Mui-expanded');
43
126
  });
127
+ },
128
+
129
+ clickOnCancelButton: () => {
130
+ createCustomCategoryFlyout.buttonCancel()
131
+ .click();
132
+ },
133
+
134
+ /**
135
+ * @description Expands a category accordion based on its label.
136
+ * @param {string} categoryAccordionDisplayName Display name of category accordion in create custom category flyout
137
+ */
138
+ expandCategoryAccordion: (categoryAccordionDisplayName) => {
139
+ createCustomCategoryFlyout.categoryAccordions()
140
+ .contains(`${categoryAccordionDisplayName}`, { matchCase: false })
141
+ .parents('.accordian-structure-equation-editor')
142
+ .within(() => {
143
+ createCustomCategoryFlyout.categoryAccordionIcon()
144
+ .click()
145
+ });
146
+ createCustomCategoryFlyout.steps.verifyCategoryAccordionIsExpanded(categoryAccordionDisplayName);
147
+ },
148
+
149
+ /**
150
+ * @description Collapses a category accordion based on its label.
151
+ * @param {string} categoryAccordionDisplayName Display name of category accordion in create custom category flyout
152
+ */
153
+ collapseCategoryAccordion: (categoryAccordionDisplayName) => {
44
154
  createCustomCategoryFlyout.categoryAccordions()
45
- .contains(`${equationEditorCategoriesAndSymbols['basic'].displayName}`)
155
+ .contains(`${categoryAccordionDisplayName}`, { matchCase: false })
156
+ .parents('.accordian-structure-equation-editor')
157
+ .within(() => {
158
+ createCustomCategoryFlyout.categoryAccordionIcon()
159
+ .click()
160
+ });
161
+ createCustomCategoryFlyout.steps.verifyCategoryAccordionIsCollapsed(categoryAccordionDisplayName);
162
+ },
163
+
164
+ /**
165
+ * @description Verify the symbols displayed in category accordion in create custom category flyout
166
+ * @param {string} categoryAccordionDisplayName Display name of category accordion in create custom category flyout
167
+ * @param {*} symbolsArray An array of objects which contain aria-label and text element of every symbol
168
+ * @example [
169
+ {
170
+ textElement: '1',
171
+ ariaLabel: 'One',
172
+ },
173
+ {
174
+ textElement: '2',
175
+ ariaLabel: 'Two',
176
+ }
177
+ ]
178
+ */
179
+ verifySymbolsDisplayedInCustomCategoryFlyoutCategoryAccordion: (categoryAccordionDisplayName, symbolsArray) => {
180
+ createCustomCategoryFlyout.categoryAccordions()
181
+ .contains(`${categoryAccordionDisplayName}`, { matchCase: false })
182
+ .parents('.accordian-structure-equation-editor')
183
+ .within(() => {
184
+ createCustomCategoryFlyout.categoryCharacters()
185
+ .should('not.have.class', 'Mui-selected')
186
+ .each(($el, index) => {
187
+ cy.wrap($el)
188
+ .invoke('attr', 'aria-label')
189
+ .then((ariaLabel) => {
190
+ const expectedValue = symbolsArray[index].ariaLabel;
191
+ expect(ariaLabel.trim().toLowerCase()).to.equal(expectedValue.toLowerCase());
192
+ if (symbolsArray[index].textElement !== null) {
193
+ cy.wrap($el)
194
+ .verifyInnerText(symbolsArray[index].textElement)
195
+ }
196
+ });
197
+ });
198
+ });
199
+ },
200
+
201
+ /**
202
+ * @description Verify partially checked state of category accordion checkbox
203
+ * @param {string} categoryAccordionDisplayName Display name of category accordion in create custom category flyout
204
+ */
205
+ verifyPartiallyCheckedStateOfCategoryAccordionCheckbox: (categoryAccordionDisplayName) => {
206
+ createCustomCategoryFlyout.categoryAccordions()
207
+ .contains(`${categoryAccordionDisplayName}`)
46
208
  .parents('.accordian-structure-equation-editor')
47
209
  .within(() => {
48
210
  createCustomCategoryFlyout.categoryAccordionCheckbox()
49
211
  .should('have.attr', 'data-indeterminate', 'true');
50
212
  });
213
+ },
214
+
215
+ /**
216
+ * @description Check category accordion checkbox
217
+ * @param {string} categoryAccordionDisplayName Display name of category accordion in create custom category flyout
218
+ */
219
+ checkCategoryAccordionCheckbox: (categoryAccordionDisplayName) => {
51
220
  createCustomCategoryFlyout.categoryAccordions()
52
- .contains(`${equationEditorCategoriesAndSymbols['greek'].displayName}`)
53
- .click()
221
+ .contains(`${categoryAccordionDisplayName}`)
54
222
  .parents('.accordian-structure-equation-editor')
55
223
  .within(() => {
56
- createCustomCategoryFlyout.cateogoryCharacters(equationEditorCategoriesAndSymbols.greek.symbols.gamma.ariaLabel)
57
- .click();
58
- createCustomCategoryFlyout.cateogoryCharacters(equationEditorCategoriesAndSymbols.greek.symbols.delta.ariaLabel)
59
- .click();
224
+ createCustomCategoryFlyout.categoryAccordionCheckbox()
225
+ .click()
226
+ .should('be.checked');
60
227
  });
61
- createCustomCategoryFlyout.categoryNameInputField()
62
- .type('Custom category with name.');
63
- createCustomCategoryFlyout.buttonSave()
64
- .click();
65
- createCustomCategoryFlyout.dialogBox()
66
- .should('not.exist');
67
228
  },
68
229
 
69
- createCustomCategory: () => {
70
- cy.log('Creating a category by selecting \'Arrows\' category')
71
- essayResponsePage.createCustomCategoryButton()
72
- .click();
230
+ /**
231
+ * @description Verify checked state of category accordion checkbox
232
+ * @param {string} categoryAccordionDisplayName Display name of category accordion in create custom category flyout
233
+ */
234
+ verifyCheckedStateOfCategoryAccordionCheckbox: (categoryAccordionDisplayName) => {
73
235
  createCustomCategoryFlyout.categoryAccordions()
74
- .contains(`${equationEditorCategoriesAndSymbols['arrows'].displayName}`)
236
+ .contains(`${categoryAccordionDisplayName}`)
75
237
  .parents('.accordian-structure-equation-editor')
76
238
  .within(() => {
77
239
  createCustomCategoryFlyout.categoryAccordionCheckbox()
78
- .click();
240
+ .should('be.checked');
79
241
  });
80
- createCustomCategoryFlyout.categoryNameInputField()
81
- .type('Custom category with name and icon.');
82
- createCustomCategoryFlyout.categoryIconInputField()
83
- .type('#');
84
- createCustomCategoryFlyout.buttonSave()
242
+ },
243
+
244
+ /**
245
+ * @description Uncheck category accordion checkbox
246
+ * @param {string} categoryAccordionDisplayName Display name of category accordion in create custom category flyout
247
+ */
248
+ uncheckCategoryAccordionCheckbox: (categoryAccordionDisplayName) => {
249
+ createCustomCategoryFlyout.categoryAccordions()
250
+ .contains(`${categoryAccordionDisplayName}`)
251
+ .parents('.accordian-structure-equation-editor')
252
+ .within(() => {
253
+ createCustomCategoryFlyout.categoryAccordionCheckbox()
254
+ .click()
255
+ .should('not.be.checked');
256
+ });
257
+ },
258
+
259
+ /**
260
+ * @description Verify unchecked state of category accordion checkbox
261
+ * @param {string} categoryAccordionDisplayName Display name of category accordion in create custom category flyout
262
+ */
263
+ verifyUncheckedStateOfCategoryAccordionCheckbox: (categoryAccordionDisplayName) => {
264
+ createCustomCategoryFlyout.categoryAccordions()
265
+ .contains(`${categoryAccordionDisplayName}`)
266
+ .parents('.accordian-structure-equation-editor')
267
+ .within(() => {
268
+ createCustomCategoryFlyout.categoryAccordionCheckbox()
269
+ .should('not.be.checked');
270
+ });
271
+ },
272
+
273
+ /**
274
+ * Verify symbol is not displayed in selected symbols section
275
+ * @param {string} symbol aria label of symbol
276
+ */
277
+ verifySymbolIsNotDisplayedInSelectedSymbolsSection: (symbol) => {
278
+ utilities.verifyElementVisibilityState(createCustomCategoryFlyout.selectedSymbols().contains(symbol), 'notExist');
279
+ },
280
+
281
+ /**
282
+ * Deselect symbol in selected symbols section
283
+ * @param {string} symbol title of symbol
284
+ */
285
+ deselectSymbolInSelectedSymbolsSection: (symbol) => {
286
+ createCustomCategoryFlyout.selectedSymbols()
287
+ .contains(symbol)
288
+ .parents('.drag-item-flex-parent-wrapper')
85
289
  .click();
290
+ utilities.verifyElementVisibilityState(createCustomCategoryFlyout.selectedSymbols().contains(symbol), 'notExist');
291
+ },
292
+
293
+ /**
294
+ * Select a symbol in create custom category flyout
295
+ * @param {string} categoryAccordionDisplayName Display name of category accordion in create custom category flyout
296
+ * @param {string} symbolARIALabel Aria label of the symbol to be selected
297
+ */
298
+ selectASymbolInCreateCustomCategoryFlyout: (categoryAccordionDisplayName, symbolARIALabel) => {
299
+ createCustomCategoryFlyout.categoryAccordions()
300
+ .contains(`${categoryAccordionDisplayName}`, { matchCase: false })
301
+ .parents('.accordian-structure-equation-editor')
302
+ .within(() => {
303
+ createCustomCategoryFlyout.categoryCharacters(symbolARIALabel)
304
+ .click();
305
+ createCustomCategoryFlyout.categoryCharacters(symbolARIALabel)
306
+ .should('have.class', 'Mui-selected')
307
+ .within(() => {
308
+ utilities.verifyElementVisibilityState(createCustomCategoryFlyout.symbolTickIcon(), 'exist');
309
+ });
310
+ });
311
+ },
312
+
313
+ /**
314
+ * deselect a symbol in create custom category flyout
315
+ * @param {string} categoryAccordionDisplayName Display name of category accordion in create custom category flyout
316
+ * @param {string} symbolARIALabel Aria label of the symbol to be selected
317
+ */
318
+ deselectASymbolInCreateCustomCategoryFlyout: (categoryAccordionDisplayName, symbolARIALabel) => {
319
+ createCustomCategoryFlyout.categoryAccordions()
320
+ .contains(`${categoryAccordionDisplayName}`, { matchCase: false })
321
+ .parents('.accordian-structure-equation-editor')
322
+ .within(() => {
323
+ createCustomCategoryFlyout.categoryCharacters(symbolARIALabel)
324
+ .click();
325
+ createCustomCategoryFlyout.categoryCharacters(symbolARIALabel)
326
+ .should('not.have.class', 'Mui-selected')
327
+ .within(() => {
328
+ utilities.verifyElementVisibilityState(createCustomCategoryFlyout.symbolTickIcon(), 'hidden');
329
+ });
330
+ });
331
+ },
332
+
333
+ /**
334
+ * Verify symbol is selected in create custom category flyout
335
+ * @param {string} categoryAccordionDisplayName Display name of category accordion in create custom category flyout
336
+ * @param {string} symbolARIALabel Aria label of the selected symbol
337
+ */
338
+ verifySymbolIsSelectedInCreateCustomCategoryFlyout: (categoryAccordionDisplayName, symbolARIALabel) => {
339
+ createCustomCategoryFlyout.categoryAccordions()
340
+ .contains(`${categoryAccordionDisplayName}`, { matchCase: false })
341
+ .parents('.accordian-structure-equation-editor')
342
+ .within(() => {
343
+ createCustomCategoryFlyout.categoryCharacters(symbolARIALabel)
344
+ .should('have.class', 'Mui-selected')
345
+ .within(() => {
346
+ utilities.verifyElementVisibilityState(essayResponsePage.equationEditorSectionTickIcon(), 'exist');
347
+ });
348
+ });
349
+ },
350
+
351
+ /**
352
+ * Verify symbol is not selected in create custom category flyout
353
+ * @param {string} categoryAccordionDisplayName Display name of category accordion in create custom category flyout
354
+ * @param {string} symbolARIALabel Aria label of the symbol
355
+ */
356
+ verifySymbolIsNotSelectedInCreateCustomCategoryFlyout: (categoryAccordionDisplayName, symbolARIALabel) => {
357
+ createCustomCategoryFlyout.categoryAccordions()
358
+ .contains(`${categoryAccordionDisplayName}`, { matchCase: false })
359
+ .parents('.accordian-structure-equation-editor')
360
+ .within(() => {
361
+ createCustomCategoryFlyout.categoryCharacters(symbolARIALabel)
362
+ .should('not.have.class', 'Mui-selected')
363
+ .within(() => {
364
+ utilities.verifyElementVisibilityState(createCustomCategoryFlyout.symbolTickIcon(), 'hidden');
365
+ });
366
+ });
367
+ },
368
+
369
+ /**
370
+ * Verify symbols are displayed in selected symbols section of create custom category flyout
371
+ * @param {string[]} symbolARIALabelArray Array of aria label of the selected symbols
372
+ */
373
+ verifySymbolIsDisplayedInSelectedSymbolsSection: (symbolARIALabelArray) => {
374
+ createCustomCategoryFlyout.selectedSymbolsWrapper()
375
+ .within(() => {
376
+ createCustomCategoryFlyout.categoryCharacters()
377
+ .each(($element, index) => {
378
+ cy.wrap($element)
379
+ .invoke('attr', 'aria-label')
380
+ .then((ariaLabel) => {
381
+ const expectedValue = `${symbolARIALabelArray[index]} selected`;
382
+ expect(ariaLabel.toLowerCase()).to.equal(expectedValue.toLowerCase());
383
+ });
384
+ cy.wrap($element)
385
+ .within(() => {
386
+ utilities.verifyElementVisibilityState(createCustomCategoryFlyout.symbolTickIcon(), 'exist');
387
+ utilities.verifyElementVisibilityState(createCustomCategoryFlyout.selectedCharacterDragIcon(), 'exist');
388
+ });
389
+ });
390
+ utilities.verifyElementCount(createCustomCategoryFlyout.categoryCharacters(), symbolARIALabelArray.length);
391
+ });
392
+ },
393
+ ///OLD
394
+ createCustomCategoryWithNameAndIcon: () => {
395
+ cy.log('Creating a category by selecting \'Arrows\' category')
396
+ createCustomCategoryFlyout.steps.openCreateCustomCategoryFlyout();
397
+ createCustomCategoryFlyout.steps.checkCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['arrows'].displayName}`);
398
+ createCustomCategoryFlyout.steps.addInputToCustomCategoryNameInputField('Custom category with name and icon.');
399
+ createCustomCategoryFlyout.steps.addInputToCategoryIconInputField('#');
400
+ createCustomCategoryFlyout.steps.saveCustomCategory();
86
401
  }
87
402
  }
88
403
 
89
404
  const tests = {
90
405
  verifyCustomCategoryFlyoutContents: (categoryName) => {
91
406
  it(`On clicking the ${equationEditorCategoriesAndSymbols[categoryName].displayName} category accordion the category should be expanded`, () => {
92
- createCustomCategoryFlyout.categoryAccordionLabel()
93
- .contains(`${equationEditorCategoriesAndSymbols[categoryName].displayName}`, { matchCase: false })
94
- .click()
95
- .parents('.accordian-structure-equation-editor')
96
- .within(() => {
97
- createCustomCategoryFlyout.categoryAccordionIcon()
98
- .should('have.class', 'Mui-expanded');
99
- });
407
+ createCustomCategoryFlyout.steps.expandCategoryAccordion(`${equationEditorCategoriesAndSymbols[categoryName].displayName}`);
100
408
  });
101
409
 
102
410
  it(`The ${equationEditorCategoriesAndSymbols[categoryName].displayName} category accordian should display all the ${equationEditorCategoriesAndSymbols[categoryName].displayName} category Symbols. By default, all the symbols should be deselected`, () => {
@@ -105,7 +413,7 @@ const tests = {
105
413
  .contains(`${equationEditorCategoriesAndSymbols[categoryName].displayName}`, { matchCase: false })
106
414
  .parents('.accordian-structure-equation-editor')
107
415
  .within(() => {
108
- createCustomCategoryFlyout.cateogoryCharacters()
416
+ createCustomCategoryFlyout.categoryCharacters()
109
417
  .should('not.have.class', 'Mui-selected')
110
418
  .each(($el, index) => {
111
419
  cy.wrap($el)
@@ -123,10 +431,7 @@ const tests = {
123
431
  });
124
432
 
125
433
  it(`On clicking the expanded ${equationEditorCategoriesAndSymbols[categoryName].displayName} category accordion the category should collapse`, () => {
126
- createCustomCategoryFlyout.categoryAccordions()
127
- .contains(`${equationEditorCategoriesAndSymbols[categoryName].displayName}`, { matchCase: false })
128
- .click()
129
- .should('not.have.class', 'Mui-expanded');
434
+ createCustomCategoryFlyout.steps.collapseCategoryAccordion(`${equationEditorCategoriesAndSymbols[categoryName].displayName}`);
130
435
  });
131
436
  }
132
437
  }