itemengine-cypress-automation 1.0.255-update-version-d46686e.0 → 1.0.256-updatedRepo18thNov-3c7b396.0

package/cypress/pages/components/equationEditorSectionCommonComponent.js

@@ -0,0 +1,528 @@
+import utilities from "../../support/helpers/utilities";
+import { equationEditorCategoriesAndSymbols } from "../../fixtures/equationEditorCategoriesAndSymbols ";
+import { equationEditorFlyout, commonComponents } from ".";
+import { essayResponseCommonComponents } from "../components/essayResponseCommonComponents";
+import { createQuestionBasePage } from "../components/createQuestionBasePage";
+const css = Cypress.env('css');
+const allCategories = Object.values(equationEditorCategoriesAndSymbols)
+const defaultSelectedCategories = ['Numpad', 'Keypad', 'Intermediate', 'Primary', 'General', 'Common', 'Algebra', 'Geo', 'Compare', 'Matrices'];
+
+const selectors = {
+    ...commonComponents,
+    ...essayResponseCommonComponents,
+    //Equation Editor section
+    equationEditorSectionWrapper: () => cy.get('.essay-response-eqn-editor-wrapper'),
+    equationEditorSectionCategories: () => cy.get('[class*="DraggableItemsGrid"] .icon-button-custom-format'),
+    equationEditorSectionCategoryLabel: () => cy.get('.equation-editor-label-wrapper'),
+    equationEditorSection: () => cy.get('[class*="EquationEditorOptionsWrapper"]'),
+    equationEditorSectionTitle: () => cy.get('[class*="EssayResponseComponentstyles__SectionTitle"],[class*="ClozeMathstyle__SectionTitle"]'),
+    equationEditorSectionHelperText: () => cy.get('.equation-editor-description-text'),
+    equationEditorSectionCategoriesDragIcon: () => cy.get('.drag-icon-equation-editor-button'),
+    equationEditorSectionCategoriesEditIcon: () => cy.get('.edit-icon-button button'),
+    equationEditorSectionTickIcon: () => cy.get('.tick-icon-wrapper'),
+    selectACategoryErrorMessage: () => cy.get('[class*="ErrorBlock"]'),
+    equationEditorSectionCategoryIcon: () => cy.get('.equation-editor-icon'),
+    equationEditorSectionDeleteCustomCategoryIcon: () => cy.get('.delete-button-icon button'),
+    displayNativeKeyboardLabel: () => cy.get('.cloze-math-eqn-editor-wrapper .MuiFormControlLabel-label'),
+    displayNativeKeyboardCheckbox: () => cy.get('.cloze-math-eqn-editor-wrapper input'),
+    categoryLabel: () => cy.get('[class*="ClozeMathstyle__SectionDescription"]'),
+    responseFieldPreviewTab: () => cy.get('.preview-question-text-wrapper .equation-input-without-andornment .mq-root-block'),
+}
+
+const steps = {
+    ...createQuestionBasePage.steps,
+    ...essayResponseCommonComponents.steps,
+    verifyDefaultCategoriesDisplayedInEquationEditorSectionEditTab: () => {
+        equationEditorSectionCommonComponent.equationEditorSectionCategories()
+            .each(($el, index) => {
+                cy.wrap($el)
+                    .invoke('text')
+                    .then((textContent) => {
+                        const expectedValue = allCategories[index].displayName;
+                        expect(textContent.toLowerCase()).to.equal(expectedValue.toLowerCase())
+                    });
+                cy.wrap($el)
+                    .parents('[id*="DraggableItem"]')
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(equationEditorSectionCommonComponent.equationEditorSectionCategoriesDragIcon(), 'visible');
+                        if (allCategories[index].displayName === 'Keypad') {
+                            utilities.verifyElementVisibilityState(equationEditorSectionCommonComponent.equationEditorSectionCategoriesEditIcon(), 'notExist');
+                        }
+                        else {
+                            utilities.verifyElementVisibilityState(equationEditorSectionCommonComponent.equationEditorSectionCategoriesEditIcon(), 'visible');
+                        }
+                    });
+            });
+    },
+
+    /**
+     * @description Verify tooltips of categories in equation editor section edit tab
+     * @param {string[]} categoryNamesArray Array of names of categories
+     */
+    verifyTooltipsOfCategoryTilesInEquationEditorSectionEditTab: (categoryNamesArray) => {
+        categoryNamesArray.forEach((categoryTooltipName) => {
+            equationEditorSectionCommonComponent.equationEditorSectionCategories()
+                .contains(categoryTooltipName, { matchCase: false })
+                .trigger('mouseover')
+            commonComponents.tooltipText()
+                .and('be.visible')
+                .should('have.text', categoryTooltipName)
+            equationEditorSectionCommonComponent.equationEditorSectionCategories()
+                .contains(categoryTooltipName, { matchCase: false })
+                .trigger('mouseout')
+            commonComponents.tooltipText()
+                .should('not.exist');
+        });
+    },
+
+    /**
+    * @description Verify selected category in equation editor section edit tab
+    * @param {string[]} categoryName Name of categories
+    */
+    verifySelectedCategoryInEquationEditorSectionEditTab: (categoryName) => {
+        equationEditorSectionCommonComponent.equationEditorSectionCategories()
+            .contains(categoryName, { matchCase: false })
+            .parents('.icon-button-custom-format')
+            .should('have.class', 'Mui-selected')
+            .within(() => {
+                utilities.verifyElementVisibilityState(equationEditorSectionCommonComponent.equationEditorSectionTickIcon(), 'visible');
+            });
+    },
+
+    /**
+    * @description Verify deselected category in equation editor section edit tab
+    * @param {string[]} categoryName Name of categories
+    */
+    deselectACategoryInEquationEditorSectionEditTab: (categoryName) => {
+        equationEditorSectionCommonComponent.equationEditorSectionCategories()
+            .contains(categoryName, { matchCase: false })
+            .click();
+        equationEditorSectionCommonComponent.equationEditorSectionCategories()
+            .contains(categoryName, { matchCase: false })
+            .parents('.icon-button-custom-format')
+            .should('not.have.class', 'Mui-selected');
+    },
+
+    /**
+   * @description Select a category in equation editor section edit tab
+   * @param {string[]} categoryName Name of categories
+   */
+    selectACategoryInEquationEditorSectionEditTab: (categoryName) => {
+        equationEditorSectionCommonComponent.equationEditorSectionCategories()
+            .contains(categoryName, { matchCase: false })
+            .click();
+        equationEditorSectionCommonComponent.equationEditorSectionCategories()
+            .contains(categoryName, { matchCase: false })
+            .parents('.icon-button-custom-format')
+            .should('have.class', 'Mui-selected');
+    },
+
+    /**
+    * @description Verify select category in equation editor section
+    * @param {string[]} categoryName Name of categories
+    */
+    selectingCategories: (categoriesArray) => {
+        categoriesArray.forEach((categoryName) => {
+            equationEditorSectionCommonComponent.equationEditorSectionCategories()
+                .contains(categoryName, { matchCase: false })
+                .click();
+        });
+    },
+
+    /**
+    * @description Verify deselected category in equation editor section edit tab
+    * @param {string[]} categoryName Name of category
+    */
+    verifyDeselectedCategoryInEquationEditorSectionEditTab: (categoryName) => {
+        equationEditorSectionCommonComponent.equationEditorSectionCategories()
+            .contains(categoryName, { matchCase: false })
+            .parents('.icon-button-custom-format')
+            .should('not.have.class', 'Mui-selected')
+            .within(() => {
+                utilities.verifyElementVisibilityState(equationEditorSectionCommonComponent.equationEditorSectionTickIcon(), 'hidden');
+            });
+    },
+
+    /**
+    * Focus in the answer input fields of the preview tab
+    * @param {number} responseIndex indx of the response to add input
+    */
+    focusInResponseAnswerInputFieldPreviewTab: (responseIndex) => {
+        equationEditorSectionCommonComponent.responseFieldPreviewTab()
+            .eq(responseIndex)
+            .click();
+    },
+
+    /**
+     * verify response field equation text content
+     * @param {number} equationIndex index of equation
+     * @param {string} equationText equation text content
+     */
+    verifyResponseFieldEquationTextNew: (equationIndex, equationText) => {
+        utilities.verifyTextContent(utilities.getNthElement(equationEditorSectionCommonComponent.responseFieldPreviewTab(), equationIndex), equationText)
+    },
+
+    /**
+     * @description deselect category in equation editor section in edit tab
+     * @param {string} categoryName Name of category
+     */
+    deselectCategoryInEquationEditorSectionEditTab: (categoryName) => {
+        equationEditorSectionCommonComponent.equationEditorSectionCategories()
+            .contains(`${categoryName}`)
+            .click();
+    },
+
+}
+
+const tests = {
+    ...commonComponents.tests,
+    verifyEquationEditorSection: () => {
+        it('All the categories should be displayed with a drag icon should and an Edit icon should be displayed below all the categories irrespective of their selected state', () => {
+            equationEditorSectionCommonComponent.steps.verifyDefaultCategoriesDisplayedInEquationEditorSectionEditTab();
+        });
+
+        it('When user hovers on a category with a long name, then a tooltip should be displayed.', () => {
+            let categoriesWithTooltip = ['Greek Symbols', 'Measurement', 'Other Symbols'];
+            equationEditorSectionCommonComponent.steps.verifyTooltipsOfCategoryTilesInEquationEditorSectionEditTab(categoriesWithTooltip);
+        });
+
+        it(`By default, ${defaultSelectedCategories.toString()} should be selected`, () => {
+            defaultSelectedCategories.forEach((category) => {
+                equationEditorSectionCommonComponent.steps.verifySelectedCategoryInEquationEditorSectionEditTab(category);
+            });
+        });
+
+        it('CSS of selected and deselected category', { tags: 'css' }, () => {
+            cy.log('CSS of selected category')
+            utilities.verifyCSS(utilities.getNthElement(equationEditorSectionCommonComponent.equationEditorSectionCategories(), 0), {
+                'background-color': css.color.activeButtons
+            });
+            utilities.getNthElement(equationEditorSectionCommonComponent.equationEditorSectionCategories(), 0)
+                .within(() => {
+                    utilities.verifyCSS(equationEditorSectionCommonComponent.equationEditorSectionCategoryLabel(), {
+                        'color': css.color.primaryBtn,
+                        'font-size': css.fontSize.small,
+                        'font-weight': css.fontWeight.regular
+                    });
+                    utilities.verifyCSS(equationEditorSectionCommonComponent.equationEditorSectionTickIcon().find('[data-name*="Icon"]'), {
+                        'fill': css.color.activeButtons
+                    });
+                    utilities.verifyCSS(equationEditorSectionCommonComponent.equationEditorSectionCategoriesDragIcon().find('path'), {
+                        'fill': css.color.activeButtons
+                    });
+                });
+            cy.log('CSS of deselected category')
+            utilities.verifyCSS(utilities.getNthElement(equationEditorSectionCommonComponent.equationEditorSectionCategories(), 12), {
+                'background-color': css.color.primaryBtn
+            });
+            utilities.getNthElement(equationEditorSectionCommonComponent.equationEditorSectionCategories(), 12)
+                .within(() => {
+                    utilities.verifyCSS(equationEditorSectionCommonComponent.equationEditorSectionCategoryLabel(), {
+                        'color': css.color.secondaryBtn,
+                        'font-size': css.fontSize.small,
+                        'font-weight': css.fontWeight.regular
+                    });
+                    utilities.verifyCSS(equationEditorSectionCommonComponent.equationEditorSectionCategoriesDragIcon().find('path'), {
+                        'fill': css.color.secondaryBtn
+                    });
+                });
+        });
+
+        it('Accessibility of selected and deselected category', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(equationEditorSectionCommonComponent.equationEditorSectionCategories().contains(`${equationEditorCategoriesAndSymbols['numPad'].displayName}`).parents('[class*="DraggableItemsGrid"]'))
+        });
+    },
+
+    /**
+    * verify functionality of equation editor section .
+    * @param {string} questionType - The type of the question .
+    */
+    verifyFunctionalityOfEquationEditorSection: (questionType) => {
+        it('User should be able select and deselect a category and it should be reflected in the Equation Editor flyout and the first category should be selected by default', () => {
+            cy.log('Selecting and deselecting a category')
+            equationEditorSectionCommonComponent.steps.deselectACategoryInEquationEditorSectionEditTab(`${equationEditorCategoriesAndSymbols['numPad'].displayName}`);
+            equationEditorSectionCommonComponent.steps.selectACategoryInEquationEditorSectionEditTab(`${equationEditorCategoriesAndSymbols['greek'].displayName}`);
+            cy.log('Switching to Preview tab')
+            equationEditorSectionCommonComponent.steps.switchToPreviewTab();
+            if (questionType == 'essay response') {
+                equationEditorSectionCommonComponent.steps.selectPreviewTabToolbarOption('Equation Editor');
+            }
+            else {
+                equationEditorSectionCommonComponent.steps.focusInResponseAnswerInputFieldPreviewTab(0);
+            }
+            equationEditorFlyout.steps.verifyCategoryNotDisplayedInEquationEditor(`${equationEditorCategoriesAndSymbols['numPad'].displayName}`);
+            equationEditorFlyout.steps.clickOnEquationEditorButtonNext()
+            equationEditorFlyout.steps.verifyCategoryIsDisplayedInEquationEditor(`${equationEditorCategoriesAndSymbols['greek'].displayName}`);
+        });
+
+        it('On deselecting all the categories an error message should be displayed \'Error: Please select a category.\' and the preview tab Equation Editor flyout should be empty', () => {
+            cy.log('Pre step: Switching to Edit tab')
+            equationEditorSectionCommonComponent.steps.switchToEditTab();
+            if (questionType == 'essay response') {
+                //Need to remove this once https://redmine.zeuslearning.com/issues/577356 is resolved
+                equationEditorSectionCommonComponent.steps.expandCustomizeFormattingOptionsAccordion();
+            }
+            equationEditorSectionCommonComponent.steps.selectingCategories([`${equationEditorCategoriesAndSymbols['intermediate'].displayName}`, `${equationEditorCategoriesAndSymbols['primary'].displayName}`, `${equationEditorCategoriesAndSymbols['general'].displayName}`, `${equationEditorCategoriesAndSymbols['common'].displayName}`, `${equationEditorCategoriesAndSymbols['algebra'].displayName}`, `${equationEditorCategoriesAndSymbols['geo'].displayName}`, `${equationEditorCategoriesAndSymbols['compare'].displayName}`, `${equationEditorCategoriesAndSymbols['matrices'].displayName}`, `${equationEditorCategoriesAndSymbols['greek'].displayName}`, `${equationEditorCategoriesAndSymbols['keyPad'].displayName}`]);
+            utilities.verifyInnerText(equationEditorSectionCommonComponent.selectACategoryErrorMessage(), 'Error: Please select a category.');
+            cy.log('Switching to Preview tab')
+            equationEditorSectionCommonComponent.steps.switchToPreviewTab();
+            if (questionType == 'essay response') {
+                equationEditorSectionCommonComponent.steps.selectPreviewTabToolbarOption('Equation Editor');
+            }
+            else {
+                equationEditorSectionCommonComponent.steps.focusInResponseAnswerInputFieldPreviewTab(0);
+            }
+            utilities.verifyElementVisibilityState(equationEditorFlyout.dialogBox(), 'visible');
+            utilities.verifyElementVisibilityState(equationEditorFlyout.categoryTabTitle(), 'notExist');
+            utilities.verifyElementVisibilityState(equationEditorFlyout.categoryCharactersWrapper(), 'notExist');
+            cy.log('Post step: Switching to Edit tab')
+            equationEditorSectionCommonComponent.steps.switchToEditTab();
+            if (questionType == 'essay response') {
+                //Need to remove this once https://redmine.zeuslearning.com/issues/577356 is resolved
+                equationEditorSectionCommonComponent.steps.expandCustomizeFormattingOptionsAccordion();
+            };
+        });
+
+        //https://redmine.zeuslearning.com/issues/530205
+        it('CSS of error message', { tags: 'css' }, () => {
+            utilities.verifyCSS(equationEditorSectionCommonComponent.selectACategoryErrorMessage(), {
+                'color': css.color.errorText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of error message', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(equationEditorSectionCommonComponent.selectACategoryErrorMessage());
+        });
+
+        it('When user selects any category then the error message should disappear', () => {
+            equationEditorSectionCommonComponent.steps.selectACategoryInEquationEditorSectionEditTab(`${equationEditorCategoriesAndSymbols['numPad'].displayName}`);
+            utilities.verifyElementVisibilityState(equationEditorSectionCommonComponent.selectACategoryErrorMessage(), 'notExist');
+        });
+    },
+
+    /**
+    * make change in equation in preview tab .
+    * @param {string} questionType - The type of the question .
+    */
+    editEquationInPreviewTab: (questionType) => {
+        it('When user clicks on an added equation in preview input field, the Equation editor flyout should open', () => {
+            if (questionType === 'essay response') {
+                equationEditorSectionCommonComponent.steps.openResponseFieldEquationContainerEquationEditor(0);
+            }
+            else {
+                equationEditorSectionCommonComponent.steps.focusInResponseAnswerInputFieldPreviewTab(0);
+            }
+            utilities.verifyElementVisibilityState(equationEditorFlyout.dialogBox(), 'visible');
+        });
+
+        it(`In the equation editor flyout the ${allCategories[0].displayName} should be selected by default and the Equation editor input field should be prefilled with the added equation`, () => {
+            equationEditorFlyout.steps.verifyCategoryTileSelectedInEquationEditor(`${equationEditorCategoriesAndSymbols['numPad'].displayName}`);
+            cy.log('Adding this to focus out of input field')
+            equationEditorFlyout.steps.selectEquationEditorCategoryPreviewTab(`${equationEditorCategoriesAndSymbols['numPad'].displayName}`)
+            utilities.verifyTextContent(equationEditorFlyout.previewInputField(), 'x+5=1​');
+        });
+
+        it('When user clicks on Cancel button the equation should be displayed in the preview input field without any changes', () => {
+            equationEditorFlyout.steps.clickOnEquationEditorCancelButton();
+            if (questionType === 'essay response') {
+                equationEditorSectionCommonComponent.steps.verifyResponseFieldEquationText(0, 'x+5=1');
+            }
+            else {
+                equationEditorSectionCommonComponent.steps.verifyResponseFieldEquationTextNew(0, 'x+5=1');
+            }
+        });
+
+        it('When user edits the added equation and clicks on Ok button, the edited equation should be displayed in the preview input field', () => {
+            if (questionType === 'essay response') {
+                equationEditorSectionCommonComponent.steps.openResponseFieldEquationContainerEquationEditor(0);
+            }
+            else {
+                equationEditorSectionCommonComponent.steps.focusInResponseAnswerInputFieldPreviewTab(0);
+            }
+            equationEditorFlyout.steps.enterTextInPreviewInputField('{backspace}{backspace}');
+            equationEditorFlyout.steps.enterEquation([{ categoryName: 'numPad', symbolName: ['multiply', 'zero'] }]);
+            equationEditorFlyout.steps.clickOnOkButton();
+            if (questionType === 'essay response') {
+                equationEditorSectionCommonComponent.steps.verifyResponseFieldEquationText(0, 'x+5×0');
+            }
+            else {
+                equationEditorSectionCommonComponent.steps.verifyResponseFieldEquationTextNew(0, 'x+5×0​');
+            }
+        });
+    },
+
+    /**
+    * verify equation editor flyout in preview tab .
+    * @param {string} questionType - The type of the question .
+    */
+    equationEditorFlyoutInPreviewTab: (questionType) => {
+        it('When user clicks on \'Equation Editor\' icon in preview tab toolbar, then Equation Editor flyout should appear', () => {
+            if (questionType == 'essay response') {
+                equationEditorSectionCommonComponent.steps.selectPreviewTabToolbarOption('Equation Editor');
+            }
+            else {
+                equationEditorSectionCommonComponent.steps.focusInResponseAnswerInputFieldPreviewTab(0);
+            }
+            utilities.verifyElementVisibilityState(equationEditorFlyout.dialogBox(), 'visible');
+        });
+
+        it('\'Done\'button should be displayed at the bottom of the flyout', () => {
+            utilities.verifyElementVisibilityState(equationEditorFlyout.buttonOk(), 'visible');
+            utilities.verifyInnerText(equationEditorFlyout.buttonOk(), 'Done');
+        });
+
+        it('Equation Editor input field should be displayed and when user focuses in the input field should have cursor', () => {
+            equationEditorFlyout.steps.verifyDefaultEquationEditorInputFieldWithCursor();
+        });
+
+        it('All the default selected categories in the \'Equation Editor\' section should be displayed and first category must be selected by default in the \'Equation Editor\' flyout', () => {
+            equationEditorFlyout.steps.verifyEquationEditorCategoryTiles(defaultSelectedCategories);
+            equationEditorFlyout.steps.verifyCategoryTileSelectedInEquationEditor(equationEditorCategoriesAndSymbols['numPad'].displayName);
+        });
+
+        it('CSS of \'Equation Editor\' flyout', { tags: 'css' }, () => {
+            cy.log('CSS of selected category')
+            utilities.getNthElement(equationEditorFlyout.categoryTab(), 0)
+                .within(() => {
+                    utilities.verifyCSS(equationEditorFlyout.categoryTabTitle(), {
+                        'color': css.color.activeButtons,
+                        'font-size': css.fontSize.small,
+                        'font-weight': css.fontWeight.regular
+                    });
+                    utilities.verifyCSS(equationEditorFlyout.categoryTabIcon(), {
+                        'color': css.color.activeButtons,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular
+                    });
+                });
+            cy.log('CSS of unselected category')
+            utilities.getNthElement(equationEditorFlyout.categoryTab(), 0)
+                .within(() => {
+                    utilities.verifyCSS(equationEditorFlyout.categoryTabTitle(), {
+                        'color': css.color.activeButtons,
+                        'font-size': css.fontSize.small,
+                        'font-weight': css.fontWeight.regular
+                    });
+                    utilities.verifyCSS(equationEditorFlyout.categoryTabIcon(), {
+                        'color': css.color.activeButtons,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular
+                    });
+                });
+            utilities.verifyCSS(equationEditorFlyout.previewInputField(), {
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(equationEditorFlyout.buttonCancel(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.secondaryBtnBg,
+            });
+            utilities.verifyCSS(equationEditorFlyout.buttonOk(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.primaryBtnBg,
+            });
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/564678
+        it('Accessibility of \'Equation Editor\' flyout', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(equationEditorFlyout.dialogBox());
+        });
+
+        it('Cancel button should be displayed in the flyout and when user clicks the \'Cancel\' button then the flyout should close', () => {
+            utilities.verifyElementVisibilityState(equationEditorFlyout.buttonCancel(), 'visible');
+            utilities.verifyInnerText(equationEditorFlyout.buttonCancel(), 'Cancel');
+            equationEditorFlyout.steps.clickOnEquationEditorCancelButton();
+            utilities.verifyElementVisibilityState(equationEditorFlyout.dialogBox(), 'notExist');
+        });
+    },
+
+    /**
+    * verify next and preview button in preview tab .
+    * @param {string} questionType - The type of the question .
+    */
+    verifyNextAndPreviewButtonInPreviewTab: (questionType) => {
+        it('When the selected number of equation categories fit the dialog box width then \'Next button\' and \'Previous button\' should not be displayed in the equation editor flyout', () => {
+            if (questionType == 'essay response') {
+                equationEditorSectionCommonComponent.steps.selectPreviewTabToolbarOption('Equation Editor');
+            }
+            else {
+                equationEditorSectionCommonComponent.steps.focusInResponseAnswerInputFieldPreviewTab(0);
+            }
+            utilities.verifyElementVisibilityState(equationEditorFlyout.buttonNext(), 'notExist');
+            utilities.verifyElementVisibilityState(equationEditorFlyout.buttonPrevious(), 'notExist');
+        });
+
+        it('When the selected number of equation categories do not fit the dialog box width then \'Next button\' and \'Previous button\' should be displayed in the equation editor flyout', () => {
+            cy.log('Pre step: Switch to Edit tab and select categories from the Equation Editor section')
+            equationEditorSectionCommonComponent.steps.switchToEditTab();
+            if (questionType == 'essay response') {
+                //Need to remove this once https://redmine.zeuslearning.com/issues/577356 is resolved
+                equationEditorSectionCommonComponent.steps.expandCustomizeFormattingOptionsAccordion();
+            }
+            equationEditorSectionCommonComponent.steps.selectingCategories([`${equationEditorCategoriesAndSymbols['algebra'].displayName}`, `${equationEditorCategoriesAndSymbols['matrices'].displayName}`, `${equationEditorCategoriesAndSymbols['geo'].displayName}`, `${equationEditorCategoriesAndSymbols['compare'].displayName}`, `${equationEditorCategoriesAndSymbols['calculus'].displayName}`, `${equationEditorCategoriesAndSymbols['trig'].displayName}`, `${equationEditorCategoriesAndSymbols['delimiters'].displayName}`, `${equationEditorCategoriesAndSymbols['greek'].displayName}`, `${equationEditorCategoriesAndSymbols['measurement'].displayName}`, `${equationEditorCategoriesAndSymbols['setNotation'].displayName}`]);
+            cy.log('Switching to Preview tab')
+            equationEditorSectionCommonComponent.steps.switchToPreviewTab()
+            if (questionType == 'essay response') {
+                equationEditorSectionCommonComponent.steps.selectPreviewTabToolbarOption('Equation Editor');
+            }
+            else {
+                equationEditorSectionCommonComponent.steps.focusInResponseAnswerInputFieldPreviewTab(0);
+            }
+            utilities.verifyElementVisibilityState(equationEditorFlyout.buttonNext(), 'visible');
+            utilities.verifyElementVisibilityState(equationEditorFlyout.buttonPrevious(), 'visible');
+        });
+
+        it('CSS of \'Next button\' and \'Previous button\'', { tags: 'css' }, () => {
+            utilities.verifyCSS(equationEditorFlyout.buttonPrevious().find('svg'), {
+                'background-color': css.color.transparent
+            });
+            utilities.verifyCSS(equationEditorFlyout.buttonPrevious().find('svg').find('path'), {
+                'fill': css.color.nextPreviousButtonFill
+            });
+            utilities.verifyCSS(equationEditorFlyout.buttonNext().find('svg'), {
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(equationEditorFlyout.buttonNext().find('svg').find('path'), {
+                'fill': css.color.nextPreviousButtonFill
+            });
+        });
+
+        it('Accessibility of \'Next button\' and \'Previous button\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(equationEditorFlyout.buttonPrevious());
+            cy.checkAccessibility(equationEditorFlyout.buttonNext());
+        });
+
+        it('By default, the \'Previous button\' should be disabled and \'Next button\' should be enabled on opening the flyout as user is at the beginning of the tablist', () => {
+            utilities.verifyElementDisabled(equationEditorFlyout.buttonPrevious());
+            utilities.verifyElementNotDisabled(equationEditorFlyout.buttonNext());
+        });
+
+        it('When user clicks on the \'Next button\', the \'Previous button\' and the \'Next button\' both should get enabled, When the user reaches end of the tablist the \'Next button\' should get disabled and \'Previous button\' should remain enabled.', () => {
+            equationEditorFlyout.steps.clickOnEquationEditorButtonNext();
+            utilities.verifyElementNotDisabled(equationEditorFlyout.buttonPrevious());
+            utilities.verifyElementNotDisabled(equationEditorFlyout.buttonNext());
+            cy.log('Clicking on Next button to reach end of tablist')
+            equationEditorFlyout.steps.clickOnEquationEditorButtonNext()
+            utilities.verifyElementNotDisabled(equationEditorFlyout.buttonPrevious());
+            utilities.verifyElementDisabled(equationEditorFlyout.buttonNext());
+        });
+
+        it('When user clicks on the \'Previous button\', and reaches the beginning of the tablist \'Previous button\' should become disabled and \'Next button\' should become enabled', () => {
+            equationEditorFlyout.steps.clickOnEquationEditorButtonPrevious()
+            equationEditorFlyout.steps.clickOnEquationEditorButtonPrevious()
+            utilities.verifyElementDisabled(equationEditorFlyout.buttonPrevious());
+            utilities.verifyElementNotDisabled(equationEditorFlyout.buttonNext());
+        });
+    }
+}
+
+export const equationEditorSectionCommonComponent = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/components/gradingViewEnumerationComponent.js

@@ -77,7 +77,9 @@ const tests = {
         });
 
         it(`When "with enumeration" radio button is in checked state, "${typeOfInput} identifiers" label along with ${gradingEnumerationButtons.length} toggle buttons. By default, 'Numerical' toggle button should be in selected state of the ${gradingEnumerationButtons.join(' , ')} toggle buttons`, () => {
-            utilities.verifyInnerText(gradingViewEnumerationComponent.identifiersLabel(), `${typeOfInput} identifiers`);
+            if (typeOfInput != "") {
+                utilities.verifyInnerText(gradingViewEnumerationComponent.identifiersLabel(), `${typeOfInput} identifiers`);
+            }
             utilities.verifyElementVisibilityState(gradingViewEnumerationComponent.numericalToggleButton(), 'visible');
             utilities.verifyElementVisibilityState(gradingViewEnumerationComponent.alphabetUppercaseToggleButton(), 'visible');
             utilities.verifyElementVisibilityState(gradingViewEnumerationComponent.alphabetLowercaseToggleButton(), 'visible');
@@ -111,11 +113,14 @@ const tests = {
                 'font-size': css.fontSize.normal,
                 'font-weight': css.fontWeight.regular
             });
-            utilities.verifyCSS(gradingViewEnumerationComponent.identifiersLabel(), {
-                'color': css.color.labels,
-                'font-size': css.fontSize.normal,
-                'font-weight': css.fontWeight.semibold
-            });
+
+            if (typeOfInput != "") {
+                utilities.verifyCSS(gradingViewEnumerationComponent.identifiersLabel(), {
+                    'color': css.color.labels,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.semibold
+                });
+            }
             utilities.verifyCSS(gradingViewEnumerationComponent.numericalToggleButton(), {
                 'background-color': css.color.secondaryBtnBg,
                 'border': `2px solid ${css.color.secondaryBtnActive}`

package/cypress/pages/components/index.js

@@ -67,4 +67,5 @@ export * from './showAvailableOptionsToStudents';
 export * from './showStudentMaximumNumberOfPossibleSelections';
 export * from './draggableOptionsStyleAndLayoutComponent';
 export * from './connectorStyleStyleAndLayoutCustomizationComponent';
-export * from './ckEditorAudioPlayerComponent';
+export * from './equationEditorSectionCommonComponent';
+export * from './ckEditorAudioPlayerComponent';

package/cypress/pages/components/questionInstructionsComponent.js

@@ -77,6 +77,16 @@ const steps = {
         questionInstructionsComponent.questionInstructionsInputField()
             .click()
             .blur();
+    },
+
+    focusInQuestionInstructionsInputField: () => {
+        questionInstructionsComponent.questionInstructionsInputField()
+            .click();
+    },
+
+    focusOutQuestionInstructionsInputField: () => {
+        questionInstructionsComponent.questionInstructionsInputField()
+            .blur();
     }
 }