itemengine-cypress-automation 1.0.86 → 1.0.87

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

@@ -0,0 +1,568 @@
+import { equationEditorCategoriesAndSymbols } from "../../../fixtures/equationEditorCategoriesAndSymbols ";
+import { dialogBoxBase, essayResponsePage } from "../../../pages";
+import { commonComponents } from "../../../pages/components";
+import { createCustomCategoryFlyout } from "../../../pages/components/createCustomCategoryFlyout";
+import { equationEditorFlyout } from "../../../pages/components/equationEditorFlyout";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const grepTags = Cypress.env('grepTags');
+
+const allCategories = Object.keys(equationEditorCategoriesAndSymbols)
+const customCategory = {
+    symbols: {
+        one: {
+            title: 'One',
+            textElement: '1',
+            ariaLabel: 'one',
+            displayText: '1'
+        },
+        two: {
+            title: 'Two',
+            textElement: '2',
+            ariaLabel: 'two',
+            displayText: '2'
+        },
+        three: {
+            title: 'Three',
+            textElement: '3',
+            ariaLabel: 'three',
+            displayText: '3'
+        },
+        four: {
+            title: 'Four',
+            textElement: '4',
+            ariaLabel: 'four',
+            displayText: '4'
+        },
+        five: {
+            title: 'Five',
+            textElement: '5',
+            ariaLabel: 'five',
+            displayText: '5'
+        },
+        six: {
+            title: 'Six',
+            textElement: '6',
+            ariaLabel: 'six',
+            displayText: '6'
+        },
+        seven: {
+            title: 'Seven',
+            textElement: '7',
+            ariaLabel: 'seven',
+            displayText: '7'
+        },
+        eight: {
+            title: 'Eight',
+            textElement: '8',
+            ariaLabel: 'eight',
+            displayText: '8'
+        },
+        nine: {
+            title: 'Nine',
+            textElement: '9',
+            ariaLabel: 'nine',
+            displayText: '9'
+        },
+        zero: {
+            title: 'Zero',
+            textElement: '0',
+            ariaLabel: 'zero',
+            displayText: '0'
+        },
+        dotMultiplier: {
+            title: 'Dot Multiplier',
+            textElement: null,
+            ariaLabel: 'dotMultiplier',
+            displayText: '·'
+        },
+        comma: {
+            title: 'Comma',
+            textElement: null,
+            ariaLabel: 'comma',
+            displayText: ','
+        },
+        add: {
+            title: 'Addition',
+            textElement: null,
+            ariaLabel: 'plus',
+            displayText: '+'
+        },
+        subtract: {
+            title: 'Subtraction',
+            textElement: null,
+            ariaLabel: 'minus',
+            displayText: '−'
+        },
+        multiply: {
+            title: 'Multiply',
+            textElement: null,
+            ariaLabel: 'multiply',
+            displayText: '×'
+        },
+        divide: {
+            title: 'Division',
+            textElement: null,
+            ariaLabel: 'division',
+            displayText: '÷'
+        },
+        equalTo: {
+            title: 'Equal To',
+            textElement: null,
+            ariaLabel: 'equalTo',
+            displayText: '='
+        },
+        polygonLeft: {
+            title: 'Polygon Left',
+            textElement: null,
+            ariaLabel: 'polygonLeft',
+            displayText: null
+        },
+        polygonRight: {
+            title: 'Polygon Right',
+            textElement: null,
+            ariaLabel: 'polygonRight',
+            displayText: null
+        },
+        clear: {
+            title: 'Clear',
+            textElement: null,
+            ariaLabel: 'clear',
+            displayText: null
+        },
+        gamma: {
+            title: 'Gamma',
+            text: null,
+            ariaLabel: 'gamma',
+            displayText: 'γ'
+        },
+        delta: {
+            title: 'Delta',
+            text: null,
+            ariaLabel: 'delta',
+            displayText: 'δ'
+        }
+    }
+}
+
+describe('Create question page - Essay Response: Create custom category', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Create custom category contents', { tags: 'smoke' }, () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+        });
+
+        it('When user clicks on the \'Create custom category\' button a \'Custom category\' flyout should appear', () => {
+            createCustomCategoryFlyout.steps.openCreateCustomCategoryFlyout();
+        });
+
+        it('Title of the flyout should be \'Custom Category\'', () => {
+            utilities.verifyInnerText(createCustomCategoryFlyout.createCustomCategoryFlyoutTitle(), 'Custom category');
+            utilities.verifyElementVisibilityState(createCustomCategoryFlyout.createCustomCategoryFlyoutTitle(), 'visible');
+        });
+
+        it('\'Category Name\' and \'Category Icon\' labels along with input fields should be displayed in the flyout. Their input fields should be blank by default', () => {
+            utilities.verifyInnerText(createCustomCategoryFlyout.categoryNameLabel(), 'Category name');
+            utilities.verifyElementVisibilityState(createCustomCategoryFlyout.categoryNameLabel(), 'visible');
+            utilities.verifyInnerText(createCustomCategoryFlyout.categoryNameInputField(), '');
+            utilities.verifyElementVisibilityState(createCustomCategoryFlyout.categoryNameInputField(), 'visible');
+            utilities.verifyInnerText(createCustomCategoryFlyout.categoryIconLabel(), 'Category icon');
+            utilities.verifyElementVisibilityState(createCustomCategoryFlyout.categoryIconLabel(), 'visible');
+            utilities.verifyInnerText(createCustomCategoryFlyout.categoryIconInputField(), '');
+            utilities.verifyElementVisibilityState(createCustomCategoryFlyout.categoryIconInputField(), 'visible');
+        });
+
+        it('\'Selected Symbols:\' label should be displayed in the flyout. By default, no symbols should be present under it', () => {
+            utilities.verifyInnerText(createCustomCategoryFlyout.selectedSymbolsLabel(), 'Selected symbols:');
+            utilities.verifyElementVisibilityState(createCustomCategoryFlyout.selectedSymbols(), 'notExist');
+        });
+
+        it('\'Select the symbols to display to the students.\' help text should be displayed in the flyout', () => {
+            utilities.verifyInnerText(createCustomCategoryFlyout.selectSymbolsToDisplayLabel(), 'Select the symbols to display to the students.');
+        });
+
+        it(`${allCategories} accordions should be displayed with their respective labels and unchecked checkboxes. `, () => {
+            createCustomCategoryFlyout.steps.verifyCreateCustomCategoryAccordionLabelsAndDefaultCheckbox();
+        });
+
+        it(`By default, the ${equationEditorCategoriesAndSymbols['keypad'].displayName} category accordion should be expanded and other all accordions should be in collapsed state`, () => {
+            for (let index = 0; index < allCategories.length; index++) {
+                if (allCategories[index] === 'keypad') {
+                    createCustomCategoryFlyout.steps.verifyCategoryAccordionIsExpanded(`${equationEditorCategoriesAndSymbols[allCategories[index]].displayName}`);
+                } else {
+                    createCustomCategoryFlyout.steps.verifyCategoryAccordionIsCollapsed(`${equationEditorCategoriesAndSymbols[allCategories[index]].displayName}`);
+                }
+            };
+        });
+
+        it('\'Save\' button should be displayed in the flyout', () => {
+            utilities.verifyInnerText(createCustomCategoryFlyout.buttonSave(), 'Save');
+            utilities.verifyElementVisibilityState(createCustomCategoryFlyout.buttonSave(), 'visible');
+        });
+
+        allCategories.forEach((categoryName) => {
+            it(`On clicking the ${equationEditorCategoriesAndSymbols[categoryName].displayName} category accordion the category should be expanded`, () => {
+                createCustomCategoryFlyout.steps.expandCategoryAccordion(`${equationEditorCategoriesAndSymbols[categoryName].displayName}`)
+            });
+
+            it(`The ${equationEditorCategoriesAndSymbols[categoryName].displayName} category accordian should display all the ${equationEditorCategoriesAndSymbols[categoryName].displayName} category Symbols. By default, all the symbols should be deselected`, () => {
+                const symbolsArray = Object.values(equationEditorCategoriesAndSymbols[categoryName].symbols)
+                createCustomCategoryFlyout.steps.verifySymbolsDisplayedInCustomCategoryFlyoutCategoryAccordion(`${equationEditorCategoriesAndSymbols[categoryName].displayName}`, symbolsArray)
+            });
+
+            it(`On clicking the expanded ${equationEditorCategoriesAndSymbols[categoryName].displayName} category accordion the category should collapse`, () => {
+                createCustomCategoryFlyout.steps.collapseCategoryAccordion(`${equationEditorCategoriesAndSymbols[categoryName].displayName}`);
+            });
+        });
+
+        it('\'Cancel\' button should be displayed. When user clicks on the \'Cancel\' button the flyout should close', () => {
+            utilities.verifyInnerText(createCustomCategoryFlyout.buttonCancel(), 'Cancel');
+            utilities.verifyElementVisibilityState(createCustomCategoryFlyout.buttonCancel(), 'visible');
+            createCustomCategoryFlyout.steps.clickOnCancelButton();
+            utilities.verifyElementVisibilityState(createCustomCategoryFlyout.dialogBox(), 'notExist');
+        });
+
+        it('CSS of Custom category flyout', { tags: 'css' }, () => {
+            cy.log('Pre-step: Opening create custom category flyout');
+            createCustomCategoryFlyout.steps.openCreateCustomCategoryFlyout();
+            utilities.verifyCSS(createCustomCategoryFlyout.createCustomCategoryFlyoutTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(createCustomCategoryFlyout.categoryNameLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(createCustomCategoryFlyout.categoryIconLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(createCustomCategoryFlyout.selectedSymbolsLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(createCustomCategoryFlyout.selectSymbolsToDisplayLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(utilities.getNthElement(createCustomCategoryFlyout.categoryAccordionLabel(), 0), {
+                'color': css.color.accordionLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(createCustomCategoryFlyout.buttonCancel(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.transparent
+            });
+            utilities.verifyCSS(createCustomCategoryFlyout.buttonSave(), {
+                'color': css.color.successBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.successBtnBg
+            });
+        });
+
+        it('Accessibility of Custom category flyout', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(createCustomCategoryFlyout.dialogBox())
+        });
+    });
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Category Checkbox validation cases', () => {
+            abortEarlySetup();
+            before(() => {
+                essayResponsePage.steps.navigateToCreateQuestion('essay response');
+                cy.barsPreLoaderWait();
+                essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+                essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+                createCustomCategoryFlyout.steps.openCreateCustomCategoryFlyout();
+            });
+
+            it('When user clicks on a symbol then that symbol should get selected and appear in the selected symbols region', () => {
+                createCustomCategoryFlyout.steps.selectASymbolInCreateCustomCategoryFlyout(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`, `${equationEditorCategoriesAndSymbols.keypad.symbols.one.ariaLabel}`);
+                createCustomCategoryFlyout.steps.verifySymbolIsDisplayedInSelectedSymbolsSection([`${equationEditorCategoriesAndSymbols.keypad.symbols.one.ariaLabel}`]);
+            });
+
+            it('When user partially selects symbols from any category then that category\'s checkbox should be in partially checked state', () => {
+                createCustomCategoryFlyout.steps.verifyPartiallyCheckedStateOfCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`);
+            });
+
+            it('When user selects a symbol shared between two categories from any one of the categories then the symbol should get selected in the other category as well and the checkboxes should be partially checked', () => {
+                //Select common symbol in keypad category
+                createCustomCategoryFlyout.steps.selectASymbolInCreateCustomCategoryFlyout(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`, `${equationEditorCategoriesAndSymbols.keypad.symbols.dotMultiplier.ariaLabel}`);
+                //Verify common symbol is selected in basic category
+                createCustomCategoryFlyout.steps.expandCategoryAccordion(`${equationEditorCategoriesAndSymbols['basic'].displayName}`);
+                createCustomCategoryFlyout.steps.verifySymbolIsSelectedInCreateCustomCategoryFlyout(`${equationEditorCategoriesAndSymbols['basic'].displayName}`, `${equationEditorCategoriesAndSymbols.keypad.symbols.dotMultiplier.ariaLabel}`);
+                //Verify checkboxes for both categories are partially selected
+                createCustomCategoryFlyout.steps.verifyPartiallyCheckedStateOfCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`);
+                createCustomCategoryFlyout.steps.verifyPartiallyCheckedStateOfCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['basic'].displayName}`);
+            });
+
+            it('When user selects the checkbox of a partially checked category then all the symbols from that category should appear in the \'Selected symbols:\' section', () => {
+                const selectedSymbolsArray = Object.values(Object.values(equationEditorCategoriesAndSymbols['keypad'].symbols).map((icon) => icon.ariaLabel));
+                const symbolsArray = Object.values(equationEditorCategoriesAndSymbols['keypad'].symbols)
+                cy.log('Open the Custom category flyout and partially select a category')
+                createCustomCategoryFlyout.steps.openCreateCustomCategoryFlyout();
+                createCustomCategoryFlyout.steps.checkCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`);
+                selectedSymbolsArray.forEach((selectedSymbol) => {
+                    createCustomCategoryFlyout.steps.verifySymbolIsSelectedInCreateCustomCategoryFlyout(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`, `${selectedSymbol}`);
+                });
+                createCustomCategoryFlyout.steps.verifySymbolIsDisplayedInSelectedSymbolsSection(selectedSymbolsArray);
+            });
+
+            it('When user unchecks the fully checked checkbox then all the symbols from that category as well as from the shared categories should get deselected and should not be displayed in \'Selected symbols:\' section', () => {
+                const keypadSymbolsArray = Object.values(Object.values(equationEditorCategoriesAndSymbols['keypad'].symbols).map((icon) => icon.ariaLabel));
+                const basicSymbolsArray = Object.values(Object.values(equationEditorCategoriesAndSymbols['basic'].symbols).map((icon) => icon.ariaLabel));
+                createCustomCategoryFlyout.steps.uncheckCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`);
+                utilities.verifyElementVisibilityState(createCustomCategoryFlyout.selectedSymbols(), 'notExist');
+                keypadSymbolsArray.forEach((selectedSymbol) => {
+                    createCustomCategoryFlyout.steps.verifySymbolIsNotSelectedInCreateCustomCategoryFlyout(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`, `${selectedSymbol}`);
+                });
+                basicSymbolsArray.forEach((selectedSymbol) => {
+                    createCustomCategoryFlyout.steps.verifySymbolIsNotSelectedInCreateCustomCategoryFlyout(`${equationEditorCategoriesAndSymbols['basic'].displayName}`, `${selectedSymbol}`);
+                });
+            });
+
+            it('When user selects a unchecked category then the checkbox should be checked and all the symbols should be displayed in the \'Selected symbols:\' section', () => {
+                const greekSymbolsArray = Object.values(Object.values(equationEditorCategoriesAndSymbols['greek'].symbols).map((icon) => icon.ariaLabel));
+                createCustomCategoryFlyout.steps.checkCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['greek'].displayName}`)
+                createCustomCategoryFlyout.steps.verifySymbolIsDisplayedInSelectedSymbolsSection(greekSymbolsArray)
+            });
+
+            it('CSS of selected symbols', { tags: 'css' }, () => {
+                essayResponsePage.steps.verifyCSSOfSelectedSymbols();
+            });
+
+            it('Accessibility of selected symbols', { tags: 'a11y' }, () => {
+                cy.checkAccessibility(createCustomCategoryFlyout.selectedSymbolsWrapper())
+            });
+
+            it('When user de-selects a symbol by clicking on it from the category accordion then that symbol should disappear from the Selected Symbols section. Also, it should get deselected from its respective category\'s accordion', () => {
+                createCustomCategoryFlyout.steps.expandCategoryAccordion(`${equationEditorCategoriesAndSymbols['greek'].displayName}`);
+                createCustomCategoryFlyout.steps.deselectASymbolInCreateCustomCategoryFlyout(`${equationEditorCategoriesAndSymbols['greek'].displayName}`, `${equationEditorCategoriesAndSymbols.greek.symbols.alpha.ariaLabel}`);
+                createCustomCategoryFlyout.steps.verifySymbolIsNotDisplayedInSelectedSymbolsSection(equationEditorCategoriesAndSymbols.greek.symbols.alpha.ariaLabel);
+            });
+
+            it('If user selects all the symbols from within a category then the checkbox for that category should get checked and the symbols should be displayed in \'Selected symbols:\' section', () => {
+                createCustomCategoryFlyout.steps.selectASymbolInCreateCustomCategoryFlyout(`${equationEditorCategoriesAndSymbols['greek'].displayName}`, `${equationEditorCategoriesAndSymbols.greek.symbols.alpha.ariaLabel}`);
+                createCustomCategoryFlyout.steps.verifyCheckedStateOfCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['greek'].displayName}`);
+            });
+
+            it('When a user de-selects a symbol by clicking on it from the \'Selected symbols:\' section then the symbol should get deselected from the category as well as the \'Selected symbols:\' section', () => {
+                createCustomCategoryFlyout.steps.deselectSymbolInSelectedSymbolsSection(`${equationEditorCategoriesAndSymbols.greek.symbols.varEpsilon.title}`);
+                createCustomCategoryFlyout.steps.verifySymbolIsNotSelectedInCreateCustomCategoryFlyout(`${equationEditorCategoriesAndSymbols['greek'].displayName}`, `${equationEditorCategoriesAndSymbols.greek.symbols.varEpsilon.ariaLabel}`);
+            });
+
+            it('If all symbols are deselected from a category then the checkbox for that category should get unchecked', () => {
+                const keypadSymbolsArray = Object.values(Object.values(equationEditorCategoriesAndSymbols['keypad'].symbols).map((icon) => icon.title));
+                cy.log('Pre step: Reopen the create custom category and select one category')
+                createCustomCategoryFlyout.steps.clickOnCancelButton();
+                createCustomCategoryFlyout.steps.openCreateCustomCategoryFlyout();
+                createCustomCategoryFlyout.steps.checkCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`);
+                keypadSymbolsArray.forEach((symbol) => {
+                    createCustomCategoryFlyout.steps.deselectSymbolInSelectedSymbolsSection(symbol);
+                });
+                createCustomCategoryFlyout.steps.verifyUncheckedStateOfCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`);
+            });
+        });
+    }
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Save a custom category', () => {
+            abortEarlySetup();
+            before(() => {
+                essayResponsePage.steps.navigateToCreateQuestion('essay response');
+                cy.barsPreLoaderWait();
+                essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+                essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+                createCustomCategoryFlyout.steps.openCreateCustomCategoryFlyout();
+            });
+
+            it('When user clicks on \'Save\' button without adding any Category name an error message \'Error: Category name is required.\' should appear ', () => {
+                createCustomCategoryFlyout.steps.saveCustomCategory();
+                utilities.verifyElementVisibilityState(createCustomCategoryFlyout.dialogBox(), 'visible');
+                utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Category name is required.');
+            });
+
+            essayResponsePage.tests.verifyErrorMessageCSSAndA11y()
+
+            it('When user adds a Category name the error message should disappear', () => {
+                createCustomCategoryFlyout.steps.addInputToCustomCategoryNameInputField('Custom category without characters');
+                commonComponents.steps.verifyErrorMessageIsNotDisplayed();
+            });
+
+            it('When user clicks on \'Save\' button after adding Category name and has not selected any symbols then the category should be added to Equation Editor Section', () => {
+                createCustomCategoryFlyout.steps.saveCustomCategory();
+                utilities.verifyElementVisibilityState(createCustomCategoryFlyout.dialogBox(), 'notExist');
+                essayResponsePage.steps.verifyAddedCustomCategoryContainerIsDisplayed('Custom category without characters', '');
+            });
+
+            it('When user selects symbols and adds Category name then user should be able to save the category and the category should be added to Equation Editor Section', () => {
+                cy.log('Pre step: Click on create custom category button')
+                essayResponsePage.steps.createCustomCategoryWithMultipleCategoryCharacters();
+                essayResponsePage.steps.verifyAddedCustomCategoryContainerIsDisplayed('Custom category with name.', '');
+            });
+
+            it('When user selects symbols and adds Category name and Category Symbol then user should be able to save the category should be added to Equation Editor Section', () => {
+                cy.log('Pre step: Click on create custom category button')
+                createCustomCategoryFlyout.steps.createCustomCategoryWithNameAndIcon();
+                essayResponsePage.steps.verifyAddedCustomCategoryContainerIsDisplayed('Custom category with name and icon.', '#');
+            });
+
+            it('By default, the categories added by the user should be in selected state and should have an \'Delete Icon\' and \'Edit Icon\'', () => {
+                essayResponsePage.steps.verifyAddedCustomCategoryContainerEditAndDeleteButtonDisplayed('Custom category without characters');
+                essayResponsePage.steps.verifyAddedCustomCategoryContainerEditAndDeleteButtonDisplayed('Custom category with name.');
+                essayResponsePage.steps.verifyAddedCustomCategoryContainerEditAndDeleteButtonDisplayed('Custom category with name and icon.');
+            });
+        });
+    }
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Create custom category: Preview tab', () => {
+            abortEarlySetup();
+            before(() => {
+                essayResponsePage.steps.navigateToCreateQuestion('essay response');
+                cy.barsPreLoaderWait();
+                essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+                essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+                createCustomCategoryFlyout.steps.openCreateCustomCategoryFlyout();
+                cy.log('Pre step: Add Custom category without characters')
+                createCustomCategoryFlyout.steps.addInputToCustomCategoryNameInputField('Custom category without characters');
+                createCustomCategoryFlyout.steps.saveCustomCategory();
+                cy.log('Pre step: Add Category with Only category name')
+                essayResponsePage.steps.createCustomCategoryWithMultipleCategoryCharacters();
+                cy.log('Pre step: Add Category with Category Name and Icon')
+                createCustomCategoryFlyout.steps.createCustomCategoryWithNameAndIcon();
+                cy.log('Switching to preview tab and opening Equation editor flyout')
+                essayResponsePage.steps.switchToPreviewTab();
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Equation Editor');
+            });
+
+            it('The category with no added characters should not be displayed in the preview tab equation editor', () => {
+                equationEditorFlyout.steps.verifyCategoryIsNotDisplayedInEquationEditorPreviewTab('Custom category without characters');
+            });
+
+            it('The category with only category name should be displayed in the preview tab equation editor', () => {
+                equationEditorFlyout.steps.verifyCategoryInEquationEditorPreviewTab('Custom category with name.', '');
+            });
+
+            it('The category with category name and icon should be displayed in the preview tab equation editor', () => {
+                equationEditorFlyout.steps.verifyCategoryInEquationEditorPreviewTab('Custom category with name and icon.', '#');
+            });
+
+            it('All the selected symbols of the Custom category should be displayed in the Equation editor flyout', () => {
+                const symbolsArray = Object.values(customCategory.symbols)
+                equationEditorFlyout.steps.selectEquationEditorCategoryPreviewTab('Custom category with name.');
+                equationEditorFlyout.steps.verifyCharactersDisplayedInEquationEditorCategoryPreviewTab(symbolsArray);
+            });
+
+            it('User should be able to add symbols from both the custom categories to the Equation Editor Input field', () => {
+                equationEditorFlyout.steps.enterEquation([{ categoryName: 'Custom category with name.', symbolName: [`${customCategory.symbols.nine.ariaLabel}`, `${customCategory.symbols.divide.ariaLabel}`, `${customCategory.symbols.delta.ariaLabel}`] }, { categoryName: 'Custom category with name and icon.', symbolName: [`${equationEditorCategoriesAndSymbols.arrows.symbols.downArrowDouble.ariaLabel}`, `${equationEditorCategoriesAndSymbols.arrows.symbols.leftwardsArrowHook.ariaLabel}`] }]);
+                utilities.verifyTextContent(equationEditorFlyout.previewInputField(), '9÷δ⇓↩');
+            });
+
+            essayResponsePage.tests.insertEquationAndVerifyInputFieldContentsAndWordCount('9÷δ⇓↩', '1/10000');
+
+            it('When user deselects any added custom category from the Equation editor section, it should not be displayed in the Equation editor flyout', () => {
+                cy.log('Switch to edit tab')
+                essayResponsePage.steps.switchToEditTab()
+                essayResponsePage.steps.deselectCategoryInEquationEditorSectionEditTab('Custom category with name.');
+                cy.log('Switching to preview tab and opening Equation editor flyout')
+                essayResponsePage.steps.switchToPreviewTab();
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Equation Editor');
+                equationEditorFlyout.steps.verifyCategoryIsNotDisplayedInEquationEditorPreviewTab('Custom category with name.');
+            });
+        });
+    }
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Create custom category: Edit category', () => {
+            abortEarlySetup();
+            before(() => {
+                essayResponsePage.steps.navigateToCreateQuestion('essay response');
+                cy.barsPreLoaderWait();
+                essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+                essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+                cy.log('Pre step: Add Category with Category Name and Icon')
+                createCustomCategoryFlyout.steps.createCustomCategoryWithNameAndIcon();
+            });
+
+            it('When user clicks on Edit button under an added Custom category, the Custom category flyout should open', () => {
+                essayResponsePage.steps.editCategoryInEquationEditorSectionEditTab('Custom category with name and icon.');
+                utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+                utilities.verifyElementVisibilityState(createCustomCategoryFlyout.createCustomCategoryFlyoutTitle(), 'visible');
+                utilities.verifyInnerText(createCustomCategoryFlyout.createCustomCategoryFlyoutTitle(), 'Custom category');
+            });
+
+            it('The Category name and Category icon should be prefilled and selected symbols should be displayed', () => {
+                const symbolsArray = Object.values(Object.values(equationEditorCategoriesAndSymbols['arrows'].symbols).map((icon) => icon.ariaLabel));
+                createCustomCategoryFlyout.steps.expandCategoryAccordion(`${equationEditorCategoriesAndSymbols['arrows'].displayName}`);
+                symbolsArray.forEach((symbol) => {
+                    createCustomCategoryFlyout.steps.verifySymbolIsSelectedInCreateCustomCategoryFlyout(`${equationEditorCategoriesAndSymbols['arrows'].displayName}`, symbol)
+                });
+                createCustomCategoryFlyout.steps.verifyCustomCategoryNameInputField('Custom category with name and icon.');
+                createCustomCategoryFlyout.steps.verifyCategoryIconInputField('#');
+                createCustomCategoryFlyout.steps.verifySymbolIsDisplayedInSelectedSymbolsSection(symbolsArray);
+            });
+
+            it('When the user edits the Category name, Category Icon and selected symbols, then on clicking save the updated changes should be displayed in the Equation editor section', () => {
+                createCustomCategoryFlyout.steps.addInputToCustomCategoryNameInputField('Edited category name');
+                createCustomCategoryFlyout.steps.addInputToCategoryIconInputField('@');
+                createCustomCategoryFlyout.steps.uncheckCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['arrows'].displayName}`);
+                createCustomCategoryFlyout.steps.checkCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['operators'].displayName}`);
+                createCustomCategoryFlyout.steps.saveCustomCategory();
+                essayResponsePage.steps.verifyAddedCustomCategoryContainerIsDisplayed('Edited category name', '@');
+            });
+
+            it('The updated Category name, Category Icon and selected symbols should also be displayed in the Equation editor flyout', () => {
+                const symbolsArray = Object.values(equationEditorCategoriesAndSymbols['arrows'].symbols)
+                cy.log('Switching to preview tab and opening Equation editor flyout')
+                essayResponsePage.steps.switchToPreviewTab();
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Equation Editor');
+                equationEditorFlyout.steps.verifyCategoryInEquationEditorPreviewTab('Edited category name', '@');
+                //Failing due to https://redmine.zeuslearning.com/issues/526950
+                equationEditorFlyout.steps.verifyCharactersDisplayedInEquationEditorCategoryPreviewTab(symbolsArray);
+            });
+        });
+    }
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Delete Custom category', () => {
+            abortEarlySetup();
+            before(() => {
+                essayResponsePage.steps.navigateToCreateQuestion('essay response');
+                cy.barsPreLoaderWait();
+                essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+                essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+                cy.log('Pre step: Add Category with Category Name and Icon')
+                createCustomCategoryFlyout.steps.createCustomCategoryWithNameAndIcon();
+            });
+
+            it('When user clicks on Delete button below the added custom category then the category should be deleted from the Equation Editor section', () => {
+                essayResponsePage.steps.deleteCustomCategoryInEquationEditorSectionEditTab('Custom category with name and icon.');
+            });
+
+            it('The deleted category should not be displayed in the Equation editor flyout', () => {
+                cy.log('Switching to preview tab and opening Equation editor flyout')
+                essayResponsePage.steps.switchToPreviewTab();
+                essayResponsePage.steps.selectPreviewTabToolbarOption('Equation Editor');
+                equationEditorFlyout.steps.verifyCategoryIsNotDisplayedInEquationEditorPreviewTab('Custom category with name and icon.');
+            });
+        });
+    }
+});

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

@@ -0,0 +1,86 @@
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { essayResponsePage } from "../../../pages";
+import utilities from "../../../support/helpers/utilities";
+
+describe('Create question page - Essay response: Scoring', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Scoring Section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+        });
+
+        essayResponsePage.tests.verifyScoringTypeLabelAndDropdown('Manually scored');
+    });
+
+    describe('Scoring section: Manually scored scoring type', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When the user selects \'Manually scored\' option from the Scoring Type dropdown, then the \'Points\' and \'Minimum score awarded (if attempted)\' labels and input fields should be displayed', () => {
+            essayResponsePage.steps.expandScoringTypeDropdown();
+            essayResponsePage.steps.selectOptionFromScoringTypeDropdown('Manually scored');
+            essayResponsePage.steps.verifyDefaultPointsLabelAndInputField();
+            essayResponsePage.steps.verifyMinimumScoringLabelAndDropdownDefaultState();
+        });
+
+        essayResponsePage.tests.verifyPointsFieldErrorState(10);
+    });
+
+    describe('Question Preview: Manually Scored', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Adding question instructions and options, select Manually Scored scoring type and add points for the question');
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.addQuestionInstructions();
+            essayResponsePage.steps.allotPoints(10);
+            essayResponsePage.steps.switchToPreviewTab();
+        });
+
+        it('In Preview tab, Question Instructions and options should be displayed along with radio button', () => {
+            essayResponsePage.steps.verifyQuestionInstructionsText();
+            utilities.verifyElementVisibilityState(essayResponsePage.responseField(), 'visible');
+            essayResponsePage.steps.verifyResponseFieldInput('')
+        });
+
+        essayResponsePage.tests.verifyGradingStudentViewRadioButtonAndScoringTypeInPreviewTab('Manually scored')
+    });
+
+    describe('Scoring section: Non Scored scoring type', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+        });
+
+        it('User should be able to select \'Non Scored\' option from the Scoring Type dropdown', () => {
+            cy.log('Pre-step: Opening the scoring type dropdown.')
+            essayResponsePage.steps.expandScoringTypeDropdown();
+            essayResponsePage.steps.selectOptionFromScoringTypeDropdown('Non scored');
+        });
+
+        essayResponsePage.tests.verifyScoringSectionContentsForNonScoredScoringType();
+
+        essayResponsePage.tests.verifyPointsLabelAndInputFieldForNonScoredScoringType();
+    });
+
+    describe('Question Preview: Non scored scoring', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            cy.barsPreLoaderWait();
+            essayResponsePage.steps.expandScoringTypeDropdown();
+            essayResponsePage.steps.selectOptionFromScoringTypeDropdown('Non scored');
+        });
+
+        essayResponsePage.tests.verifyGradingStudentViewRadioButtonAndScoringTypeInPreviewTab('Non scored');
+    });
+});