itemengine-cypress-automation 1.0.129 → 1.0.131-smokeTestFixes6March-aa053ff.0

package/cypress/pages/fillInTheGapsDragAndDropPage.js

@@ -1,17 +1,32 @@
 import constants from "../fixtures/constants";
 import utilities from "../support/helpers/utilities";
 const css = Cypress.env('css');
-import { createQuestionBasePage, optionsWrapperComponent, autoScoredScoringPreviewTab, scoringSectionBaseEditTab, questionInputFieldComponent, fillInTheGapsDragAndDropCommonComponents, correctIncorrectAnswerLabelComponent, questionInstructionsComponent, autoScoredStudentViewSettings, ckEditorToolbar, equationEditorFlyout, draggableOptionContainer } from "./components"
+import { createQuestionBasePage, optionsWrapperComponent, autoScoredScoringPreviewTab, scoringSectionBaseEditTab, questionInputFieldComponent, fillInTheGapsDragAndDropCommonComponents, correctIncorrectAnswerLabelComponent, questionInstructionsComponent, autoScoredStudentViewSettings, ckEditorToolbar, equationEditorFlyout, draggableOptionContainer, autoScoredScoringSectionMultiResponseType, autoScoredSpecifyCorrectAnswerSection, commonComponents, draggableOptionsSectionComponent } from "./components"
 
+//TODO update option container selectors when https://redmine.zeuslearning.com/issues/563159 is resolved
 const selectors = {
     ...fillInTheGapsDragAndDropCommonComponents,
     ...questionInstructionsComponent,
     ...questionInputFieldComponent,
+    ...autoScoredScoringSectionMultiResponseType,
+    ...optionsWrapperComponent,
+    ...draggableOptionsSectionComponent,
+    ...draggableOptionContainer,
+    ...scoringSectionBaseEditTab,
+    ...commonComponents,
+    ...autoScoredScoringPreviewTab,
+    ...correctIncorrectAnswerLabelComponent,
+
     //Specify correct answer section
     dropzoneSpecifyCorrectAnswerSection: () => cy.get('[class="droppable-area"] [role="button"]'),
     optionContainerOptionsSpecifyCorrectAnswerSection: () => cy.get('.draggable-selected-item'),
+    optionsContainerSpecifyCorrectAnswerSection: () => cy.get('.draggable-wrapper'), addAlternateButtonSpecifyCorrectAnswer: () => cy.get('.alternate-option-btn-wrapper button'),
+    alternateAnswerPopup: () => cy.get('.alternate-option-popup-wrapper'),
+    alternateAnswerPopupOptionContainer: () => cy.get('.option-container'),
+    alternateAnswerPopupSaveButton: () => cy.get('[class*="AlternateOptionstyle__ButtonWrapper"] .ngie-button').eq(1),
 
     //Preview tab
+    optionPreviewTab: () => cy.get('.draggable-selected-item'),
     questionContainerPreviewTab: () => cy.get('.question-item-container'),
     dropzonePreviewTab: () => cy.get('[class*="DroppableHotspotstyle__DroppableHotspotWrapper"]'),
     dropzoneContainerPreviewTab: () => cy.get('.answer-status-response-preview-wrapper'),
@@ -25,12 +40,19 @@ const steps = {
     ...optionsWrapperComponent.steps,
     ...scoringSectionBaseEditTab.steps,
     ...autoScoredScoringPreviewTab.steps,
-    ...fillInTheGapsDragAndDropCommonComponents.steps,
     ...correctIncorrectAnswerLabelComponent.steps,
     ...questionInstructionsComponent.steps,
     ...autoScoredStudentViewSettings.steps,
     ...ckEditorToolbar.steps,
     ...equationEditorFlyout.steps,
+    ...questionInputFieldComponent.steps,
+    ...autoScoredScoringSectionMultiResponseType.steps,
+    ...fillInTheGapsDragAndDropCommonComponents.steps,
+    ...autoScoredSpecifyCorrectAnswerSection.steps,
+    ...draggableOptionsSectionComponent.steps,
+    ...draggableOptionContainer.steps,
+    ...commonComponents.steps,
+
     /**
      * Sets options in dropzone in the Preview Tab based on the provided optionsObject.
      * @param {Object} optionsObject - An object where keys are option texts and values are dropzone indices.
@@ -195,9 +217,343 @@ const steps = {
             .eq(count)
             .contains(text);
     },
+
+    /**
+     * @description Verify text of options in option container of specify correct answer section
+     * @param {number} index index of option
+     * @param {string} optionText 
+     */
+    verifyOptionContainerOptionSpecifyCorrectAnswerSection: (index, optionText) => {
+        utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsDragAndDropPage.optionContainerOptionsSpecifyCorrectAnswerSection(), index), optionText);
+    },
+
+    /**
+     * @description Click and drop option from dropzone to option container specify correct answer section
+     * @param {string} optionText Text of the option
+     */
+    clickAndDropOptionInOptionsContainerInSpecifyCorrectAnswerSection: (optionText) => {
+        fillInTheGapsDragAndDropPage.dropzoneSpecifyCorrectAnswerSection()
+            .contains(optionText)
+            .click({ force: true });
+        fillInTheGapsDragAndDropPage.optionsContainerSpecifyCorrectAnswerSection()
+            .click();
+    },
+
+    setGroupedOptions: () => {
+        let flowers = [['Flower', 'Petals', 'Seed', 'Pollen'],
+        ['Leaflet', 'Leaves', 'Leaf', 'Green'],
+        ['Stem', 'Branch', 'Trunk', 'Tree'],
+        ['Rose', 'Lily', 'Orchid', 'Petals']
+        ];
+        let groupTitles = ['Group A', 'Group B', 'Group C', 'Group D'];
+        draggableOptionsSectionComponent.steps.expandDraggableOptionsLayoutDropdown()
+        draggableOptionsSectionComponent.steps.selectOptionFromDraggableOptionsLayoutDropdown('Grouped')
+        draggableOptionsSectionComponent.steps.addGroupTitle(groupTitles[0]);
+        optionsWrapperComponent.steps.addMultipleOptionFields(2);
+        optionsWrapperComponent.steps.addInputToOptionsInputField(flowers[0]);
+        draggableOptionsSectionComponent.steps.addGroupWithTitleAndOptionsInDraggableOptionsSection(groupTitles[1], flowers[1]);
+        draggableOptionsSectionComponent.steps.addGroupWithTitleAndOptionsInDraggableOptionsSection(groupTitles[2], flowers[2]);
+        draggableOptionsSectionComponent.steps.addGroupWithTitleAndOptionsInDraggableOptionsSection(groupTitles[3], flowers[3]);
+    },
+
+    /**
+  * Sets options in dropzone in the Preview Tab based on the provided optionsObject.
+  * @param {Object[]} responses - An array of objects containing the responseIndex, responseText and dropzone index
+  * @param {number} responses[].groupIndex - The index of the group
+  * @param {string} responses[].responseText - The text of the option
+  * @param {string} responses[].dropzoneIndex - The index of the dropzone
+  */
+    clickAndDropOptionFromNthGroupInDropzonePreviewTab: (responses) => {
+        responses.forEach(({ responseText, groupIndex, dropzoneIndex }) => {
+            draggableOptionContainer.groupedOptionsContainerPreviewTab()
+                .eq(groupIndex)
+                .within(() => {
+                    fillInTheGapsDragAndDropPage.optionPreviewTab()
+                        .contains(responseText)
+                        .click();
+                });
+            fillInTheGapsDragAndDropPage.dropzonePreviewTab()
+                .eq(dropzoneIndex)
+                .click({ force: true });
+        });
+    },
+
+    /**
+     * @description click on add alternate button for a dropzone in specify correct answer section
+     * @param {number} dropzoneIndex Index of dropzone
+     */
+    clickOnAddAlternateButton: (dropzoneIndex) => {
+        utilities.getNthElement(fillInTheGapsDragAndDropPage.addAlternateButtonSpecifyCorrectAnswer(), dropzoneIndex)
+            .click();
+    },
+
+    /**
+    * @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).
+    * @param {string} text - The expected text content to match against the inner text of the specified dropzone element.
+    */
+    verifyDropzoneTextSpecifyCorrectAnswerSection: (count, text) => {
+        utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsDragAndDropPage.dropzoneSpecifyCorrectAnswerSection(), count), text);
+    },
+
+    verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection: () => {
+        fillInTheGapsDragAndDropPage.dropzoneSpecifyCorrectAnswerSection()
+            .should('not.have.class', 'isActiveForDrop');
+    },
+
+    /**
+    * @param {number} dropzoneIndex index of the dropzone in specify correct answer section
+    * @param {string[]} responseArray array of options set as correct responses in a category cell
+    */
+    verifyDraggableOptionInDropzoneSpecifyCorrectAnswerSection: (dropzoneIndex, responseArray) => {
+        fillInTheGapsDragAndDropPage.dropzoneSpecifyCorrectAnswerSection()
+            .eq(dropzoneIndex)
+            .within(() => {
+                responseArray.forEach((response, count) => {
+                    draggableOptionContainer.draggableOption()
+                        .eq(count)
+                        .verifyInnerText(response);
+                });
+            });
+    },
+
+    /**
+   * @param {number} responseAreaIndex Index of the stem response area in set correct answer section
+   * @description Verify drag handle is not visible in filled category cell in preview tab
+   */
+    verifyDragHandleNotVisibleInFilledDropzoneOfSpecifyCorrectAnswerSection: (responseAreaIndex) => {
+        fillInTheGapsDragAndDropPage.dropzoneSpecifyCorrectAnswerSection()
+            .eq(responseAreaIndex)
+            .within(() => {
+                utilities.verifyElementVisibilityState(draggableOptionContainer.draggableOptionDragIcon(), 'hidden')
+            });
+    },
+
+    /**
+    * @param {string} optionName denotes the text content of the draggable option
+    * @param {number} dropzoneIndex - The index of the dropzone. 
+    * @description click on a draggable option present in the category cell of specify correct answer section
+    */
+    clickOnDraggableOptionInDropzoneOfSpecifyCorrectAnswerSection: (optionName, dropzoneIndex) => {
+        fillInTheGapsDragAndDropPage.dropzoneSpecifyCorrectAnswerSection()
+            .eq(dropzoneIndex)
+            .within(() => {
+                draggableOptionContainer.draggableOption()
+                    .contains(optionName)
+                    .click();
+            });
+    },
+
+    /**
+     * @description Click on dropzone in specify correct answer section
+     * @param {number} dropzoneIndex 
+     */
+    clickOnDropzoneOfSpecifyCorrectAnswerSection: (dropzoneIndex) => {
+        fillInTheGapsDragAndDropPage.dropzoneSpecifyCorrectAnswerSection()
+            .eq(dropzoneIndex)
+            .click({ force: true });
+    },
+
+    verifyInactiveStateOfAllDropzoneInPreviewTab: () => {
+        fillInTheGapsDragAndDropPage.dropzonePreviewTab()
+            .should('not.have.class', 'isActiveForDrop');
+    },
+
+    /**
+   * @param {number} dropzoneIndex index of the dropzone in preview tab
+   * @param {string[]} responseArray array of options set as correct responses in a category cell
+   */
+    verifyDraggableOptionInDropzoneOfPreviewTab: (dropzoneIndex, responseArray) => {
+        fillInTheGapsDragAndDropPage.dropzonePreviewTab()
+            .eq(dropzoneIndex)
+            .within(() => {
+                responseArray.forEach((response, count) => {
+                    utilities.verifyInnerText(utilities.getNthElement(draggableOptionContainer.draggableOption(), count), response);
+                });
+            });
+    },
+
+    /**
+    * @param {number} responseAreaIndex Index of the stem response area in set correct answer section
+    * @description Verify drag handle is not visible in filled category cell in preview tab
+    */
+    verifyDragHandleNotVisibleInFilledDropzoneOfPreviewTab: (responseAreaIndex) => {
+        fillInTheGapsDragAndDropPage.dropzonePreviewTab()
+            .eq(responseAreaIndex)
+            .within(() => {
+                utilities.verifyElementVisibilityState(draggableOptionContainer.draggableOptionDragIcon(), 'hidden')
+            });
+    },
+
+    /**
+    * @param {string} optionName denotes the text content of the draggable option
+    * @param {number} dropzoneIndex - The index of the dropzone. 
+    * @description click on a draggable option present in the category cell of preview tab
+    */
+    clickOnDraggableOptionInDropzoneOfPreviewTab: (optionName, dropzoneIndex) => {
+        fillInTheGapsDragAndDropPage.dropzonePreviewTab()
+            .eq(dropzoneIndex)
+            .within(() => {
+                draggableOptionContainer.draggableOption()
+                    .contains(optionName)
+                    .click();
+            });
+    },
+
+    /**
+     * @description Click on dropzone in preview tab
+     * @param {number} dropzoneIndex 
+     */
+    clickOnDropzoneOfPreviewTab: (dropzoneIndex) => {
+        fillInTheGapsDragAndDropPage.dropzonePreviewTab()
+            .eq(dropzoneIndex)
+            .click({ force: true });
+    },
+
+    //TODO remove after https://redmine.zeuslearning.com/issues/563159 is resolved
+    /**
+     * Verifies draggable options in the Specify Correct Answer section of the options container.
+     * @param {Array<string>} draggableOptionsArray - An array of expected text content for draggable options.
+     */
+    verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection: (draggableOptionsArray) => {
+        fillInTheGapsDragAndDropPage.optionsContainerSpecifyCorrectAnswerSection()
+            .within(() => {
+                draggableOptionsArray.forEach((optionText, optionIndex) => {
+                    utilities.verifyElementCount(draggableOptionContainer.draggableOption(), draggableOptionsArray.length);
+                    utilities.verifyElementVisibilityState(utilities.getNthElement(draggableOptionContainer.draggableOptionDragIcon(), optionIndex), 'exist');
+                    utilities.verifyTextContent(utilities.getNthElement(draggableOptionContainer.draggableOption(), optionIndex), optionText);
+                });
+            });
+    },
+}
+
+const tests = {
+    ...scoringSectionBaseEditTab.tests,
+    ...autoScoredScoringSectionMultiResponseType.tests,
+    ...autoScoredSpecifyCorrectAnswerSection.tests,
+    ...draggableOptionsSectionComponent.tests,
+    ...optionsWrapperComponent.tests,
+    ...draggableOptionContainer.tests,
+    ...commonComponents.tests,
+    ...autoScoredScoringPreviewTab.tests,
+
+    verifyContentsOfSpecifyCorrectAnswerSection: () => {
+        it('When user selects a scoring type then in the \'Correct\' accordion, all the contents should be displayed', () => {
+            utilities.verifyElementCount(fillInTheGapsDragAndDropPage.dropzoneSpecifyCorrectAnswerSection(), 3);
+            for (let index = 0; index < 3; index++) {
+                utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsDragAndDropCommonComponents.dropzoneLabelSpecifyCorrectAnswerSection(), index), `Dropzone ${index + 1}`);
+            }
+        });
+    },
+
+    /**
+     * 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.
+     * @example - verifySpecifyCorrectAnswerAccordionContentsAndFunctionality('Correct');
+     */
+    verifySpecifyCorrectAnswerAccordionContentsAndFunctionality: (accordionName) => {
+        it(`The user should be able to drop option in the dropzone in the ${accordionName} accordion`, () => {
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Petals': 0 });
+        });
+
+        it(`When the user has removed all the options from the dropzone in the ${accordionName} accordion, \'Error: Please set a correct answer.\' error message should be thrown along with an error icon on the \'${accordionName}\' accordion`, () => {
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInOptionsContainerInSpecifyCorrectAnswerSection('Petals');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible')
+            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Please set a correct answer.');
+            if (accordionName == 'Correct') {
+                autoScoredSpecifyCorrectAnswerSection.correctAnswerAccordion()
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
+                    });
+            } else {
+                autoScoredSpecifyCorrectAnswerSection.alternativeAnswerAccordion()
+                    .eq(1)
+                    .within(() => {
+                        utilities.verifyElementVisibilityState(autoScoredSpecifyCorrectAnswerSection.specifyCorrectAnswerErrorIcon(), 'visible');
+                    });
+            };
+        });
+
+        autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredCorrectAnswerErrorMessageCSSAndA11y();
+
+        it('CSS of the dropzone border', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.dropzoneSpecifyCorrectAnswerSection().eq(0), {
+                'border': `2px dashed ${css.color.errorFieldBorder}`,
+                'background-color': css.color.optionsBg
+            });
+        });
+
+        it('When the user drops an option in the dropzone, the error message should disappear', () => {
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Leaves': 0, 'Petals': 1, 'Roots': 2 });
+        });
+
+        autoScoredSpecifyCorrectAnswerSection.tests.verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty(accordionName);
+
+        it('CSS of \'Correct\' accordion contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.dropzoneLabelSpecifyCorrectAnswerSection(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.dropzoneSpecifyCorrectAnswerSection().eq(0), {
+                'border': `2px dashed ${css.color.secondaryBtnActive}`,
+                'background-color': css.color.optionsBg
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.optionContainerOptionsSpecifyCorrectAnswerSection(), {
+                'background-color': css.color.secondaryBtnBg,
+                'border': `1px solid ${css.color.draggableOptionBorder}`
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.optionContainerOptionsSpecifyCorrectAnswerSection().find('.question-text-wrapper'), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.optionContainerOptionsSpecifyCorrectAnswerSection().find('svg g [data-name*="Path"]').eq(1), {
+                'color': css.color.secondaryBtn
+            });
+        });
+
+        it('Accessibility of \'Correct\' accordion contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDragAndDropPage.dropzoneLabelSpecifyCorrectAnswerSection().parents('.preview-content-wrapper'))
+        });
+    },
+
+    /**     
+    * @description select alternate answers for a dropzone in its alternate answer popup
+    * @param {string[]} alternateAnswerArray Array of options to be selected as alternate answer
+    */
+    selectAlternateAnswerInAlternateAnswerPopup: (alternateAnswerArray) => {
+        alternateAnswerArray.forEach((alternateAnswer) => {
+            fillInTheGapsDragAndDropPage.alternateAnswerPopupOptionContainer()
+                .contains(alternateAnswer)
+                .click();
+            fillInTheGapsDragAndDropPage.alternateAnswerPopupOptionContainer()
+                .contains(alternateAnswer)
+                .parent()
+                .should('have.class', 'selected');
+        });
+    },
+
+    saveSelectedAlternateAnswers: () => {
+        fillInTheGapsDragAndDropPage.alternateAnswerPopupSaveButton()
+            .click();
+    },
+
+    /**
+     * @description Set alternate answers for a dropzone
+     * @param {number} dropzoneIndex Index of dropzone
+     * @param {string[]} alternateAnswerArray Array of options to be selected as alternate answer
+     */
+    setResponseLevelAlternateAnswer: (dropzoneIndex, alternateAnswerArray) => {
+        fillInTheGapsDragAndDropPage.steps.clickOnAddAlternateButton(dropzoneIndex);
+        fillInTheGapsDragAndDropPage.steps.selectAlternateAnswerInAlternateAnswerPopup(alternateAnswerArray);
+        fillInTheGapsDragAndDropPage.steps.saveSelectedAlternateAnswers();
+        utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.alternateAnswerPopup(), 'notExist');
+    }
 }
 
 export const fillInTheGapsDragAndDropPage = {
     ...selectors,
-    steps
+    steps,
+    tests
 }

package/cypress/pages/fillInTheGapsDropdownPage.js

@@ -1,5 +1,5 @@
 import utilities from "../support/helpers/utilities";
-import { autoScoredScoringPreviewTab, createQuestionBasePage, scoringSectionBaseEditTab, questionInstructionsComponent, correctIncorrectAnswerLabelComponent, autoScoredStudentViewSettings, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, fillInTheGapsDropdownCommonComponent, questionInputFieldComponent, commonComponents, additionalSettingsPanel } from "./components";
+import { autoScoredScoringPreviewTab, createQuestionBasePage, scoringSectionBaseEditTab, questionInstructionsComponent, correctIncorrectAnswerLabelComponent, autoScoredStudentViewSettings, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, fillInTheGapsDropdownCommonComponent, questionInputFieldComponent, commonComponents, additionalSettingsPanel, optionsWrapperComponent, randomizeOptionsComponent, studentViewSettingsLabelComponent } from "./components";
 const css = Cypress.env('css');
 
 const selectors = {
@@ -9,6 +9,11 @@ const selectors = {
     ...fillInTheGapsDropdownCommonComponent,
     ...questionInputFieldComponent,
     ...commonComponents,
+    ...optionsWrapperComponent,
+    ...autoScoredScoringSectionMultiResponseType,
+    ...autoScoredSpecifyCorrectAnswerSection,
+    ...randomizeOptionsComponent,
+    ...studentViewSettingsLabelComponent,
     dropdownWrapperPreviewTab: () => cy.get('.cloze-with-text-answer-status-response-preview-wrapper'),
     correctAnswerSectionWrapper: () => cy.get('.cloze-with-text-correct-answer-wrapper'),
     correctAnswerResponseWrapper: () => cy.get('.answer-block'),
@@ -28,6 +33,8 @@ const steps = {
     ...questionInputFieldComponent.steps,
     ...commonComponents.steps,
     ...additionalSettingsPanel.steps,
+    ...optionsWrapperComponent.steps,
+    ...randomizeOptionsComponent.steps,
     /**
      * Verify that the correct option icon is is displayed for a specific dropdown.
      * @param {number} dropdownIndex - The index of the dropdown.
@@ -96,6 +103,19 @@ const steps = {
 
 const tests = {
     ...autoScoredScoringPreviewTab.tests,
+    ...questionInstructionsComponent.tests,
+    ...commonComponents.tests,
+    ...questionInputFieldComponent.tests,
+    ...optionsWrapperComponent.tests,
+    ...fillInTheGapsDropdownCommonComponent.tests,
+    ...autoScoredSpecifyCorrectAnswerSection.tests,
+    ...scoringSectionBaseEditTab.tests,
+    ...autoScoredScoringSectionMultiResponseType.tests,
+    ...autoScoredScoringPreviewTab.tests,
+    ...autoScoredStudentViewSettings.tests,
+    ...randomizeOptionsComponent.tests,
+    ...studentViewSettingsLabelComponent.tests,
+    ...createQuestionBasePage.tests
 }
 
 export const fillInTheGapsDropdownPage = {

package/cypress/pages/fillInTheGapsOverImageDragAndDropPage.js

@@ -1,6 +1,6 @@
 import constants from "../fixtures/constants";
 import utilities from "../support/helpers/utilities";
-import { createQuestionBasePage, questionInstructionsComponent, uploadImageSectionComponent, scoringSectionBaseEditTab, optionsWrapperComponent, equationEditorFlyout, ckEditorToolbar, commonComponents, autoScoredScoringPreviewTab, autoScoredStudentViewSettings, maximumCapacityPerDropzoneComponent, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, imageCanvasComponent, backgroundImageUploadComponent, correctIncorrectAnswerLabelComponent, draggableOptionsSectionComponent, draggableOptionContainer, studentViewSettingsLabelComponent, randomizeOptionsComponent, enableOuterBorderComponent, allowMultipleInstancesOfSameDraggableOptionComponent, additionalSettingsPanel, opacityComponent, imageActionsComponent, colorPopupComponent } from "./components";
+import { createQuestionBasePage, questionInstructionsComponent, uploadImageSectionComponent, scoringSectionBaseEditTab, optionsWrapperComponent, equationEditorFlyout, ckEditorToolbar, commonComponents, autoScoredScoringPreviewTab, autoScoredStudentViewSettings, maximumCapacityPerDropzoneComponent, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, imageCanvasComponent, backgroundImageUploadComponent, correctIncorrectAnswerLabelComponent, draggableOptionsSectionComponent, draggableOptionContainer, studentViewSettingsLabelComponent, randomizeOptionsComponent, enableOuterBorderComponent, allowMultipleInstancesOfSameDraggableOptionComponent, additionalSettingsPanel, opacityComponent, imageActionsComponent, colorPopupComponent, fillInTheGapsDragAndDropCommonComponents } from "./components";
 import { dialogBoxBase } from "./dialogBoxBase";
 const css = Cypress.env('css');
 
@@ -29,6 +29,7 @@ const selectors = {
     ...uploadImageSectionComponent,
     ...imageActionsComponent,
     ...colorPopupComponent,
+    ...fillInTheGapsDragAndDropCommonComponents,
     dropzonePreviewTab: () => cy.get('.drag-and-drop-canvas [class*="__DraggableWrapper"]'),
     dropzoneContainerPreviewTab: () => cy.get('[class*="Canvasstyle__DropzoneWrapper"]'),
     optionContainerOptionsPreviewTab: () => cy.get('.item-list .draggable-options-item:visible'),
@@ -40,21 +41,11 @@ const selectors = {
     correctIncorrectAnswerBlock: () => cy.get('[class*="-answer-block"]'),
     correctIncorrectStatusMessageText: () => cy.get('[class*="AnswerStatusText"]'),
     dropzoneNumeration: () => cy.get('.drag-and-drop-canvas .answer-numeration-number-box'),
-    correctAnswersNumeration: () => cy.get('[class*="__AnswerCell"] .answer-numeration-number-box'),
-    correctAnswersOptions: () => cy.get('[class*="__AnswerWrapper"] .question-text-wrapper'),
-    correctAnswersLabel: () => cy.get('.correct-answers-label'),
-    tickIconWrapper: () => cy.get('.tick-icon-wrapper svg g g [id*=Rectangle]'),
-    correctAnswerContainer: () => cy.get('.dnd-correct-answer-wrapper'),
-    correctIncorrectAnswerLabel: () => cy.get('[class*="CorrectIncorrectLabel"]'),
     imageInPreviewTab: () => cy.get('.drag-and-drop-layout-wrapper img'),
-    dropzoneLabelSpecifyCorrectAnswerSection: () => cy.get('.dropzone-and-label-wrapper .title-casing'),
     questionBorderPreviewTab: () => cy.get('.label-image-with-dnd-canvas-wrapper [class*="DragDropContextLayoutWrapper"]'),
     maxLimitInEachDropzoneHelpText: () => cy.get('[class*="Canvasstyle__LimitWrapper"]'),
-    penaltyPointsForEachIncorrectDropzoneInputField: () => cy.get('input[aria-label="Penalty points for each incorrect dropzone"]'),
-    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"]'),
     dropzonePointerInPreviewTab: () => cy.get('.preview-content-wrapper [class*="PointerWrapper"]'),
     canvasInPreviewTab: () => cy.get('[class*="PreviewTabstyles__ContentWrapper"] [class*="Canvasstyle__DragAndDropCanvas"]'),
 }
@@ -87,6 +78,7 @@ const steps = {
     ...opacityComponent.steps,
     ...imageActionsComponent.steps,
     ...colorPopupComponent.steps,
+    ...fillInTheGapsDragAndDropCommonComponents.steps,
 
     /**
     * @description Verifies the text content of a specific preview tab dropzone element.
@@ -252,10 +244,6 @@ const steps = {
             .should('exist');
     },
 
-    verifyCorrectAnswerSectionNotExists: () => {
-        utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.correctAnswerContainer(), 'notExist');
-    },
-
     /**
     * Verifies the correct option icon for a specified dropzone in the Preview Tab.
     * @param {number} optionIndex - The index of the option to verify.
@@ -304,20 +292,6 @@ const steps = {
             });
     },
 
-    /**
-    *@description Verifies the correctness of answer responses in the correct answer section, including the count.
-    * @param {string[][]} correctAnswerArray An array of arrays, each containing the expected answer options for a specific correct answer section.
-    */
-    verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount: (correctAnswerArray) => {
-        utilities.verifyElementCount(fillInTheGapsOverImageDragAndDropPage.correctAnswersOptions(), correctAnswerArray.length);
-        correctAnswerArray.forEach((correctAnswer, index) => {
-            utilities.verifyTextContent(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.correctAnswersNumeration(), index), index + 1);
-            correctAnswer.forEach((answerOption) => {
-                utilities.verifyTextContent(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.correctAnswersOptions(), index), answerOption);
-            });
-        });
-    },
-
     verifyPointsPerResponseLabel: () => {
         utilities.verifyInnerText(autoScoredScoringSectionMultiResponseType.pointsPerResponseLabel(), 'Points per response:\n-');
         utilities.verifyElementVisibilityState(autoScoredScoringSectionMultiResponseType.pointsPerResponseLabel(), 'visible');
@@ -371,32 +345,6 @@ const steps = {
         utilities.verifyInnerText(autoScoredScoringSectionMultiResponseType.penaltyPointsDetailsSectionAllottedPointsLabel(), `Penalty points for each incorrect dropzone: ${penaltyPoints}`);
     },
 
-    /**
-    * @description Verifies the penalty points value for each incorrect dropzone
-    * @param {number} points - The expected penalty points value for each incorrect dropzone.
-    */
-    verifyPenaltyPointsForEachIncorrectDropzoneValue: (points) => {
-        fillInTheGapsOverImageDragAndDropPage.penaltyPointsForEachIncorrectDropzoneInputField()
-            .should('have.value', points);
-    },
-
-    /**
-     * @description Allots penalty points for each incorrect dropzone
-     * @param {number} points - The penalty points to be allotted for each dropzone.
-     */
-    allotPenaltyPointsForEachIncorrectDropzone: (points) => {
-        fillInTheGapsOverImageDragAndDropPage.penaltyPointsForEachIncorrectDropzoneInputField()
-            .clear()
-            .type(`${points}`)
-            .should('have.value', points)
-            .blur();
-    },
-
-    selectPenaltyPointsForEachIncorrectDropzone: () => {
-        fillInTheGapsOverImageDragAndDropPage.specifyPointsForEachIncorrectDropzoneRadioButton()
-            .click();
-    },
-
     verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection: () => {
         fillInTheGapsOverImageDragAndDropPage.dropzoneWrapperSpecifyCorrectAnswerSection()
             .should('not.have.class', 'dragging-over');
@@ -636,8 +584,8 @@ const 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);
-            for (let index = 0; index < fillInTheGapsOverImageDragAndDropPage.dropzoneSpecifyCorrectAnswerSection(); index++) {
-                utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.dropzoneLabelSpecifyCorrectAnswerSection(), index), `Dropzone ${index}`);
+            for (let index = 0; index < 3; index++) {
+                utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.dropzoneLabelSpecifyCorrectAnswerSection(), index), `Dropzone ${index+1}`);
             }
         });
     },

package/cypress/pages/fillInTheGapsOverImageDropdownPage.js

@@ -13,8 +13,8 @@ const selectors = {
     ...optionsWrapperComponent,
     ...randomizeOptionsComponent,
     ...backgroundImageUploadComponent,
-    dropdownWrapperPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="Canvasstyle__DropzoneWrapper"]'),
-    correctAnswerSectionWrapper: () => cy.get('.dnd-correct-answer-wrapper'),
+    ...autoScoredScoringSectionMultiResponseType,
+    dropdownWrapperPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class="Canvasstyle__DropzoneWrapper"]'),
     correctAnswerResponseWrapper: () => cy.get('[class*="LabelImageWithDropdownPreviewstyles__AnswerCell"]'),
     correctAnswerResponse: () => cy.get('[class*="LabelImageWithDropdownPreviewstyles__AnswerWrapper"]'),
 }
@@ -91,28 +91,6 @@ const steps = {
             });
     },
 
-    /**
-     * Verify correct answer responses in the correct answer section and count.
-     * @param {string[]} correctAnswerArray - An array containing the expected correct answer responses.
-     * @example verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount(['Flower', 'Petals', 'Stem']);
-     */
-    verifyCorrectAnswerResponsesInCorrectAnswerSectionAndCount: (correctAnswerArray) => {
-        utilities.verifyElementCount(fillInTheGapsOverImageDropdownPage.correctAnswerResponse(), correctAnswerArray.length);
-        correctAnswerArray.forEach((correctAnswer, index) => {
-            fillInTheGapsOverImageDropdownPage.correctAnswerResponseWrapper()
-                .eq(index)
-                .within(() => {
-                    utilities.verifyInnerText(fillInTheGapsDropdownCommonComponent.correctAnswerResponseNumeration(), `${index + 1}`);
-                    fillInTheGapsOverImageDropdownPage.correctAnswerResponse()
-                        .should('have.text', correctAnswer);
-                });
-        });
-    },
-
-    verifyCorrectAnswerSectionNotExists: () => {
-        utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.correctAnswerSectionWrapper(), 'notExist');
-    },
-
     /**
      * @description Verify dropdown pointer style in preview tab
      * @param {string} style dropdown pointer style
@@ -192,6 +170,7 @@ const tests = {
     ...imageCanvasComponent.tests,
     ...studentViewSettingsLabelComponent.tests,
     ...createQuestionBasePage.tests,
+    ...fillInTheGapsDropdownCommonComponent.tests
 }
 
 export const fillInTheGapsOverImageDropdownPage = {