itemengine-cypress-automation 1.0.72 → 1.0.73

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

@@ -0,0 +1,943 @@
+import { equationEditorCategoriesAndSymbols } from "../../../fixtures/equationEditorCategoriesAndSymbols ";
+import { 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";
+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 - rich text');
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+        });
+
+        it('When user clicks on the \'Create custom category\' button a \'Custom category\' flyout should appear', () => {
+            essayResponsePage.createCustomCategoryButton()
+                .click();
+            createCustomCategoryFlyout.dialogBox()
+                .should('be.visible');
+        });
+
+        it('Title of the flyout should be \'Custom Category\'', () => {
+            createCustomCategoryFlyout.createCustomCategoryFlyoutTitle()
+                .verifyInnerText('Custom category')
+                .should('be.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', () => {
+            createCustomCategoryFlyout.categoryNameLabel()
+                .verifyInnerText('Category name')
+            createCustomCategoryFlyout.categoryNameInputField()
+                .verifyInnerText('')
+                .should('be.visible')
+            createCustomCategoryFlyout.categoryIconLabel()
+                .verifyInnerText('Category icon')
+            createCustomCategoryFlyout.categoryIconInputField()
+                .verifyInnerText('')
+                .should('be.visible');
+        });
+
+        it('\'Selected Symbols:\' label should be displayed in the flyout. By default, no symbols should be present under it', () => {
+            createCustomCategoryFlyout.selectedSymbolsLabel()
+                .verifyInnerText('Selected symbols:')
+            createCustomCategoryFlyout.selectedSymbols()
+                .should('not.exist');
+        });
+
+        it('\'Select the symbols to display to the students.\' help text should be displayed in the flyout', () => {
+            createCustomCategoryFlyout.selectSymbolsToDisplayLabel()
+                .verifyInnerText('Select the symbols to display to the students.')
+        });
+
+        it(`${allCategories} accordions should be displayed with unchecked checkboxes. `, () => {
+            createCustomCategoryFlyout.categoryAccordions()
+                .each(($el, index) => {
+                    cy.wrap($el)
+                        .parents('.accordian-structure-equation-editor')
+                        .within(() => {
+                            createCustomCategoryFlyout.categoryAccordionCheckbox()
+                                .should('not.be.checked')
+                                .and('exist');
+                            createCustomCategoryFlyout.categoryAccordionLabel()
+                                .verifyInnerText(`${equationEditorCategoriesAndSymbols[allCategories[index]].displayName}`)
+                        });
+                });
+        });
+
+        it(`By default, the ${equationEditorCategoriesAndSymbols['keypad'].displayName} category accordion should be expanded and other all acoordions should be in collapsed state`, () => {
+            createCustomCategoryFlyout.categoryAccordions()
+                .each(($el, index) => {
+                    if (index == 0) {
+                        cy.wrap($el)
+                            .should('have.class', 'Mui-expanded')
+                    } else {
+                        cy.wrap($el)
+                            .should('not.have.class', 'Mui-expanded')
+                    }
+                });
+        });
+
+        it('\'Save\' button should be displayed in the flyout', () => {
+            createCustomCategoryFlyout.buttonSave()
+                .verifyInnerText('Save')
+                .should('be.visible')
+        });
+
+        it('\'Cancel\' button should be displayed. When user clicks on the \'Cancel\' button the flyout should close', () => {
+            createCustomCategoryFlyout.buttonCancel()
+                .verifyInnerText('Cancel')
+                .should('be.visible')
+                .click();
+            createCustomCategoryFlyout.dialogBox()
+                .should('not.exist');
+        });
+
+        it('Prestep: Clicking on the Create custom category button and collapsing the Keypad accordion', () => {
+            essayResponsePage.createCustomCategoryButton()
+                .click();
+            createCustomCategoryFlyout.categoryAccordionLabel()
+                .contains(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`)
+                .click();
+        });
+
+        allCategories.forEach((categoryName) => {
+            createCustomCategoryFlyout.tests.verifyCustomCategoryFlyoutContents(categoryName);
+        });
+
+        it('CSS of Custom category flyout', { tags: 'css' }, () => {
+            createCustomCategoryFlyout.createCustomCategoryFlyoutTitle()
+                .verifyCSS(css.color.flyoutTitle, css.fontSize.heading, css.fontWeight.bold)
+            createCustomCategoryFlyout.categoryNameLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold)
+            createCustomCategoryFlyout.categoryIconLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold)
+            createCustomCategoryFlyout.selectedSymbolsLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold)
+            createCustomCategoryFlyout.selectSymbolsToDisplayLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold)
+            createCustomCategoryFlyout.categoryAccordionLabel()
+                .eq(0)
+                .verifyCSS(css.color.accordionLabel, css.fontSize.default, css.fontWeight.bold)
+            createCustomCategoryFlyout.buttonCancel()
+                .verifyCSS(css.color.secondaryBtn, css.fontSize.default, css.fontWeight.semibold)
+                .should('have.css', 'background-color', css.color.transparent);
+            createCustomCategoryFlyout.buttonSave()
+                .verifyCSS(css.color.successBtn, css.fontSize.default, css.fontWeight.semibold)
+                .should('have.css', 'background-color', css.color.successBtnBg);
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/525223
+        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 - rich text');
+                essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+                essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+                essayResponsePage.createCustomCategoryButton()
+                    .click();
+            });
+
+            it('When user clicks on a symbol then that symbol should get selected and appear in the selected symbols region', () => {
+                createCustomCategoryFlyout.categoryAccordions()
+                    .contains(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`)
+                    .parents('.accordian-structure-equation-editor')
+                    .within(() => {
+                        createCustomCategoryFlyout.cateogoryCharacters(equationEditorCategoriesAndSymbols.keypad.symbols.one.ariaLabel)
+                            .click()
+                            .should('have.class', 'Mui-selected')
+                            .within(() => {
+                                essayResponsePage.equationEditorSectionTickIcon()
+                                    .should('be.visible');
+                            });
+                    });
+                createCustomCategoryFlyout.selectedSymbolsWrapper()
+                    .within(() => {
+                        createCustomCategoryFlyout.cateogoryCharacters()
+                            .invoke('attr', 'aria-label')
+                            .then((ariaLabel) => {
+                                const expectedValue = `${equationEditorCategoriesAndSymbols.keypad.symbols.one.ariaLabel} selected`;
+                                expect(ariaLabel.toLowerCase()).to.equal(expectedValue.toLowerCase());
+                            });
+                        essayResponsePage.equationEditorSectionTickIcon()
+                            .should('exist');
+                        createCustomCategoryFlyout.selectedCharacterDragIcon()
+                            .should('exist');
+                    });
+            });
+
+            it('When user partially selects symbols from any category then that category\'s checkbox should be in partially checked state', () => {
+                createCustomCategoryFlyout.categoryAccordions()
+                    .contains(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`)
+                    .parents('.accordian-structure-equation-editor')
+                    .within(() => {
+                        createCustomCategoryFlyout.categoryAccordionCheckbox()
+                            .should('have.attr', 'data-indeterminate', 'true');
+                    });
+            });
+
+            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', () => {
+                createCustomCategoryFlyout.categoryAccordions()
+                    .contains(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`)
+                    .parents('.accordian-structure-equation-editor')
+                    .within(() => {
+                        createCustomCategoryFlyout.cateogoryCharacters(equationEditorCategoriesAndSymbols.keypad.symbols.dotMultiplier.ariaLabel)
+                            .click();
+                    });
+                createCustomCategoryFlyout.categoryAccordions()
+                    .contains(`${equationEditorCategoriesAndSymbols['basic'].displayName}`)
+                    .parents('.accordian-structure-equation-editor')
+                    .within(() => {
+                        createCustomCategoryFlyout.cateogoryCharacters(equationEditorCategoriesAndSymbols.basic.symbols.dotMultiplier.ariaLabel)
+                            .should('have.class', 'Mui-selected');
+                    });
+                createCustomCategoryFlyout.categoryAccordions()
+                    .contains(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`)
+                    .parents('.accordian-structure-equation-editor')
+                    .within(() => {
+                        createCustomCategoryFlyout.categoryAccordionCheckbox()
+                            .should('have.attr', 'data-indeterminate', 'true');
+                    });
+                createCustomCategoryFlyout.categoryAccordions()
+                    .contains(`${equationEditorCategoriesAndSymbols['basic'].displayName}`)
+                    .click()
+                    .parents('.accordian-structure-equation-editor')
+                    .within(() => {
+                        createCustomCategoryFlyout.categoryAccordionCheckbox()
+                            .should('have.attr', 'data-indeterminate', 'true');
+                    });
+                cy.log('Post step: Close the Custom category flyout by clicking on Cancel button')
+                createCustomCategoryFlyout.buttonCancel()
+                    .click();
+            });
+
+            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 symbolsArray = Object.values(equationEditorCategoriesAndSymbols['keypad'].symbols)
+                cy.log('Open the Custom category flyout and partially select a category')
+                essayResponsePage.createCustomCategoryButton()
+                    .click();
+                createCustomCategoryFlyout.categoryAccordions()
+                    .contains(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`)
+                    .parents('.accordian-structure-equation-editor')
+                    .within(() => {
+                        createCustomCategoryFlyout.cateogoryCharacters(equationEditorCategoriesAndSymbols.keypad.symbols.one.ariaLabel)
+                            .click();
+                        createCustomCategoryFlyout.categoryAccordionCheckbox()
+                            .should('have.attr', 'data-indeterminate', 'true');
+                    });
+                createCustomCategoryFlyout.categoryAccordions()
+                    .contains(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`)
+                    .parents('.accordian-structure-equation-editor')
+                    .within(() => {
+                        createCustomCategoryFlyout.categoryAccordionCheckbox()
+                            .click()
+                            .should('be.checked');
+                        createCustomCategoryFlyout.cateogoryCharacters()
+                            .each(($el) => {
+                                cy.wrap($el)
+                                    .should('have.class', 'Mui-selected')
+                                    .and('have.attr', 'aria-pressed', 'true');
+                            });
+                    });
+                createCustomCategoryFlyout.selectedSymbolsWrapper()
+                    .within(() => {
+                        createCustomCategoryFlyout.cateogoryCharacters()
+                            .each(($el, index) => {
+                                cy.wrap($el)
+                                    .should('have.attr', 'aria-label', `${symbolsArray[index].ariaLabel} selected`)
+                            });
+                        essayResponsePage.equationEditorSectionTickIcon()
+                            .should('exist');
+                        createCustomCategoryFlyout.selectedCharacterDragIcon()
+                            .should('exist');
+                    });
+            });
+
+            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', () => {
+                createCustomCategoryFlyout.categoryAccordions()
+                    .contains(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`)
+                    .parents('.accordian-structure-equation-editor')
+                    .within(() => {
+                        createCustomCategoryFlyout.categoryAccordionCheckbox()
+                            .click()
+                            .should('not.be.checked');
+                    });
+                createCustomCategoryFlyout.selectedSymbols()
+                    .should('not.exist');
+                createCustomCategoryFlyout.categoryAccordions()
+                    .contains(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`)
+                    .parents('.accordian-structure-equation-editor')
+                    .within(() => {
+                        createCustomCategoryFlyout.cateogoryCharacters()
+                            .each(($el) => {
+                                cy.wrap($el)
+                                    .should('not.have.class', 'Mui-selected')
+                                    .and('have.attr', 'aria-pressed', 'false');
+                            });
+                    });
+                createCustomCategoryFlyout.categoryAccordions()
+                    .contains(`${equationEditorCategoriesAndSymbols['basic'].displayName}`)
+                    .parents('.accordian-structure-equation-editor')
+                    .within(() => {
+                        createCustomCategoryFlyout.cateogoryCharacters()
+                            .each(($el) => {
+                                cy.wrap($el)
+                                    .should('not.have.class', 'Mui-selected')
+                                    .and('have.attr', 'aria-pressed', 'false');
+                            });
+                    });
+            });
+
+            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 symbolsArray = Object.values(equationEditorCategoriesAndSymbols['greek'].symbols)
+                createCustomCategoryFlyout.categoryAccordions()
+                    .contains(`${equationEditorCategoriesAndSymbols['greek'].displayName}`)
+                    .parents('.accordian-structure-equation-editor')
+                    .within(() => {
+                        createCustomCategoryFlyout.categoryAccordionCheckbox()
+                            .click()
+                            .should('be.checked');
+                        createCustomCategoryFlyout.cateogoryCharacters()
+                            .each(($el) => {
+                                cy.wrap($el)
+                                    .should('have.class', 'Mui-selected')
+                                    .and('have.attr', 'aria-pressed', 'true');
+                            });
+                    });
+                createCustomCategoryFlyout.selectedSymbolsWrapper()
+                    .within(() => {
+                        createCustomCategoryFlyout.cateogoryCharacters()
+                            .each(($el, index) => {
+                                cy.wrap($el)
+                                    .should('have.attr', 'aria-label', `${symbolsArray[index].ariaLabel} selected`)
+                                    .find('title')
+                                    .should('have.text', symbolsArray[index].title);
+                            });
+                    });
+            });
+
+            it('CSS of selected symbols', { tags: 'css' }, () => {
+                essayResponsePage.equationEditorSectionCategoryLabel()
+                    .verifyCSS(css.color.primaryBtn, css.fontSize.small, css.fontWeight.regular);
+                essayResponsePage.equationEditorSectionTickIcon()
+                    .find('[data-name*="Icon"]')
+                    .should('have.css', 'fill', css.color.activeButtons);
+                essayResponsePage.equationEditorSectionCategoriesDragIcon()
+                    .find('path')
+                    .should('have.css', 'fill', css.color.activeButtons);
+            });
+
+            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.categoryAccordions()
+                    .contains(`${equationEditorCategoriesAndSymbols['greek'].displayName}`)
+                    .click()
+                    .parents('.accordian-structure-equation-editor')
+                    .within(() => {
+                        createCustomCategoryFlyout.cateogoryCharacters(equationEditorCategoriesAndSymbols.greek.symbols.alpha.ariaLabel)
+                            .click()
+                            .should('not.have.class', 'Mui-selected');
+                        createCustomCategoryFlyout.categoryAccordionCheckbox()
+                            .should('have.attr', 'data-indeterminate', 'true')
+                    });
+                createCustomCategoryFlyout.selectedSymbols()
+                    .contains(equationEditorCategoriesAndSymbols.greek.symbols.alpha.ariaLabel)
+                    .should('not.exist');
+            });
+
+            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.categoryAccordions()
+                    .contains(`${equationEditorCategoriesAndSymbols['arrows'].displayName}`)
+                    .click()
+                    .parents('.accordian-structure-equation-editor')
+                    .within(() => {
+                        createCustomCategoryFlyout.cateogoryCharacters()
+                            .each(($el) => {
+                                cy.wrap($el)
+                                    .click();
+                            });
+                        createCustomCategoryFlyout.categoryAccordionCheckbox()
+                            .should('be.checked');
+                    });
+            });
+
+            it('When a user de-selects a symbol by clicking on it from the category accordion then the symbol should get deselected from the category as well as the \'Selected symbols:\' section', () => {
+                createCustomCategoryFlyout.selectedSymbolsWrapper()
+                    .within(() => {
+                        createCustomCategoryFlyout.cateogoryCharacters(`${equationEditorCategoriesAndSymbols.greek.symbols.pi.ariaLabel} selected`)
+                            .click();
+                    });
+                createCustomCategoryFlyout.selectedSymbolsWrapper()
+                    .contains(`${equationEditorCategoriesAndSymbols.greek.symbols.pi.ariaLabel} selected`)
+                    .should('not.exist');
+                createCustomCategoryFlyout.categoryAccordions()
+                    .contains(`${equationEditorCategoriesAndSymbols['greek'].displayName}`)
+                    .click()
+                    .parents('.accordian-structure-equation-editor')
+                    .within(() => {
+                        createCustomCategoryFlyout.cateogoryCharacters(equationEditorCategoriesAndSymbols.greek.symbols.pi.ariaLabel)
+                            .should('not.have.class', 'Mui-selected');
+                        createCustomCategoryFlyout.categoryAccordionCheckbox()
+                            .should('have.attr', 'data-indeterminate', 'true')
+                    });
+            });
+
+            it('If all symbols are deselected from a category then the checkbox for that category should get unchecked', () => {
+                cy.log('Pre step: Close the create custom category and select one category')
+                createCustomCategoryFlyout.buttonCancel()
+                    .click();
+                essayResponsePage.createCustomCategoryButton()
+                    .click();
+                createCustomCategoryFlyout.categoryAccordions()
+                    .contains(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`)
+                    .parents('.accordian-structure-equation-editor')
+                    .within(() => {
+                        createCustomCategoryFlyout.categoryAccordionCheckbox()
+                            .click();
+                    });
+                createCustomCategoryFlyout.selectedSymbols()
+                    .then(($selectedSymbols) => {
+                        createCustomCategoryFlyout.selectedSymbolsWrapper()
+                            .within(() => {
+                                for (let i = $selectedSymbols.length - 1; i >= 0; i--) {
+                                    createCustomCategoryFlyout.cateogoryCharacters()
+                                        .eq(i)
+                                        .click();
+                                }
+                            });
+                    });
+                createCustomCategoryFlyout.categoryAccordions()
+                    .contains(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`)
+                    .parents('.accordian-structure-equation-editor')
+                    .within(() => {
+                        createCustomCategoryFlyout.categoryAccordionCheckbox()
+                            .should('not.be.checked');
+                    });
+            });
+        });
+    }
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Save a custom category', () => {
+            abortEarlySetup();
+            before(() => {
+                essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+                essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+                essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+                essayResponsePage.createCustomCategoryButton()
+                    .click();
+            });
+
+            it('When user clicks on \'Save\' button without adding any Category name an error message \'Error: Category name is required.\' should appear ', () => {
+                createCustomCategoryFlyout.buttonSave()
+                    .click()
+                createCustomCategoryFlyout.dialogBox()
+                    .should('exist');
+                commonComponents.errorMessage()
+                    .verifyInnerText('Error: Category name is required.')
+            });
+
+            essayResponsePage.tests.verifyCSSAnda11yOfErrorMessage()
+
+            it('When user adds a Category name the error message should disappear', () => {
+                createCustomCategoryFlyout.categoryNameInputField()
+                    .type('Custom category without characters');
+                commonComponents.errorMessage()
+                    .should('not.exist');
+            });
+
+            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.buttonSave()
+                    .click();
+                createCustomCategoryFlyout.dialogBox()
+                    .should('not.exist');
+                essayResponsePage.equationEditorSectionCategories()
+                    .last()
+                    .should('have.attr', 'aria-label', 'Custom category without characters')
+                    .within(() => {
+                        essayResponsePage.equationEditorSectionCategoryLabel()
+                            .verifyInnerText('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')
+                createCustomCategoryFlyout.steps.createCustomCategoryWithMultipleCategoryCharacters();
+                essayResponsePage.equationEditorSectionCategories()
+                    .last()
+                    .should('have.attr', 'aria-label', 'Custom category with name.')
+                    .within(() => {
+                        essayResponsePage.equationEditorSectionCategoryLabel()
+                            .verifyInnerText('Custom category with name.');
+                        essayResponsePage.equationEditorSectionCategoryIcon()
+                            .verifyInnerText('');
+                    });
+            });
+
+            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.createCustomCategory();
+                essayResponsePage.equationEditorSectionCategories()
+                    .last()
+                    .should('have.attr', 'aria-label', 'Custom category with name and icon.')
+                    .within(() => {
+                        essayResponsePage.equationEditorSectionCategoryLabel()
+                            .verifyInnerText('Custom category with name and icon.');
+                        essayResponsePage.equationEditorSectionCategoryIcon()
+                            .verifyInnerText('#');
+                    });
+            });
+
+            it('By default, the categories added by the user should be in selected state and should have an \'Delete Icon\' and \'Edit Icon\'', () => {
+                essayResponsePage.equationEditorSectionCategories()
+                    .contains('Custom category without characters')
+                    .parents('[id*="DraggableItem"]')
+                    .within(() => {
+                        essayResponsePage.equationEditorSectionCategoriesEditIcon()
+                            .should('exist');
+                        essayResponsePage.equationEditorSectionDeleteCustomCategoryIcon()
+                            .should('exist');
+                    });
+                essayResponsePage.equationEditorSectionCategories()
+                    .contains('Custom category with name.')
+                    .parents('[id*="DraggableItem"]')
+                    .within(() => {
+                        essayResponsePage.equationEditorSectionCategoriesEditIcon()
+                            .should('exist');
+                        essayResponsePage.equationEditorSectionDeleteCustomCategoryIcon()
+                            .should('exist');
+                    });
+                essayResponsePage.equationEditorSectionCategories()
+                    .contains('Custom category with name and icon.')
+                    .parents('[id*="DraggableItem"]')
+                    .within(() => {
+                        essayResponsePage.equationEditorSectionCategoriesEditIcon()
+                            .should('exist');
+                        essayResponsePage.equationEditorSectionDeleteCustomCategoryIcon()
+                            .should('exist');
+                    });
+            });
+        });
+    }
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Create custom category: Preview tab', () => {
+            abortEarlySetup();
+            before(() => {
+                essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+                essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+                essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+                essayResponsePage.createCustomCategoryButton()
+                    .click();
+                cy.log('Pre step: Add Custom category without characters')
+                createCustomCategoryFlyout.categoryNameInputField()
+                    .type('Custom category without characters');
+                createCustomCategoryFlyout.buttonSave()
+                    .click();
+                cy.log('Pre step: Add Category with Only category name')
+                createCustomCategoryFlyout.steps.createCustomCategoryWithMultipleCategoryCharacters();
+                cy.log('Pre step: Add Category with Category Name and Icon')
+                createCustomCategoryFlyout.steps.createCustomCategory();
+                cy.log('Switching to preview tab and opening Equation editor flyout')
+                essayResponsePage.steps.switchToPreviewTab();
+                essayResponsePage.previewTabToolbarOption('Equation Editor')
+                    .click();
+            });
+
+            it('The category with no added characters should not be displayed in the preview tab equation editor', () => {
+                equationEditorFlyout.categoryTab()
+                    .contains('Custom category without characters')
+                    .should('not.exist');
+            });
+
+            it('The category with only category name should be displayed in the preview tab equation editor', () => {
+                equationEditorFlyout.categoryTab()
+                    .eq(8)
+                    .within(() => {
+                        equationEditorFlyout.categoryTabTitle()
+                            .should('have.text', 'Custom category with name.');
+                        equationEditorFlyout.categoryTabIcon()
+                            .should('have.text', '');
+                    });
+            });
+
+            it('The category with category name and icon should be displayed in the preview tab equation editor', () => {
+                equationEditorFlyout.categoryTab()
+                    .eq(9)
+                    .within(() => {
+                        equationEditorFlyout.categoryTabTitle()
+                            .should('have.text', 'Custom category with name and icon.');
+                        equationEditorFlyout.categoryTabIcon()
+                            .should('have.text', '#');
+                    });
+            });
+
+            it('All the selected symbols of the Custom category should be displayed in the Equation editor flyout', () => {
+                const symbolsArray = Object.values(customCategory.symbols)
+                equationEditorFlyout.categoryTab('Custom category with name.')
+                    .click();
+                equationEditorFlyout.categoryCharacters()
+                    .each(($el, index) => {
+                        cy.wrap($el)
+                            .should('have.attr', 'aria-label', symbolsArray[index].ariaLabel)
+                            .find('title')
+                            .should('have.text', symbolsArray[index].title);
+                        if (symbolsArray[index].textElement) {
+                            cy.wrap($el)
+                                .verifyInnerText(symbolsArray[index].textElement)
+                        }
+                    });
+            });
+
+            it('User should be able to add symbols from both the custom categories to the Equation Editor Input field', () => {
+                equationEditorFlyout.categoryCharacters(customCategory.symbols.nine.ariaLabel)
+                    .click();
+                equationEditorFlyout.categoryCharacters(customCategory.symbols.divide.ariaLabel)
+                    .click();
+                equationEditorFlyout.categoryCharacters(customCategory.symbols.delta.ariaLabel)
+                    .click();
+                equationEditorFlyout.categoryTab('Custom category with name and icon.')
+                    .click();
+                equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.arrows.symbols.downArrowDouble.ariaLabel)
+                    .click();
+                equationEditorFlyout.categoryCharacters(equationEditorCategoriesAndSymbols.arrows.symbols.leftwardsArrowHook.ariaLabel)
+                    .click();
+                equationEditorFlyout.previewInputField()
+                    .contains('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.equationEditorSectionCategories()
+                    .contains('Custom category with name.')
+                    .click();
+                cy.log('Switching to preview tab and opening Equation editor flyout')
+                essayResponsePage.steps.switchToPreviewTab();
+                essayResponsePage.previewTabToolbarOption('Equation Editor')
+                    .click();
+                equationEditorFlyout.categoryTab()
+                    .contains('Custom category with name.')
+                    .should('not.exist');
+            });
+        });
+    }
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Create custom category: Edit category', () => {
+            abortEarlySetup();
+            before(() => {
+                essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+                essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+                essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+                cy.log('Pre step: Add Category with Category Name and Icon')
+                createCustomCategoryFlyout.steps.createCustomCategory();
+            });
+
+            it('When user clicks on Edit button under an added Custom category, the Custom category flyout should open', () => {
+                essayResponsePage.equationEditorSectionCategories()
+                    .contains('Custom category with name and icon.')
+                    .parents('[id*="DraggableItem"]')
+                    .within(() => {
+                        essayResponsePage.equationEditorSectionCategoriesEditIcon()
+                            .should('be.visible')
+                            .click();
+                    });
+                createCustomCategoryFlyout.dialogBox()
+                    .should('be.visible');
+                createCustomCategoryFlyout.createCustomCategoryFlyoutTitle()
+                    .verifyInnerText('Custom category')
+                    .should('be.visible');
+            });
+
+            it('The Category name and Category icon should be prefilled and selected symbols should be displayed', () => {
+                const symbolsArray = Object.values(equationEditorCategoriesAndSymbols['arrows'].symbols)
+                createCustomCategoryFlyout.categoryAccordions()
+                    .contains(`${equationEditorCategoriesAndSymbols['arrows'].displayName}`)
+                    .parents('.accordian-structure-equation-editor')
+                    .within(() => {
+                        createCustomCategoryFlyout.cateogoryCharacters()
+                            .each(($el) => {
+                                cy.wrap($el)
+                                    .should('have.class', 'Mui-selected')
+                            });
+                    });
+                createCustomCategoryFlyout.categoryNameInputField()
+                    .should('have.value', 'Custom category with name and icon.');
+                createCustomCategoryFlyout.categoryIconInputField()
+                    .should('have.value', '#');
+                createCustomCategoryFlyout.selectedSymbolsWrapper()
+                    .within(() => {
+                        createCustomCategoryFlyout.cateogoryCharacters()
+                            .each(($el, index) => {
+                                cy.wrap($el)
+                                    .invoke('attr', 'aria-label')
+                                    .then((ariaLabel) => {
+                                        const expectedValue = `${symbolsArray[index].ariaLabel} selected`;
+                                        expect(ariaLabel.toLowerCase()).to.equal(expectedValue.toLowerCase());
+                                        cy.wrap($el)
+                                            .find('title')
+                                            .should('have.text', symbolsArray[index].title);
+                                        if (symbolsArray[index].textElement) {
+                                            cy.wrap($el)
+                                                .verifyInnerText(symbolsArray[index].textElement)
+                                        }
+                                    });
+                            });
+                    });
+            });
+
+            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.categoryNameInputField()
+                    .clear()
+                    .type('Edited category name');
+                createCustomCategoryFlyout.categoryIconInputField()
+                    .clear()
+                    .type('@');
+                createCustomCategoryFlyout.categoryAccordions()
+                    .contains(`${equationEditorCategoriesAndSymbols['arrows'].displayName}`)
+                    .click()
+                    .parents('.accordian-structure-equation-editor')
+                    .within(() => {
+                        createCustomCategoryFlyout.cateogoryCharacters(equationEditorCategoriesAndSymbols.arrows.symbols.leftArrow.ariaLabel)
+                            .click();
+                    });
+                createCustomCategoryFlyout.buttonSave()
+                    .click();
+                essayResponsePage.equationEditorSectionCategories()
+                    .last()
+                    .within(() => {
+                        essayResponsePage.equationEditorSectionCategoryLabel()
+                            .verifyInnerText('Edited category name');
+                        essayResponsePage.equationEditorSectionCategoryIcon()
+                            .verifyInnerText('@');
+                    });
+            });
+
+            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.previewTabToolbarOption('Equation Editor')
+                    .click();
+                equationEditorFlyout.categoryTab()
+                    .eq(8)
+                    .click()
+                    .within(() => {
+                        equationEditorFlyout.categoryTabTitle()
+                            .should('have.text', 'Edited category name');
+                        equationEditorFlyout.categoryTabIcon()
+                            .should('have.text', '@');
+                    });
+                equationEditorFlyout.categoryCharacters()
+                    .contains(equationEditorCategoriesAndSymbols.arrows.symbols.leftArrow.ariaLabel)
+                    .should('not.exist');
+                //Failing due to https://redmine.zeuslearning.com/issues/526950
+                equationEditorFlyout.categoryCharacters()
+                    .each(($el, index) => {
+                        cy.wrap($el)
+                            .invoke('attr', 'aria-label')
+                            .then((ariaLabel) => {
+                                const expectedValue = symbolsArray[index + 1].ariaLabel;
+                                expect(ariaLabel.toLowerCase()).to.equal(expectedValue.toLowerCase());
+                                cy.wrap($el)
+                                    .find('title')
+                                    .should('have.text', symbolsArray[index + 1].title);
+                                if (symbolsArray[index].textElement) {
+                                    cy.wrap($el)
+                                        .verifyInnerText(symbolsArray[index + 1].textElement)
+                                }
+                            });
+                    });
+            });
+        });
+    }
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Delete Custom category', () => {
+            abortEarlySetup();
+            before(() => {
+                essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+                essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+                essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor'])
+                cy.log('Pre step: Add Category with Category Name and Icon')
+                createCustomCategoryFlyout.steps.createCustomCategory();
+            });
+
+            it('When user clicks on Delete button below the added custom category then the category should be deleted from the Equation Editor section', () => {
+                essayResponsePage.equationEditorSectionDeleteCustomCategoryIcon()
+                    .click();
+                essayResponsePage.equationEditorSectionCategories()
+                    .contains('Custom category with name and icon.')
+                    .should('not.exist');
+            });
+
+            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.previewTabToolbarOption('Equation Editor')
+                    .click();
+                equationEditorFlyout.categoryTab()
+                    .contains('Custom category with name and icon.')
+                    .should('not.exist');
+            });
+        });
+    }
+});