itemengine-cypress-automation 1.0.19 → 1.0.20

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

@@ -0,0 +1,402 @@
+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";
+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 - rich text');
+            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();
+            editCategoryFlyout.dialogBox()
+                .should('be.visible')
+        });
+
+        it('Title of the flyout should be \'Edit category\'', () => {
+            editCategoryFlyout.dialogBoxTitle()
+                .verifyInnerText('Edit Category')
+                .should('exist');
+        });
+
+        it('\'Select the symbols to display to the students.\' help text should be displayed below the title', () => {
+            editCategoryFlyout.selectSymbolsToDisplayLabel()
+                .verifyInnerText('Select the symbols to display to the students.')
+                .should('exist');
+        });
+
+        it('The name of the category should be displayed in the flyout with a checked checkbox', () => {
+            editCategoryFlyout.categoryLabel()
+                .verifyInnerText(`${equationEditorCategoriesAndSymbols['keypad'].displayName}`)
+                .should('be.visible');
+            editCategoryFlyout.categoryCheckbox()
+                .should('be.checked');
+        });
+
+        it(`All the ${equationEditorCategoriesAndSymbols['keypad'].displayName} characters should be displayed and should be in selected state`, () => {
+            const symbolsArray = Object.values(equationEditorCategoriesAndSymbols['keypad'].symbols)
+            editCategoryFlyout.categoryCharacters()
+                .each(($el, index) => {
+                    cy.wrap($el)
+                        .within(() => {
+                            editCategoryFlyout.characterDragIcon()
+                                .should('be.visible')
+                            editCategoryFlyout.characterTickIcon()
+                                .should('not.have.attr', 'aria-checked', 'false');
+                        })
+                        .should('have.class', 'Mui-selected')
+                        .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('Reset button should be displayed in the flyout', () => {
+            editCategoryFlyout.buttonReset()
+                .verifyInnerText('Reset')
+                .should('exist');
+            editCategoryFlyout.resetIcon()
+                .should('exist');
+        });
+
+        it('\'Save\' button should be displayed in the flyout', () => {
+            editCategoryFlyout.buttonSave()
+                .verifyInnerText('Save')
+                .should('be.visible');
+        });
+
+        it('CSS of Edit category flyout components', { tags: 'css' }, () => {
+            editCategoryFlyout.dialogBoxTitle()
+                .verifyCSS(css.color.flyoutTitle, css.fontSize.heading, css.fontWeight.semibold);
+            editCategoryFlyout.categoryLabel()
+                .verifyCSS(css.color.accordionLabel, css.fontSize.default, css.fontWeight.bold);
+            editCategoryFlyout.categoryCheckbox()
+                .parents('.MuiCheckbox-root')
+                .find('svg')
+                .should('have.css', 'fill', css.color.activeButtons)
+            editCategoryFlyout.selectSymbolsToDisplayLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            editCategoryFlyout.categoryCharacters()
+                .eq(0)
+                .should('have.css', 'background-color', css.color.activeButtons)
+                .within(() => {
+                    editCategoryFlyout.characterDragIcon()
+                        .should('have.css', 'background-color', css.color.defaultBackground)
+                        .find('path')
+                        .eq(1)
+                        .verifyCSS(css.color.activeButtons, css.fontSize.normal, css.fontWeight.bold);
+                    editCategoryFlyout.characterTickIcon()
+                        .find('path')
+                        .eq(1)
+                        .should('have.css', 'fill', css.color.activeButtons)
+                });
+            editCategoryFlyout.buttonSave()
+                .verifyCSS(css.color.primaryBtn, css.fontSize.default, css.fontWeight.semibold)
+                .should('have.css', 'background-color', css.color.primaryBtnBg);
+            editCategoryFlyout.buttonCancel()
+                .verifyCSS(css.color.secondaryBtn, css.fontSize.default, css.fontWeight.semibold)
+                .should('have.css', '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', () => {
+            editCategoryFlyout.buttonCancel()
+                .verifyInnerText('Cancel')
+                .should('be.visible')
+                .click();
+            editCategoryFlyout.dialogBox()
+                .should('not.exist');
+        });
+    });
+
+    describe('Category checkbox validation states', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            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.categoryCharacters()
+                .contains('[aria-label]', `${equationEditorCategoriesAndSymbols.keypad.symbols.one.ariaLabel}`, { matchCase: false })
+                .click()
+                .should('not.have.class', 'Mui-selected');
+            editCategoryFlyout.categoryCheckbox()
+                .should('have.attr', 'data-indeterminate', 'true');
+        });
+
+        it('When user clicks on the partially checked category checkbox then all the characters should be selected', () => {
+            editCategoryFlyout.categoryCheckbox()
+                .should('have.attr', 'data-indeterminate', 'true')
+                .click()
+                .should('be.checked');
+            editCategoryFlyout.categoryCharacters()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('have.class', 'Mui-selected');
+                });
+        });
+
+        it('When user clicks on checked category checkbox then all the characters should get de-selected', () => {
+            editCategoryFlyout.categoryCheckbox()
+                .should('be.checked')
+                .click()
+                .should('not.be.checked');
+            editCategoryFlyout.categoryCharacters()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('not.have.class', 'Mui-selected');
+                });
+        });
+
+        it('CSS of de-selected character', { tags: 'css' }, () => {
+            editCategoryFlyout.categoryCharacters()
+                .eq(0)
+                .should('have.css', 'background-color', css.color.defaultBackground)
+                .find('text')
+                .verifyCSS(css.color.liText, css.fontSize.normal, css.fontWeight.bold)
+                .parents('.icon-button-custom-format')
+                .within(() => {
+                    editCategoryFlyout.characterDragIcon()
+                        .should('have.css', 'background-color', css.color.defaultBackground)
+                        .find('path')
+                        .eq(1)
+                        .verifyCSS(css.color.secondaryBtn, css.fontSize.normal, 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.categoryCheckbox()
+                .should('not.be.checked')
+                .click()
+                .and('be.checked');
+            editCategoryFlyout.categoryCharacters()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('have.class', 'Mui-selected');
+                });
+        });
+
+        it('When user clicks on all the selected characters then the category checkbox should get unchecked', () => {
+            editCategoryFlyout.categoryCheckbox()
+                .should('be.checked');
+            editCategoryFlyout.categoryCharacters()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .click()
+                        .should('not.have.class', 'Mui-selected');
+                });
+            editCategoryFlyout.categoryCheckbox()
+                .should('not.be.checked');
+        });
+
+        it('When user clicks on all the de-selected characters the category checkbox should get checked', () => {
+            editCategoryFlyout.categoryCharacters()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .click()
+                        .should('have.class', 'Mui-selected');
+                });
+            editCategoryFlyout.categoryCheckbox()
+                .should('be.checked');
+        });
+    });
+
+    describe('\'Reset\' button validation states', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            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();
+            editCategoryFlyout.buttonReset()
+                .should('be.disabled');
+        });
+
+        it('When user de-selects any character by clicking on it then the Reset button should get enabled', () => {
+            editCategoryFlyout.categoryCharacters()
+                .contains('[aria-label]', `${equationEditorCategoriesAndSymbols.keypad.symbols.one.ariaLabel}`, { matchCase: false })
+                .click()
+                .should('not.have.class', 'Mui-selected');
+            editCategoryFlyout.buttonReset()
+                .should('be.enabled');
+        });
+
+        it('CSS of enabled Reset button', { tags: 'css' }, () => {
+            editCategoryFlyout.buttonReset()
+                .verifyCSS(css.color.activeButtons, css.fontSize.default, 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.buttonReset()
+                .click();
+            editCategoryFlyout.categoryCharacters()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('have.class', 'Mui-selected');
+                });
+        });
+
+        it('When user de-selects characters and re-selects them then the Reset button should be disabled', () => {
+            editCategoryFlyout.categoryCharacters()
+                .contains('[aria-label]', `${equationEditorCategoriesAndSymbols.keypad.symbols.one.ariaLabel}`, { matchCase: false })
+                .click()
+                .should('not.have.class', 'Mui-selected');
+            editCategoryFlyout.categoryCharacters()
+                .contains('[aria-label]', `${equationEditorCategoriesAndSymbols.keypad.symbols.two.ariaLabel}`, { matchCase: false })
+                .click()
+                .should('not.have.class', 'Mui-selected');
+            editCategoryFlyout.categoryCharacters()
+                .contains('[aria-label]', `${equationEditorCategoriesAndSymbols.keypad.symbols.one.ariaLabel}`, { matchCase: false })
+                .click();
+            editCategoryFlyout.categoryCharacters()
+                .contains('[aria-label]', `${equationEditorCategoriesAndSymbols.keypad.symbols.two.ariaLabel}`, { matchCase: false })
+                .click();
+            editCategoryFlyout.buttonReset()
+                .should('be.disabled');
+        });
+
+        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.categoryCharacters()
+                .contains('[aria-label]', `${equationEditorCategoriesAndSymbols.keypad.symbols.one.ariaLabel}`, { matchCase: false })
+                .click()
+                .should('not.have.class', 'Mui-selected');
+            editCategoryFlyout.categoryCharacters()
+                .contains('[aria-label]', `${equationEditorCategoriesAndSymbols.keypad.symbols.two.ariaLabel}`, { matchCase: false })
+                .click()
+                .should('not.have.class', 'Mui-selected');
+            editCategoryFlyout.buttonSave()
+                .click();
+            editCategoryFlyout.dialogBox()
+                .should('not.exist');
+            editCategoryFlyout.steps.openEditCategoryFlyout();
+            editCategoryFlyout.buttonReset()
+                .should('be.disabled');
+            editCategoryFlyout.categoryCharacters()
+                .contains('[aria-label]', `${equationEditorCategoriesAndSymbols.keypad.symbols.one.ariaLabel}`, { matchCase: false })
+                .should('not.have.class', 'Mui-selected');
+            editCategoryFlyout.categoryCharacters()
+                .contains('[aria-label]', `${equationEditorCategoriesAndSymbols.keypad.symbols.one.ariaLabel}`, { matchCase: false })
+                .should('not.have.class', 'Mui-selected');
+            editCategoryFlyout.categoryCharacters()
+                .then(($symbols) => {
+                    for (let i = 0; i < $symbols.length - 2; i++) {
+                        editCategoryFlyout.categoryCharacters()
+                            .eq(i)
+                            .should('have.class', 'Mui-selected');
+                    }
+                });
+        });
+    });
+
+    describe('Save a edited category', () => {
+        abortEarlySetup();
+        before(() => {
+            essayResponsePage.steps.navigateToCreateQuestion('essay response - rich text');
+            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.categoryCharacters()
+                .contains('[aria-label]', `${equationEditorCategoriesAndSymbols.keypad.symbols.one.ariaLabel}`, { matchCase: false })
+                .click()
+                .should('not.have.class', 'Mui-selected');
+            editCategoryFlyout.categoryCharacters()
+                .contains('[aria-label]', `${equationEditorCategoriesAndSymbols.keypad.symbols.two.ariaLabel}`, { matchCase: false })
+                .click()
+                .should('not.have.class', 'Mui-selected');
+            editCategoryFlyout.buttonCancel()
+                .click();
+            editCategoryFlyout.dialogBox()
+                .should('not.exist');
+            editCategoryFlyout.steps.openEditCategoryFlyout()
+            editCategoryFlyout.categoryCharacters()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('have.class', 'Mui-selected');
+                });
+        });
+
+        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.categoryCharacters()
+                .contains('[aria-label]', `${equationEditorCategoriesAndSymbols.keypad.symbols.one.ariaLabel}`, { matchCase: false })
+                .click()
+                .should('not.have.class', 'Mui-selected');
+            editCategoryFlyout.buttonSave()
+                .click();
+            editCategoryFlyout.dialogBox()
+                .should('not.exist');
+            essayResponsePage.steps.switchToPreviewTab()
+            essayResponsePage.previewTabToolbarOption('Equation Editor')
+                .click();
+            equationEditorFlyout.categoryCharacters()
+                .each(($el, index) => {
+                    cy.wrap($el)
+                        .should('have.attr', 'aria-label', symbolsArray[index + 1].ariaLabel)
+                });
+            equationEditorFlyout.buttonCancel()
+                .click();
+        });
+
+        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.categoryCharacters()
+                .contains('[aria-label]', `${equationEditorCategoriesAndSymbols.keypad.symbols.one.ariaLabel}`, { matchCase: false })
+                .should('not.have.class', 'Mui-selected')
+            editCategoryFlyout.categoryCharacters()
+                .then(($symbols) => {
+                    for (let index = 0; index < $symbols.length - 1; index++) {
+                        editCategoryFlyout.categoryCharacters()
+                            .eq(index)
+                            .should('have.class', 'Mui-selected')
+                            .invoke('attr', 'aria-label')
+                            .then((ariaLabel) => {
+                                const expectedValue = `${symbolsArray[index + 1].ariaLabel} selected`;
+                                expect(ariaLabel.toLowerCase()).to.equal(expectedValue.toLowerCase())
+                            });
+                    }
+                });
+        });
+    });
+});