itemengine-cypress-automation 1.0.2

package/cypress/pages/components/optionsWrapperComponent.js

@@ -0,0 +1,221 @@
+import constants from "../../fixtures/constants";
+import { commonComponents } from "./commonComponents";
+
+const selectors = {
+    optionsLabel: () => cy.get('.options-label'),
+    optionsSectionWrapper: () => cy.get('[data-rbd-droppable-id="assessment-option-item-options"]'),
+    optionWrapper: () => cy.get('[data-rbd-draggable-id*="option-draggable"]'),
+    addOptionButton: () => cy.get('.add-option-wrapper-cls button').contains('Add option'),
+    deleteOptionButton: () => cy.get('.ngie-button[aria-label*="Delete option"]'),
+    optionsInputField: () => cy.get('.option-component [role="textbox"]'),
+    //TODO: Need to update this in all TEI
+    optionNumeration: () => cy.get('[class*="SingleOptionstyle__AdornmentDiv"]')
+}
+
+const steps = {
+    //V3 - Need to update in all files
+    verifyOptionsLabel: () => {
+        optionsWrapperComponent.optionsLabel()
+            .should('have.text', 'Options')
+            .and('be.visible');
+    },
+
+    //V3 - Need to update in all files
+    /**
+   * @param {number} index of the option
+   * @description verify the enter option input field, drag handle, delete button and option numeration
+   */
+    verifyOptionsContents: (index) => {
+        optionsWrapperComponent.optionWrapper()
+            .eq(index)
+            .within(() => {
+                optionsWrapperComponent.optionsInputField()
+                    .should('have.attr', 'data-cke-editorplaceholder', 'Enter option');
+                commonComponents.dragHandleButton()
+                    .should('exist');
+                commonComponents.deleteButton()
+                    .should('be.visible');
+                optionsWrapperComponent.optionNumeration()
+                    .should('have.text', index + 1);
+            });
+    },
+
+    //V3 - Need to update in all files
+    /**
+     * @param {number} index of the option
+     * @description this function deletes an option
+     */
+    deleteOption: (index) => {
+        optionsWrapperComponent.deleteOptionButton()
+            .eq(index)
+            .click();
+    },
+
+    //V3 - Need to update in all files
+    addOption: () => {
+        optionsWrapperComponent.addOptionButton()
+            .click();
+    },
+
+    //V3 - Need to update in all files
+    verifyAddOptionButton: () => {
+        optionsWrapperComponent.addOptionButton()
+            .should('have.text', 'Add option')
+            .should('be.visible');
+    },
+
+    //V3 - Need to update in all files
+    /**
+     * @param {number} index of option
+     * @description this function verifies error message of option input field
+     */
+    verifyOptionsInputFieldErrorMessage: (index) => {
+        optionsWrapperComponent.optionWrapper()
+            .eq(index)
+            .within(() => {
+                commonComponents.errorMessage()
+                    .should('have.text', 'Error: Option is required.');
+            });
+    },
+
+    //V3 - Need to update in all files
+    /**
+     * @param {number} index of option
+     * @description this function verifies error message does not exist for option input field
+     */
+    verifyOptionsInputFieldErrorMessageDoesNotExist: (index) => {
+        optionsWrapperComponent.optionWrapper()
+            .eq(index)
+            .within(() => {
+                commonComponents.errorMessage()
+                    .should('not.exist');
+            });
+    },
+
+    /**
+     * @param {number} countOfOptions count of options input fields
+     * @description this function verifies the number of options input fields
+     */
+    verifyCountOfOptionsInputFields: (countOfOptions) => {
+        optionsWrapperComponent.optionsInputField()
+            .should('have.length', countOfOptions);
+    },
+
+    //V3 - Need to update in all files
+    /**
+     * @param {number} index of the option input field
+     * @description this function focuses in and out of options input fields
+     */
+    focusInAndFocusOutOfOptionsInputField: (index) => {
+        steps.focusInOptionsInputField(index)
+        optionsWrapperComponent.optionsInputField()
+            .eq(index)
+            .blur();
+    },
+
+    //V3 - Need to update in all files
+    /**
+     * @param {number} index of the option input field
+     * @description this function focuses in and out of options input fields
+     */
+    focusInOptionsInputField: (index) => {
+        optionsWrapperComponent.optionsInputField()
+            .eq(index)
+            .focus();
+    },
+
+    /**
+     * @param {number} index of the option input field
+     * @param {string} option input text
+     * @description this function add input to options input fields
+     */
+    addBoldTextInputToOptionsInputField: (index) => {
+        optionsWrapperComponent.optionsInputField()
+            .eq(index)
+            .type('This is a bold option')
+            .should('have.text', '​​​​​​​This is a bold option');
+    },
+
+    /**
+     * @param {number} index of option
+     * @description this function verifies bold text in options input fields
+     */
+    verifyBoldOption: (index) => {
+        optionsWrapperComponent.optionsInputField()
+            .eq(index)
+            .find('strong')
+            .should('exist')
+            .should('have.text', '​​​​​​​This is a bold option');
+    },
+
+    /**
+     * @param {number} index of option
+     * @description this function verifies image in options input fields
+     */
+    verifyImageAndAltTextInOptionsInputField: (index) => {
+        optionsWrapperComponent.optionsInputField()
+            .eq(index)
+            .find('img')
+            .should('have.attr', 'src', constants.foxImageLink)
+            .and('have.attr', 'alt', constants.foxImageAltText);
+    },
+
+    /**
+     * @param {number} index of option
+     * @description this function verifies equation in options input fields
+     */
+    verifyEquationInOptionsInputField: (index) => {
+        optionsWrapperComponent.optionsInputField()
+            .eq(index)
+            .find('[data-widget="ngie_equation"]')
+            .should('have.attr', 'aria-label', constants.CKEditorInputFieldEnteredEquationAriaLabel)
+            .contains(constants.CKEditorInputFieldEnteredEquationText);
+    },
+
+    /**
+     * @param {number} index of option
+     * @description this function verifies link in options input fields
+     */
+    verifyLinkInOptionsInputField: (index) => {
+        optionsWrapperComponent.optionsInputField()
+            .eq(index)
+            .find('a')
+            .should('have.text', 'lorem')
+            .and('have.attr', 'href', `${Cypress.config().baseUrl}`);
+    },
+
+    //V3 - Need to update in all files
+    /**
+    * @param {string[]} optionsTextArray array of options
+    * @description this function adds input to the options input field
+    */
+    addInputToOptionsInputField: (optionsTextArray) => {
+        optionsTextArray.forEach((optionsText, index) => {
+            optionsWrapperComponent.optionsInputField()
+                .eq(index)
+                .type(optionsText)
+                .should('have.text', optionsText)
+                .blur();
+        });
+    },
+
+    //V3 - Need to update in all files
+    /**
+     * @param {number} index of option input field
+     * @param {string} textContent to enter text in the options input field
+     */
+    editOptionInputField: (index, textContent) => {
+        optionsWrapperComponent.optionsSectionWrapper()
+            .within(() => {
+                optionsWrapperComponent.optionsInputField()
+                    .eq(index)
+                    .clear()
+                    .type(textContent);
+            });
+    },
+}
+
+export const optionsWrapperComponent = {
+    ...selectors,
+    steps
+}

package/cypress/pages/components/playbackControlsBaseComponent.js

@@ -0,0 +1,163 @@
+const selectors = {
+    volumeControlButton: () => cy.get('.audio-player-icon'),
+    volumeControlSlider: () => cy.get('.audio-volume-control-slider'),
+    muteVolumeIcon: () => cy.get('.audio-mute-icon-wr'),
+    unmutedVolumeIcon: () => cy.get('.audio-volume-icon-wr'),
+    progressBar: () => cy.get('.progress-bar-wrapper'),
+    progressBarSlider: () => cy.get('input[aria-label="Slider bar"]'),
+    playbackPlayButton: () => cy.get('button[aria-label="Play"]'),
+    playbackPauseButton: () => cy.get('button[aria-label="Pause"]'),
+}
+
+const steps = {
+    startPlayback: () => {
+        playbackControlsBaseComponent.playbackPlayButton()
+            .click();
+    },
+
+    pausePlayback: () => {
+        playbackControlsBaseComponent.playbackPauseButton()
+            .click();
+    },
+
+    hoverOnVolumeControlButton: () => {
+        playbackControlsBaseComponent.volumeControlButton()
+            .realHover();
+    },
+
+    hoverOnVolumeControlSlider: () => {
+        playbackControlsBaseComponent.volumeControlSlider()
+            .trigger('mouseover')
+    },
+
+    /**
+     * @param {number} volume of the audio/video player - from 0 to 100
+     * @description this function is used to verify volume of the audio/video player
+     */
+    verifyVolumeOfPlaybackPlayer: (volume) => {
+        playbackControlsBaseComponent.volumeControlSlider()
+            .should('have.value', volume)
+            .blur();
+    },
+
+    /**
+     * @description Sets the volume to a specified percentage for the audio/video playback.
+     * @param {number} volumePercentage - The desired volume percentage (0-100).
+     * @throws {Error} Throws an error if the volume control element cannot be located or if the click action fails.
+     */
+    setVolumeSliderForPlayback: (volumePercentage) => {
+        playbackControlsBaseComponent.volumeControlSlider()
+            .then(($sliderWidth) => {
+                const sliderWidth = $sliderWidth[0].clientWidth;
+                const volumeLevel = sliderWidth - (sliderWidth * volumePercentage / 100);
+                playbackControlsBaseComponent.volumeControlSlider()
+                    .realClick({ x: 5, y: volumeLevel });
+            });
+    },
+
+    hoverAwayFromVolumeControlButton: () => {
+        cy.get('body')
+            .realHover();
+    },
+
+    clickOnVolumeButton: () => {
+        playbackControlsBaseComponent.volumeControlButton()
+            .realClick();
+    },
+
+    focusOutFromVolumeControlButton: () => {
+        playbackControlsBaseComponent.volumeControlButton()
+            .blur();
+    },
+
+    seekProgressBarSliderToCenter: () => {
+        playbackControlsBaseComponent.progressBar()
+            .click();
+    },
+
+    hoverOnProgressBarSlider: () => {
+        playbackControlsBaseComponent.progressBarSlider()
+            .realHover();
+    },
+
+    /**
+     * @description Verifies that the position of the progress bar slider is greater than or equal to the specified position.
+     * This function retrieves the position of the progress bar slider, which is represented as a numeric value,
+     * and compares it with the specified position to ensure it meets or exceeds the expected value.
+     * @param {number} sliderPositionToCompare - The expected minimum position of the progress bar slider in percentage (0 to 100).
+     * @throws {Error} Throws an error if the slider position is less than the expected position.
+     */
+    verifyProgressBarSliderPosition: (sliderPositionToCompare) => {
+        playbackControlsBaseComponent.progressBarSlider()
+            .then(($value) => {
+                const value = $value[0].valueAsNumber
+                cy.log('The assertion is verifying the value synchronously i.e in real time')
+                expect(value).to.be.gte(sliderPositionToCompare);
+            });
+    },
+
+    verifyPlaybackProgressBarSliderEnabledState: () => {
+        playbackControlsBaseComponent.progressBarSlider()
+            .should('be.enabled');
+    },
+
+    verifyPlaybackProgressBarSliderDisabledState: () => {
+        playbackControlsBaseComponent.progressBarSlider()
+            .should('be.disabled');
+    },
+
+    verifyProgressBarSliderWhenSeekIsDisabled: () => {
+        let initialWidthProgressBar
+        playbackControlsBaseComponent.progressBarSlider()
+            .then(($currWidth) => {
+                initialWidthProgressBar = $currWidth[0].valueAsNumber
+            });
+        playbackControlsBaseComponent.steps.seekProgressBarSliderToCenter();
+        playbackControlsBaseComponent.progressBarSlider()
+            .then(($finalWidth) => {
+                cy.log('The assertion is verifying the value synchronously i.e in real time')
+                const finalWidth = $finalWidth[0].valueAsNumber
+                expect(finalWidth).to.closeTo(initialWidthProgressBar, 5)
+            });
+    },
+
+    pauseAndVerifyProgressBarSliderPosition: () => {
+        let initialWidthProgressBar
+        playbackControlsBaseComponent.progressBarSlider()
+            .then(($currWidth) => {
+                initialWidthProgressBar = $currWidth[0].valueAsNumber
+            });
+        playbackControlsBaseComponent.steps.pausePlayback();
+        playbackControlsBaseComponent.progressBarSlider()
+            .then(($finalWidth) => {
+                cy.log('The assertion is verifying the value synchronously i.e in real time')
+                const finalWidth = $finalWidth[0].valueAsNumber
+                expect(finalWidth).to.closeTo(initialWidthProgressBar, 5)
+            });
+    },
+
+    verifyPlaybackPlayButtonEnabledState: () => {
+        playbackControlsBaseComponent.playbackPlayButton()
+            .should('be.enabled');
+    },
+
+    verifyPlaybackPlayButtonDisabledState: () => {
+        playbackControlsBaseComponent.playbackPlayButton()
+            .should('be.disabled');
+    },
+
+    verifyPlaybackPauseButtonEnabledState: () => {
+        playbackControlsBaseComponent.playbackPauseButton()
+            .should('be.enabled');
+    },
+
+    verifyPlaybackPauseButtonDisabledState: () => {
+        playbackControlsBaseComponent.playbackPauseButton()
+            .should('be.disabled');
+    },
+}
+
+export const playbackControlsBaseComponent = {
+    ...selectors,
+    steps
+}

package/cypress/pages/components/previewScoringAndShowCorrectAnswerComponent.js

@@ -0,0 +1,90 @@
+import { createQuestionBasePage } from "./createQuestionBasePage";
+const css = Cypress.env('css');
+
+const selectors = {
+    showCorrectAnswerCheckbox: () => cy.get('input[aria-label="Show correct answer"]'),
+    showCorrectAnswerCheckboxLabel: () => cy.get('.showAnswer-options-label').eq(1),
+    previewScoreText: () => cy.get('.check-score-view-text')
+}
+
+const steps = {
+    //V3 - This function should be updated in all files
+    checkShowCorrectAnswerCheckbox: () => {
+        previewScoringAndShowCorrectAnswerComponent.showCorrectAnswerCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    //V3 - This function should be updated in all files
+    uncheckShowCorrectAnswerCheckbox: () => {
+        cy.log('Deselect the show correct checkbox')
+        previewScoringAndShowCorrectAnswerComponent.showCorrectAnswerCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    //V3 - This function should be updated in all files
+    verifyDefaultShowCorrectAnswerCheckboxAndLabel: () => {
+        previewScoringAndShowCorrectAnswerComponent.showCorrectAnswerCheckboxLabel()
+            .verifyInnerText('Show correct answer');
+        previewScoringAndShowCorrectAnswerComponent.showCorrectAnswerCheckbox()
+            .should('exist')
+            .and('not.be.checked');
+    },
+
+    //V3 - This function should be updated in all files
+    /**
+     * @param {number} scoredPoints points scored by the user
+     * @param {number} totalPoints maximum points that can be achieved by the user
+     * @description this function verifies score displayed in the preview tab
+     */
+    verifyPreviewTabScoreText: (scoredPoints, totalPoints) => {
+        previewScoringAndShowCorrectAnswerComponent.previewScoreText()
+            .should('have.text', `${scoredPoints}/${totalPoints}`);
+    }
+}
+
+const tests = {
+    verifyShowCorrectAnswerAndPointsNotDisplayedInPreviewTab: () => {
+        it('Show correct answer checkbox as well as points besides it should not be displayed', () => {
+            previewScoringAndShowCorrectAnswerComponent.showCorrectAnswerCheckbox()
+                .should('not.exist');
+            previewScoringAndShowCorrectAnswerComponent.previewScoreText()
+                .should('not.exist');
+        });
+    },
+
+    //V3 - This function should be updated in all files
+    verifyShowCorrectAnswerLabelAndCheckboxExistAndPreviewScoreNotExistInPreviewTab: () => {
+        it('Show correct answer checkbox should be displayed and it should be unchecked by default and points should not be displayed beside it ', () => {
+            previewScoringAndShowCorrectAnswerComponent.showCorrectAnswerCheckbox()
+                .should('not.be.checked');
+            previewScoringAndShowCorrectAnswerComponent.showCorrectAnswerCheckboxLabel()
+                .verifyInnerText('Show correct answer');
+            previewScoringAndShowCorrectAnswerComponent.previewScoreText()
+                .should('not.exist');
+        });
+    },
+
+    //TODO: Need to dicuss this as this is not required everywhere(only the tabs css)
+    verifyCSSOfPreviewAndEditTabAndScoringContents: () => {
+        it('CSS of Preview tab', { tags: 'css' }, () => {
+            //CSS of inactive edit tab
+            createQuestionBasePage.editTab()
+                .verifyCSS(css.color.sectionHeading, css.fontSize.default, css.fontWeight.bold);
+            //CSS of active preview tab
+            createQuestionBasePage.previewTab()
+                .verifyCSS(css.color.activeButtons, css.fontSize.default, css.fontWeight.bold);
+            previewScoringAndShowCorrectAnswerComponent.previewScoreText()
+                .verifyCSS(css.color.labels, css.fontSize.default, css.fontWeight.regular);
+            previewScoringAndShowCorrectAnswerComponent.showCorrectAnswerCheckboxLabel()
+                .verifyCSS(css.color.labelText, css.fontSize.normal, css.fontWeight.regular);
+        });
+    }
+}
+
+export const previewScoringAndShowCorrectAnswerComponent = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/components/questionInstructionsComponent.js

@@ -0,0 +1,112 @@
+import { commonComponents } from "./commonComponents";
+import { createQuestionBasePage } from "./createQuestionBasePage";
+const css = Cypress.env('css');
+
+const selectors = {
+    questionInstructionsLabelEditTab: () => cy.get('.edit-question-instruction-label'),
+    questionInstructionsInputField: () => cy.get('[title="Question Instructions"]'),
+    questionInstructionsText: () => cy.get('.edit-question-preview-wrapper .question-instruction.question-text-wrapper'),
+}
+
+const steps = {
+    addQuestionInstructions: () => {
+        questionInstructionsComponent.questionInstructionsInputField()
+            .type('Which of the following is the major contributor to increased carbon dioxide levels because of urbanization? Select your answer from the options below.', { delay: 0 })
+            .blur();
+    },
+
+    verifyQuestionInstructionsErrorMessageIsNotDisplayed: () => {
+        questionInstructionsComponent.questionInstructionsLabelEditTab()
+            .parents('.edit-question-instruction-wrapper')
+            .within(() => {
+                commonComponents.errorMessage()
+                    .should('not.exist');
+            });
+    },
+
+    verifyQuestionInstructionsErrorMessage: () => {
+        questionInstructionsComponent.questionInstructionsLabelEditTab()
+            .parents('.edit-question-instruction-wrapper')
+            .within(() => {
+                commonComponents.errorMessage()
+                    .verifyInnerText('Error: Question instructions are required.');
+            });
+    }
+}
+
+const tests = {
+    verifyQuestionInstructionsInputFieldEditTab: () => {
+        it('CSS of Question Instructions in Edit tab', { tags: 'css' }, () => {
+            questionInstructionsComponent.questionInstructionsLabelEditTab()
+                .verifyCSS(css.color.sectionHeading, css.fontSize.normal, css.fontWeight.semibold);
+            questionInstructionsComponent.questionInstructionsInputField()
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        //Note: a11y covered in header section 
+
+        it('\'Question Instructions\' label and input field should be displayed and \'Enter Question Instructions\' placeholder text should be displayed on input field', () => {
+            questionInstructionsComponent.questionInstructionsLabelEditTab()
+                .verifyInnerText('Question instructions');
+            questionInstructionsComponent.questionInstructionsInputField()
+                .and('have.attr', 'data-cke-editorplaceholder', 'Enter question instructions');
+        });
+
+        it('When user focus in and out of the \'Question Instructions\' input field without typing anything, an error message should be thrown', () => {
+            questionInstructionsComponent.questionInstructionsInputField()
+                .click()
+                .blur();
+            questionInstructionsComponent.steps.verifyQuestionInstructionsErrorMessage()
+        });
+
+        it('CSS of question instructions error message', { tags: 'css' }, () => {
+            questionInstructionsComponent.questionInstructionsLabelEditTab()
+                .parents('.edit-question-instruction-wrapper')
+                .within(() => {
+                    commonComponents.errorMessage()
+                        .verifyCSS(css.color.errorText, css.fontSize.small, css.fontWeight.regular);
+                });
+        });
+
+        it('Accessibility of question instructions error message', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(questionInstructionsComponent.questionInstructionsLabelEditTab().parents('.edit-question-instruction-wrapper'));
+        });
+
+        it('The user should be able to add the Question Instructions and \'Error :Question Instructions are required.\' error message should disappear', () => {
+            questionInstructionsComponent.steps.addQuestionInstructions()
+            questionInstructionsComponent.steps.verifyQuestionInstructionsErrorMessageIsNotDisplayed()
+        });
+
+        it('When user adds Question instruction the placeholder text should not be displayed', () => {
+            questionInstructionsComponent.questionInstructionsInputField()
+                .should('not.have.attr', 'data-cke-editorplaceholder');
+        });
+    },
+
+    verifyQuestionInstructionsInputFieldPreviewTab: () => {
+        //TODO: Need to decide approach for the below case as Question instruction is a compulsory field and it's empty state cannot be checked in the other views like grading, student, correct answer.
+        it('When user has not entered any text in the Question instructions input field in the \'Edit\' tab then nothing should be displayed in the \'Preview\' tab', () => {
+            cy.barsPreLoaderWait();
+            cy.log('Switching to Preview Tab')
+            createQuestionBasePage.steps.switchToPreviewTab();
+            questionInstructionsComponent.questionInstructionsText()
+                .should('not.exist');
+        });
+
+        it('The added Question Instructions should be displayed on \'Preview\' tab', () => {
+            cy.log('Switching to Edit Tab')
+            createQuestionBasePage.steps.switchToEditTab();
+            questionInstructionsComponent.steps.addQuestionInstructions()
+            cy.log('Switching to Preview Tab')
+            createQuestionBasePage.steps.switchToPreviewTab();
+            questionInstructionsComponent.questionInstructionsText()
+                .should('have.text', 'Which of the following is the major contributor to increased carbon dioxide levels because of urbanization? Select your answer from the options below.');
+        });
+    }
+};
+
+export const questionInstructionsComponent = {
+    ...selectors,
+    steps,
+    tests
+};