itemengine-cypress-automation 1.0.105 → 1.0.107

package/cypress/pages/essayResponsePage.js

@@ -1,8 +1,8 @@
 import { equationEditorCategoriesAndSymbols } from "../fixtures/equationEditorCategoriesAndSymbols ";
-import { questionInstructionsComponent, scoringSectionBaseEditTab, createQuestionBasePage, additionalSettingsPanel, autoScoredScoringPreviewTab, commonComponents, createCustomCategoryFlyout } from "./components";
+import { questionInstructionsComponent, scoringSectionBaseEditTab, createQuestionBasePage, additionalSettingsPanel, autoScoredScoringPreviewTab, commonComponents, createCustomCategoryFlyout, customizeSpecialCharacterComponent } from "./components";
 import { equationEditorFlyout } from "./components/equationEditorFlyout";
+import { dialogBoxBase } from "../pages/dialogBoxBase";
 import { essayResponseCommonComponents } from "./components/essayResponseCommonComponents";
-import { specialOrMathCharacters } from "../fixtures/specialAndMathCharacters";
 import utilities from "../support/helpers/utilities";
 const css = Cypress.env('css');
 
@@ -17,6 +17,8 @@ const selectors = {
     ...questionInstructionsComponent,
     ...essayResponseCommonComponents,
     ...commonComponents,
+    ...customizeSpecialCharacterComponent,
+    ...dialogBoxBase,
     //Basic section
     displayWordLimitLabel: () => cy.get('#Display-word-limit-dropdown-label'),
     displayWordLimitDropdown: () => cy.get('#Display-word-limit-select'),
@@ -37,6 +39,14 @@ const selectors = {
     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"]'),
+    specialCharactersPopupCharactersCategoryWrapper: () => cy.get('.special-character-accordion'),
+    specialCharactersPopupCharacterSymbol: () => cy.get('.characters-button'),
+    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'),
@@ -114,8 +124,8 @@ const hyperlinkDialogBox = {
     hyperlinkDialogboxURLLabel: () => essayResponsePage.hyperlinkDialogBox().find('.cke_dialog_ui_labeled_label').eq(1),
     hyperlinkDialogboxDisplayTextInputField: () => essayResponsePage.hyperlinkDialogBox().find('input[class*="cke_dialog_ui_input_text"]').eq(0),
     hyperlinkDialogboxURLInputField: () => essayResponsePage.hyperlinkDialogBox().find('input[class*="cke_dialog_ui_input_text"]').eq(1),
-    hyperlinkDialogboxButtonOk: () => essayResponsePage.hyperlinkDialogBox().find('a[title="OK"]'),
-    hyperlinkDialogboxButtonCancel: () => essayResponsePage.hyperlinkDialogBox().find('a[title="Cancel"]'),
+    hyperlinkDialogboxButtonOk: () => cy.get('.action-button-wrapper [role="button"]').eq(1),
+    hyperlinkDialogboxButtonCancel: () => cy.get('.action-button-wrapper [role="button"]').eq(0),
     previewInputFieldHyperlinkText: () => cy.get('div[title="Enter your response to the question here."] a'),
 }
 
@@ -133,6 +143,92 @@ const steps = {
     ...scoringSectionBaseEditTab.steps,
     ...additionalSettingsPanel.steps,
     ...essayResponseCommonComponents.steps,
+    ...customizeSpecialCharacterComponent.steps,
+    ...dialogBoxBase.steps,
+
+    clickOnSpecialCharactersPopupCloseButton: () => {
+        essayResponsePage.specialCharactersPopupCloseButton()
+            .click();
+    },
+
+    /**
+    * @description verify special characters popup category accordion is expanded
+    * @param {number} index index of category 
+    */
+    verifySpecialCharactersPopupCategoryAccordionIsExpanded: (index) => {
+        essayResponsePage.specialCharactersPopupCategoryTitle()
+            .eq(index)
+            .within(($el) => {
+                cy.wrap($el)
+                    .parents('.ngie-accordion-summary')
+                    .should('have.attr', 'aria-expanded', 'true');
+            });
+        utilities.verifyElementVisibilityState(essayResponsePage.specialCharactersPopupCharactersCategoryWrapper().eq(index), 'exist');
+    },
+
+    /**
+    * @description Verify symbols displayed in for a category in special characters popup
+    * @param {number} categoryIndex Index of the category
+    * @param {string[]} categorySymbolsArray Array of the symbols of the category
+    */
+    verifySpecialCharactersPopupCategorySymbols: (categoryIndex, categorySymbolsArray) => {
+        essayResponsePage.specialCharactersPopupCharactersCategoryWrapper()
+            .eq(categoryIndex)
+            .within(() => {
+                categorySymbolsArray[index].forEach((symbolARIALabel, index) => {
+                    essayResponsePage.specialCharactersPopupCharacterSymbol()
+                        .eq(index)
+                        .find('svg')
+                        .should('have.attr', 'aria-label', `${symbolARIALabel}`);
+                });
+            });
+    },
+
+    /**
+    * @description Click on a symbol in characters popup
+    * @param {string} ariaLabel Aria-label of the symbol 
+    */
+    clickOnCharacterPopupSymbol: (ariaLabel) => {
+        essayResponsePage.specialCharactersPopupCharacterSymbol()
+            .find(`svg[aria-label="${ariaLabel}"]`)
+            .click();
+    },
+
+    /**
+     * @description Verify the displayed categories and their accordions in special characters popup
+     * @param {object[]} categoryListArray Array of special characters categories
+     */
+    verifySpecialCharactersPopupCategoryTitlesAndAccordions: (categoryListArray) => {
+        categoryListArray.forEach((category, index) => {
+            utilities.verifyInnerText(essayResponsePage.specialCharactersPopupCategoryTitle().eq(index), `${category.categoryName}`);
+            utilities.verifyElementVisibilityState(essayResponsePage.specialCharactersPopupCategoryTitle().eq(index), 'exist');
+            utilities.verifyElementVisibilityState(essayResponsePage.specialCharactersPopupCategoryAccordionIcon().eq(index), 'exist');
+        });
+    },
+
+    /**
+     * @description click on special characters popup category accordion
+     * @param {number} index index of category 
+     */
+    clickOnSpecialCharactersCategoryAccordion: (index) => {
+        essayResponsePage.specialCharactersPopupCategoryAccordionIcon()
+            .eq(index)
+            .click();
+    },
+
+    /**
+     * @description verify special characters popup category accordion is collapsed
+     * @param {number} index index of category 
+     */
+    verifySpecialCharactersPopupCategoryAccordionIsCollapsed: (index) => {
+        essayResponsePage.specialCharactersPopupCategoryTitle()
+            .eq(index)
+            .within(($el) => {
+                cy.wrap($el)
+                    .parents('.ngie-accordion-summary')
+                    .should('have.attr', 'aria-expanded', 'false');
+            });
+    },
 
     checkDisplayWordCountCheckbox: () => {
         essayResponsePage.displayWordCountCheckbox()
@@ -378,7 +474,7 @@ const steps = {
      * @param {number} numberOfStandardCells number of standard cells in the added table
      * @param {number} numberOfHeaderCells number of header cells in the added table
      */
-    verifyTableProperties: (numberOfRows, numberOfStandardCells, numberOfHeaderCells=null) => {
+    verifyTableProperties: (numberOfRows, numberOfStandardCells, numberOfHeaderCells = null) => {
         essayResponsePage.previewInputFieldTable()
             .within(() => {
                 utilities.verifyElementCount(essayResponsePage.tableRow(), numberOfRows);
@@ -807,6 +903,15 @@ const steps = {
         });
     },
 
+    /**
+     * 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) => {
         formattingOptionArray.forEach((formattingOption) => {
             essayResponsePage.customizeFormattingOptionsTiles(formattingOption)
@@ -869,6 +974,81 @@ const steps = {
         };
         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
+     */
+    verifyHyperlinkDialogBoxURLInputValue: (inputValue) => {
+        essayResponsePage.hyperlinkDialogboxURLInputField()
+            .and('have.value', inputValue);
+    },
+
+    clearHyperlinkDialogBoxURLInputField: () => {
+        essayResponsePage.hyperlinkDialogboxURLInputField()
+            .clear();
+    },
+
+    /**
+     * @description this function enters input in the field of hyperlink dialog box URL input field
+     * @param {string} text enter text in the input field
+     */
+    enterTextInHyperlinkDialogBoxURLInputField: (text) => {
+        essayResponsePage.hyperlinkDialogboxURLInputField()
+            .type(text);
+    },
+
+    /**
+    * @description this function verifies value in input field of hyperlink dialog box display text
+    * @param {string} inputValue value in the input field
+    */
+    verifyHyperlinkDialogBoxDisplayTextInputValue: (inputValue) => {
+        essayResponsePage.hyperlinkDialogboxDisplayTextInputField()
+            .and('have.value', inputValue);
+    },
+
+    clearHyperlinkDialogBoxDisplayTextInputField: () => {
+        essayResponsePage.hyperlinkDialogboxDisplayTextInputField()
+            .clear();
+    },
+
+    /**
+     * @description this function enters input in the field of hyperlink dialog box display text
+     * @param {string} text enter text in the input field
+     */
+    enterTextInHyperlinkDialogboxDisplayTextInputField: (text) => {
+        essayResponsePage.hyperlinkDialogboxDisplayTextInputField()
+            .type(text);
+    },
+
+    clickOnHyperLinkDialogBoxCancelButton: () => {
+        essayResponsePage.hyperlinkDialogboxButtonCancel()
+            .click();
+    },
+
+    clickOnHyperLinkDialogBoxOkButton: () => {
+        essayResponsePage.hyperlinkDialogboxButtonOk()
+            .click();
+    },
+
+    /**
+     * This function verifies the href attribute
+     * @param {string} attr of the hyperlink input field
+     */
+    verifyHyperlinkPreviewInputTextAttr: (attr) => {
+        essayResponsePage.previewInputFieldHyperlinkText()
+            .should('have.attr', 'href', attr);
+    },
+
+    rightClickHyperlinkText: () => {
+        essayResponsePage.previewInputFieldHyperlinkText()
+            .rightclick();
+    },
+
+    dblClickHyperlinkText: () => {
+        essayResponsePage.previewInputFieldHyperlinkText()
+            .dblclick();
     }
 }
 
@@ -879,6 +1059,7 @@ const tests = {
     ...scoringSectionBaseEditTab.tests,
     ...autoScoredScoringPreviewTab.tests,
     ...commonComponents.tests,
+    ...customizeSpecialCharacterComponent.tests,
 
     /**
      * insert equation and verify input field content and word count
@@ -1067,8 +1248,7 @@ const tests = {
                 });
             //The equation editor input Field equation is not checked.
         });
-
-        equationEditorFlyout.tests.verifyCSSAnda11yOfEquationEditorInputField(categoryName)
+        equationEditorFlyout.tests.verifyCSSAnda11yOfEquationEditorInputField(categoryName);
         if (categoryName === 'keypad') {
             essayResponsePage.tests.insertEquationAndVerifyInputFieldContentsAndWordCount(`1234567890·,+−×÷`, wordCount);
         } else {

package/cypress/pages/fillInTheGapsOverImageDragAndDropPage.js

@@ -54,7 +54,9 @@ const selectors = {
     specifyPointsForEachIncorrectDropzoneRadioButton: () => cy.get('input[aria-label*="Specify points for each incorrect"]'),
     textAreaImageCanvas: () => cy.get('.drag-and-drop-canvas textarea'),
     textAreaPreviewTab: () => cy.get('.drag-and-drop-layout-wrapper textarea'),
-    penaltyPointsForEachIncorrectDropzoneInputField: () => cy.get('input[aria-label="Penalty points for each incorrect dropzone"]')
+    penaltyPointsForEachIncorrectDropzoneInputField: () => cy.get('input[aria-label="Penalty points for each incorrect dropzone"]'),
+    dropzonePointerInPreviewTab: () => cy.get('.preview-content-wrapper [class*="PointerWrapper"]'),
+    canvasInPreviewTab: () => cy.get('[class*="PreviewTabstyles__ContentWrapper"] [class*="Canvasstyle__DragAndDropCanvas"]'),
 }
 
 const steps = {
@@ -85,6 +87,7 @@ const steps = {
     ...opacityComponent.steps,
     ...imageActionsComponent.steps,
     ...colorPopupComponent.steps,
+
     /**
     * @description Verifies the text content of a specific preview tab dropzone element.
     * @param {number} count - The index of the preview tab dropzone element to verify (zero-based).
@@ -499,18 +502,6 @@ const steps = {
             });
     },
 
-    /**
-     * @param {string} text text to be entered in the text area
-     * @description this function adds input to the text area
-     */
-    enterTextInTextArea: (text) => {
-        fillInTheGapsOverImageDragAndDropPage.textAreaImageCanvas()
-            .type(text)
-            .blur();
-        fillInTheGapsOverImageDragAndDropPage.textAreaImageCanvas()
-            .should('have.text', text);
-    },
-
     /**
      * @param {string} text text to be verified in the preview tab text area
      * @description this function verifies input in the text area
@@ -549,7 +540,77 @@ const steps = {
     */
     verifyDropzoneCountInSpecifyCorrectAnswerSection: (count) => {
         utilities.verifyElementCount(fillInTheGapsOverImageDragAndDropPage.dropzoneWrapperSpecifyCorrectAnswerSection(), count);
-    }
+    },
+
+    verifyDropzonePointerStyleInPreviewTab: (style, dropzoneIndex) => {
+        const getPosition = (option) => {
+            switch (option) {
+                case 'Bottom':
+                    return { top: '-31.5px', left: '-37.5px' };
+                case 'Bottom right':
+                    return { top: '-25px', left: '-40px' };
+                case 'Right':
+                    return { top: '-21px', left: '-36.5px' };
+                case 'Top right':
+                    return { top: '-19px', left: '-31px' };
+                case 'Top':
+                    return { top: '-22.5px', left: '-25.5px' };
+                case 'Top left':
+                    return { top: '-27px', left: '-24px' };
+                case 'Left':
+                    return { bottom: '-20px', left: '-27px' };
+                case 'Bottom left':
+                    return { bottom: '-18px', left: '-32px' };
+            }
+        }
+        const expectedPosition = getPosition(style);
+        if (style == 'Left' || style == 'Bottom left') {
+            fillInTheGapsOverImageDragAndDropPage.dropzonePointerInPreviewTab()
+                .eq(dropzoneIndex)
+                .should('have.css', 'bottom', expectedPosition.bottom)
+                .and('have.css', 'left', expectedPosition.left);
+        }
+        else if (style == 'None') {
+            fillInTheGapsOverImageDragAndDropPage.dropzonePointerInPreviewTab()
+                .eq(dropzoneIndex)
+                .should('not.have.css', 'bottom')
+                .and('not.have.css', 'left');
+        }
+        else {
+           fillInTheGapsOverImageDragAndDropPage.dropzonePointerInPreviewTab()
+                .eq(dropzoneIndex)
+                .should('have.css', 'top', expectedPosition.top)
+                .and('have.css', 'left', expectedPosition.left);
+        }
+    },
+
+    /**
+     * @param {*} width width of canvas
+     * @description this function verifies width of canvas
+     */
+    verifyCanvasWidthInPreviewTab: (width) => {
+        fillInTheGapsOverImageDragAndDropPage.canvasInPreviewTab()
+           .should('have.attr', 'width', width);
+   },
+
+   /**
+    * @param {*} height height of canvas
+    * @description this function verifies height of canvas
+    */
+   verifyCanvasHeightInPreviewTab: (height) => {
+        fillInTheGapsOverImageDragAndDropPage.canvasInPreviewTab()
+           .should('have.css', 'height', `${height}px`);
+   },
+
+
+    verifyDropzoneNotExistInPreviewTab: () => {
+        utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.dropzonePreviewTab(), 'notExist');
+    },
+
+    verifyDropzoneExistInPreviewTab: () => {
+        fillInTheGapsOverImageDragAndDropPage.dropzonePreviewTab()
+            .should('be.visible');
+    },
 }
 
 const tests = {
@@ -571,6 +632,9 @@ const tests = {
     ...additionalSettingsPanel.tests,
     ...colorPopupComponent.tests,
     ...opacityComponent.tests,
+    ...backgroundImageUploadComponent.tests,
+    ...figOverImageCanvasComponent.tests,
+
     verifyContentsOfSpecifyCorrectAnswerSection: () => {
         it('When user selects a scoring type then in the \'Correct\' accordion, all the contents should be displayed', () => {
             utilities.verifyElementCount(fillInTheGapsOverImageDragAndDropPage.dropzoneSpecifyCorrectAnswerSection(), 3);