itemengine-cypress-automation 1.0.167-repoUpdate10April-1465c8c.0 → 1.0.169-uploadResponseMigration-83ab996.0

package/cypress/pages/highlightPage.js

@@ -24,6 +24,7 @@ const selectors = {
     ...autoScoredAdditionalSettings,
 
     questionLabel: () => cy.get('[class*="Highlightstyles__QuestionComponentWrapper"] .title-casing'),
+    questionInputField: () => cy.get('[class*="Highlightstyles__QuestionComponentWrapper"] [title="Question"]'),
     optionSpan: () => cy.get('span'),
     option: () => cy.get('.highlighted'),
     //text selection dropdown
@@ -34,8 +35,10 @@ const selectors = {
     //highlight options section
     highlightOptionsLabel: () => cy.get('.highlightOptions-label-wrapper'),
     highlightOptionsHighlightCounter: () => cy.get('[class*="Highlightstyles__CountWrapper"]'),
+    highlightOptionsTextFieldWrapper: () => cy.get('[class*="Highlightstyles__HighLightWrapper"]'),
     highlightOptionsSectionTextWrapper: () => cy.get('[class*="Highlightstyles__HighLightWrapper"] [data-testid="question-instruction-element"]'),
     highlightOptionsParagraphs: () => cy.get('[class*="Highlightstyles__HighLightWrapper"] p'),
+    highlightOptionsSpans: () => cy.get('[class*="Highlightstyles__HighLightWrapper"] span'),
     colorLibraryButton: () => cy.get('.color-library-wrapper button').eq(0),
     colorLibraryColorOptionButton: () => cy.get('.color-library-content'),
     colorLibrarySelectedColorIcon: () => cy.get('[class*="ColorLibrarystyle__BtnSelectionWrapper"]'),
@@ -82,6 +85,40 @@ const steps = {
     ...autoScoredScoringSection.steps,
     ...commonComponents.steps,
 
+    addInputToQuestionInputField: (text) => {
+        highlightPage.questionInputField()
+            .type(text);
+    },
+
+    clearQuestionInputField: () => {
+        highlightPage.questionInputField()
+            .clear();
+    },
+
+    focusInQuestionInputField: () => {
+        highlightPage.questionInputField()
+            .focus();
+    },
+
+    focusOutOfQuestionInputField: () => {
+        highlightPage.questionInputField()
+            .blur();
+    },
+
+    verifyErroredStateOfQuestionInputField: () => {
+        utilities.verifyCSS(highlightPage.questionInputField(), {
+            'border-color': css.color.errorFieldBorder,
+            'background-color': css.color.errorFieldBg
+        });
+    },
+
+    verifyErroredStateOfHighlightOptionsSection: () => {
+        utilities.verifyCSS(highlightPage.highlightOptionsTextFieldWrapper(), {
+            'border-color': css.color.errorFieldBorder,
+            'background-color': css.color.errorFieldBg
+        });
+    },
+
     /**
      * @param {number} highlightCounterValue Value of highlight counter
      * @description Verify highlight counter text and value
@@ -222,11 +259,133 @@ const steps = {
         utilities.verifyInnerText(highlightPage.buttonAccept(), 'Confirm');
     },
 
+    /**
+     * @param {string} textSelectionType Type of text selection for which reset confirmation popup is displayed
+     * @description Switch text selection type in text selection dropdown
+     */
+    switchTextSelectionTypeInTextSelectionDropdown: (textSelectionType) => {
+        highlightPage.steps.expandTextSelectionDropdown();
+        highlightPage.steps.selectDropdownOptionInTextSelectionDropdown(textSelectionType);
+        utilities.verifyInnerText(highlightPage.dialogBoxContent(), `Applying ${textSelectionType} text selection will reset any existing highlight options, including valid responses and alternate response values.`);
+        highlightPage.steps.clickOnAcceptButtonInDialogBox();
+        utilities.verifyInnerText(highlightPage.textSelectionDropdown(), textSelectionType);
+    },
+
     clearSelectedOptionsInHighlightOptionsSection: () => {
         highlightPage.steps.clickOnClearHighlightButtonInHighlightOptionsSection();
         highlightPage.steps.clickOnAcceptButtonInDialogBox();
     },
 
+    /**
+     * @param {string} optionText Text of the option in highlight options section
+     * @description Verify that option is in selected state in highlight options section
+     */
+    verifyOptionIsSelectedInHighlightOptionsSection: (optionText) => {
+        highlightPage.highlightOptionsSpans()
+            .contains(optionText)
+            .should('have.class', 'highlighted')
+            .and('have.attr', 'aria-checked', 'true');
+    },
+
+    /**
+     * @param {string} optionText Text of the option in set correct answer section
+     * @description Verify that option is not in selected state in set correct answer section
+     */
+    verifyOptionIsNotSelectedInSetCorrectAnswerSection: (optionText) => {
+        highlightPage.setCorrectAnswerOption()
+            .contains(optionText)
+            .should('not.have.class', 'correct_answer')
+            .and('have.attr', 'aria-checked', 'false');
+    },
+
+    /**
+     * @param {string} optionText Text of the option in set correct answer section
+     * @description Verify that option is in selected state in set correct answer section
+     */
+    verifyOptionIsSelectedInSetCorrectAnswerSection: (optionText) => {
+        highlightPage.setCorrectAnswerOption()
+            .contains(optionText)
+            .should('have.class', 'correct_answer')
+            .and('have.attr', 'aria-checked', 'true');
+    },
+
+    /**
+     * @param {string} optionText Text of the option in highlight options section
+     * @description Verify that option is not in selected state in highlight options section
+     */
+    verifyOptionIsNotSelectedInHighlightOptionsSection: (optionText) => {
+        highlightPage.highlightOptionsSpans()
+            .contains(optionText)
+            .should('not.have.class', 'highlighted')
+            .and('have.attr', 'aria-checked', 'false');
+    },
+
+    /**
+     * @param {string} optionText Text of the option in preview tab
+     * @description Verify that option is in selected state in preview tab
+     */
+    verifyOptionIsSelectedInPreviewTab: (optionText) => {
+        highlightPage.previewTabOption()
+            .contains(optionText)
+            .should('have.class', 'correct_answer')
+            .and('have.attr', 'aria-checked', 'true');
+    },
+
+    /**
+     * @param {string} optionText Text of the option in preview tab
+     * @description Verify that option is not in selected state in preview tab
+     */
+    verifyOptionIsNotSelectedInPreviewTab: (optionText) => {
+        highlightPage.previewTabOption()
+            .contains(optionText)
+            .should('not.have.class', 'correct_answer')
+            .and('have.attr', 'aria-checked', 'false');
+    },
+
+    verifyNoOptionIsSelectedInPreviewTab: () => {
+        highlightPage.previewTabOption()
+            .should('not.have.class', 'correct_answer')
+            .and('have.attr', 'aria-checked', 'false');
+    },
+
+    /**
+     * @param {string} optionText Text of the option in highlight options section
+     * @description Verify that option does not exist in highlight options section
+     */
+    verifyOptionDoesNotExistInHighlightOptionsSection: (optionText) => {
+        utilities.verifyElementVisibilityState(highlightPage.highlightOptionsSpans().contains(optionText), 'notExist');
+    },
+
+    /**
+     * @param {string} optionText Text of the option in highlight options section
+     * @description Click on option in highlight options section
+     */
+    clickOnOptionInHighlightOptionsSection: (optionText) => {
+        highlightPage.highlightOptionsSpans()
+            .contains(optionText)
+            .click();
+    },
+
+    /**
+     * @param {string} optionText Text of the option in set correct answer section
+     * @description Click on option in set correct answer section
+     */
+    clickOnOptionInSetCorrectAnswerSection: (optionText) => {
+        highlightPage.setCorrectAnswerOption()
+            .contains(optionText)
+            .click();
+    },
+
+    /**
+    * @param {string} optionText Text of the option in preview tab
+    * @description Click on option in preview tab
+    */
+    clickOnOptionInPreviewTab: (optionText) => {
+        highlightPage.previewTabOption()
+            .contains(optionText)
+            .click();
+    },
+
     /**
      * @param {string} textSelectionType Type of text selection 
      * @param {*} optionText Text of the option in highlight options section
@@ -258,6 +417,179 @@ const steps = {
         }
     },
 
+    /**
+     * @param {*} optionText Text of the option in set correct answer section
+     * @description Select an option in set correct answer section
+     */
+    selectOptionInSetCorrectAnswerSection: (optionText) => {
+        highlightPage.steps.clickOnOptionInSetCorrectAnswerSection(optionText);
+        highlightPage.steps.verifyOptionIsSelectedInSetCorrectAnswerSection(optionText);
+    },
+
+    /**
+     * @param {*} optionText Text of the option in set correct answer section
+     * @description Deselect an option in set correct answer section
+     */
+    deselectOptionInSetCorrectAnswerSection: (optionText) => {
+        highlightPage.steps.clickOnOptionInSetCorrectAnswerSection(optionText);
+        highlightPage.steps.verifyOptionIsNotSelectedInSetCorrectAnswerSection(optionText);
+    },
+
+    /**
+     * @param {*} optionText Text of the option in preview tab
+     * @description Select an option in preview tab
+     */
+    selectOptionInPreviewTab: (optionText) => {
+        highlightPage.steps.clickOnOptionInPreviewTab(optionText);
+        highlightPage.steps.verifyOptionIsSelectedInPreviewTab(optionText);
+    },
+
+    /**
+     * @param {*} optionText Text of the option in preview tab
+     * @description Deselect an option in preview tab
+     */
+    deselectOptionInPreviewTab: (optionText) => {
+        highlightPage.steps.clickOnOptionInPreviewTab(optionText);
+        highlightPage.steps.verifyOptionIsNotSelectedInPreviewTab(optionText);
+    },
+
+    /**
+     * @param {string[]} optionArray Array of text of options in highlight options section
+     * @description Verify the options displayed in highlight options section
+     */
+    verifyOptionsInHighlightOptionsSection: (optionArray) => {
+        optionArray.forEach((optionText, optionIndex) => {
+            utilities.verifyInnerText(highlightPage.highlightOptionsSpans().eq(optionIndex), optionText)
+        });
+        utilities.verifyElementCount(highlightPage.highlightOptionsSpans(), optionArray.length);
+    },
+
+    /**
+     * @param {string[]} optionArray Array of text of options in highlight options section
+     * @description Verify the options displayed in highlight options section
+     */
+    verifyOptionsInSetCorrectAnswerSection: (optionArray) => {
+        optionArray.forEach((optionText, optionIndex) => {
+            utilities.verifyInnerText(highlightPage.setCorrectAnswerOption().eq(optionIndex), optionText)
+        });
+        utilities.verifyElementCount(highlightPage.setCorrectAnswerOption(), optionArray.length);
+    },
+
+    /**
+    * @param {string[]} optionArray Array of text of options in preview tab
+    * @description Verify the options displayed in preview tab
+    */
+    verifyOptionInPreviewTab: (optionArray) => {
+        optionArray.forEach((optionText, optionIndex) => {
+            utilities.verifyInnerText(highlightPage.previewTabOption().eq(optionIndex), optionText)
+        });
+        utilities.verifyElementCount(highlightPage.previewTabOption(), optionArray.length);
+    },
+
+
+    /**
+     * @param {string} optionText Text of the option in highlight options section
+     * @description Hover on deselected option in highlight options section
+     */
+    hoverOnDeselectedOptionInHighlightOptionsSection: (optionText) => {
+        highlightPage.highlightOptionsSpans()
+            .contains(optionText)
+            .realHover();
+    },
+
+    /**
+     * @param {string} optionText Text of the option in highlight options section
+     * @description Verify hover state of the deselected option in highlight options section
+     */
+    verifyHoverStateOfDeselectedOptionInHighlightOptionsSection: (optionText) => {
+        highlightPage.steps.hoverOnDeselectedOptionInHighlightOptionsSection(optionText);
+        utilities.verifyCSS(highlightPage.highlightOptionsSpans().contains(optionText), {
+            'color': css.color.text,
+            'font-size': css.fontSize.default,
+            'font-weight': css.fontWeight.regular,
+            'background-color': colorLibrary[0].hoverBackground,
+            'border': `1px solid ${colorLibrary[0].hoverBorder}`
+        });
+    },
+
+    /**
+     * @param {string} optionText Text of the option in set correct answer section
+     * @description Hover on deselected option in set correct answer section
+     */
+    hoverOnDeselectedOptionInSetCorrectAnswerSection: (optionText) => {
+        highlightPage.setCorrectAnswerOption()
+            .contains(optionText)
+            .realHover();
+    },
+
+    /**
+     * @param {string} optionText Text of the option in preview tab
+     * @description Hover on deselected option in preview tab
+     */
+    hoverOnDeselectedOptionInPreviewTab: (optionText) => {
+        highlightPage.previewTabOption()
+            .contains(optionText)
+            .realHover();
+    },
+
+    /**
+     * @param {string} optionText Text of the option in set correct answer section
+     * @description Verify hover state of the deselected option in set correct answer section
+     */
+    verifyHoverStateOfDeselectedOptionInSetCorrectAnswerSection: (optionText) => {
+        highlightPage.steps.hoverOnDeselectedOptionInSetCorrectAnswerSection(optionText);
+        utilities.verifyCSS(highlightPage.setCorrectAnswerOption().contains(optionText), {
+            'color': css.color.text,
+            'font-size': css.fontSize.default,
+            'font-weight': css.fontWeight.regular,
+            'background-color': colorLibrary[0].hoverBackground,
+            'border': `1px solid ${colorLibrary[0].hoverBorder}`
+        });
+    },
+
+    /**
+    * @param {string} optionText Text of the option in preview tab
+    * @description Verify hover state of the deselected option in preview tab
+    */
+    verifyHoverStateOfOptionInPreviewTab: (optionText) => {
+        highlightPage.steps.hoverOnDeselectedOptionInPreviewTab(optionText);
+        utilities.verifyCSS(highlightPage.previewTabOption().contains(optionText), {
+            'color': css.color.text,
+            'font-size': css.fontSize.default,
+            'font-weight': css.fontWeight.regular,
+            'background-color': colorLibrary[0].hoverBackground,
+            'border': `1px solid ${colorLibrary[0].hoverBorder}`
+        });
+    },
+
+    /**
+         * @param {string} optionText Text of the option in preview tab
+         * @description Verify check-mark icon is displayed for option
+         */
+    verifyCorrectAnswerCheckmarkIconForOption: (optionText) => {
+        highlightPage.previewTabOption()
+            .contains(optionText)
+            .should('have.class', 'correct_answer')
+            .within(() => {
+                autoScoredPreviewBase.correctIcon()
+                    .should('be.visible');
+            });
+    },
+
+    /**
+     * @param {string} optionText Text of the option in preview tab
+     * @description Verify cross-mark icon is displayed for option
+     */
+    verifyIncorrectAnswerCrossmarkIconForOption: (optionText) => {
+        highlightPage.previewTabOption()
+            .contains(optionText)
+            .should('have.class', 'correct_answer')
+            .within(() => {
+                autoScoredPreviewBase.incorrectIcon()
+                    .should('be.visible');
+            });
+    },
+
     /**
      * @param {number[]} pointsArray Array of partial different points for options
      * @description Add points to options in set points popup
@@ -374,6 +706,62 @@ const steps = {
             });
     },
 
+    verifyImageAndAltTextInQuestionInputField: () => {
+        highlightPage.questionInputField()
+            .find('img')
+            .should('have.attr', 'src', constants.foxImageLink)
+            .and('have.attr', 'alt', constants.foxImageAltText);
+    },
+
+    verifyEquationInQuestionInputField: () => {
+        highlightPage.questionInputField()
+            .find('[data-widget="ngie_equation"]')
+            .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
+            .contains(constants.CKEditorInputFieldEnteredEquationText);
+    },
+
+    verifyLinkInQuestionInputField: () => {
+        highlightPage.questionInputField()
+            .find('a')
+            .should('have.text', 'lorem')
+            .and('have.attr', 'href', `${Cypress.config().baseUrl}`);
+    },
+
+    verifyBoldTextInQuestionInputField: () => {
+        highlightPage.questionInputField()
+            .find('strong')
+            .should('exist')
+            .should('have.text', '​​​​​​​This is Bold text input.');
+    },
+
+    verifyImageAndAltTextInHighlightOptionsSection: () => {
+        highlightPage.highlightOptionsTextFieldWrapper()
+            .find('img')
+            .should('have.attr', 'src', constants.foxImageLink)
+            .and('have.attr', 'alt', constants.foxImageAltText);
+    },
+
+    verifyEquationInHighlightOptionsSection: () => {
+        highlightPage.highlightOptionsTextFieldWrapper()
+            .find('span[role="math"]')
+            .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
+            .contains(constants.CKEditorInputFieldEnteredEquationText);
+    },
+
+    verifyLinkInHighlightOptionsSection: () => {
+        highlightPage.highlightOptionsTextFieldWrapper()
+            .find('a')
+            .should('have.text', 'lorem')
+            .and('have.attr', 'href', `${Cypress.config().baseUrl}`);
+    },
+
+    verifyBoldTextInHighlightOptionsSection: () => {
+        highlightPage.highlightOptionsTextFieldWrapper()
+            .find('strong')
+            .should('exist')
+            .should('have.text', 'This is Bold text input.lorem');
+    },
+
     verifyImageAndAltTextInSetCorrectAnswerSection: () => {
         highlightPage.setCorrectAnswerTextWrapper()
             .find('img')
@@ -430,6 +818,12 @@ const steps = {
             .should('have.text', 'This is Bold text input.lorem');
     },
 
+    verifyHighlightOptionsFieldErrorMessage: () => {
+        highlightPage.highlightOptionsTextFieldWrapper()
+            .next()
+            .should('have.text', 'Error: Minimum one highlight option is required.');
+    },
+
     //TODO- Update after https://redmine.zeuslearning.com/issues/548968 is resolved
     verifySetCorrectAnswerErrorMessage: () => {
         highlightPage.setCorrectAnswerLabel()

package/cypress/pages/index.js

@@ -39,12 +39,9 @@ export * from './textEntryMathPage';
 export * from './fillInTheGapsOverImageDragAndDropPage';
 export * from './textEntryMathWithImagePage';
 export * from './graphingPage';
-export * from './simpleCalculatorPage';
+export * from './simpleCalculatorPage'
 export * from './contentBlocksPage';
 export * from './geoGebraActivityPage';
 export * from './gridFillPage';
 export * from './geoGebraToolsPage';
-export * from './matchingPage';
-export * from './brainingCampManipulativePage';
-export * from './numberLinePage';
-export * from './textSelectionPage';
+export * from './matchingPage';