itemengine-cypress-automation 1.0.113 → 1.0.114

package/cypress/pages/essayResponsePage.js

@@ -7,8 +7,6 @@ import utilities from "../support/helpers/utilities";
 const css = Cypress.env('css');
 
 const allCategories = Object.values(equationEditorCategoriesAndSymbols);
-let originalText;
-let formattedText;
 
 const selectors = {
     ...scoringSectionBaseEditTab,
@@ -35,10 +33,6 @@ const selectors = {
     tableHeaderRow: () => cy.get('thead'),
     tableHeaderCell: () => cy.get('th'),
 
-    //wordCount
-    displayWordCountCheckbox: () => cy.get('[data-ngie-testid="display-word-count-checkbox"] input'),
-    wordCountWrapper: () => cy.get('[class*="indexstyle__WordCharCountWrapper"]'),
-
     //Special characters
     specialCharactersPopupTitle: () => cy.get('#alert-dialog-title'),
     specialCharactersPopupCloseButton: () => cy.get('[class*="close-button"]'),
@@ -47,23 +41,8 @@ const selectors = {
     specialCharactersPopupCategoryTitle: () => cy.get('.char-accordion-label'),
     specialCharactersPopupCategoryAccordionIcon: () => cy.get('.special-math-content [class*="expandIconWrapper"]'),
 
-    ///Old
-    //Customize Formatting Options
-    customizeFormattingOptionsAccordion: () => cy.get('.customize-formatting-option-wrapper .ngie-accordion-summary'),
-    customizeFormattingOptionsAccordionLabel: () => cy.get('.customize-formatting-options-label'),
-    customizeFormattingOptionsTiles: (toolbarOption) => cy.get(`.icon-button-custom-format[title="${toolbarOption}"]`),
-    customizeFormattingOptionsWrapper: () => cy.get('.essay-response-grid-wrapper'),
-    equationEditorOptionsWrapper: () => cy.get('[class*="EssayResponseComponentstyles__EquationEditorOptionsWrapper"]'),
-    //Todo: need to remove this and use common component drag handle
-    customizeFormattingOptionsdragHandleButton: () => cy.get('[class*="drag-icon-"]'),
-    equationEditorLabel: () => cy.get('.equation-editor-text-title'),
-    disableCutCopyPasteLabel: () => cy.get('[data-ngie-testid="disable-cut,-copy-and-paste-checkbox"] .MuiFormControlLabel-label'),
-    disableCutCopyPasteCheckbox: () => cy.get('[data-ngie-testid="disable-cut,-copy-and-paste-checkbox"] input'),
-    //Preview tab
-    previewTabColorPalettePopup: () => cy.get('.cke_panel_frame'),
-    previewTabToolbarSeperator: () => cy.get('.essay-preview-wrapper span[class="cke_toolbar_separator"]'),
-    specialCharacterFlyoutIcon: (characterIndex) => cy.get('.img_special_char').eq(characterIndex), //need to update and change this
     //Equation Editor section
+    equationEditorSectionWrapper: () => cy.get('.essay-response-eqn-editor-wrapper'),
     equationEditorSectionCategories: () => cy.get('[class*="DraggableItemsGrid"] .icon-button-custom-format'),
     equationEditorSectionCategoryLabel: () => cy.get('.equation-editor-label-wrapper'),
     equationEditorSection: () => cy.get('[class*="EquationEditorOptionsWrapper"]'),
@@ -71,13 +50,22 @@ const selectors = {
     equationEditorSectionHelperText: () => cy.get('.equation-editor-description-text'),
     equationEditorSectionCategoriesDragIcon: () => cy.get('.drag-icon-equation-editor-button'),
     equationEditorSectionCategoriesEditIcon: () => cy.get('.edit-icon-button button'),
-    equationEditorSectionTickIcon: () => cy.get('.tick-icon-wrapper'),
+    equationEditorSectionTickIcon: () => cy.get('[class*="DraggableItemsGrid"] .tick-icon-wrapper'),
     selectACategoryErrorMessage: () => cy.get('[class*="ErrorBlock"]'),
     equationEditorSectionCategoryIcon: () => cy.get('.equation-editor-icon'),
-    equationEditorSectionDeleteCustomCategoryIcon: () => cy.get('.delete-button-icon button')
+    equationEditorSectionDeleteCustomCategoryIcon: () => cy.get('.delete-button-icon button'),
+
+    //Controls section
+    controlsOptionsTiles: (formattingOption = null) => {
+        if (formattingOption) {
+            return cy.get(`[class*="ControlsWrapper"] .icon-button-custom-format[title="${formattingOption}"]`)
+        } else {
+            return cy.get('[class*="ControlsWrapper"] .icon-button-custom-format')
+        }
+    }
 }
 
-const tableDialogBox = {    //TODO: Once redmine issue is fixed the selectors will get changed to this: editTableDialogBoxAddRowHeaderLabel: () => cy.get('.add-table-dialog .chk_box_add_header_row')
+const tableDialogBox = {
     //Add table dialog box
     addTableDialogBox: () => cy.get('.cke_dialog_body'),
     addTableDialogBoxTitle: () => cy.get('.cke_dialog_title'),
@@ -129,14 +117,6 @@ const hyperlinkDialogBox = {
     previewInputFieldHyperlinkText: () => cy.get('div[title="Enter your response to the question here."] a'),
 }
 
-const specialAndMathCharacters = {
-    specialAndMathCharacterPopup: () => cy.get('.cke_dialog_body').contains(/Special characters|Math characters/).parents('.cke_dialog_body'),
-    specialAndMathCharacterPopupSymbolsWrapper: () => essayResponsePage.specialAndMathCharacterPopup().find('.special_char_td'),
-    specialAndMathCharacterPopupSymbols: () => essayResponsePage.specialAndMathCharacterPopup().find('.special_char_td a[role="option"]'),
-    specialAndMathCharacterPopupTitle: () => essayResponsePage.specialAndMathCharacterPopup().find('.cke_dialog_title '),
-    specialAndMathCharacterPopupCloseButton: () => essayResponsePage.specialAndMathCharacterPopup().find('a[title="Close"]')
-}
-
 const steps = {
     ...createQuestionBasePage.steps,
     ...questionInstructionsComponent.steps,
@@ -230,20 +210,6 @@ const steps = {
             });
     },
 
-    checkDisplayWordCountCheckbox: () => {
-        essayResponsePage.displayWordCountCheckbox()
-            .click()
-            .should('be.checked');
-    },
-
-    /**
-     * verify word count in preview tab
-     * @param {number} wordCount 
-     */
-    verifyWordCount: (wordCount) => {
-        utilities.verifyInnerText(essayResponsePage.wordCountWrapper(), `Words: ${wordCount}`)
-    },
-
     /**
      * Verify newly added custom category container is displayed
      * @param {string} customCategoryName Custom category name
@@ -888,94 +854,24 @@ const steps = {
             .parents('.icon-button-custom-format')
             .should('have.class', 'Mui-selected');
     },
-    ///Old
-    expandCustomizeFormattingOptionsAccordion: () => {
-        essayResponsePage.customizeFormattingOptionsAccordion()
-            .click()
-            .should('have.attr', 'aria-expanded', 'true');
-    },
-
-    selectingCategories: (categoriesArray) => {
-        categoriesArray.forEach((categoryName) => {
-            essayResponsePage.equationEditorSectionCategories()
-                .contains(categoryName, { matchCase: false })
-                .click();
-        });
-    },
 
-    /**
-     * This function verifies the formatting option is in selected state
-     * @param {string} formattingOption name of the formatting option
-     */
-    verifyCustomizeFormattingOptionIsSelected: (formattingOption) => {
-        essayResponsePage.customizeFormattingOptionsTiles(formattingOption)
-            .should('have.attr', 'data-aria-pressed', 'true');
-    },
-
-    selectCustomizedFormattingOption: (formattingOptionArray) => {
+    selectControlsOption: (formattingOptionArray) => {
         formattingOptionArray.forEach((formattingOption) => {
-            essayResponsePage.customizeFormattingOptionsTiles(formattingOption)
+            essayResponsePage.controlsOptionsTiles(formattingOption)
                 .click();
-            essayResponsePage.customizeFormattingOptionsTiles(formattingOption)
+            essayResponsePage.controlsOptionsTiles(formattingOption)
                 .should('have.attr', 'data-aria-pressed', 'true');
         });
     },
 
-    deselectCustomizedFormattingOption: (formattingOptionArray) => {
-        formattingOptionArray.forEach((formattingOption) => {
-            essayResponsePage.customizeFormattingOptionsTiles(formattingOption)
+    selectingCategories: (categoriesArray) => {
+        categoriesArray.forEach((categoryName) => {
+            essayResponsePage.equationEditorSectionCategories()
+                .contains(categoryName, { matchCase: false })
                 .click();
-            essayResponsePage.customizeFormattingOptionsTiles(formattingOption)
-                .should('have.attr', 'data-aria-pressed', 'false');
         });
     },
 
-    deselectPreviewTabToolbarOption: (toolbarOption) => {
-        essayResponsePage.previewTabToolbarOption(toolbarOption)
-            .click()
-            .should('have.attr', 'aria-pressed', 'false');
-    },
-
-    selectColorFromPopup: (color) => {
-        essayResponsePage.previewTabColorPalettePopup()
-            .its('0.contentDocument.body').should('not.be.empty')
-            .within(() => {
-                cy.get('div[title="Colors"]')
-                    .last()
-                    .find(`[title="${color}"]`)
-                    .last()
-                    .click();
-            });
-    },
-
-    verifyUndoAndRedoFunctionality: (toolbarOption, orignalText, formattedText) => {
-        essayResponsePage.previewTabToolbarOption('Undo (Ctrl+Z)')
-            .click();
-        if (toolbarOption == 'Background Color' || toolbarOption == 'Text Color') {
-            essayResponsePage.previewTabToolbarOption(toolbarOption)
-                .should('have.attr', 'aria-expanded', 'false');
-        } else {
-            essayResponsePage.previewTabToolbarOption(toolbarOption)
-                .should('have.attr', 'aria-pressed', 'false');
-        };
-        essayResponsePage.responseField()
-            .verifyInnerHTML(orignalText);
-        essayResponsePage.previewTabToolbarOption('Redo (Ctrl+Y)')
-            .click();
-        if (toolbarOption == 'Background Color' || toolbarOption == 'Text Color') {
-            essayResponsePage.previewTabToolbarOption(toolbarOption)
-                .should('have.attr', 'aria-expanded', 'true');
-        } else if (toolbarOption == 'Insert Horizontal Line' || toolbarOption == 'Code Editor' || toolbarOption == 'Increase Indent' || toolbarOption == 'Decrease Indent' || toolbarOption == 'Remove Format') {
-            essayResponsePage.previewTabToolbarOption(toolbarOption)
-                .should('have.attr', 'aria-pressed', 'false');
-        } else {
-            essayResponsePage.previewTabToolbarOption(toolbarOption)
-                .should('have.attr', 'aria-pressed', 'true');
-        };
-        essayResponsePage.responseField()
-            .verifyInnerHTML(formattedText);
-    },
-
     /**
      * @description this function verifies value in input field of hyperlink dialog box URL input value
      * @param {string} inputValue value in the input field
@@ -1060,6 +956,7 @@ const tests = {
     ...autoScoredScoringPreviewTab.tests,
     ...commonComponents.tests,
     ...customizeSpecialCharacterComponent.tests,
+    ...essayResponseCommonComponents.tests,
 
     /**
      * insert equation and verify input field content and word count
@@ -1074,165 +971,6 @@ const tests = {
         });
     },
 
-    verifyUndoAndRedoFunctionalityForPreviewTabToolbarOption: (toolbarOption) => {
-        it(`When the user enters text in the response field, selects the text and selects the ${toolbarOption} toolbar option and clicks on the \'Undo\' toolbar option, then it should undo the latest action and when the user clicks on the \'Redo\' toolbar option, then it should redo the latest action`, () => {
-            essayResponsePage.steps.resetPreviewTabResponseField();
-            essayResponsePage.responseField()
-                .type('Lorem Ipsum');
-            if (toolbarOption == 'Decrease Indent') {
-                essayResponsePage.previewTabToolbarOption('Increase Indent')
-                    .click();
-            } else if (toolbarOption == 'Remove Format') {
-                essayResponsePage.responseField()
-                    .type('{selectAll}');
-                essayResponsePage.steps.selectPreviewTabToolbarOption('Bold (Ctrl+B)');
-            };
-            essayResponsePage.responseField()
-                .then(($originalText) => {
-                    originalText = $originalText[0].innerHTML
-                    essayResponsePage.responseField()
-                        .type('{selectAll}');
-                    if (toolbarOption == 'Background Color' || toolbarOption == 'Text Color') {
-                        essayResponsePage.previewTabToolbarOption(toolbarOption)
-                            .click();
-                        essayResponsePage.steps.selectColorFromPopup('Strong Cyan');
-                    } else {
-                        essayResponsePage.steps.selectPreviewTabToolbarOption(toolbarOption);
-                    };
-                    essayResponsePage.responseField()
-                        .then(($formattedText) => {
-                            formattedText = $formattedText[0].innerHTML
-                            essayResponsePage.steps.verifyUndoAndRedoFunctionality(toolbarOption, originalText, formattedText);
-                        });
-                });
-        });
-    },
-
-    verifySpecialOrMathCharactersPopup: (popupType) => {
-        it(`${specialOrMathCharacters[popupType].popupTitle} option should be displayed in the preview tab toolbar`, () => {
-            essayResponsePage.previewTabToolbarOption(`${specialOrMathCharacters[popupType].popupTitle}`)
-                .should('be.visible');
-        });
-
-        it(`When user clicks on ${specialOrMathCharacters[popupType].popupTitle} option in the toolbar, then the ${specialOrMathCharacters[popupType].popupTitle} popup should appear`, () => {
-            essayResponsePage.previewTabToolbarOption(`${specialOrMathCharacters[popupType].popupTitle}`)
-                .click();
-            essayResponsePage.specialAndMathCharacterPopup()
-                .should('be.visible');
-        });
-
-        it(`When the ${specialOrMathCharacters[popupType].popupTitle} popup has appeared, the first symbol should be in focus`, () => {
-            essayResponsePage.specialAndMathCharacterPopupSymbolsWrapper()
-                .eq(0)
-                .should('have.css', 'background-color', css.color.focusedSpecialCharacterSymbol);
-        });
-
-        it(`CSS of ${specialOrMathCharacters[popupType].popupTitle} popup`, { tags: 'css' }, () => {
-            essayResponsePage.specialAndMathCharacterPopupTitle()
-                .verifyCSS(css.color.questionHeading, css.fontSize.heading, css.fontWeight.bold);
-            essayResponsePage.specialAndMathCharacterPopupSymbols()
-                .each(($element) => {
-                    cy.wrap($element)
-                        .find('.img_special_char')
-                        .verifyPseudoClassBeforeProperty('color', css.color.specialCharacterSymbol);
-                });
-        });
-
-        it(`Accessibility of ${specialOrMathCharacters[popupType].popupTitle} popup`, { tags: 'a11y' }, () => {
-            cy.checkAccessibility(essayResponsePage.specialAndMathCharacterPopup());
-        });
-
-        it(`Title of the popup should be ${specialOrMathCharacters[popupType].popupTitle}`, () => { //TODO: Need to update this after DOM structure update.
-            essayResponsePage.specialAndMathCharacterPopupTitle()
-                .then(($title) => {
-                    const fullTitle = $title.text()
-                    const properTitle = fullTitle.replace('Close', '');
-                    expect(specialOrMathCharacters[popupType].popupTitle).to.deep.eq(properTitle);
-                });
-        });
-
-        it(`All the ${specialOrMathCharacters[popupType].popupTitle} symbols should be displayed in the popup`, () => {
-            let symbolsArray = Object.values(specialOrMathCharacters[popupType].characters);
-            essayResponsePage.specialAndMathCharacterPopupSymbolsWrapper()
-                .each(($element, count) => {
-                    cy.wrap($element)
-                        .should('be.visible')
-                        .find('.img_special_char span')
-                        .verifyInnerText(symbolsArray[count].symbol);
-                });
-            essayResponsePage.specialAndMathCharacterPopupSymbols()
-                .each(($element, count) => {
-                    cy.wrap($element)
-                        .should('have.attr', 'Title', symbolsArray[count].title);
-                });
-        });
-
-        it('\'Close\' button should be displayed in the popup and when user clicks on it then the popup should close.', () => {
-            essayResponsePage.specialAndMathCharacterPopupCloseButton()
-                .should('be.visible')
-                .click();
-            essayResponsePage.specialAndMathCharacterPopup()
-                .should('not.be.visible');
-        });
-    },
-
-    addSpecialOrMathCharactersToResponseField: (popupType) => {
-        it(`When user clicks on a symbol in the ${specialOrMathCharacters[popupType].popupTitle} popup, then that symbol should be inserted in the response field`, () => {
-            cy.log('Clicking on all symbols.');
-            let symbolsString = specialOrMathCharacters[popupType].characters.map((icon) => icon.symbol);
-            symbolsString = symbolsString.join('');
-            symbolsString = symbolsString.concat('\n');
-            essayResponsePage.specialAndMathCharacterPopupSymbols()
-                .each(($element) => {
-                    cy.wrap($element)
-                        .click();
-                });
-            essayResponsePage.specialAndMathCharacterPopupCloseButton()
-                .click();
-            essayResponsePage.responseField()
-                .verifyInnerText(symbolsString);
-        });
-
-        it(`When the user selects the added ${specialOrMathCharacters[popupType].popupTitle} symbols and clicks on any formatting option, then the formatting should be applied to the displayed special characters`, () => {
-            let symbolsString = specialOrMathCharacters[popupType].characters.map((icon) => icon.symbol);
-            symbolsString = symbolsString.join('');
-            essayResponsePage.responseField()
-                .type('{selectAll}');
-            essayResponsePage.previewTabToolbarOption('Bold (Ctrl+B)')
-                .click();
-            essayResponsePage.responseField()
-                .verifyInnerHTML(`<p><strong>${symbolsString}</strong><br></p>`);
-        });
-
-        it(`When user adds ${specialOrMathCharacters[popupType].popupTitle} symbols to the response field, then the word count should increase accordingly`, () => {
-            essayResponsePage.responseFieldWordCount()
-                .verifyInnerText('1/10000');
-            cy.log('Adding a space and inserting more symbols in the response field.');
-            essayResponsePage.responseField()
-                .click()
-                .type('  ');
-            essayResponsePage.previewTabToolbarOption(`${specialOrMathCharacters[popupType].popupTitle}`)
-                .click();
-            essayResponsePage.specialAndMathCharacterPopupSymbols()
-                .eq(0)
-                .click();
-            essayResponsePage.specialAndMathCharacterPopupCloseButton()
-                .click();
-            essayResponsePage.responseFieldWordCount()
-                .verifyInnerText('2/10000');
-        });
-
-        it(`CSS of the added ${specialOrMathCharacters[popupType].popupTitle} symbols`, { tags: 'css' }, () => {
-            essayResponsePage.responseField()
-                .find('p')
-                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
-        });
-
-        it(`Accessibility of the added ${specialOrMathCharacters[popupType].popupTitle} symbols`, { tags: 'a11y' }, () => {
-            cy.checkAccessibility(essayResponsePage.responseField());
-        });
-    },
-
     verifyEquationEditorFlyoutSymbolCategoriesFunctionality: (categoryName, wordCount) => {
         let symbols = Object.values(equationEditorCategoriesAndSymbols[categoryName].symbols)
         let mappedArr = symbols.map(x => x.displayText)
@@ -1261,7 +999,6 @@ export const essayResponsePage = {
     ...selectors,
     ...tableDialogBox,
     ...hyperlinkDialogBox,
-    ...specialAndMathCharacters,
     steps,
     tests
 }