itemengine-cypress-automation 1.0.157 → 1.0.158

package/cypress/pages/matchingPage.js

@@ -16,16 +16,25 @@ const selectors = {
     ...draggableOptionContainer,
     //Edit tab
     promptInputField: () => cy.get('.edit-mcq-stems-wrapper [role="textbox"]'),
-    promptInputFieldWrapper: () => cy.get('.edit-mcq-stems-wrapper [class*="SingleOptionstyle__EditorBlockWrapper"]'),
-    optionInputField: () => cy.get('.edit-mcq-options-wrapper').eq(1).find('[data-rbd-draggable-id*="option-draggable"] [role="textbox"]'),
-    optionWrapper: () => cy.get('.response-options-wrapper [data-rbd-draggable-id*="option-draggable"]'),
-    optionNumeration: () => cy.get('.response-options-wrapper [class*="SingleOptionstyle__AdornmentDiv"]'),
+    promptInputFieldWrapper: () => cy.get('.edit-mcq-stems-wrapper .edit-mcq-option-wrapper'),
+    optionInputField: () => cy.get('.edit-mcq-options-wrapper [data-rbd-draggable-id*="option-draggable"] [role="textbox"]'),
+    promptNumeration: () => cy.get('[class*="SingleOptionstyle__AdornmentDiv"]'),
+    promptLabel: () => cy.get('.match-list-stem-label'),
+    promptHeaderLabel: () => cy.get('.prompt-header-container [class*="InlineTextFieldWithDebouncestyles__PropertyLabel"]'),
+    promptHeaderInputField: () => cy.get('.prompt-header-container input'),
+    promptHeaderSpecifyCorrectAnswerSection: () => cy.get('.MuiAccordion-region [class*="ClozeWithDragAndDropstyles__HeaderContainer"]').eq(0),
+    promptHeaderPreviewTab: () => cy.get('.preview-container [class*="ClozeWithDragAndDropstyles__HeaderContainer"]').eq(0),
+    dropzoneColumnHeaderLabel: () => cy.get('.response-header-container .text-label'),
+    dropzoneColumnHeaderInputField: () => cy.get('.response-header-container input'),
+    dropzoneColumnHeaderSpecifyCorrectAnswerSection: () => cy.get('.MuiAccordion-region [class*="ClozeWithDragAndDropstyles__HeaderContainer"]').eq(1),
+    dropzoneColumnHeaderPreviewTab: () => cy.get('.preview-container [class*="ClozeWithDragAndDropstyles__HeaderContainer"]').eq(1),
+    dropzoneColumnAndPromptHeaderWrapperSpecifyCorrectAnswerSection: () => cy.get('.correct-answer-accordion [class*="ClozeWithDragAndDropstyles__ResponseHeaderWrapper"]'),
     //Specify correct answer section
     dropzoneSpecifyCorrectAnswerSection: () => cy.get('.authoring-droppable-hotspot-wrapper'),
     optionContainerOptionsSpecifyCorrectAnswerSection: () => cy.get('.draggable-selected-item'),
     optionsLabel: () => cy.get('.cloze-with-drag-and-drop-options-label'),
     addPromptButton: () => cy.get('.add-option-wrapper-cls button').contains('Add prompt'),
-    deletePromptButton: () => cy.get('.edit-mcq-stems-wrapper [type="button"]'),
+    deletePromptButton: () => cy.get('[aria-label*="Delete prompt "]'),
     optionsLabel: () => cy.get('.cloze-with-drag-and-drop-options-label'),
     optionWrapper: () => cy.get('.response-options-wrapper [data-rbd-draggable-id*="option-draggable"]'),
     optionNumeration: () => cy.get('.response-options-wrapper [class*="SingleOptionstyle__AdornmentDiv"]'),
@@ -38,19 +47,20 @@ const selectors = {
 
     //Specify correct answer section
     dropzoneSpecifyCorrectAnswerSection: () => cy.get('.authoring-droppable-hotspot-wrapper'),
-    promptSpecifyCorrectAnswerSection: () => cy.get('.stem-container [data-testid="question-instruction-element"]'),
+    promptSpecifyCorrectAnswerSection: () => cy.get('.stem-container [data-testid="question-instruction-element"]:visible'),
     dropzoneSpecifyCorrectAnswerSection: () => cy.get('.authoring-droppable-hotspot-wrapper'),
     optionContainerOptionsSpecifyCorrectAnswerSection: () => cy.get('.draggable-selected-item'),
 
     //Preview tab
-    promptContainerPreviewTab: () => cy.get('.stem-container'),
+    promptContainerPreviewTab: () => cy.get('.stem-container:visible'),
     dropzonePreviewTab: () => cy.get('.cloze-with-drag-and-drop-preview [class*="MultipleDroppableHotspotstyle__DroppableHotspotWrapper"]'),
     dropzoneOptionPreviewTab: () => cy.get('[class*="MultipleDroppedItemstyles__FlexWrapper"]'),
     dropzoneNumeration: () => cy.get('[class*="NumerationDiv"]'),
     correctAnswersNumeration: () => cy.get('.answer-numeration-number-box'),
     correctAnswersOptions: () => cy.get('.match-list-drag-and-drop .question-text-wrapper'),
     correctAnswersOptionContainer: () => cy.get('.draggable-selected-option'),
-    correctIncorrectAnswerLabel: () => cy.get('[class*="AnswerStatusText"]')
+    correctIncorrectAnswerLabel: () => cy.get('[class*="AnswerStatusText"]'),
+    dropzoneColumnAndPromptHeaderWrapperPreviewTab: () => cy.get('.edit-question-preview-wrapper [class*="ClozeWithDragAndDropstyles__ResponseHeaderWrapper"]')
 }
 
 const steps = {
@@ -88,6 +98,45 @@ const steps = {
             .click();
     },
 
+    /**
+     * @param {number} index of the prompt
+     * @description verify the enter prompt input field, drag handle, delete button and prompt numeration
+     */
+    verifyPromptContents: (index) => {
+        matchingPage.promptInputFieldWrapper()
+            .eq(index)
+            .within(() => {
+                utilities.verifyElementVisibilityState(commonComponents.dragHandleButton(), 'exist');
+                utilities.verifyElementVisibilityState(matchingPage.deletePromptButton(), 'visible');
+                matchingPage.promptNumeration()
+                    .should('have.text', index + 1);
+            });
+        matchingPage.promptInputField()
+            .eq(index)
+            .should('have.attr', 'data-cke-editorplaceholder', 'Enter prompt');
+    },
+
+    /**
+     * @param {number} index of the prompt input field
+     * @description focus in and focus out of the prompt input field
+     */
+    focusInAndFocusOutOfPromptInputField: (index) => {
+        matchingPage.promptInputField()
+            .eq(index)
+            .click()
+            .blur();
+    },
+
+    verifyTooltipText: (element, text, index = 0) => {
+        element()
+            .eq(index)
+            .trigger('mouseover', { force: true });
+        utilities.verifyInnerText(commonComponents.tooltipText(), text);
+        element()
+            .eq(index)
+            .trigger('mouseout', { force: true });
+    },
+
     /**
     * Enters text into multiple prompt input fields.
     * @param {string[]} promptTextArray - Array of text to enter into the prompt input fields.
@@ -97,11 +146,21 @@ const steps = {
             matchingPage.promptInputField()
                 .eq(index)
                 .clear()
-                .type(promptText)
+                .type(promptText, { delay: 500 })
                 .should('have.text', promptText);
         });
     },
 
+    /**
+    * @param {number} index Index of prompt input field
+    * @description Clear input given to prompt input field
+    */
+    clearPromptInputField: (index) => {
+        matchingPage.promptInputField()
+            .eq(index)
+            .clear();
+    },
+
     /**
      * This function enters text in an option
      * @param {number} index of prompt
@@ -722,6 +781,102 @@ const steps = {
         }
         steps.enterTextInOptionInputField(optionArray);
     },
+
+    /**
+  * Verifies the prompt container content in the preview tab.
+  * @param {Object[]} optionsArray - Array of objects containing index and optionText.
+  * @param {number} optionsArray[].index - The index of the prompt container element.
+  * @param {string} optionsArray[].optionText - The expected text to verify against the prompt container element.
+  */
+    verifyPromptContainerPreviewTab: (optionsArray) => {
+        optionsArray.forEach(({ index, optionText }) => {
+            utilities.verifyInnerText(utilities.getNthElement(matchingPage.promptContainerPreviewTab(), index), optionText);
+        });
+    },
+
+    /**
+     * Enters text into the prompt header input field.
+     * @param {string} text - The text to enter into the prompt header input field.
+     */
+    enterTextInPromptHeaderInputField: (text) => {
+        matchingPage.promptHeaderInputField()
+            .clear()
+            .type(text)
+            .blur();
+    },
+
+    clearAndFocusOutOfPromptHeaderInputField: () => {
+        matchingPage.promptHeaderInputField()
+            .clear()
+            .blur()
+    },
+
+    /**
+     * Verifies the text in the prompt header input field.
+     * @param {string} text - The expected text to verify against the prompt header input field.
+     */
+    verifyTextInPromptHeaderInputField: (text) => {
+        matchingPage.promptHeaderInputField()
+            .should('have.value', text);
+    },
+
+    /**
+     * Verifies the prompt header text in the Specify Correct Answer section.
+     * @param {string} text - The expected text to verify against the prompt header.
+     */
+    verifyPromptHeaderTextSpecifyCorrectAnswerSection: (text) => {
+        utilities.verifyInnerText(matchingPage.promptHeaderSpecifyCorrectAnswerSection(), text);
+    },
+
+    /**
+     * Verifies the prompt header text in the Preview Tab.
+     * @param {string} text - The expected text to verify against the prompt header.
+     */
+    verifyPromptHeaderTextPreviewTab: (text) => {
+        utilities.verifyInnerText(matchingPage.promptHeaderPreviewTab(), text);
+    },
+
+    /**
+     * Enters text into the dropzone column header input field.
+     * @param {string} text - The text to enter into the dropzone column header input field.
+     */
+    enterTextInDropzoneColumnHeaderInputField: (text) => {
+        matchingPage.dropzoneColumnHeaderInputField()
+            .clear()
+            .type(text)
+            .blur();
+    },
+
+    clearAndFocusOutOfDropzoneColumnHeaderInputField: () => {
+        matchingPage.dropzoneColumnHeaderInputField()
+            .clear()
+            .blur()
+    },
+
+    /**
+     * Verifies the text in the dropzone column header input field.
+     * @param {string} text - The expected text to verify against the dropzone column header input field.
+     */
+    verifyTextInDropzoneColumnHeaderInputField: (text) => {
+        matchingPage.dropzoneColumnHeaderInputField()
+            .should('have.value', text);
+    },
+
+    /**
+     * Verifies the dropzone column header text in the Preview Tab.
+     * @param {string} text - The expected text to verify against the dropzone column header.
+     */
+    verifyDropzoneColumnHeaderTextPreviewTab: (text) => {
+        utilities.verifyInnerText(matchingPage.dropzoneColumnHeaderPreviewTab(), text);
+    },
+
+    /**
+     * Verifies the dropzone column header text in the Specify Correct Answer section.
+     * @param {string} text - The expected text to verify against the dropzone column header.
+     */
+    verifyDropzoneColumnHeaderTextSpecifyCorrectAnswerSection: (text) => {
+        utilities.verifyInnerText(matchingPage.dropzoneColumnHeaderSpecifyCorrectAnswerSection(), text);
+    }
 }
 
 const tests = {
@@ -734,6 +889,7 @@ const tests = {
     ...createQuestionBasePage.tests,
     ...commonComponents.tests,
     ...draggableOptionsSectionComponent.tests,
+    ...questionInstructionsComponent.tests,
 
     verifyContentsOfSpecifyCorrectAnswerSection: () => {
         it('When user selects a scoring type then in the \'Correct\' accordion, all the contents should be displayed', () => {
@@ -751,7 +907,7 @@ const tests = {
             });
         });
     },
-    
+
     //Need to remove when https://redmine.zeuslearning.com/issues/566720 is resolved
     /**
      * Verifies the contents and styling of the 'Options' section.

package/cypress/pages/multipleSelectionGridPage.js

@@ -1,5 +1,5 @@
 import utilities from "../support/helpers/utilities";
-import { createQuestionBasePage, questionInstructionsComponent, gridQuestionCommonComponent, scoringSectionBaseEditTab, autoScoredScoringPreviewTab, correctIncorrectAnswerLabelComponent, autoScoredStudentViewSettings, specifyRowsAndColumnsComponent, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, studentViewSettingsLabelComponent, randomizeOptionsComponent, commonComponents } from "./components";
+import { createQuestionBasePage, questionInstructionsComponent, gridQuestionCommonComponent, scoringSectionBaseEditTab, autoScoredScoringPreviewTab, correctIncorrectAnswerLabelComponent, autoScoredStudentViewSettings, specifyRowsAndColumnsComponent, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, studentViewSettingsLabelComponent, randomizeOptionsComponent, commonComponents, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent } from "./components";
 const css = Cypress.env('css');
 
 const selectors = {
@@ -10,6 +10,8 @@ const selectors = {
     ...autoScoredScoringSectionMultiResponseType,
     ...autoScoredScoringPreviewTab,
     ...randomizeOptionsComponent,
+    ...commonComponents,
+    ...additionalSettingsPanel,
 }
 
 const steps = {
@@ -24,6 +26,8 @@ const steps = {
     ...autoScoredSpecifyCorrectAnswerSection.steps,
     ...autoScoredScoringSectionMultiResponseType.steps,
     ...randomizeOptionsComponent.steps,
+    ...commonComponents.steps,
+    ...additionalSettingsPanel.steps,
     /**
      * Modifies the property of an option cell in the grid for checkbox settings.
      * @param {Object} position - The position of the option cell.
@@ -120,6 +124,10 @@ const tests = {
     ...autoScoredStudentViewSettings.tests,
     ...studentViewSettingsLabelComponent.tests,
     ...randomizeOptionsComponent.tests,
+    ...createQuestionBasePage.tests,
+    ...commonComponents.tests,
+    ...additionalSettingsPanel.tests,
+    ...additionalSettingsAccessibilitySectionComponent.tests,
     /**
      * Verifies the contents and functionality of the 'Specify correct answer' accordion for multiple selection questions.
      * @param {{'Correct' | 'Alternative'}} accordionName - The name of the accordion to be used in the validation.
@@ -199,7 +207,7 @@ const tests = {
         it('Accessibility of \'Correct\' accordion contents', { tags: 'a11y' }, () => {
             cy.checkAccessibility(gridQuestionCommonComponent.tableCell().parents('.correct-answer-accordion'));
         });
-    },
+    }
 }
 
 export const multipleSelectionGridPage = {

package/cypress/pages/rulerPage.js

@@ -15,7 +15,7 @@ const selectors = {
     ...measuringToolComponent,
     ...opacityComponent,
     ...imageActionsComponent,
-    alternativeTextLabel: () => cy.get('.alternative-text'),
+    alternativeTextLabel: () => cy.get('[class*="Rulerstyles__AlternativeTextWrapper"] .alternative-text'),
     rotationDropdownListOption: (ariaLabel = null) => {
         if (ariaLabel) {
             return cy.get(`[aria-labelledby*="Rotation-dropdown-label"][aria-labelledby*="dropdown-label"] li[role="option"][aria-label*="${ariaLabel}"]`)
@@ -34,8 +34,7 @@ const selectors = {
         }
     },
     lengthOfRulerLabel: () => cy.get('[class*="LenghtOfRulerWrapper"] .alternative-text'),
-    lengthOfRulerDropdown: () => cy.get('#Length-of-ruler-select'),
-    lengthOfRulerDropdownListOptions: (ariaLabel = null) => {
+    lengthOfRulerOptions: (ariaLabel = null) => {
         if (ariaLabel) {
             return cy.get(`[class*="LenghtOfRulerWrapper"] [type="button"][aria-label*="${ariaLabel}"]`)
         } else {
@@ -105,12 +104,12 @@ const steps = {
     },
 
     /**
-     * @param {string[]} dropdownOptionsArray array containing options of dropdown list
+     * @param {string[]} optionsArray array containing options of dropdown list
      * @description this function is used to verify inner text of expanded dropdown list options
      */
-    verifyLengthOfRulerDropdownListOptions: (dropdownOptionsArray) => {
-        dropdownOptionsArray.forEach((option, count) => {
-            rulerPage.lengthOfRulerDropdownListOptions()
+    verifyLengthOfRulerOptions: (optionsArray) => {
+        optionsArray.forEach((option, count) => {
+            rulerPage.lengthOfRulerOptions()
                 .eq(count)
                 .should('have.text', option);
         });
@@ -120,8 +119,8 @@ const steps = {
      * @param {string} option option to be selected from the dropdown list
      * @description function selects option from expanded dropdown list
      */
-    selectOptionFromLengthOfRulerDropdown: (option) => {
-        rulerPage.lengthOfRulerDropdownListOptions(option)
+    selectOptionFromLengthOfRulerOptions: (option) => {
+        rulerPage.lengthOfRulerOptions(option)
             .click();
     },
 
@@ -256,8 +255,9 @@ const steps = {
      * @param {string} unitOfMeasurement is the length of ruler
      * @description function verifies inner text of the element
      */
-    verifyInnerTextOfLengthOfRulerDropdown: (lengthOfRuler) => {
-        utilities.verifyInnerText(rulerPage.lengthOfRulerDropdown(), lengthOfRuler);
+    verifySelectedLengthOfRulerOption: (lengthOfRuler) => {
+        rulerPage.lengthOfRulerOptions(lengthOfRuler)
+            .should('have.class', 'ngie-toggle-button-selected')
     },
 
     /**
@@ -400,7 +400,7 @@ const steps = {
 
     verifyRulerUploadedImageNotExistPreviewTab: () => {
         rulerPage.rulerUploadedImagePreviewTab()
-        .should('have.attr', 'src', '');
+            .should('have.attr', 'src', '');
     }
 }
 

package/cypress/pages/singleSelectionGridPage.js

@@ -1,5 +1,5 @@
 import utilities from "../support/helpers/utilities";
-import { createQuestionBasePage, questionInstructionsComponent, gridQuestionCommonComponent, scoringSectionBaseEditTab, ckEditorToolbar, equationEditorFlyout, autoScoredScoringPreviewTab, correctIncorrectAnswerLabelComponent, autoScoredScoringSectionMultiResponseType, autoScoredStudentViewSettings, specifyRowsAndColumnsComponent, autoScoredSpecifyCorrectAnswerSection, randomizeOptionsComponent, studentViewSettingsLabelComponent, commonComponents} from "./components";
+import { createQuestionBasePage, questionInstructionsComponent, gridQuestionCommonComponent, scoringSectionBaseEditTab, ckEditorToolbar, equationEditorFlyout, autoScoredScoringPreviewTab, correctIncorrectAnswerLabelComponent, autoScoredScoringSectionMultiResponseType, autoScoredStudentViewSettings, specifyRowsAndColumnsComponent, autoScoredSpecifyCorrectAnswerSection, randomizeOptionsComponent, studentViewSettingsLabelComponent, commonComponents, additionalSettingsPanel, additionalSettingsAccessibilitySectionComponent } from "./components";
 const css = Cypress.env('css');
 
 const selectors = {
@@ -13,6 +13,8 @@ const selectors = {
     ...autoScoredScoringSectionMultiResponseType,
     ...autoScoredSpecifyCorrectAnswerSection,
     ...randomizeOptionsComponent,
+    ...commonComponents,
+    ...additionalSettingsPanel,
 }
 
 const steps = {
@@ -29,6 +31,8 @@ const steps = {
     ...specifyRowsAndColumnsComponent.steps,
     ...autoScoredSpecifyCorrectAnswerSection.steps,
     ...randomizeOptionsComponent.steps,
+    ...commonComponents.steps,
+    ...additionalSettingsPanel.steps,
     /**
      * Modifies the property of an option cell in the grid for radio button settings.
      * @param {Object} position - The position of the option cell.
@@ -125,6 +129,10 @@ const tests = {
     ...randomizeOptionsComponent.tests,
     ...studentViewSettingsLabelComponent.tests,
     ...autoScoredStudentViewSettings.tests,
+    ...commonComponents.tests,
+    ...createQuestionBasePage.tests,
+    ...additionalSettingsPanel.tests,
+    ...additionalSettingsAccessibilitySectionComponent.tests,
     /**
      * Verifies the contents and functionality of the 'Specify correct answer' accordion for multiple selection questions.
      * @param {{'Correct' | 'Alternative'}} accordionName - The name of the accordion to be used in the validation.
@@ -180,7 +188,7 @@ const tests = {
         it(`Accessibility of ${accordionName} accordion contents`, { tags: 'a11y' }, () => {
             cy.checkAccessibility(gridQuestionCommonComponent.tableCell().parents('.correct-answer-accordion'));
         });
-    },
+    }
 }
 
 export const singleSelectionGridPage = {

package/cypress/pages/textEntryMathPage.js

@@ -1,7 +1,7 @@
 import { equationEditorCategoriesAndSymbols } from "../fixtures/equationEditorCategoriesAndSymbols ";
 import { decimalSeparator, evaluationMethods } from "../fixtures/evaluationMethodsAndCustomSettings"
 import utilities from "../support/helpers/utilities"
-import { questionInstructionsComponent, questionInputFieldComponent, createQuestionBasePage, commonComponents, additionalSettingsPanel, autoScoredSpecifyCorrectAnswerSection, scoringSectionBaseEditTab, autoScoredScoringSectionMultiResponseType, autoScoredScoringPreviewTab, equationEditorFlyout, autoScoredStudentViewSettings, correctIncorrectAnswerLabelComponent, ckEditorToolbar } from "./components"
+import { questionInstructionsComponent, questionInputFieldComponent, createQuestionBasePage, commonComponents, additionalSettingsPanel, autoScoredSpecifyCorrectAnswerSection, scoringSectionBaseEditTab, autoScoredScoringSectionMultiResponseType, autoScoredScoringPreviewTab, equationEditorFlyout, autoScoredStudentViewSettings, correctIncorrectAnswerLabelComponent, ckEditorToolbar, colorPopupComponent } from "./components"
 const css = Cypress.env('css');
 
 const selectors = {
@@ -115,6 +115,7 @@ const steps = {
     ...equationEditorFlyout.steps,
     ...correctIncorrectAnswerLabelComponent.steps,
     ...ckEditorToolbar.steps,
+    ...colorPopupComponent.steps,
 
     verifyAddStructureTabIsSelected: () => {
         textEntryMathPage.addStructureTab()

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itemengine-cypress-automation",
-  "version": "1.0.157",
+  "version": "1.0.158",
   "description": "",
   "main": "index.js",
   "scripts": {