itemengine-cypress-automation 1.0.104 → 1.0.106

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

@@ -0,0 +1,284 @@
+import { equationEditorCategoriesAndSymbols } from "../../../fixtures/equationEditorCategoriesAndSymbols ";
+import { essayResponsePage } from "../../../pages";
+import { editCategoryFlyout } from "../../../pages/components/editCategoryFlyout";
+import { equationEditorFlyout } from "../../../pages/components/equationEditorFlyout";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create question page - Essay Response: Edit category', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Edit category flyout contents', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor']);
+        });
+
+        it('When user clicks on the Edit category icon below the categories in the Equation Editor section the Edit category flyout should open', () => {
+            editCategoryFlyout.steps.openEditCategoryFlyout();
+            utilities.verifyElementVisibilityState(editCategoryFlyout.dialogBox(), 'visible');
+        });
+
+        it('Title of the flyout should be \'Edit category\'', () => {
+            utilities.verifyElementVisibilityState(editCategoryFlyout.dialogBoxTitle(), 'exist');
+            utilities.verifyInnerText(editCategoryFlyout.dialogBoxTitle(), 'Edit Category');
+        });
+
+        it('\'Select the symbols to display to the students.\' help text should be displayed below the title', () => {
+            utilities.verifyElementVisibilityState(editCategoryFlyout.selectSymbolsToDisplayLabel(), 'exist');
+            utilities.verifyInnerText(editCategoryFlyout.selectSymbolsToDisplayLabel(), 'Select the symbols to display to the students.');
+        });
+
+        it('The name of the category should be displayed in the flyout with a checked checkbox', () => {
+            utilities.verifyElementVisibilityState(editCategoryFlyout.categoryLabel(), 'visible');
+            utilities.verifyInnerText(editCategoryFlyout.categoryLabel(), `${equationEditorCategoriesAndSymbols['keypad'].displayName}`);
+            editCategoryFlyout.steps.verifyCategoryCheckboxIsChecked();
+        });
+
+        it(`All the ${equationEditorCategoriesAndSymbols['keypad'].displayName} characters should be displayed and should be in selected state`, () => {
+            const symbolsArray = Object.values(equationEditorCategoriesAndSymbols['keypad'].symbols);
+            editCategoryFlyout.steps.verifyCategoryCharactersAndSelectedState(symbolsArray);
+            editCategoryFlyout.steps.verifyCategoryCharactersDragIconAndTitle(symbolsArray);
+        });
+
+        it('Reset button should be displayed in the flyout', () => {
+            utilities.verifyElementVisibilityState(editCategoryFlyout.buttonReset(), 'exist');
+            utilities.verifyInnerText(editCategoryFlyout.buttonReset(), 'Reset');
+            utilities.verifyElementVisibilityState(editCategoryFlyout.resetIcon(), 'exist');
+        });
+
+        it('\'Save\' button should be displayed in the flyout', () => {
+            utilities.verifyElementVisibilityState(editCategoryFlyout.buttonSave(), 'visible');
+            utilities.verifyInnerText(editCategoryFlyout.buttonSave(), 'Save');
+        });
+
+        it('CSS of Edit category flyout components', { tags: 'css' }, () => {
+            utilities.verifyCSS(editCategoryFlyout.dialogBoxTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(editCategoryFlyout.categoryLabel(), {
+                'color': css.color.accordionLabel,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(editCategoryFlyout.categoryCheckbox().parents('.MuiCheckbox-root').find('svg'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(editCategoryFlyout.selectSymbolsToDisplayLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(editCategoryFlyout.categoryCharacters().eq(0), {
+                'background-color': css.color.activeButtons
+            });
+            utilities.verifyCSS(editCategoryFlyout.characterDragIcon(), {
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(editCategoryFlyout.characterDragIcon().eq(0).find('path').eq(1), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(editCategoryFlyout.characterTickIcon().eq(0).find('path').eq(1), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(editCategoryFlyout.buttonSave(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.primaryBtnBg
+            });
+            utilities.verifyCSS(editCategoryFlyout.buttonCancel(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.transparent
+            });
+        });
+
+        it('Accessibility of Edit category flyout components', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(editCategoryFlyout.dialogBox());
+        });
+
+        it('\'Cancel\' button should be displayed and on clicking it the flyout should close', () => {
+            utilities.verifyElementVisibilityState(editCategoryFlyout.buttonCancel(), 'visible');
+            utilities.verifyInnerText(editCategoryFlyout.buttonCancel(), 'Cancel');
+            editCategoryFlyout.steps.clickOnCancelButton();
+            utilities.verifyElementVisibilityState(editCategoryFlyout.dialogBox(), 'notExist');
+        });
+    });
+
+    describe('Category checkbox validation states', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor']);
+            editCategoryFlyout.steps.openEditCategoryFlyout();
+        });
+
+        it('When user deselects any one character by clicking on it then the category checkbox should be in partially checked state', () => {
+            editCategoryFlyout.steps.deselectCategoryCharacters(equationEditorCategoriesAndSymbols.keypad.symbols.one.ariaLabel);
+            editCategoryFlyout.steps.verifyCategoryCheckboxIsPartiallyChecked();
+        });
+
+        it('When user clicks on the partially checked category checkbox then all the characters should be selected', () => {
+            editCategoryFlyout.steps.verifyCategoryCheckboxIsPartiallyChecked();
+            editCategoryFlyout.steps.checkCategoryCheckbox();
+            editCategoryFlyout.steps.verifyAllCategoryCharactersSelected();
+        });
+
+        it('When user clicks on checked category checkbox then all the characters should get de-selected', () => {
+            editCategoryFlyout.steps.verifyCategoryCheckboxIsChecked()
+            editCategoryFlyout.steps.uncheckCategoryCheckbox();
+            editCategoryFlyout.steps.verifyAllCategoryCharactersNotSelected()
+        });
+
+        it('CSS of de-selected character', { tags: 'css' }, () => {
+            utilities.verifyCSS(editCategoryFlyout.categoryCharacters().eq(0).find('text'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold,
+            });
+            utilities.verifyCSS(editCategoryFlyout.categoryCharacters().eq(0), {
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(editCategoryFlyout.categoryCharacters().eq(0).find('.drag-icon-button-custom-format'), {
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(editCategoryFlyout.categoryCharacters().eq(0).find('.drag-icon-button-custom-format path').eq(1), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.bold,
+            });
+        });
+
+        it('Accessibility of de-selected character', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(editCategoryFlyout.categoryCharacters(0).parents('[class*="DragItemstyles__ItemContainer"]'))
+        });
+
+        it('When user clicks on the unchecked category checkbox then all the characters should get selected', () => {
+            editCategoryFlyout.steps.verifyCategoryCheckboxIsUnchecked()
+            editCategoryFlyout.steps.checkCategoryCheckbox();
+            editCategoryFlyout.steps.verifyAllCategoryCharactersSelected();
+        });
+
+        it('When user clicks on all the selected characters then the category checkbox should get unchecked', () => {
+            editCategoryFlyout.steps.verifyCategoryCheckboxIsChecked();
+            editCategoryFlyout.steps.deselectAllCategoryCharacters();
+            editCategoryFlyout.steps.verifyCategoryCheckboxIsUnchecked();
+        });
+
+        it('When user clicks on all the de-selected characters the category checkbox should get checked', () => {
+            editCategoryFlyout.steps.selectAllCategoryCharacters();
+            editCategoryFlyout.steps.verifyCategoryCheckboxIsChecked();
+        });
+    });
+
+    describe('\'Reset\' button validation states', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor']);
+        });
+
+        it('When user opens the Edit category flyout then the Reset button should be disabled by default', () => {
+            editCategoryFlyout.steps.openEditCategoryFlyout();
+            utilities.verifyElementDisabled(editCategoryFlyout.buttonReset());
+        });
+
+        it('When user de-selects any character by clicking on it then the Reset button should get enabled', () => {
+            editCategoryFlyout.steps.deselectCategoryCharacters(`${equationEditorCategoriesAndSymbols.keypad.symbols.one.ariaLabel}`);
+            utilities.verifyElementNotDisabled(editCategoryFlyout.buttonReset());
+        });
+
+        it('CSS of enabled Reset button', { tags: 'css' }, () => {
+            utilities.verifyCSS(editCategoryFlyout.buttonReset(), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of enabled Reset button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(editCategoryFlyout.buttonReset());
+        })
+
+        it('When user clicks on the Reset button the changes should be reverted and the all the character should be selected again', () => {
+            editCategoryFlyout.steps.reset();
+            editCategoryFlyout.steps.verifyAllCategoryCharactersSelected();
+        });
+
+        it('When user de-selects characters and re-selects them then the Reset button should be disabled', () => {
+            editCategoryFlyout.steps.deselectCategoryCharacters(`${equationEditorCategoriesAndSymbols.keypad.symbols.one.ariaLabel}`);
+            editCategoryFlyout.steps.deselectCategoryCharacters(`${equationEditorCategoriesAndSymbols.keypad.symbols.two.ariaLabel}`)
+            editCategoryFlyout.steps.selectCategoryCharacters(`${equationEditorCategoriesAndSymbols.keypad.symbols.one.ariaLabel}`)
+            editCategoryFlyout.steps.selectCategoryCharacters(`${equationEditorCategoriesAndSymbols.keypad.symbols.two.ariaLabel}`)
+            utilities.verifyElementDisabled(editCategoryFlyout.buttonReset())
+        });
+
+        it('When user edits and saves the category then on opening the same Edit category flyout the \'Reset\' button should be disabled and the previously Saved changes should be displayed', () => {
+            editCategoryFlyout.steps.deselectCategoryCharacters(`${equationEditorCategoriesAndSymbols.keypad.symbols.one.ariaLabel}`);
+            editCategoryFlyout.steps.deselectCategoryCharacters(`${equationEditorCategoriesAndSymbols.keypad.symbols.two.ariaLabel}`);
+            editCategoryFlyout.steps.clickOnSaveButton();
+            utilities.verifyElementVisibilityState(editCategoryFlyout.dialogBox(), 'notExist');
+            editCategoryFlyout.steps.openEditCategoryFlyout();
+            utilities.verifyElementDisabled(editCategoryFlyout.buttonReset());
+            editCategoryFlyout.steps.verifyCategoryCharacterNotSelected(`${equationEditorCategoriesAndSymbols.keypad.symbols.one.ariaLabel}`)
+            editCategoryFlyout.steps.verifyCategoryCharacterNotSelected(`${equationEditorCategoriesAndSymbols.keypad.symbols.one.ariaLabel}`)
+            editCategoryFlyout.categoryCharacters()
+                .then(($symbols) => {
+                    for (let index = 0; index < $symbols.length - 2; index++) {
+                        editCategoryFlyout.steps.selectCategoryCharactersUsingIndex(index);
+                    }
+                });
+        });
+    });
+
+    describe('Save a edited category', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response');
+            essayResponsePage.steps.expandCustomizeFormattingOptionsAccordion();
+            essayResponsePage.steps.selectCustomizedFormattingOption(['Equation Editor']);
+            editCategoryFlyout.steps.openEditCategoryFlyout()
+        });
+
+        it('When user edits a category and clicks on Cancel button then the flyout should close and the changes should not be saved', () => {
+            editCategoryFlyout.steps.deselectCategoryCharacters(`${equationEditorCategoriesAndSymbols.keypad.symbols.one.ariaLabel}`);
+            editCategoryFlyout.steps.deselectCategoryCharacters(`${equationEditorCategoriesAndSymbols.keypad.symbols.two.ariaLabel}`);
+            editCategoryFlyout.steps.clickOnCancelButton();
+            utilities.verifyElementVisibilityState(editCategoryFlyout.dialogBox(), 'notExist');
+            editCategoryFlyout.steps.openEditCategoryFlyout()
+            editCategoryFlyout.steps.verifyAllCategoryCharactersSelected();
+        });
+
+        it('When user edits a category and saves it then the changes should be displayed in the Equation editor flyout', () => {
+            const symbolsArray = Object.values(equationEditorCategoriesAndSymbols['keypad'].symbols)
+            editCategoryFlyout.steps.deselectCategoryCharacters(`${equationEditorCategoriesAndSymbols.keypad.symbols.one.ariaLabel}`)
+            editCategoryFlyout.steps.clickOnSaveButton();
+            utilities.verifyElementVisibilityState(editCategoryFlyout.dialogBox(), 'notExist');
+            essayResponsePage.steps.switchToPreviewTab()
+            essayResponsePage.steps.selectPreviewTabToolbarOption('Equation Editor');
+            equationEditorFlyout.steps.verifyEquationEditorCharacterWithoutFirstCharacter(symbolsArray);
+            equationEditorFlyout.steps.clickOnEquationEditorCancelButton();
+        });
+
+        it('When user re-visits the Edit category flyout the changes should be displayed', () => {
+            const symbolsArray = Object.values(equationEditorCategoriesAndSymbols['keypad'].symbols)
+            essayResponsePage.steps.switchToEditTab()
+            editCategoryFlyout.steps.openEditCategoryFlyout();
+            editCategoryFlyout.steps.verifyCategoryCharacterNotSelected(`${equationEditorCategoriesAndSymbols.keypad.symbols.one.ariaLabel}`);
+            editCategoryFlyout.steps.verifyCategoryCharactersAndSelectedState(symbolsArray);
+        });
+    });
+});