itemengine-cypress-automation 1.0.343 → 1.0.344-graph-and-chart-r2-8153722.0

package/cypress/e2e/ILC/ThinkSphere/editThinkSphereQuestion.smoke.js

@@ -0,0 +1,185 @@
+import { thinkSpherePage } from '../../../pages/thinkSpherePage';
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+
+const editedStrategies = [
+    'Edited strategy 1',
+    'Edited strategy 2',
+    'Edited strategy 3',
+    'Edited strategy 4',
+    'Edited strategy 5'
+];
+const editedSentenceStarters = [
+    'Edited sentence starter 1',
+    'Edited sentence starter 2',
+    'Edited sentence starter 3',
+    'Edited sentence starter 4',
+    'Edited sentence starter 5'
+];
+
+const selectStrategies = [
+    'Edited strategy 1',
+    'Edited strategy 3',
+    'Edited strategy 5'
+];
+const selectSentenceStarters = [
+    'Edited sentence starter 1',
+    'Edited sentence starter 3',
+    'Edited sentence starter 5'
+];
+
+const newSelectedToolbarOptions = [
+    'Text',
+    'Highlighter',
+    'Shapes',
+    'Stamps',
+    'Number bond',
+    'Diagrams',
+    'Number line',
+    'Protractor',
+    'Grids',
+    'Equation editor',
+    'Algebra tiles'
+];
+
+const newSelectedControls = [
+    'Move',
+    'Undo',
+    'Redo',
+    'Clear all'
+];
+
+const newDefaultSelectedToolDropdownValue = 'Text';
+
+const whiteBoardImageOpacity = 50;
+
+const alternateTextForImage = 'Alternative text for image';
+
+const editedFontSize = 'Normal';
+
+describe('Edit Question and edit item', () => {
+    before(() => {
+        cy.loginAs('admin');
+        cy.deleteThinkSphereItem('~zzz item name');
+        cy.createThinkSphereItem('~zzz item name');
+        thinkSpherePage.steps.visitThinksphereBrowseItemsPage();
+    });
+
+    describe('Edit question', () => {
+        abortEarlySetup();
+        it('When user edits the question instructions, then the changes should be saved successfully and edited question instruction should get displayed in preview side', () => {
+            thinkSpherePage.steps.clickOnEditThinkSphereItem();
+            thinkSpherePage.steps.clearQuestionInstructionsInputField();
+            thinkSpherePage.steps.addTextInQuestionInstructionsInputField('Edit question instructions');
+            thinkSpherePage.steps.saveAQuestionAndVerifySnackbar();
+            utilities.verifyElementVisibilityState(thinkSpherePage.questionInstructionPreviewTexWrapper(), 'visible');
+            utilities.verifyInnerText(thinkSpherePage.questionInstructionPreviewTexWrapper(), 'Edit question instructions');
+        });
+
+        it('When user edits the question instructions image, then the changes should be saved successfully and edited question instruction image should get displayed in preview side', () => {
+            thinkSpherePage.steps.clickOnEditQuestionIcon();
+            cy.wait(1000);
+            thinkSpherePage.steps.uploadFile('uploads/image.png');
+            thinkSpherePage.steps.saveAQuestionAndVerifySnackbar();
+            utilities.verifyElementVisibilityState(thinkSpherePage.questionInstructionPreviewImageWrapper(), 'visible');
+            utilities.verifyElementVisibilityState(thinkSpherePage.questionInstructionPreviewImageExpandButton(), 'visible');
+        });
+
+        it('When user edits the strategies and sentence starers, then the changes should be saved successfully and edited strategies and sentence starers should get displayed in preview side', () => {
+            thinkSpherePage.steps.clickOnEditQuestionIcon();
+            editedStrategies.forEach((strategy, index) => {
+                thinkSpherePage.steps.addOptionText('strategy', index, strategy);
+            });
+            cy.wait(2000);
+            editedSentenceStarters.forEach((sentenceStarter, index) => {
+                thinkSpherePage.steps.addOptionText('sentenceStarter', index, sentenceStarter);
+            });
+            cy.wait(2000);
+            thinkSpherePage.steps.saveAQuestionAndVerifySnackbar();
+            editedStrategies.forEach((label, index) => {
+                utilities.verifyInnerText(utilities.getNthElement(thinkSpherePage.strategyTextWrapper(), index), label);
+            });
+            thinkSpherePage.steps.expandChooseStarterDropdown();
+            editedSentenceStarters.forEach((label, index) => {
+                utilities.verifyInnerText(utilities.getNthElement(thinkSpherePage.chooseStartersListOptionLabels(), index), label);
+            });
+            utilities.clickOnBody();
+        });
+        
+        it('When user select unselect the strategies and sentence starers, then the changes should be saved successfully and selected strategies and sentence starers should get displayed in preview side', () => {
+            thinkSpherePage.steps.clickOnEditQuestionIcon();
+            editedStrategies.forEach((strategy, index) => {
+                if(!selectStrategies.includes(strategy)){
+                    thinkSpherePage.steps.selectOption('strategy', index);
+                }
+            });
+            cy.wait(2000);
+            editedSentenceStarters.forEach((sentenceStarter, index) => {
+                if(!selectSentenceStarters.includes(sentenceStarter)){
+                    thinkSpherePage.steps.selectOption('sentenceStarter', index);
+                }
+            });
+            cy.wait(2000);
+            thinkSpherePage.steps.saveAQuestionAndVerifySnackbar();
+            selectStrategies.forEach((label, index) => {
+                utilities.verifyInnerText(utilities.getNthElement(thinkSpherePage.strategyTextWrapper(), index), label);
+            });
+            thinkSpherePage.steps.expandChooseStarterDropdown();
+            selectSentenceStarters.forEach((label, index) => {
+                utilities.verifyInnerText(utilities.getNthElement(thinkSpherePage.chooseStartersListOptionLabels(), index), label);
+            });
+            utilities.clickOnBody();
+        });
+
+        it('When user updates the solve phase toolbar options and controls, then it should get updated successfully', () => {
+            thinkSpherePage.steps.clickOnEditQuestionIcon();
+            thinkSpherePage.steps.expandCustomizeToolsAndControls();
+            thinkSpherePage.steps.selectTools(newSelectedToolbarOptions, 0);
+            thinkSpherePage.steps.selectTools(newSelectedControls, 1);
+        });
+
+        it('When user updates the solve phase default tool dropdown value, then it should get updated successfully', () => {
+            thinkSpherePage.steps.expandDefaultToolDropdown();
+            thinkSpherePage.steps.selectOptionFromDefaultToolDropdown(newDefaultSelectedToolDropdownValue);
+        });
+
+        it('When user updates the solve phase customize stamps, then it should get updated successfully', () => {
+            thinkSpherePage.steps.clickOnCustomizeStamp(1);
+        });
+
+        it('When user updates the solve phase whiteboard image and properties, then it should get updated and saved successfully', () => {
+            thinkSpherePage.steps.clickOnImageRadioButton();
+            thinkSpherePage.steps.uploadWhiteBoardImage('uploads/highlightImage.jpg');
+            thinkSpherePage.steps.addInputToOpacityInputField(whiteBoardImageOpacity);
+            thinkSpherePage.imageAlternativeTextInputField().type(alternateTextForImage);
+            cy.wait(2000);
+            thinkSpherePage.steps.saveAQuestionAndVerifySnackbar();
+        });
+
+        it('When user updates solve phase data, then updated solve phase data should reflect to user when revisit to edit the question', () => {
+            thinkSpherePage.steps.visitThinksphereBrowseItemsPage();
+            thinkSpherePage.steps.clickOnEditThinkSphereItem();
+            thinkSpherePage.steps.expandCustomizeToolsAndControls();
+            thinkSpherePage.steps.verifySelectTools(newSelectedToolbarOptions, 0);
+            thinkSpherePage.steps.verifySelectTools(newSelectedControls, 1);
+            utilities.verifyInnerText(thinkSpherePage.defaultToolDropdown(), newDefaultSelectedToolDropdownValue);
+            thinkSpherePage.steps.verifyCustomizeStampSelectedUnselected(false, 1);
+            utilities.verifyElementCheckedNotCheckedState(thinkSpherePage.imageRadioInput(), 'checked');
+            thinkSpherePage.steps.verifyUploadedImage();
+            thinkSpherePage.steps.verifyCenterOptionAlignmentIsSelected();
+            thinkSpherePage.steps.verifyOpacitySliderValue(whiteBoardImageOpacity);
+            thinkSpherePage.steps.verifyOpacityInputFieldValue(whiteBoardImageOpacity);
+            utilities.verifyElementAttribute(thinkSpherePage.whiteBoardImage(), 'alt', alternateTextForImage);
+        });
+
+        it('When user edit the font size from additional settings, then edited font size should save successfully and edited data should reflect when user revisit to edit the question', () => {
+            thinkSpherePage.steps.expandAdditionalSettings();
+            thinkSpherePage.steps.selectFontSizeOptionFromFontSizeDropdown(editedFontSize);
+            thinkSpherePage.steps.saveAQuestionAndVerifySnackbar();
+            thinkSpherePage.steps.visitThinksphereBrowseItemsPage();
+            thinkSpherePage.steps.clickOnEditThinkSphereItem();
+            thinkSpherePage.steps.expandAdditionalSettings();
+            utilities.verifyInnerText(thinkSpherePage.fontSizeDropdown(), editedFontSize);
+        });
+    });
+});

package/cypress/e2e/ILC/ThinkSphere/equationEditorCreateCustomCategory.smoke.js

@@ -0,0 +1,417 @@
+import { equationEditorCategoriesAndSymbols } from "../../../fixtures/equationEditorCategoriesAndSymbols ";
+import { dialogBoxBase, thinkSpherePage } 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: {
+        fraction: {
+            title: 'Fraction',
+            ariaLabel: 'fraction'
+        },
+        mixedFraction: {
+            title: 'Mixed Fraction',
+            ariaLabel: 'mixedfraction',
+        },
+        lessThan: {
+            title: 'Less Than',
+            ariaLabel: 'lessThan',
+        },
+        greaterThan: {
+            title: 'Greater Than',
+            ariaLabel: 'greaterThan',
+        },
+        questionMark: {
+            title: 'Question Mark',
+            ariaLabel: 'questionMark',
+        },
+        dollar: {
+            title: 'Dollar',
+            ariaLabel: 'dollar',
+        },
+        cents: {
+            title: 'Cents',
+            ariaLabel: 'cents',
+        },
+        degree: {
+            title: 'Degree',
+            ariaLabel: 'degree',
+        },
+        colonRation: {
+            title: 'Colon/Ratio',
+            ariaLabel: 'colonration',
+        },
+        groupInParathesis: {
+            title: 'Group In Parenthesis',
+            ariaLabel: 'groupinparathesis',
+        },
+        superscript: {
+            title: 'Upper Exponent',
+            ariaLabel: 'superscript',
+        },
+        subscript: {
+            title: 'Lower Exponent',
+            ariaLabel: 'subscript',
+        },
+        gamma: {
+            title: 'Gamma',
+            ariaLabel: 'gamma',
+        },
+        delta: {
+            title: 'Delta',
+            ariaLabel: 'delta',
+        }
+    }
+}
+
+describe('Create question page - Think Sphere: Create custom category', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Create custom category contents', { tags: 'smoke' }, () => {
+        abortEarlySetup();
+        before(() => {
+            thinkSpherePage.steps.navigateToThinkSphereCreateQuestion();
+            cy.barsPreLoaderWait();
+            thinkSpherePage.steps.expandCustomizeToolsAndControls();
+            thinkSpherePage.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.dialogBoxTitle(), 'Custom category');
+            utilities.verifyElementVisibilityState(createCustomCategoryFlyout.dialogBoxTitle(), '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.');
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/566948
+        it(`${allCategories} accordions except ${equationEditorCategoriesAndSymbols['numPad'].displayName} and ${equationEditorCategoriesAndSymbols['keyPad'].displayName} should be displayed with their respective labels and unchecked checkboxes.`, () => {
+            createCustomCategoryFlyout.steps.verifyCreateCustomCategoryAccordionLabelsAndDefaultCheckbox();
+        });
+
+        it(`By default, the ${equationEditorCategoriesAndSymbols['intermediate'].displayName} category accordion should be expanded and other all accordions should be in collapsed state`, () => {
+            for (let index = 2; index < allCategories.length; index++) {
+                if (allCategories[index] === 'intermediate') {
+                    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(thinkSpherePage.buttonSave(), 'Save');
+            utilities.verifyElementVisibilityState(thinkSpherePage.buttonSave(), 'visible');
+        });
+
+        allCategories.slice(2).forEach((categoryName) => {
+            it(`On clicking the ${equationEditorCategoriesAndSymbols[categoryName].displayName} category accordion the category should be expanded`, () => {
+                if (categoryName != 'intermediate') {
+                    createCustomCategoryFlyout.steps.expandCategoryAccordion(`${equationEditorCategoriesAndSymbols[categoryName].displayName}`)
+                }
+            });
+
+            it(`The ${equationEditorCategoriesAndSymbols[categoryName].displayName} category accordion 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(thinkSpherePage.buttonCancel(), 'Cancel');
+            utilities.verifyElementVisibilityState(thinkSpherePage.buttonCancel(), 'visible');
+            thinkSpherePage.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.dialogBoxTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold
+            });
+            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(() => {
+                thinkSpherePage.steps.navigateToThinkSphereCreateQuestion();
+                cy.barsPreLoaderWait();
+                thinkSpherePage.steps.expandCustomizeToolsAndControls();
+                thinkSpherePage.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['intermediate'].displayName}`, `${equationEditorCategoriesAndSymbols.intermediate.symbols.upperExponent.ariaLabel}`);
+                createCustomCategoryFlyout.steps.verifySymbolIsDisplayedInSelectedSymbolsSection([`${equationEditorCategoriesAndSymbols.intermediate.symbols.upperExponent.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['intermediate'].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', () => {
+                createCustomCategoryFlyout.steps.selectASymbolInCreateCustomCategoryFlyout(`${equationEditorCategoriesAndSymbols['intermediate'].displayName}`, `${equationEditorCategoriesAndSymbols.intermediate.symbols.lowerExponent.ariaLabel}`);
+                createCustomCategoryFlyout.steps.verifySymbolIsSelectedInCreateCustomCategoryFlyout(`${equationEditorCategoriesAndSymbols['primary'].displayName}`, `${equationEditorCategoriesAndSymbols.primary.symbols.lowerExponent.ariaLabel}`);
+                //Verify checkboxes for both categories are partially selected
+                createCustomCategoryFlyout.steps.verifyPartiallyCheckedStateOfCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['intermediate'].displayName}`);
+                createCustomCategoryFlyout.steps.verifyPartiallyCheckedStateOfCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['primary'].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['intermediate'].symbols).map((icon) => icon.ariaLabel));
+                const symbolsArray = Object.values(equationEditorCategoriesAndSymbols['intermediate'].symbols)
+                cy.log('Open the Custom category flyout and partially select a category')
+                createCustomCategoryFlyout.steps.checkCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['intermediate'].displayName}`);
+                selectedSymbolsArray.forEach((selectedSymbol) => {
+                    createCustomCategoryFlyout.steps.verifySymbolIsSelectedInCreateCustomCategoryFlyout(`${equationEditorCategoriesAndSymbols['intermediate'].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['intermediate'].symbols).map((icon) => icon.ariaLabel));
+                const basicSymbolsArray = Object.values(Object.values(equationEditorCategoriesAndSymbols['primary'].symbols).map((icon) => icon.ariaLabel));
+                createCustomCategoryFlyout.steps.uncheckCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['intermediate'].displayName}`);
+                utilities.verifyElementVisibilityState(createCustomCategoryFlyout.selectedSymbols(), 'notExist');
+                keypadSymbolsArray.forEach((selectedSymbol) => {
+                    createCustomCategoryFlyout.steps.verifySymbolIsNotSelectedInCreateCustomCategoryFlyout(`${equationEditorCategoriesAndSymbols['intermediate'].displayName}`, `${selectedSymbol}`);
+                });
+                basicSymbolsArray.forEach((selectedSymbol) => {
+                    createCustomCategoryFlyout.steps.verifySymbolIsNotSelectedInCreateCustomCategoryFlyout(`${equationEditorCategoriesAndSymbols['primary'].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('Greek Symbols')
+                createCustomCategoryFlyout.steps.verifySymbolIsDisplayedInSelectedSymbolsSection(greekSymbolsArray)
+            });
+
+            it('CSS of selected symbols', { tags: 'css' }, () => {
+                thinkSpherePage.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('Greek Symbols');
+            });
+
+            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.ariaLabel}`);
+                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 otherSymbolsArray = Object.values(Object.values(equationEditorCategoriesAndSymbols['otherSymbols'].symbols).map((icon) => icon.ariaLabel));
+                cy.log('Pre step: Reopen the create custom category and select one category')
+                thinkSpherePage.steps.clickOnCancelButton();
+                createCustomCategoryFlyout.steps.openCreateCustomCategoryFlyout();
+                createCustomCategoryFlyout.steps.checkCategoryAccordionCheckbox('Other Symbols');
+                createCustomCategoryFlyout.steps.expandCategoryAccordion('Other Symbols');
+                otherSymbolsArray.forEach((symbol) => {
+                    createCustomCategoryFlyout.steps.deselectSymbolInSelectedSymbolsSection(symbol);
+                });
+                createCustomCategoryFlyout.steps.verifyUncheckedStateOfCategoryAccordionCheckbox('Other Symbols');
+            });
+        });
+    }
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Save a custom category', () => {
+            abortEarlySetup();
+            before(() => {
+                thinkSpherePage.steps.navigateToThinkSphereCreateQuestion();
+                cy.barsPreLoaderWait();
+                thinkSpherePage.steps.expandCustomizeToolsAndControls();
+                thinkSpherePage.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 ', () => {
+                thinkSpherePage.steps.saveCustomCategory();
+                utilities.verifyElementVisibilityState(createCustomCategoryFlyout.dialogBox(), 'visible');
+                utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Category name is required.');
+            });
+
+            thinkSpherePage.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', () => {
+                thinkSpherePage.steps.saveCustomCategory();
+                utilities.verifyElementVisibilityState(createCustomCategoryFlyout.dialogBox(), 'notExist');
+                thinkSpherePage.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')
+                thinkSpherePage.steps.createCustomCategoryWithMultipleCategoryCharacters();
+                thinkSpherePage.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')
+                thinkSpherePage.steps.createCustomCategoryWithNameAndIcon();
+                thinkSpherePage.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\'', () => {
+                thinkSpherePage.steps.verifyAddedCustomCategoryContainerEditAndDeleteButtonDisplayed('Custom category without characters');
+                thinkSpherePage.steps.verifyAddedCustomCategoryContainerEditAndDeleteButtonDisplayed('Custom category with name.');
+                thinkSpherePage.steps.verifyAddedCustomCategoryContainerEditAndDeleteButtonDisplayed('Custom category with name and icon.');
+            });
+        });
+    }
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Create custom category: Edit category', () => {
+            abortEarlySetup();
+            before(() => {
+                thinkSpherePage.steps.navigateToThinkSphereCreateQuestion();
+                cy.barsPreLoaderWait();
+                thinkSpherePage.steps.expandCustomizeToolsAndControls();
+                thinkSpherePage.steps.selectCustomizedFormattingOption(['Equation editor'])
+                cy.log('Pre step: Add Category with Category Name and Icon')
+                thinkSpherePage.steps.createCustomCategoryWithNameAndIcon();
+            });
+
+            it('When user clicks on Edit button under an added Custom category, the Custom category flyout should open', () => {
+                thinkSpherePage.steps.editCategoryInEquationEditorSectionEditTab('Custom category with name and icon.');
+                utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+                utilities.verifyElementVisibilityState(createCustomCategoryFlyout.dialogBoxTitle(), 'visible');
+                utilities.verifyInnerText(createCustomCategoryFlyout.dialogBoxTitle(), '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['geo'].symbols).map((icon) => icon.ariaLabel));
+                createCustomCategoryFlyout.steps.expandCategoryAccordion(`${equationEditorCategoriesAndSymbols['geo'].displayName}`);
+                symbolsArray.forEach((symbol) => {
+                    createCustomCategoryFlyout.steps.verifySymbolIsSelectedInCreateCustomCategoryFlyout(`${equationEditorCategoriesAndSymbols['geo'].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['geo'].displayName}`);
+                createCustomCategoryFlyout.steps.checkCategoryAccordionCheckbox(`${equationEditorCategoriesAndSymbols['delimiters'].displayName}`);
+                thinkSpherePage.steps.saveCustomCategory();
+                thinkSpherePage.steps.verifyAddedCustomCategoryContainerIsDisplayed('Edited category name', '@');
+            });
+        });
+    }
+
+    if (!grepTags || !grepTags.includes('smoke')) {
+        describe('Delete Custom category', () => {
+            abortEarlySetup();
+            before(() => {
+                thinkSpherePage.steps.navigateToThinkSphereCreateQuestion();
+                cy.barsPreLoaderWait();
+                thinkSpherePage.steps.expandCustomizeToolsAndControls();
+                thinkSpherePage.steps.selectCustomizedFormattingOption(['Equation editor'])
+                cy.log('Pre step: Add Category with Category Name and Icon')
+                thinkSpherePage.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', () => {
+                thinkSpherePage.steps.deleteCustomCategoryInEquationEditorSectionEditTab('Custom category with name and icon.');
+            });
+        });
+    }
+});