itemengine-cypress-automation 1.0.143-migrationScripts-d059d60.0 → 1.0.144-21MatchRepoUpdate-0ab2c79.0

package/cypress/fixtures/theme/ilc.json

@@ -119,8 +119,14 @@
         "darkThemeBtnBorder": "rgb(117, 51, 255)",
         "lightThemeBtnBg": "rgb(82, 0, 255)",
         "lightThemeBtnBorder": "rgb(94, 110, 255)",
+        "geoGebraCanvasBorder": "rgb(102, 102, 102)",
+        "geoGebraHttpsBg": "rgb(233, 238, 255)",
         "enabledSwitchBg": "rgb(48, 160, 79)",
-        "geoGebraCanvasBorder": "rgb(102, 102, 102)"
+        "gridCellHoverStateBg": "rgba(186, 201, 255, 0.6)",
+        "gridCellDefaultStateBg": "rgba(186, 201, 255, 0.2)",
+        "gridCellSelectedStateBg": "rgba(107, 139, 255, 0.7)",
+        "gridCellCorrectAnswerBg": "rgba(43, 120, 74, 0.4)",
+        "gridCellIncorrectAnswerBg": "rgba(209, 51, 51, 0.4)"
     },
     "fontSize": {
         "extraSmall": "10px",

package/cypress/pages/audioResponsePage.js

@@ -1,5 +1,5 @@
 import utilities from "../support/helpers/utilities";
-import { createQuestionBasePage, questionInstructionsComponent, scoringSectionBaseEditTab, maximumRecorderLengthComponent, commonComponents, playbackControlsBaseComponent, autoScoredScoringPreviewTab, studentViewSettingsLabelComponent, additionalSettingsPanel } from "./components"
+import { createQuestionBasePage, questionInstructionsComponent, scoringSectionBaseEditTab, maximumRecorderLengthComponent, commonComponents, playbackControlsBaseComponent, autoScoredScoringPreviewTab, studentViewSettingsLabelComponent, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent } from "./components"
 import { dialogBoxBase } from "./dialogBoxBase";
 const css = Cypress.env('css');
 
@@ -11,6 +11,7 @@ const selectors = {
     ...maximumRecorderLengthComponent,
     ...playbackControlsBaseComponent,
     ...studentViewSettingsLabelComponent,
+    ...additionalSettingsPanel,
     recordedResponseHelpText: () => cy.get('[class*="preview-help-text"]'),
     playbackWaveform: () => cy.get('.audio-wave-form'),
     playbackWaveformTotalWidth: () => cy.get('.audio-wave-form wave wave canvas'),
@@ -107,7 +108,11 @@ const selectors = {
     showStudentsTheRetakeLimitsOnTooltipCheckboxLabel: () => cy.get('[data-ngie-testid="show-students-the-retake-limits-on-tooltip-checkbox"] .MuiFormControlLabel-label'),
     retakeLimitLabel: () => cy.get('.retake-limit-label'),
     retakeLimitInputField: () => cy.get('.retake-limit-wrapper input'),
-    barPreviewPlaybackWrapper: () => cy.get('.audio-response-wrapper')
+    barPreviewPlaybackWrapper: () => cy.get('.audio-response-wrapper'),
+
+    //Additional settings
+    allowTeachersToDownloadStudentResponseLabel: () => cy.get('[data-ngie-testid="allow-teachers-to-download-student-response-checkbox"] [class*="label"]'),
+    allowTeachersToDownloadStudentResponseCheckbox: () => cy.get('[data-ngie-testid="allow-teachers-to-download-student-response-checkbox"] input')
 }
 
 const steps = {
@@ -835,6 +840,23 @@ const steps = {
     clearRetakeLimitInputField: () => {
         audioResponsePage.retakeLimitInputField()
             .clear();
+    },
+
+    verifyAllowTeachersToDownloadStudentResponseCheckboxChecked: () => {
+        audioResponsePage.allowTeachersToDownloadStudentResponseCheckbox()
+            .should('be.checked');
+    },
+
+    uncheckAllowTeachersToDownloadStudentResponseCheckbox: () => {
+        audioResponsePage.allowTeachersToDownloadStudentResponseCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    checkAllowTeachersToDownloadStudentResponseCheckbox: () => {
+        audioResponsePage.allowTeachersToDownloadStudentResponseCheckbox()
+            .click()
+            .should('be.checked');
     }
 }
 
@@ -846,6 +868,8 @@ const tests = {
     ...playbackControlsBaseComponent.tests,
     ...autoScoredScoringPreviewTab.tests,
     ...studentViewSettingsLabelComponent.tests,
+    ...additionalSettingsPanel.tests,
+    ...additionalSettingsAccessibilitySectionComponent.tests,
     verifyRetakePopupCSSAndA11y: () => {
         it('CSS of \'Retake\' popup', { tags: 'css' }, () => {
             utilities.verifyCSS(dialogBoxBase.dialogBox(), {

package/cypress/pages/components/additionalSettingsAccessibilitySectionComponent.js

@@ -1,4 +1,5 @@
 import utilities from "../../support/helpers/utilities";
+const css = Cypress.env('css');
 
 const selectors = {
     accessibilityLabel: () => cy.get('[class*="Accessibilitystyles__AccessibilityLabelWrapper"]'),

package/cypress/pages/components/additionalSettingsPanel.js

@@ -30,7 +30,6 @@ const selectors = {
 }
 
 const steps = {
-    //Enhancement: Remove this step, (this has incorrect spelling)
     expandAdditionalSettings: () => {
         additionalSettingsPanel.additionalSettingsPanel()
             .click()
@@ -65,12 +64,6 @@ const steps = {
             .blur();
     },
 
-    expandAdditionalSettings: () => {
-        additionalSettingsPanel.additionalSettingsPanel()
-            .click()
-            .should('have.attr', 'aria-expanded', 'true');
-    },
-
     expandFontSizeDropdown: () => {
         additionalSettingsPanel.fontSizeDropdown()
             .click();
@@ -95,7 +88,7 @@ const tests = {
             utilities.verifyTextContent(additionalSettingsPanel.additionalSettingsSampleAnswerInputField(), 'Sample answer');
         });
 
-        it('\'Acknowledgements & reference\' label and input field should be displayed and user should be able to enter \'Acknowledgements\'', () => {
+        it('\'Acknowledgements & reference\' label and input field should be displayed and user should be able to enter \'Acknowledgements & reference\'', () => {
             utilities.verifyInnerText(additionalSettingsPanel.additionalSettingsAcknowledgementsLabel(), 'Acknowledgements and references');
             additionalSettingsPanel.steps.enterTextInAcknowledgementsInputField('Acknowledgements');
             utilities.verifyTextContent(additionalSettingsPanel.additionalSettingsAcknowledgementsInputField(), 'Acknowledgements');
@@ -186,13 +179,13 @@ const tests = {
 
         it('CSS of Font size dropdown - active state', { tags: 'css' }, () => {
             additionalSettingsPanel.steps.expandFontSizeDropdown();
-            utilities.verifyCSS(additionalSettingsPanel.fontSizeListOptions('Default'), {
+            utilities.verifyCSS(utilities.getNthElement(additionalSettingsPanel.fontSizeListOptions(), 2), {
                 'color': css.color.liText,
                 'font-size': css.fontSize.default,
                 'font-weight': css.fontWeight.regular,
                 'background-color': css.color.liTextSelectedBg
             });
-            utilities.verifyCSS(additionalSettingsPanel.fontSizeListOptions('Small'), {
+            utilities.verifyCSS(utilities.getNthElement(additionalSettingsPanel.fontSizeListOptions(), 1), {
                 'background-color': css.color.transparent
             });
             cy.log('Post step: Closing the Font size dropdown')

package/cypress/pages/components/ariaLabelSectionComponent.js

@@ -0,0 +1,84 @@
+import utilities from "../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const selectors = {
+    ariaLabelInputField: () => cy.get('input[aria-label*="Enter ARIA label"]'),
+    inputFieldNumeration: () => cy.get('.MuiInputAdornment-root'),
+    ariaLabelSectionLabel: () => cy.get('[class*="AriaLabelTextFieldsstyles__LabelWrapper"]'),
+}
+
+const steps = {
+    /**
+     * Verifies the ARIA label text input fields.
+     * @param {number} inputFieldIndex - The index of the input field to verify.
+     */
+    verifyAriaLabelTextInputFields: (inputFieldIndex) => {
+        ariaLabelSectionComponent.ariaLabelInputField()
+            .eq(inputFieldIndex)
+            .parents('.input-editable')
+            .within(() => {
+                utilities.verifyInnerText(ariaLabelSectionComponent.inputFieldNumeration(), `${inputFieldIndex + 1}`)
+                utilities.verifyInputFieldValue(ariaLabelSectionComponent.ariaLabelInputField(), '');
+            });
+    },
+
+    /**
+     * Enters text in the ARIA label input field.
+     * @param {number} inputFieldIndex - The index of the input field to enter text into.
+     * @param {string} text - The text to enter into the input field.
+     */
+    enterTextInAriaLabelInputField: (inputFieldIndex, text) => {
+        ariaLabelSectionComponent.ariaLabelInputField()
+            .eq(inputFieldIndex)
+            .type(text)
+            .should('have.value', text)
+    },
+
+    /**
+     * Clears text in the ARIA label input field.
+     * @param {number} inputFieldIndex - The index of the input field to clear.
+     */
+    clearTextInAriaLabelInputField: (inputFieldIndex) => {
+        ariaLabelSectionComponent.ariaLabelInputField()
+            .eq(inputFieldIndex)
+            .clear();
+    }
+}
+
+const tests = {
+    /**
+     * Verifies the contents of the ARIA label section.
+     * @param {string} typeOfInput - The type of input for which ARIA labels are being verified. (eg. text containers, dropdown)
+     */
+    verifyAriaLabelSectionContents: (typeOfInput) => {
+        it(`"ARIA label for ${typeOfInput}" label should be displayed`, () => {
+            utilities.verifyInnerText(ariaLabelSectionComponent.ariaLabelSectionLabel(), `ARIA label for ${typeOfInput}`);
+            utilities.verifyElementVisibilityState(ariaLabelSectionComponent.ariaLabelSectionLabel(), 'visible');
+        });
+
+        it('Two input fields with numeration and "Enter aria label" placeholder should be displayed by default', () => {
+            utilities.verifyElementCount(ariaLabelSectionComponent.ariaLabelInputField(), 2);
+            ariaLabelSectionComponent.steps.verifyAriaLabelTextInputFields(0);
+            ariaLabelSectionComponent.steps.verifyAriaLabelTextInputFields(1);
+        });
+
+        it(`CSS of "ARIA label for ${typeOfInput}" section`, { tags: 'css' }, () => {
+            utilities.verifyCSS(ariaLabelSectionComponent.ariaLabelSectionLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(ariaLabelSectionComponent.ariaLabelInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+    }
+}
+
+export const ariaLabelSectionComponent = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/components/autoScoredSpecifyCorrectAnswerSection.js

@@ -33,7 +33,7 @@ const steps = {
      */
     addAlternativeAnswerAccordion: (accordionIndex) => {
         autoScoredSpecifyCorrectAnswerSection.steps.clickOnAddAlternativeAnswerButton();
-        utilities.verifyInnerText(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordionLabel(), `Alternative ${accordionIndex}`);
+        utilities.verifyInnerText(utilities.getNthElement(autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordionLabel(), `${accordionIndex-1}`), `Alternative ${accordionIndex}`);
     },
 
     verifySpecifyCorrectAnswerErrorIconNotExists: () => {
@@ -204,6 +204,9 @@ const tests = {
                 case 'graphing':
                     helpText = 'You can set the correct answer by entering the correct answer(s) in the response area(s)';
                     break;
+                case 'grid fill' :
+                    helpText = 'You can set the correct answer by selecting the correct cell(s) in the grid.';
+                    break;
                 default:
                     throw new Error('Invalid question type');
             }
@@ -219,7 +222,7 @@ const tests = {
             utilities.verifyCSS(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerHelpText(), {
                 'color': css.color.helperText,
                 'font-size': css.fontSize.normal,
-                'font-weight': css.fontWeight.medium
+                'font-weight': css.fontWeight.regular
             });
             utilities.verifyCSS(autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordionLabel(), {
                 'color': css.color.activeButtons,

package/cypress/pages/components/autoScoredStudentViewSettings.js

@@ -25,7 +25,7 @@ const steps = {
             .should('not.be.checked');
     },
 
-
+    //Enhancement: Duplicate function, remove after verifying impact
     checkAllowStudentsToCheckAnswerCheckbox: () => {
         autoScoredStudentViewSettings.allowStudentToCheckAnswerCheckbox()
             .click()

package/cypress/pages/components/commonComponents.js

@@ -88,7 +88,7 @@ const tests = {
         });
 
         it('Accessibility of error message', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(commonComponents.errorMessage());
+            cy.checkAccessibility(commonComponents.nextGenCreateItemWrapper());
         });
     }
 }

package/cypress/pages/components/createCustomCategoryFlyout.js

@@ -390,11 +390,11 @@ const steps = {
                 utilities.verifyElementCount(createCustomCategoryFlyout.categoryCharacters(), symbolARIALabelArray.length);
             });
     },
-    ///OLD
+
     createCustomCategoryWithNameAndIcon: () => {
         cy.log('Creating a category by selecting \'Arrows\' category')
         createCustomCategoryFlyout.steps.openCreateCustomCategoryFlyout();
-        createCustomCategoryFlyout.steps.checkCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['arrows'].displayName}`);
+        createCustomCategoryFlyout.steps.checkCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['geo'].displayName}`);
         createCustomCategoryFlyout.steps.addInputToCustomCategoryNameInputField('Custom category with name and icon.');
         createCustomCategoryFlyout.steps.addInputToCategoryIconInputField('#');
         createCustomCategoryFlyout.steps.saveCustomCategory();

package/cypress/pages/components/createQuestionBasePage.js

@@ -110,7 +110,7 @@ const tests = {
         });
 
         it('\'Save\' button should be displayed', () => {
-            let exceptionQuestions = ['Desmos scientific calculator', 'Desmos graphing calculator', 'Desmos four-function calculator', 'Desmos geometry tool', 'Desmos matrix calculator', 'Passage', 'Reading ruler', 'Audio player', 'Ruler', 'Protractor']
+            let exceptionQuestions = ['Scientific calculator', 'Desmos graphing calculator', 'Desmos four-function calculator', 'Desmos geometry tool', 'Desmos matrix calculator', 'Passage', 'Reading ruler', 'Audio player', 'Ruler', 'Protractor', 'GeoGebra graphing calculator', 'GeoGebra scientific calculator', 'GeoGebra 3D graphing calculator', 'GeoGebra geometry calculator', 'GeoGebra CAS calculator', 'GeoGebra probability calculator']
             if (exceptionQuestions.includes(questionType)) {
                 utilities.verifyInnerText(createQuestionBasePage.saveQuestionButton(), 'Save');
             }

package/cypress/pages/components/desmosToolComponent.js

@@ -30,6 +30,7 @@ const selectors = {
 
 const steps = {
     verifyDesmosToolIsVisible: () => {
+        cy.wait(5000);
         utilities.verifyElementVisibilityState(desmosToolComponent.previewTabDesmosTool(), 'visible');
     },
 

package/cypress/pages/components/draggableOptionContainer.js

@@ -17,7 +17,7 @@ const selectors = {
     groupedOptionsContainerPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="GroupDiv"]'),
     groupedOptionsTitlePreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="GroupTitleWrapper"]'),
     groupedOptionsGridPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="DraggableGroupsGrid"]'),
-    draggableOptionText: () => cy.get('.icon-container-wrapper [class*="DraggableItemsstyle__QuestionTextWrapper"]'),
+    draggableOptionText: () => cy.get('.icon-container-wrapper [class*="DraggableItemsstyle__QuestionTextWrapper"]:visible'),
     optionContainerItemListPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .item-list'),
     optionContainerItemListSpecifyCorrectAnswerSection: () => cy.get('.item-list'),
     draggableOptionDragIcon: () => cy.get('.drag-icon-button')

package/cypress/pages/components/editCategoryFlyout.js

@@ -25,7 +25,7 @@ const selectors = {
 const steps = {
     openEditCategoryFlyout: () => {
         essayResponsePage.equationEditorSectionCategories()
-            .contains(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`)
+            .contains(`${equationEditorCategoriesAndSymbols['general'].displayName}`)
             .parents('[id*="DraggableItem"]')
             .within(() => {
                 essayResponsePage.equationEditorSectionCategoriesEditIcon()
@@ -70,12 +70,9 @@ const steps = {
             .should('have.class', 'Mui-selected');
     },
 
-    deselectAllCategoryCharacters: () => {
-        editCategoryFlyout.categoryCharacters()
-            .each(($el) => {
-                cy.wrap($el)
-                    .click();
-            });
+    deselectCategoryCharacters: (characterAriaLabel) => {
+        editCategoryFlyout.categoryCharacters(characterAriaLabel)
+            .click();
     },
 
     /**
@@ -185,9 +182,11 @@ const steps = {
                         editCategoryFlyout.characterTickIcon()
                             .should('not.have.attr', 'aria-checked', 'false');
                     })
-                cy.wrap($el)
-                    .find('title')
-                    .should('have.text', symbolsArray[index].title);
+                if (symbolsArray[index].title) {
+                    cy.wrap($el)
+                        .find('title')
+                        .should('have.text', symbolsArray[index].title);
+                }
                 if (symbolsArray[index].textElement) {
                     cy.wrap($el)
                         .verifyInnerText(symbolsArray[index].textElement)

package/cypress/pages/components/equationEditorFlyout.js

@@ -7,7 +7,7 @@ const css = Cypress.env('css');
 const selectors = {
     ...dialogBoxBase,
     buttonOk: () => cy.get('.ok-btn'),
-    previewInputField: () => cy.get('.mq-editable-field'),
+    previewInputField: () => cy.get('.next-gen-equation-editor .mq-editable-field'),
     categoryTab: (categoryName = null) => {
         if (categoryName) {
             return cy.get('.tool-wrapper').contains(categoryName)
@@ -29,7 +29,7 @@ const selectors = {
     buttonNext: () => cy.get('.next-btn'),
     buttonPrevious: () => cy.get('.previous-btn'),
     inputFieldCursor: () => cy.get('.mq-hasCursor'),
-    inputFieldFirstEmptyBox: () => cy.get('.mq-empty').eq(0),
+    inputFieldFirstEmptyBox: () => cy.get('.next-gen-equation-editor .mq-empty').eq(0),
     categoryTooltip: () => cy.get('.__react_component_tooltip'),
     dialogBoxTitle: () => cy.get('#alert-dialog-title')
 }
@@ -94,7 +94,8 @@ const steps = {
         equationEditorFlyout.categoryCharacters()
             .each(($el, index) => {
                 cy.wrap($el)
-                    .should('have.attr', 'aria-label', symbolsArray[index].ariaLabel)
+                    .should('have.attr', 'aria-label')
+                    .and('include', symbolsArray[index].ariaLabel)
                 utilities.verifyTextContent(cy.wrap($el).find('title'), `${symbolsArray[index].title}`);
                 if (symbolsArray[index].textElement !== null) {
                     utilities.verifyTextContent(cy.wrap($el), `${symbolsArray[index].textElement}`);
@@ -174,6 +175,7 @@ const steps = {
         equationEditorFlyout.previewInputField()
             .verifyInnerText('')
             .should('be.visible')
+            .click()
             .and('have.class', 'mq-focused');
     },
 
@@ -205,7 +207,7 @@ const steps = {
     * @param {string[]} categoryName Name of category
     */
     verifyCategoryIsDisplayedInEquationEditor: (categoryName) => {
-        utilities.verifyElementVisibilityState(equationEditorFlyout.categoryTab().contains(categoryName, { matchCase: false }), 'visible');
+        utilities.verifyElementVisibilityState(equationEditorFlyout.categoryTab().contains(categoryName, { matchCase: false }), 'exist');
     },
 
     verifyCategoryTileSelectedInEquationEditor: (categoryName) => {
@@ -227,7 +229,7 @@ const steps = {
         equationEditorFlyout.buttonPrevious()
             .click();
     },
-    ///Old
+
     addGenericEquationUsingEquationEditorToCKEditorInputField: () => {
         equationEditorFlyout.categoryTab(equationEditorCategoriesAndSymbols['basic'].displayName)
             .click();
@@ -327,15 +329,20 @@ const steps = {
             .click();
     },
 
-
     enterQuadraticEquation: () => {
-        equationEditorFlyout.steps.enterEquation([{ categoryName: 'keypad', symbolName: ['two'] }, { categoryName: 'basic', symbolName: ['x', 'square', 'y', 'square', 'add'] }, { categoryName: 'keypad', symbolName: ['four'] }, { categoryName: 'basic', symbolName: ['x', 'y', 'add'] }, { categoryName: 'keypad', symbolName: ['four'] }]);
+        equationEditorFlyout.steps.clearAll();
+        equationEditorFlyout.steps.enterEquation([{ categoryName: 'numPad', symbolName: ['two'] }, { categoryName: 'intermediate', symbolName: ['x', 'square', 'y', 'square'] }, { categoryName: 'numPad', symbolName: ['add', 'four'] }, { categoryName: 'intermediate', symbolName: ['x', 'y'] }, { categoryName: 'numPad', symbolName: ['add', 'four'] }]);
         equationEditorFlyout.steps.clickOnOkButton();
     },
 
     enterEquationUsingPiSymbol: () => {
-        equationEditorFlyout.steps.enterEquation([{ categoryName: 'keypad', symbolName: ['six', 'multiply'] }, { categoryName: 'greek', symbolName: ['pi'] }]);
+        equationEditorFlyout.steps.clearAll();
+        equationEditorFlyout.steps.enterEquation([{ categoryName: 'numPad', symbolName: ['six', 'multiply'] }, { categoryName: 'intermediate', symbolName: ['pi'] }]);
         equationEditorFlyout.steps.clickOnOkButton();
+    },
+
+    clearAll: () => {
+        equationEditorFlyout.steps.enterEquation([{ categoryName: 'numPad', symbolName: ['clearAll'] }])
     }
 }
 
@@ -396,9 +403,11 @@ const tests = {
                         .then((ariaLabel) => {
                             const expectedValue = symbolsArray[index].ariaLabel;
                             expect(ariaLabel.trim().toLowerCase()).to.include(expectedValue.toLowerCase());
-                            cy.wrap($el)
-                                .find('title')
-                                .should('have.text', symbolsArray[index].title);
+                            if (symbolsArray[index].title) {
+                                cy.wrap($el)
+                                    .find('title')
+                                    .should('have.text', symbolsArray[index].title);
+                            }
                             if (symbolsArray[index].textElement) {
                                 cy.wrap($el)
                                     .verifyInnerText(symbolsArray[index].textElement)