itemengine-cypress-automation 1.0.120 → 1.0.122-updateILCRepo28Feb-2c3e0e3.0

package/cypress/pages/fillInTheGapsDropdownPage.js

@@ -1,98 +1,101 @@
-import { additionalSettingsPanel, autoScoredAdditionalSettings, autoScoredPreviewBase, autoScoredScoringSection, autoScoredScoringSectionMultipleResponsesType, autoScoredSetCorrectAnswerSection, commonComponents, createQuestionBasePage, fillInTheGapsCommonComponents, optionsWrapperComponent, previewScoringAndShowCorrectAnswerComponent, questionInstructionsComponent, scoringSectionBase, fillInTheGapsDropdownCommonComponent, questionInputFieldComponent } from "./components"
-import { answerNumerationComponent } from "./components/answerNumerationComponent";
-import { fillInTheGapsTextPage } from "./fillInTheGapsTextPage"
+import utilities from "../support/helpers/utilities";
+import { autoScoredScoringPreviewTab, createQuestionBasePage, scoringSectionBaseEditTab, questionInstructionsComponent, correctIncorrectAnswerLabelComponent, autoScoredStudentViewSettings, autoScoredSpecifyCorrectAnswerSection, autoScoredScoringSectionMultiResponseType, fillInTheGapsDropdownCommonComponent, questionInputFieldComponent, commonComponents, additionalSettingsPanel } from "./components";
 const css = Cypress.env('css');
 
 const selectors = {
-    ...fillInTheGapsTextPage,
     ...questionInstructionsComponent,
-    ...fillInTheGapsCommonComponents,
-    ...optionsWrapperComponent,
+    ...autoScoredScoringPreviewTab,
+    ...correctIncorrectAnswerLabelComponent,
     ...fillInTheGapsDropdownCommonComponent,
     ...questionInputFieldComponent,
-    previewTabResponseDropdown: () => cy.get('.cloze-with-text-response-preview-wrapper [class*="icon-chevron"]'),
-    previewTabResponseDropdownWrapper: () => cy.get('.cloze-with-text-preview .response-dropdown-wrapper .dropdown-form-control '),
-    responseDropdownAnswerNumeration: () => cy.get('.response-input-adornment')
+    ...commonComponents,
+    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'),
+    correctAnswerResponse: () => cy.get('.numeration-wrapper'),
 }
 
 const steps = {
+    ...autoScoredScoringPreviewTab.steps,
+    ...correctIncorrectAnswerLabelComponent.steps,
     ...createQuestionBasePage.steps,
+    ...scoringSectionBaseEditTab.steps,
     ...questionInstructionsComponent.steps,
-    ...additionalSettingsPanel.steps,
-    ...scoringSectionBase.steps,
-    ...fillInTheGapsCommonComponents.steps,
-    ...autoScoredPreviewBase.steps,
-    ...autoScoredAdditionalSettings.steps,
-    ...autoScoredSetCorrectAnswerSection.steps,
-    ...autoScoredScoringSectionMultipleResponsesType.steps,
-    ...answerNumerationComponent.steps,
+    ...autoScoredStudentViewSettings.steps,
+    ...autoScoredSpecifyCorrectAnswerSection.steps,
+    ...autoScoredScoringSectionMultiResponseType.steps,
     ...fillInTheGapsDropdownCommonComponent.steps,
     ...questionInputFieldComponent.steps,
-    selectResponseFromPreviewTabResponseDropdown: (dropdownIndex, dropdownOption) => {
-        fillInTheGapsDropdownPage.previewTabResponseDropdown()
-            .eq(dropdownIndex)
-            .click({ position: "right"});   //Added this as normal clicking fails when placeholder is provided
-        fillInTheGapsDropdownCommonComponent.steps.selectOptionFromResponseDropdown(dropdownOption);
-        fillInTheGapsDropdownPage.previewTabResponseDropdown()
-            .eq(dropdownIndex)
-            .verifyInnerText(dropdownOption);
+    ...commonComponents.steps,
+    ...additionalSettingsPanel.steps,
+    /**
+     * Verify that the correct option icon is is displayed for a specific dropdown.
+     * @param {number} dropdownIndex - The index of the dropdown.
+     */
+    verifyCorrectOptionIcon: (dropdownIndex) => {
+        utilities.getNthElement(fillInTheGapsDropdownPage.dropdownWrapperPreviewTab(), dropdownIndex)
+            .within(() => {
+                utilities.verifyElementVisibilityState(autoScoredScoringPreviewTab.correctIcon(), 'visible');
+            });
     },
 
-    verifyAnswerNumerationShouldNotExistInPreviewTabResponseDropdown: () => {
-        cy.log('Checking the answer numeration should not be displayed in the response dropdown')
-        fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
-            .each(($el) => {
-                cy.wrap($el)
-                    .within(() => {
-                        fillInTheGapsDropdownPage.responseDropdownAnswerNumeration()
-                            .should('not.exist');
-                    });
+    /**
+     * Verify that both correct and incorrect option icons do not exist for a specific dropdown.
+     * @param {number} dropdownIndex - The index of the dropdown.
+     */
+    verifyCorrectIncorrectIconNotExist: (dropdownIndex) => {
+        utilities.getNthElement(fillInTheGapsDropdownPage.dropdownWrapperPreviewTab(), dropdownIndex)
+            .within(() => {
+                utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.tickIconWrapper(), 'notExist');
             });
     },
-}
 
-const tests = {
-    ...createQuestionBasePage.tests,
-    ...questionInstructionsComponent.tests,
-    ...fillInTheGapsCommonComponents.tests,
-    ...scoringSectionBase.tests,
-    ...autoScoredScoringSection.tests,
-    ...additionalSettingsPanel.tests,
-    ...autoScoredAdditionalSettings.tests,
-    ...autoScoredSetCorrectAnswerSection.tests,
-    ...commonComponents.tests,
-    ...previewScoringAndShowCorrectAnswerComponent.tests,
-    ...autoScoredScoringSectionMultipleResponsesType.tests,
-    ...answerNumerationComponent.tests,
-    ...questionInputFieldComponent.tests,
-    verifySetCorrectAnswerTabContentsAndFunctionality: (tabName) => {
-        it(`CSS of ${tabName} contents`, { tags: 'css' }, () => {
-            fillInTheGapsCommonComponents.setCorrectAnswerResponseFieldLabel()
-                .verifyCSS(css.color.labels, css.fontSize.default, css.fontWeight.regular);
-            fillInTheGapsDropdownPage.responseDropdownSetCorrectAnswerSection()
-                .should('have.css', 'border', `1px solid ${css.color.figDefaultComponentBorder}`)
-                .and('have.css', 'background-color', css.color.defaultBackground);
-        });
+    /**
+    * Verify that the incorrect option icon is displayed for a specific dropdown.
+    * @param {number} dropdownIndex - The index of the dropdown.
+    */
+    verifyIncorrectOptionIcon: (dropdownIndex) => {
+        utilities.getNthElement(fillInTheGapsDropdownPage.dropdownWrapperPreviewTab(), dropdownIndex)
+            .within(() => {
+                utilities.verifyElementVisibilityState(autoScoredScoringPreviewTab.incorrectIcon(), 'visible');
+            });
+    },
 
-        it('By default 1 dropdown along with label \'Response 1\' should be displayed in the \'Set correct answer\' section', () => {
-            fillInTheGapsDropdownPage.responseDropdownSetCorrectAnswerSection()
-                .should('have.length', 1);
-            fillInTheGapsDropdownPage.setCorrectAnswerResponseFieldLabel()
-                .verifyInnerText('Response 1');
-        });
+    verifyDropdownNumerationPreviewTab: () => {
+        fillInTheGapsDropdownPage.dropdownWrapperPreviewTab()
+            .each(($element, index) => {
+                cy.wrap($element)
+                    .within(() => {
+                        utilities.verifyTextContent(fillInTheGapsDropdownCommonComponent.dropdownNumerationPreviewTab(), `${index + 1}`);
+                    });
+            });
+    },
 
-        it('When the user selects any option from the dropdown, that option should get set as correct answer option and it should get displayed on the dropdown', () => {
-            fillInTheGapsDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(0, 'changing');
+    /**
+     * 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(fillInTheGapsDropdownPage.correctAnswerResponseWrapper(), correctAnswerArray.length);
+        correctAnswerArray.forEach((correctAnswer, index) => {
+            fillInTheGapsDropdownPage.correctAnswerResponseWrapper()
+                .eq(index)
+                .within(() => {
+                    utilities.verifyInnerText(fillInTheGapsDropdownCommonComponent.correctAnswerResponseNumeration(), `${index + 1}`);
+                    fillInTheGapsDropdownPage.correctAnswerResponse()
+                        .should('have.text', correctAnswer);
+                });
         });
+    },
 
-        it('CSS of \'correct\' answer that appears on the dropdown', { tags: 'css' }, () => {
-            fillInTheGapsDropdownPage.responseDropdownSetCorrectAnswerSection()
-                .find('span')
-                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular);
-        });
+    verifyCorrectAnswerSectionNotExists: () => {
+        utilities.verifyElementVisibilityState(fillInTheGapsDropdownPage.correctAnswerSectionWrapper(), 'notExist');
+    },
+}
 
-        autoScoredSetCorrectAnswerSection.tests.verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty(tabName);
-    }
+const tests = {
+    ...autoScoredScoringPreviewTab.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, figOverImageCanvasComponent, 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 } from "./components";
 import { dialogBoxBase } from "./dialogBoxBase";
 const css = Cypress.env('css');
 
@@ -15,7 +15,7 @@ const selectors = {
     ...optionsWrapperComponent,
     ...draggableOptionsSectionComponent,
     ...draggableOptionContainer,
-    ...figOverImageCanvasComponent,
+    ...imageCanvasComponent,
     ...backgroundImageUploadComponent,
     ...correctIncorrectAnswerLabelComponent,
     ...dialogBoxBase,
@@ -74,7 +74,7 @@ const steps = {
     ...autoScoredScoringSectionMultiResponseType.steps,
     ...draggableOptionsSectionComponent.steps,
     ...draggableOptionContainer.steps,
-    ...figOverImageCanvasComponent.steps,
+    ...imageCanvasComponent.steps,
     ...backgroundImageUploadComponent.steps,
     ...correctIncorrectAnswerLabelComponent.steps,
     ...draggableOptionsSectionComponent.steps,
@@ -631,7 +631,7 @@ const tests = {
     ...colorPopupComponent.tests,
     ...opacityComponent.tests,
     ...backgroundImageUploadComponent.tests,
-    ...figOverImageCanvasComponent.tests,
+    ...imageCanvasComponent.tests,
 
     verifyContentsOfSpecifyCorrectAnswerSection: () => {
         it('When user selects a scoring type then in the \'Correct\' accordion, all the contents should be displayed', () => {