itemengine-cypress-automation 1.0.2

package/cypress/pages/fillInTheGapsDropdownPage.js

@@ -0,0 +1,99 @@
+import { additionalSettingsPanel, autoScoredAdditionalSettings, autoScoredPreviewBase, autoScoredScoringSection, autoScoredScoringSectionMultipleResponsesType, autoScoredSetCorrectAnswerSection, commonComponents, createQuestionBasePage, fillInTheGapsCommonComponents, optionsWrapperComponent, previewScoringAndShowCorrectAnswerComponent, questionInstructionsComponent, scoringSectionBase, fillInTheGapsDropdownCommonComponent } from "./components"
+import { answerNumerationComponent } from "./components/answerNumerationComponent";
+import { fillInTheGapsTextPage } from "./fillInTheGapsTextPage"
+const css = Cypress.env('css');
+
+const selectors = {
+    ...fillInTheGapsTextPage,
+    ...questionInstructionsComponent,
+    ...fillInTheGapsCommonComponents,
+    ...optionsWrapperComponent,
+    ...fillInTheGapsDropdownCommonComponent,
+    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')
+}
+
+const steps = {
+    ...createQuestionBasePage.steps,
+    ...questionInstructionsComponent.steps,
+    ...additionalSettingsPanel.steps,
+    ...scoringSectionBase.steps,
+    ...fillInTheGapsCommonComponents.steps,
+    ...autoScoredPreviewBase.steps,
+    ...autoScoredAdditionalSettings.steps,
+    ...autoScoredSetCorrectAnswerSection.steps,
+    ...autoScoredScoringSectionMultipleResponsesType.steps,
+    ...answerNumerationComponent.steps,
+    ...fillInTheGapsDropdownCommonComponent.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);
+    },
+
+    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');
+                    });
+            });
+    },
+}
+
+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,
+    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);
+        });
+
+        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');
+        });
+
+        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');
+        });
+
+        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);
+        });
+
+        autoScoredSetCorrectAnswerSection.tests.verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty(tabName);
+    }
+}
+
+export const fillInTheGapsDropdownPage = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/fillInTheGapsOverImageDropdownPage.js

@@ -0,0 +1,232 @@
+import utilities from "../support/helpers/utilities";
+import { createQuestionBasePage, figOverImageCommonComponent, fillInTheGapsDropdownCommonComponent, commonComponents, uploadImageSectionComponent, optionsWrapperComponent, ckEditorToolbar, equationEditorFlyout, autoScoredSetCorrectAnswerSection, scoringSectionBase, autoScoredScoringSectionMultipleResponsesType, autoScoredScoringSection, previewScoringAndShowCorrectAnswerComponent, additionalSettingsPanel, autoScoredAdditionalSettings, autoScoredPreviewBase, questionInstructionsComponent } from "./components"
+
+const selectors = {
+    ...figOverImageCommonComponent,
+    ...fillInTheGapsDropdownCommonComponent,
+    ...questionInstructionsComponent,
+    responseDropdownPreviewTab: () => cy.get('[class*="ImageWithDropdownPreviewstyles__DraggableInput"] [class*="icon-chevron"]'),
+    responseDropdownWrapperPreviewTab: () => cy.get('[class*="ImageWithDropdownPreviewstyles__IconDiv"]'),
+    //Correct answer container
+    previewTabCorrectAnswerContainer: () => cy.get('.cloze-with-text-correct-answer-wrapper'),
+    previewTabCorrectAnswerLabel: () => cy.get('.cloze-with-text-correct-answer-label'),
+    previewTabCorrectAnswerResponseWrapper: () => cy.get('[class*="ImageWithDropdownPreviewstyles__ItemWrapperDiv"]'),
+    correctAnswerContainerResponseNumeration: () => cy.get('[class*="ImageWithDropdownPreviewstyles__NumerationWrapper"]'),
+}
+
+const steps = {
+    ...createQuestionBasePage.steps,
+    ...fillInTheGapsDropdownCommonComponent.steps,
+    ...figOverImageCommonComponent.steps,
+    ...commonComponents.steps,
+    ...uploadImageSectionComponent.steps,
+    ...autoScoredScoringSectionMultipleResponsesType.steps,
+    ...optionsWrapperComponent.steps,
+    ...ckEditorToolbar.steps,
+    ...equationEditorFlyout.steps,
+    ...previewScoringAndShowCorrectAnswerComponent.steps,
+    ...autoScoredSetCorrectAnswerSection.steps,
+    ...additionalSettingsPanel.steps,
+    ...autoScoredAdditionalSettings.steps,
+    ...autoScoredPreviewBase.steps,
+    ...autoScoredScoringSection.steps,
+    ...questionInstructionsComponent.steps,
+
+    /**
+     * @param {number} responseContainerIndex Index of response container
+     * @param {number[]} responseContainerPositionCoordinates Position coordinates of the response container
+     * @description Verify position coordinates of response dropdown in preview tab
+     */
+    verifyResponseDropdownPositionCoordinatesInPreviewTab: (responseContainerIndex, responseContainerPositionCoordinates) => {
+        fillInTheGapsOverImageDropdownPage.responseDropdownPreviewTab()
+            .eq(responseContainerIndex)
+            .parents('.react-draggable')
+            .invoke('attr', 'style')
+            .then(($styleAttribute) => {
+                let transformValue = $styleAttribute;
+                let position = transformValue.split('(')[1]
+                    .split(')')[0]
+                    .split(',');
+                let horizontalCoordinate = position[0].trim();
+                let verticalCoordinate = position[1].trim();
+                expect(horizontalCoordinate).to.be.eq(responseContainerPositionCoordinates[0]);
+                expect(verticalCoordinate).to.be.eq(responseContainerPositionCoordinates[1]);
+            });
+    },
+
+    /**
+     * @param {number} responseDropdownIndex Index of dropdown in preview tab
+     * @description Verify dropdown is displayed in preview tab
+     */
+    verifyResponseDropdownIsDisplayedInPreviewTab: (responseDropdownIndex) => {
+        utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseDropdownPreviewTab().eq(responseDropdownIndex), 'visible');
+    },
+
+    verifyDisabledResponseDropdownInPreviewTab: () => {
+        fillInTheGapsOverImageDropdownPage.responseDropdownPreviewTab()
+            .should('have.class', 'Mui-disabled');
+        fillInTheGapsOverImageDropdownPage.responseDropdownPreviewTab()
+            .click();
+        fillInTheGapsOverImageDropdownPage.dropdownList()
+            .should('not.exist');
+    },
+
+    /**
+     * @param {number} responseDropdownIndex Index of response dropdown in preview tab
+     * @description Expand response dropdown in preview tab
+     */
+    expandResponseDropdownInPreviewTab: (responseDropdownIndex) => {
+        fillInTheGapsOverImageDropdownPage.responseDropdownPreviewTab()
+            .eq(responseDropdownIndex)
+            .click();
+        fillInTheGapsOverImageDropdownPage.responseDropdownPreviewTab()
+            .eq(responseDropdownIndex)
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+
+    /**
+    * @param {number} dropdownIndex Index of the dropdown
+    * @param {string} dropdownOption Option to be selected in the dropdown
+    * @description Select option from dropdown in preview tab
+    */
+    selectResponseFromDropdownInPreviewTab: (dropdownIndex, dropdownOption) => {
+        fillInTheGapsOverImageDropdownPage.steps.expandResponseDropdownInPreviewTab(dropdownIndex);
+        fillInTheGapsDropdownCommonComponent.steps.selectOptionFromResponseDropdown(dropdownOption);
+        fillInTheGapsOverImageDropdownPage.steps.verifyTextDisplayedInDropdownInPreviewTab(dropdownIndex, dropdownOption);
+    },
+
+    verifyTextDisplayedInDropdownInPreviewTab: (dropdownIndex, dropdownText) => {
+        utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.responseDropdownPreviewTab().eq(dropdownIndex), dropdownText);
+    },
+
+    /**
+    * @param {string[]} correctAnswerArray array of correct answer response
+    * @param {string[]} optionNumerationArray numeration of the correct answer response
+    * @description verify the correct answer responses in the correct answer container
+    */
+    verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount: (correctAnswerArray, optionNumerationArray) => {
+        fillInTheGapsOverImageDropdownPage.previewTabCorrectAnswerContainer()
+            .should('be.visible')
+            .within(() => {
+                correctAnswerArray.forEach((responseFieldText, count) => {
+                    utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.previewTabCorrectAnswerResponseWrapper().eq(count), responseFieldText);
+                });
+                optionNumerationArray.forEach((optionNumeration, count) => {
+                    utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.correctAnswerContainerResponseNumeration().eq(count), optionNumeration);
+                });
+            });
+        fillInTheGapsOverImageDropdownPage.previewTabCorrectAnswerResponseWrapper()
+            .should('have.length', optionNumerationArray.length);
+    },
+
+    verifyPreviewTabCorrectAnswerContainerNotExist: () => {
+        utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.previewTabCorrectAnswerContainer(), 'notExist');
+    },
+
+    /**
+     * @param {number} index - The index of the incorrect option to verify.
+     * @description Verify that the incorrect option at the specified index has a cross-mark icon and is visible.
+     */
+    verifyIncorrectOptionCrossmarkIcon: (index) => {
+        fillInTheGapsOverImageDropdownPage.responseDropdownWrapperPreviewTab()
+            .eq(index)
+            .find('.tick-icon-wrapper')
+            .should('have.class', 'icon-incorrect')
+            .and('be.visible');
+    },
+
+    /**
+     * @param {number} index - The index of the correct option to verify.
+     * @description Verify that the correct option at the specified index has a check-mark icon and is visible.
+     */
+    verifyCorrectOptionCheckmarkIcon: (index) => {
+        fillInTheGapsOverImageDropdownPage.responseDropdownWrapperPreviewTab()
+            .eq(index)
+            .find('.tick-icon-wrapper')
+            .should('have.class', 'icon-correct')
+            .and('be.visible');
+    },
+
+    /**
+     * @param {number} index - The index of the option to verify.
+     * @description Verify that the option at the specified index does not have a check-mark or cross-mark.
+     */
+    verifyCheckmarkOrCrossmarkNotVisible: (index) => {
+        utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseDropdownWrapperPreviewTab().eq(index).find('.tick-icon-wrapper'), 'notExist');
+    },
+
+    /**
+    * @param {index} responseDropdownIndex Index of response dropdown
+    * @param {string} ariaLabel Aria-label of response dropdown
+    * @description Verify aria-label of response dropdown in preview tab
+    */
+    verifyDropdownAriaLabelAttributeInPreviewTab: (responseDropdownIndex, ariaLabel) => {
+        fillInTheGapsOverImageDropdownPage.responseDropdownPreviewTab()
+            .eq(responseDropdownIndex)
+            .should('have.attr', 'aria-label', ariaLabel);
+    },
+
+    /**
+     * @param {number} rowIndex Index of the row in which response container is placed
+     * @param {number} responseContainerIndex Index of the response container
+     * @description Verify the vertical position of the response container as per the row
+     */
+    verifyResponseContainerVerticalPosition: (rowIndex, responseContainerIndex) => {
+        let verticalCoordinate = '';
+        switch (rowIndex) {
+            case 1:
+                verticalCoordinate = '10px';
+                break;
+            case 2:
+                verticalCoordinate = '59px';
+                break;
+            default:
+                throw new Error('Invalid row index');
+        }
+        figOverImageCommonComponent.responseContainer()
+            .eq(responseContainerIndex)
+            .invoke('attr', 'style')
+            .then(($styleAttribute) => {
+                let transformValue = $styleAttribute;
+                let coordinatesArray = transformValue.split('(')[1]
+                    .split(')')[0]
+                    .split(',');
+                let responseVerticalCoordinate = coordinatesArray[1].trim();
+                expect(responseVerticalCoordinate).to.be.eq(verticalCoordinate);
+            });
+    }
+}
+
+const tests = {
+    ...figOverImageCommonComponent.tests,
+    ...autoScoredSetCorrectAnswerSection.tests,
+    ...fillInTheGapsDropdownCommonComponent.tests,
+    ...scoringSectionBase.tests,
+    ...autoScoredScoringSectionMultipleResponsesType.tests,
+    ...autoScoredScoringSection.tests,
+    ...commonComponents.tests,
+    ...previewScoringAndShowCorrectAnswerComponent.tests,
+    ...questionInstructionsComponent.tests,
+
+    /**
+     * @param {number} minimumScoreIfAttemptedPoints - The minimum score awarded if attempted.
+     * @param {number} allocatedPoints - The expected allocated points for the question.
+     * @description  Verify minimum score awarded if attempted functionality when an incorrect answer is attempted.
+     */
+    verifyMinimumScoreAwardedIfAttemptedFunctionalityForIncorrectAnswer: (minimumScoreIfAttemptedPoints, allocatedPoints) => {
+        it('When user has provided minimum score awarded (if attempted) points, then in preview tab on selecting incorrect answer, minimum score should be provided for the question', () => {
+            cy.log('Switch to edit tab and set minimum score if attempted points')
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.allotMinimumScoreAwardedIfAttempted(minimumScoreIfAttemptedPoints);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, 'Branch');
+            fillInTheGapsOverImageDropdownPage.steps.verifyPreviewTabScoreText(minimumScoreIfAttemptedPoints, allocatedPoints);
+        });
+    }
+}
+
+export const fillInTheGapsOverImageDropdownPage = {
+    ...selectors,
+    steps,
+    tests,
+}

package/cypress/pages/fillInTheGapsOverImageTextPage.js

@@ -0,0 +1,135 @@
+import { questionInstructionsComponent, scoringSectionBase, createQuestionBasePage, additionalSettingsPanel, commonComponents, autoScoredPreviewBase, autoScoredAdditionalSettings, autoScoredSetCorrectAnswerSection, autoScoredScoringSectionMultipleResponsesType, autoScoredScoringSection, specialCharactersFlyoutComponent, specialAndCustomSpecialCharactersComponent, previewScoringAndShowCorrectAnswerComponent, figOverImageCommonComponent, uploadImageSectionComponent, fillInTheGapsTextCommonComponent, studentResponseAndLayoutComponent } from "./components";
+import { answerNumerationComponent } from "./components/answerNumerationComponent";
+
+const selectors = {
+    ...scoringSectionBase,
+    ...createQuestionBasePage,
+    ...additionalSettingsPanel,
+    ...questionInstructionsComponent,
+    ...commonComponents,
+    ...autoScoredSetCorrectAnswerSection,
+    ...autoScoredAdditionalSettings,
+    ...autoScoredPreviewBase,
+    ...autoScoredScoringSectionMultipleResponsesType,
+    ...specialCharactersFlyoutComponent,
+    ...specialAndCustomSpecialCharactersComponent,
+    ...previewScoringAndShowCorrectAnswerComponent,
+    ...answerNumerationComponent,
+    ...figOverImageCommonComponent,
+    ...uploadImageSectionComponent,
+    ...fillInTheGapsTextCommonComponent,
+}
+
+const steps = {
+    ...createQuestionBasePage.steps,
+    ...questionInstructionsComponent.steps,
+    ...scoringSectionBase.steps,
+    ...additionalSettingsPanel.steps,
+    ...autoScoredSetCorrectAnswerSection.steps,
+    ...autoScoredPreviewBase.steps,
+    ...autoScoredSetCorrectAnswerSection.steps,
+    ...autoScoredScoringSection.steps,
+    ...autoScoredAdditionalSettings.steps,
+    ...specialCharactersFlyoutComponent.steps,
+    ...autoScoredScoringSectionMultipleResponsesType.steps,
+    ...answerNumerationComponent.steps,
+    ...figOverImageCommonComponent.steps,
+    ...uploadImageSectionComponent.steps,
+    ...fillInTheGapsTextCommonComponent.steps,
+    ...previewScoringAndShowCorrectAnswerComponent.steps,
+    ...commonComponents.steps,
+    ...specialAndCustomSpecialCharactersComponent.steps,
+    /**
+    * @param {number} responseContainerIndex Index of response container
+    * @param {number[]} responseContainerPositionCoordinates Position coordinates of the response container
+    * @description Verify position coordinates of response dropdown in preview tab
+    */
+    verifyResponseFieldPositionCoordinatesInPreviewTab: (responseContainerIndex, responseContainerPositionCoordinates) => {
+        fillInTheGapsTextCommonComponent.responseFieldPreviewTab()
+            .eq(responseContainerIndex)
+            .parents('.react-draggable')
+            .invoke('attr', 'style')
+            .then(($styleAttribute) => {
+                let transformValue = $styleAttribute;
+                let position = transformValue.split('(')[1]
+                    .split(')')[0]
+                    .split(',');
+                let horizontalCoordinate = position[0].trim();
+                let verticalCoordinate = position[1].trim();
+                expect(horizontalCoordinate).to.be.eq(responseContainerPositionCoordinates[0]);
+                expect(verticalCoordinate).to.be.eq(responseContainerPositionCoordinates[1]);
+            });
+    },
+
+    /**
+    * @param {number} rowIndex Index of the row in which response container is placed
+    * @param {number} responseContainerIndex Index of the response container
+    * @description Verify the vertical position of the response container as per the row
+    */
+    verifyResponseContainerVerticalPosition: (rowIndex, responseContainerIndex) => {
+        let verticalCoordinate = '';
+        switch (rowIndex) {
+            case 1:
+                verticalCoordinate = '33px';
+                break;
+            case 2:
+                verticalCoordinate = '94px';
+                break;
+            default:
+                throw new Error('Invalid row index');
+        }
+        figOverImageCommonComponent.responseContainer()
+            .eq(responseContainerIndex)
+            .invoke('attr', 'style')
+            .then(($styleAttribute) => {
+                let transformValue = $styleAttribute;
+                let coordinatesArray = transformValue.split('(')[1]
+                    .split(')')[0]
+                    .split(',');
+                let responseVerticalCoordinate = coordinatesArray[1].trim();
+                expect(responseVerticalCoordinate).to.be.eq(verticalCoordinate);
+            });
+    }
+}
+
+const tests = {
+    ...commonComponents.tests,
+    ...createQuestionBasePage.tests,
+    ...questionInstructionsComponent.tests,
+    ...additionalSettingsPanel.tests,
+    ...scoringSectionBase.tests,
+    ...autoScoredSetCorrectAnswerSection.tests,
+    ...autoScoredAdditionalSettings.tests,
+    ...autoScoredScoringSection.tests,
+    ...specialCharactersFlyoutComponent.tests,
+    ...specialAndCustomSpecialCharactersComponent.tests,
+    ...previewScoringAndShowCorrectAnswerComponent.tests,
+    ...autoScoredScoringSectionMultipleResponsesType.tests,
+    ...answerNumerationComponent.tests,
+    ...uploadImageSectionComponent.tests,
+    ...fillInTheGapsTextCommonComponent.tests,
+    ...figOverImageCommonComponent.tests,
+    /**
+     * Verify minimum score awarded if attempted functionality when an incorrect answer is attempted.
+     * @param {number} minimumScoreIfAttemptedPoints - The minimum score awarded if attempted.
+     * @param {number} allocatedPoints - The expected allocated points for the question.
+     */
+    verifyMinimumScoreAwardedIfAttemptedFunctionalityForIncorrectAnswer: (minimumScoreIfAttemptedPoints, allocatedPoints) => {
+        it('When user has provided minimum score awarded (if attempted) points, then in preview tab on entering incorrect answer, minimum score should be provided for the question', () => {
+            cy.log('Switch to edit tab and set minimum score if attempted points')
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.allotMinimumScoreAwardedIfAttempted(minimumScoreIfAttemptedPoints);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, 'Branch');
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, 'Stem');
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewTabScoreText(`${minimumScoreIfAttemptedPoints}`, `${allocatedPoints}`);
+        });
+    }
+}
+
+
+export const fillInTheGapsOverImageTextPage = {
+    ...selectors,
+    steps,
+    tests
+}