itemengine-cypress-automation 1.0.105 → 1.0.107

package/cypress/e2e/ILC/EssayResponse/equationEditor.smoke.js

@@ -0,0 +1,412 @@
+import { equationEditorCategoriesAndSymbols } from "../../../fixtures/equationEditorCategoriesAndSymbols ";
+import { commonComponents, createCustomCategoryFlyout } from "../../../pages/components";
+import { equationEditorFlyout } from "../../../pages/components/equationEditorFlyout";
+import { essayResponsePage } from "../../../pages/essayResponsePage";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const grepTags = Cypress.env('grepTags');
+
+const defaultSelectedCategories = ['Keypad', 'Basic', 'Greek', 'Operators', 'Relationships', 'Arrows', 'Delimiters', 'Misc'];
+const allCategories = Object.values(equationEditorCategoriesAndSymbols)
+
+describe('Create question page - Essay Response: Equation Editor functionality', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Preview tab \'Equation Editor\' flyout', { tags: 'smoke' }, () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor']);
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('The \'Equation Editor\' icon should be displayed in the preview tab toolbar', () => {
+            utilities.verifyElementVisibilityState(essayResponsePage.previewTabToolbarOption('Equation Editor'), 'visible');
+        });
+
+        it('When user clicks on \'Equation Editor\' icon in preview tab toolbar, then Equation Editor flyout should appear with the title \'Equation editor\'', () => {
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Equation Editor');
+            utilities.verifyElementVisibilityState(equationEditorFlyout.dialogBox(), 'visible');
+            utilities.verifyElementVisibilityState(equationEditorFlyout.dialogBoxTitle(), 'visible');
+            utilities.verifyInnerText(equationEditorFlyout.dialogBoxTitle(), 'Equation editor');
+        });
+
+        it('Ok button should be displayed at the bottom of the flyout', () => {
+            utilities.verifyElementVisibilityState(equationEditorFlyout.buttonOk(), 'visible');
+            utilities.verifyInnerText(equationEditorFlyout.buttonOk(), 'Ok');
+        });
+
+        it('Equation Editor input field should be displayed and should have cursor by default', () => {
+            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('Keypad')
+        });
+
+        it('CSS of \'Equation Editor\' flyout', { tags: 'css' }, () => {
+            utilities.verifyCSS(equationEditorFlyout.dialogBoxTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold
+            });
+            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.secondaryBtn,
+                        'font-size': css.fontSize.small,
+                        'font-weight': css.fontWeight.regular
+                    });
+                    utilities.verifyCSS(equationEditorFlyout.categoryTabIcon(), {
+                        'color': css.color.secondaryBtn,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular
+                    });
+                });
+            utilities.verifyCSS(equationEditorFlyout.previewInputField(), {
+                'background-color': css.color.transparent
+            });
+            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,
+            });
+        });
+
+        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');
+        });
+    });
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Equation Editor: Next and Previous button', () => {
+            abortEarlySetup();
+            before(() => {
+                essayResponsePage.steps.navigateToCreateQuestion('essay response');
+                cy.barsPreLoaderWait();
+                essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+                essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor']);
+                essayResponsePage.steps.deselectCategoryInEquationEditorSectionEditTab('Misc');
+                essayResponsePage.steps.switchToPreviewTab();
+            });
+
+            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', () => {
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Equation Editor');
+                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 all categories from the Equation Editor section')
+                essayResponsePage.steps.switchToEditTab();
+                essayResponsePage.steps.selectingCategories([`${equationEditorCategoriesAndSymbols['misc'].displayName}`, `${equationEditorCategoriesAndSymbols['matrices'].displayName}`, `${equationEditorCategoriesAndSymbols['trigonometry'].displayName}`, `${equationEditorCategoriesAndSymbols['units'].displayName}`, `${equationEditorCategoriesAndSymbols['calculus'].displayName}`, `${equationEditorCategoriesAndSymbols['geometry'].displayName}`]);
+                cy.log('Switching to Preview tab')
+                essayResponsePage.steps.switchToPreviewTab()
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Equation Editor');
+                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.defaultBackground
+                });
+                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());
+            });
+        });
+    }
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Edit tab Equation Editor section', () => {
+            abortEarlySetup();
+            before(() => {
+                essayResponsePage.steps.navigateToCreateQuestion('essay response');
+                cy.barsPreLoaderWait();
+                essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+                essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+            });
+
+            it('The \'Equation Editor\' should be displayed along with helper text \'Select the categories to display to the students in the equation editor.\' and \'Create custom category\' button should be displayed', () => {
+                utilities.verifyElementVisibilityState(essayResponsePage.equationEditorSectionTitle(), 'visible');
+                utilities.verifyInnerText(essayResponsePage.equationEditorSectionTitle(), 'Equation editor');
+                utilities.verifyElementVisibilityState(essayResponsePage.equationEditorSectionHelperText(), 'visible');
+                utilities.verifyInnerText(essayResponsePage.equationEditorSectionHelperText(), 'Select the categories to display to the students in the equation editor.');
+                utilities.verifyElementVisibilityState(createCustomCategoryFlyout.createCustomCategoryButton(), 'visible');
+                utilities.verifyInnerText(createCustomCategoryFlyout.createCustomCategoryButton(), 'Create custom category');
+            });
+
+            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', () => {
+                essayResponsePage.steps.verifyDefaultCategoriesDisplayedInEquationEditorSectionEditTab();
+            });
+
+            it('When user hovers on a category with a long name, then a tooltip should be displayed.', () => {
+                let categoriesWithTooltip = [`${equationEditorCategoriesAndSymbols['relationships'].displayName}`, `${equationEditorCategoriesAndSymbols['trigonometry'].displayName}`, `${equationEditorCategoriesAndSymbols['calculus'].displayName}`, `${equationEditorCategoriesAndSymbols['geometry'].displayName}`];
+                essayResponsePage.steps.verifyTooltipsOfCategoryTilesInEquationEditorSectionEditTab(categoriesWithTooltip);
+            });
+
+            it(`By default, ${defaultSelectedCategories.toString()} should be selected`, () => {
+                defaultSelectedCategories.forEach((category) => {
+                    essayResponsePage.steps.verifySelectedCategoryInEquationEditorSectionEditTab(category);
+                });
+            });
+
+            it('CSS of selected and deselected category', { tags: 'css' }, () => {
+                cy.log('CSS of selected category')
+                utilities.verifyCSS(utilities.getNthElement(essayResponsePage.equationEditorSectionCategories(), 0), {
+                    'background-color': css.color.activeButtons
+                });
+                utilities.verifyCSS(utilities.getNthElement(essayResponsePage.equationEditorSectionCategories(), 0))
+                    .within(() => {
+                        utilities.verifyCSS(essayResponsePage.equationEditorSectionCategoryLabel(), {
+                            'color': css.color.primaryBtn,
+                            'font-size': css.fontSize.small,
+                            'font-weight': css.fontWeight.regular
+                        });
+                        utilities.verifyCSS(essayResponsePage.equationEditorSectionTickIcon().find('[data-name*="Icon"]'), {
+                            'fill': css.color.activeButtons
+                        });
+                        utilities.verifyCSS(essayResponsePage.equationEditorSectionCategoriesDragIcon().find('path'), {
+                            'fill': css.color.activeButtons
+                        });
+                    });
+                cy.log('CSS of deselected category')
+                utilities.verifyCSS(utilities.getNthElement(essayResponsePage.equationEditorSectionCategories(), 12), {
+                    'background-color': css.color.primaryBtn
+                });
+                utilities.verifyCSS(utilities.getNthElement(essayResponsePage.equationEditorSectionCategories(), 12))
+                    .within(() => {
+                        utilities.verifyCSS(essayResponsePage.equationEditorSectionCategoryLabel(), {
+                            'color': css.color.secondaryBtn,
+                            'font-size': css.fontSize.small,
+                            'font-weight': css.fontWeight.regular
+                        });
+                        utilities.verifyCSS(essayResponsePage.equationEditorSectionCategoriesDragIcon().find('path'), {
+                            'fill': css.color.secondaryBtn
+                        });
+                    });
+            });
+
+            it('Accessibility of selected and deselected category', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(essayResponsePage.equationEditorSectionCategories().contains(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`).parents('[class*="DraggableItemsGrid"]'))
+            });
+
+            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')
+                essayResponsePage.steps.deselectACategoryInEquationEditorSectionEditTab(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`);
+                essayResponsePage.steps.selectACategoryInEquationEditorSectionEditTab(`${equationEditorCategoriesAndSymbols['geometry'].displayName}`);
+                cy.log('Switching to Preview tab')
+                essayResponsePage.steps.switchToPreviewTab();
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Equation Editor');
+                equationEditorFlyout.steps.verifyCategoryNotDisplayedInEquationEditor(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`);
+                equationEditorFlyout.steps.verifyCategoryTileSelectedInEquationEditor(`${equationEditorCategoriesAndSymbols['basic'].displayName}`);
+                equationEditorFlyout.steps.clickOnEquationEditorButtonNext()
+                equationEditorFlyout.steps.verifyCategoryIsDisplayedInEquationEditor(`${equationEditorCategoriesAndSymbols['geometry'].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')
+                essayResponsePage.steps.switchToEditTab();
+                essayResponsePage.steps.selectingCategories([`${equationEditorCategoriesAndSymbols['basic'].displayName}`, `${equationEditorCategoriesAndSymbols['greek'].displayName}`, `${equationEditorCategoriesAndSymbols['operators'].displayName}`, `${equationEditorCategoriesAndSymbols['relationships'].displayName}`, `${equationEditorCategoriesAndSymbols['arrows'].displayName}`, `${equationEditorCategoriesAndSymbols['delimiters'].displayName}`, `${equationEditorCategoriesAndSymbols['misc'].displayName}`, `${equationEditorCategoriesAndSymbols['geometry'].displayName}`]);
+                utilities.verifyInnerText(essayResponsePage.selectACategoryErrorMessage(), 'Error: Please select a category.');
+                cy.log('Switching to Preview tab')
+                essayResponsePage.steps.switchToPreviewTab();
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Equation Editor');
+                utilities.verifyElementVisibilityState(equationEditorFlyout.dialogBox(), 'visible');
+                utilities.verifyElementVisibilityState(equationEditorFlyout.categoryTabTitle(), 'notExist');
+                utilities.verifyElementVisibilityState(equationEditorFlyout.categoryCharactersWrapper(), 'notExist');
+                cy.log('Post step: Switching to Edit tab')
+                essayResponsePage.steps.switchToEditTab();
+            });
+
+            //https://redmine.zeuslearning.com/issues/530205
+            it('CSS of error message', { tags: 'css' }, () => {
+                utilities.verifyCSS(essayResponsePage.selectACategoryErrorMessage(), {
+                    'color': css.color.errorText,
+                    'font-size': css.fontSize.small,
+                    'font-weight': css.fontWeight.regular
+                });
+            });
+
+            it('Accessibility of error message', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(essayResponsePage.selectACategoryErrorMessage());
+            });
+
+            it('When user selects any category then the error message should disappear', () => {
+                essayResponsePage.steps.selectACategoryInEquationEditorSectionEditTab(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`);
+                utilities.verifyElementVisibilityState(essayResponsePage.selectACategoryErrorMessage(), 'notExist');
+            });
+
+            it('When user re-selects the Equation Editor icon then only the previously selected category category should appear in selected state', () => {
+                const deselectedCategoriesArray = Object.values(equationEditorCategoriesAndSymbols).map((category) => category.displayName).slice(1)
+                essayResponsePage.steps.deselectCustomizedFormattingOption(['Equation Editor']);
+                utilities.verifyElementVisibilityState(essayResponsePage.equationEditorSection(), 'notExist');
+                essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor']);
+                essayResponsePage.steps.verifySelectedCategoryInEquationEditorSectionEditTab(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`);
+                deselectedCategoriesArray.forEach((categoryName) => {
+                    essayResponsePage.steps.verifyDeselectedCategoryInEquationEditorSectionEditTab(categoryName);
+                });
+            });
+        });
+    }
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Adding and deleting equations', () => {
+            abortEarlySetup();
+            before(() => {
+                essayResponsePage.steps.navigateToCreateQuestion('essay response');
+                cy.barsPreLoaderWait();
+                essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+                essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor']);
+                essayResponsePage.steps.checkDisplayWordCountCheckbox();
+                essayResponsePage.steps.switchToPreviewTab();
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Equation Editor');
+            });
+
+            it('When user enters an equation in the Preview input field the word count should increase by 1 and the entered equation should have focus', () => {
+                cy.log('Adding an equation using Basic and Greek category')
+                equationEditorFlyout.steps.enterEquation([{ categoryName: `${equationEditorCategoriesAndSymbols['basic'].displayName}`, symbolAriaLabel: [`${equationEditorCategoriesAndSymbols.basic.symbols.x.ariaLabel}`, `${equationEditorCategoriesAndSymbols.basic.symbols.square.ariaLabel}`, `${equationEditorCategoriesAndSymbols.basic.symbols.equalTo.ariaLabel}`] },
+                { categoryName: `${equationEditorCategoriesAndSymbols['greek'].displayName}`, symbolAriaLabel: [`${equationEditorCategoriesAndSymbols.greek.symbols.piUpper.ariaLabel}`] }]);
+                cy.log('Clicking on Ok button to add the equation to Preview input field and checking word count')
+                equationEditorFlyout.steps.clickOnOkButton();
+                essayResponsePage.steps.verifyWordCount(1);
+            });
+
+            it('When user enters another equation in the preview input field without adding any space the word count should remain the same', () => {
+                cy.log('Prestep: Clicking on Equation editor button')
+                essayResponsePage.steps.enterInputInResponseField('{rightarrow}');
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Equation Editor');
+                equationEditorFlyout.steps.enterEquation([{ categoryName: `${equationEditorCategoriesAndSymbols['arrows'].displayName}`, symbolAriaLabel: [`${equationEditorCategoriesAndSymbols.arrows.symbols.leftHarpoonBarbUp.ariaLabel}`, `${equationEditorCategoriesAndSymbols.arrows.symbols.leftRightHarpoons.ariaLabel}`] }]);
+                equationEditorFlyout.steps.clickOnOkButton();
+                essayResponsePage.steps.verifyWordCount(1);
+            });
+
+            it('When user enters another equation in the preview input field after adding a space the word count should increase by 1', () => {
+                essayResponsePage.steps.enterInputInResponseField('{rightarrow} ');
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Equation Editor');
+                equationEditorFlyout.steps.enterEquation([{ categoryName: `${equationEditorCategoriesAndSymbols['keypad'].displayName}`, symbolAriaLabel: [`${equationEditorCategoriesAndSymbols.keypad.symbols.add.ariaLabel}`, `${equationEditorCategoriesAndSymbols.keypad.symbols.two.ariaLabel}`] }]);
+                equationEditorFlyout.steps.clickOnOkButton();
+                essayResponsePage.steps.verifyWordCount(2);
+            });
+
+            it('When user clicks backspace the entered equation should get deleted and the word count should decrease by 1', () => {
+                essayResponsePage.steps.enterInputInResponseField('{backspace}{backspace}');
+                essayResponsePage.steps.verifyWordCount(1);
+            });
+        });
+    }
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Edit equation', () => {
+            abortEarlySetup();
+            before(() => {
+                essayResponsePage.steps.navigateToCreateQuestion('essay response');
+                cy.barsPreLoaderWait();
+                essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+                essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+                essayResponsePage.steps.switchToPreviewTab();
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Equation Editor');
+                cy.log('Adding an equation to preview input field')
+                equationEditorFlyout.steps.enterEquation([{ categoryName: `${equationEditorCategoriesAndSymbols['relationships'].displayName}`, symbolAriaLabel: [`${equationEditorCategoriesAndSymbols.relationships.symbols.simultaneousEquations.ariaLabel}`] }]);
+                equationEditorFlyout.steps.enterTextAtInputFieldCursor('a');
+                equationEditorFlyout.steps.enterTextInFirstEmptyBox(['b', 'c', 'd']);
+                equationEditorFlyout.steps.clickOnOkButton();
+                essayResponsePage.steps.verifyResponseFieldEquationText(0, 'a+b=c+d=');
+            });
+
+            it('When user double clicks on an added equation in preview input field, the Equation editor flyout should open', () => {
+                essayResponsePage.steps.openResponseFieldEquationContainerEquationEditor(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['keypad'].displayName}`);
+                utilities.verifyTextContent(equationEditorFlyout.previewInputField(), 'a+b=c+d=');
+            });
+
+            it('When user clicks on Cancel button the equation should be displayed in the preview input field without any changes', () => {
+                equationEditorFlyout.steps.clickOnEquationEditorCancelButton();
+                essayResponsePage.steps.verifyResponseFieldEquationText(0, 'a+b=c+d=');
+            });
+
+            it('When user edits the added equation and clicks on Ok button, the edited equation should be displayed in the preview input field', () => {
+                essayResponsePage.steps.openResponseFieldEquationContainerEquationEditor(0);
+                equationEditorFlyout.steps.enterTextInPreviewInputField('{backspace}{backspace}');
+                equationEditorFlyout.steps.enterEquation([{ categoryName: `${equationEditorCategoriesAndSymbols['delimiters'].displayName}`, symbolAriaLabel: [`${equationEditorCategoriesAndSymbols.delimiters.symbols.singleSquareOpen.ariaLabel}`] }]);
+                equationEditorFlyout.steps.enterTextAtInputFieldCursor('a{rightarrow}');
+                equationEditorFlyout.steps.enterEquation([{ categoryName: `${equationEditorCategoriesAndSymbols['delimiters'].displayName}`, symbolAriaLabel: [`${equationEditorCategoriesAndSymbols.delimiters.symbols.singleSquareClose.ariaLabel}`] }]);
+                equationEditorFlyout.steps.clickOnOkButton();
+                essayResponsePage.steps.verifyResponseFieldEquationText(0, '[a]');
+            });
+        });
+    }
+});

package/cypress/e2e/ILC/EssayResponse/equationEditorCategories1.js

@@ -0,0 +1,203 @@
+import { equationEditorCategoriesAndSymbols } from "../../../fixtures/equationEditorCategoriesAndSymbols ";
+import { equationEditorFlyout } from "../../../pages/components/equationEditorFlyout";
+import { essayResponsePage } from "../../../pages/essayResponsePage";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+
+describe('Create question page - Essay Response: Equation Editor categories', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Equation editor symbol category: Keypad', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Equation Editor');
+        });
+
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutSymbolCategoriesTabs('keypad');
+
+        essayResponsePage.tests.verifyEquationEditorFlyoutSymbolCategoriesFunctionality('keypad', '1/10000');
+    });
+
+    describe('Equation editor input category: Basic', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Equation Editor')
+        });
+
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutSymbolCategoriesTabs('basic');
+
+        it('On clicking the symbols it should be displayed in the input field of Equation editor and user should be able to form meaningful equations using the category', () => {
+            equationEditorFlyout.steps.enterTextInPreviewInputField('8');
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.lowerExponent.ariaLabel);
+            equationEditorFlyout.steps.enterTextAtInputFieldCursor('3{rightarrow}');
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.add.ariaLabel);
+            equationEditorFlyout.steps.enterTextInPreviewInputField('2');
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.upperExponent.ariaLabel);
+            equationEditorFlyout.steps.enterTextAtInputFieldCursor('3{rightarrow}');
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.subtract.ariaLabel);
+            equationEditorFlyout.steps.enterTextInPreviewInputField('2');
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.square.ariaLabel);
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.plusMinus.ariaLabel);
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.fraction.ariaLabel);
+            equationEditorFlyout.steps.enterTextAtInputFieldCursor('5');
+            equationEditorFlyout.steps.enterTextInFirstEmptyBox(['15{rightarrow}']);
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.minusPlus.ariaLabel);
+            equationEditorFlyout.steps.enterTextInPreviewInputField('3');
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.mixedFraction.ariaLabel);
+            equationEditorFlyout.steps.enterTextInPreviewInputField('4');
+            equationEditorFlyout.steps.enterTextInFirstEmptyBox(['5{rightarrow}']);
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.equalTo.ariaLabel);
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.letterN.ariaLabel);
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.comma.ariaLabel);
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.groupInParenthesis.ariaLabel);
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.sqrt.ariaLabel);
+            equationEditorFlyout.steps.enterTextAtInputFieldCursor('25{rightarrow}{rightarrow}');
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.dotMultiplier.ariaLabel);
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.cubeRoot.ariaLabel);
+            equationEditorFlyout.steps.enterTextAtInputFieldCursor('27{rightarrow}');
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.multiply.ariaLabel);
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.nRoot.ariaLabel);
+            equationEditorFlyout.steps.enterTextAtInputFieldCursor('4');
+            equationEditorFlyout.steps.enterTextInFirstEmptyBox(['16{rightarrow}']);
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.colonRatio.ariaLabel);
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.groupInBrackets.ariaLabel);
+            equationEditorFlyout.steps.enterTextAtInputFieldCursor('3');
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.longDivision.ariaLabel);
+            equationEditorFlyout.steps.enterTextAtInputFieldCursor('36{rightarrow}{rightarrow}');
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.comma.ariaLabel);
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.groupInBraces.ariaLabel);
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.letterP.ariaLabel);
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.divide.ariaLabel);
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.letterZ.ariaLabel);
+            equationEditorFlyout.steps.enterTextAtInputFieldCursor('{rightarrow}{rightarrow}{rightarrow}10');
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.function.ariaLabel);
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.absoluteValue.ariaLabel);
+            equationEditorFlyout.steps.enterTextAtInputFieldCursor('9')
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.angleBracket.ariaLabel);
+            equationEditorFlyout.steps.enterTextAtInputFieldCursor('10');
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.dollar.ariaLabel);
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.asterisk.ariaLabel);
+            equationEditorFlyout.steps.enterTextAtInputFieldCursor('{rightarrow}{rightarrow}50');
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.cents.ariaLabel);
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.binomialCoefficient.ariaLabel);
+            equationEditorFlyout.steps.enterTextAtInputFieldCursor('4');
+            equationEditorFlyout.steps.enterTextInFirstEmptyBox(['3{rightarrow}']);
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.matrix.ariaLabel);
+            equationEditorFlyout.steps.enterTextAtInputFieldCursor('2');
+            for (let i = 1; i < 3; i++) {
+                equationEditorFlyout.steps.enterTextInFirstEmptyBox([i]);
+            }
+            equationEditorFlyout.steps.enterTextInFirstEmptyBox(['4{rightarrow}{rightarrow}{rightarrow}']);
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.therefore.ariaLabel);
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.because.ariaLabel);
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.summation.ariaLabel);
+            equationEditorFlyout.steps.enterTextInFirstEmptyBox(['1']);
+            equationEditorFlyout.steps.enterTextInFirstEmptyBox(['4{rightarrow}']);
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.product.ariaLabel);
+            equationEditorFlyout.steps.enterTextInFirstEmptyBox(['1']);
+            equationEditorFlyout.steps.enterTextInFirstEmptyBox(['4{rightarrow}']);
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.coProduct.ariaLabel);
+            equationEditorFlyout.steps.enterTextInFirstEmptyBox(['1']);
+            equationEditorFlyout.steps.enterTextInFirstEmptyBox(['4{rightarrow}']);
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.integral.ariaLabel);
+            equationEditorFlyout.steps.enterTextInFirstEmptyBox(['1']);
+            equationEditorFlyout.steps.enterTextInFirstEmptyBox(['4{rightarrow}']);
+            equationEditorFlyout.steps.enterTextAtInputFieldCursor('{rightarrow}{rightarrow}');
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.letterR.ariaLabel);
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.letterC.ariaLabel);
+            equationEditorFlyout.steps.selectCategoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.letterH.ariaLabel);
+        });
+
+        equationEditorFlyout.tests.verifyCSSAnda11yOfEquationEditorInputField('basic');
+
+        essayResponsePage.tests.insertEquationAndVerifyInputFieldContentsAndWordCount('83+23−22±515∓345=N,(25)·273×164:[336],{P÷Z}10f|9⟨10$∗50¢(43)2124⟩|∴∵∑14∏14∐14∫41RCH', '1/10000');
+    });
+
+    describe('Equation editor symbol category: Greek', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Equation Editor');
+        });
+
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutSymbolCategoriesTabs('greek');
+
+        essayResponsePage.tests.verifyEquationEditorFlyoutSymbolCategoriesFunctionality('greek', '1/10000');
+    });
+
+    describe('Equation editor symbol category: Operators', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor']);
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Equation Editor')
+        });
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutSymbolCategoriesTabs('operators');
+
+        essayResponsePage.tests.verifyEquationEditorFlyoutSymbolCategoriesFunctionality('operators', '1/10000');
+    });
+
+    describe('Equation editor input category: Relationships', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Equation Editor')
+        });
+
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutCategoryTooltip('relationships');
+
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutSymbolCategoriesTabs('relationships');
+
+        it('On clicking the symbols it should be displayed in the input field of Equation editor and user should be able to form meaningful equations using the category', () => {
+            equationEditorFlyout.steps.selectAllCategories();
+            equationEditorFlyout.steps.enterTextAtInputFieldCursor('a');
+            equationEditorFlyout.steps.enterTextInFirstEmptyBox(['b']);
+            equationEditorFlyout.steps.enterTextInFirstEmptyBox(['c']);
+            equationEditorFlyout.steps.enterTextInFirstEmptyBox(['d']);
+            equationEditorFlyout.steps.enterTextInFirstEmptyBox(['4a+4b']);
+        });
+
+        equationEditorFlyout.tests.verifyCSSAnda11yOfEquationEditorInputField('relationships');
+
+        essayResponsePage.tests.insertEquationAndVerifyInputFieldContentsAndWordCount('⊦<>≡≅~∉≠∝≈≤≥∈∋∌⊂⊃⊄⊅⊆⊇⊈⊉⊨≺≻≼≽≃∣≪≫∥⋈⊏⊐⌣⊑⊒≐⌢⊦⊣∃∅≁≇≮≯{a+b=c+d=4a+4b', '1/10000');
+    });
+
+    describe('Equation editor symbol category: Arrows', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+            essayResponsePage.steps.switchToPreviewTab();
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Equation Editor')
+        });
+
+        equationEditorFlyout.tests.verifyEquationEditorFlyoutSymbolCategoriesTabs('arrows');
+
+        essayResponsePage.tests.verifyEquationEditorFlyoutSymbolCategoriesFunctionality('arrows', '1/10000');
+    });
+});