itemengine-cypress-automation 1.0.2

package/cypress/pages/components/scoringSectionBase.js

@@ -0,0 +1,308 @@
+import utilities from "../../support/helpers/utilities";
+import { commonComponents } from "./commonComponents";
+const css = Cypress.env('css');
+
+const selectors = {
+    scoringLabel: () => cy.get('.edit-scoring-label'),
+    scoringTypeLabel: () => cy.get('#Scoring-Type-dropdown-label'),
+    scoringTypeDropdown: () => cy.get('#Scoring-Type-select'),
+    scoringTypeDropdownList: () => cy.get('.dropdown-list-ul[aria-labelledby*="Scoring-Type-dropdown-label"]'),
+    scoringTypeDropdownListOptions: () => cy.get('[aria-labelledby*="Scoring-Type-dropdown-label"] li'),
+    minimumScoreIfAttemptedLabel: () => cy.get('[class*="min-score-points-label"]'),
+    minimumScoreIfAttemptedInputField: () => cy.get('.min-score-points-input-field input[type="text"]'),
+    pointsLabel: () => cy.get('.points-label'),
+    pointsInputField: () => cy.get('.points-input-field input[type="text"]'),
+    pleaseEnterPointsErrorMessage: () => cy.get('[class*="ErrorBlockstyles__ErrorText"]'),
+    pointsWrapper: () => cy.get('.set-correct-answer-points-wrapper'),
+}
+
+const steps = {
+    allotPoints: (points) => {
+        scoringSectionBase.pointsInputField()
+            .clear()
+            .type(points)
+            .should('have.value', points)
+            .blur();
+    },
+
+    verifyDefaultPointsLabelAndInputField: () => {
+        scoringSectionBase.pointsLabel()
+            .verifyInnerText('Points');
+        scoringSectionBase.pointsInputField()
+            .should('have.value', '')
+            .and('be.visible');
+    },
+
+    verifyDefaultMinimumScoreIfAttemptedLabelAndPointsField: () => {
+        scoringSectionBase.minimumScoreIfAttemptedLabel()
+            .verifyInnerText('Minimum score awarded (if attempted)');
+        scoringSectionBase.minimumScoreIfAttemptedInputField()
+            .should('have.value', '')
+            .and('be.visible');
+    },
+
+    verifyNonScoredPointsField: () => {
+        scoringSectionBase.pointsInputField()
+            .should('have.value', '0')
+            .and('be.disabled');
+        scoringSectionBase.minimumScoreIfAttemptedInputField()
+            .should('not.exist');
+    },
+
+    selectAScoringTypeFromScoringTypeDropdown: (scoringType) => {
+        scoringSectionBase.scoringTypeDropdown()
+            .should('be.visible')
+            .click();
+        scoringSectionBase.scoringTypeDropdownListOptions()
+            .contains(scoringType, { matchCase: false })
+            .click();
+        scoringSectionBase.scoringTypeDropdown()
+            .verifyInnerText(scoringType);
+    },
+
+    //V3 - This function should be updated in all files
+    allotMinimumScoreAwardedIfAttempted: (points) => {
+        scoringSectionBase.minimumScoreIfAttemptedInputField()
+            .type(points)
+            .should('have.value', points);
+    },
+
+    //V3 - This function should be updated in all files
+    verifyPointsFieldValue: (points) => {
+        scoringSectionBase.pointsInputField()
+            .should('have.value', points);
+    },
+
+    //V3 - This function should be updated in all files
+    clearPointsField: () => {
+        scoringSectionBase.pointsInputField()
+            .clear()
+            .should('have.value', '');
+    },
+
+    //V3 - This function should be updated in all files
+    clearMinimumScoreIfAttemptedPointsField: () => {
+        scoringSectionBase.minimumScoreIfAttemptedInputField()
+            .clear()
+            .should('have.value', '');
+    },
+
+    //V3 - This function should be updated in all files
+    verifyPointsFieldErrorMessage: () => {
+        scoringSectionBase.pointsWrapper()
+            .within(() => {
+                commonComponents.errorMessage()
+                    .verifyInnerText('Error: Please enter points.');
+            });
+    },
+
+    //V3 - This function should be updated in all files
+    verifyPointsFieldErrorMessageIsNotDisplayed: () => {
+        scoringSectionBase.pointsWrapper()
+            .within(() => {
+                commonComponents.errorMessage()
+                    .should('not.exist');
+            });
+    },
+
+    //V3 - This function should be updated in all files
+    /**
+     * @param {number} index index of points field
+     * @description this function focuses in and out of points field
+     */
+    focusInAndFocusOutOfPointsInputField: (index) => {
+        scoringSectionBase.pointsInputField()
+            .eq(index)
+            .focus()
+            .blur();
+    }
+}
+
+const tests = {
+    /**
+     * @param {string} scoringType autoScored|manuallyScored
+     * @description autoScored should be passed for TEI with ['Auto scored', 'Manually scored', 'Non scored'] scoring types, manuallyScored should be passed for manually scored TEI with ['Manually scored', 'Non scored']
+     */
+    verifyScoringTypeLabelAndDropdown: (scoringType) => {
+        const scoringTypeArray = scoringType === 'autoScored' ? ['Auto scored', 'Manually scored', 'Non scored'] : ['Manually scored', 'Non scored'];
+        it(`\'Scoring\' label should be displayed and \'Scoring type\' label and dropdown should be displayed and in \'Scoring type\' dropdown \'${scoringTypeArray[0]}\' option should be selected by default`, () => {
+            scoringSectionBase.scoringLabel()
+                .verifyInnerText('Scoring');
+            scoringSectionBase.scoringTypeLabel()
+                .verifyInnerText('Scoring type');
+            scoringSectionBase.scoringTypeDropdown()
+                .verifyInnerText(scoringTypeArray[0])
+                .and('be.visible');
+        });
+
+        it(`Clicking on Scoring Type dropdown should open a list of scoring types - ${scoringTypeArray}`, () => {
+            let dropdownOptions = scoringTypeArray;
+            scoringSectionBase.scoringTypeDropdown()
+                .click();
+            scoringSectionBase.scoringTypeDropdownListOptions()
+                .eq(0)
+                .should('be.visible');
+            dropdownOptions.forEach((option, count) => {
+                scoringSectionBase.scoringTypeDropdownListOptions()
+                    .eq(count)
+                    .verifyInnerText(option);
+            });
+        });
+
+        it('CSS of Scoring type dropdown in active state', { tags: 'css' }, () => {
+            scoringSectionBase.scoringTypeDropdownListOptions()
+                .eq(0)
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
+                .should('have.css', 'background-color', css.color.liTextSelectedBg);
+            scoringSectionBase.scoringTypeDropdownListOptions()
+                .eq(1)
+                .should('have.css', 'background-color', css.color.transparent);
+        });
+
+        it('Accessibility of Scoring type dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.dropdownList())
+        });
+
+        it('Clicking outside the Scoring type dropdown menu should close the dropdown menu', () => {
+            scoringSectionBase.scoringLabel()
+                .click();
+            scoringSectionBase.scoringTypeDropdownList()
+                .should('not.exist');
+        });
+
+        it('CSS of Scoring section label and dropdown', { tags: 'css' }, () => {
+            utilities.verifyCSS(scoringSectionBase.scoringLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(scoringSectionBase.scoringTypeLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(scoringSectionBase.scoringTypeDropdown().find('.dropdown-label-text'), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+    },
+
+    verifyPointsFieldErrorState: (allocatedPoints) => {
+        it('When the user focuses in and out of the empty points input field, \'Please enter points.\' validation text should be displayed below the Points input field', () => {
+            scoringSectionBase.pointsInputField()
+                .focus()
+                .blur();
+            scoringSectionBase.pleaseEnterPointsErrorMessage()
+                .verifyInnerText('Error: Please enter points.')
+                .and('be.visible');
+        });
+
+        it('CSS of points field error message', { tags: 'css' }, () => {
+            scoringSectionBase.pointsLabel()
+                .parents('.points-wrapper')
+                .within(() => {
+                    commonComponents.errorMessage()
+                        .verifyCSS(css.color.errorText, css.fontSize.small, css.fontWeight.regular);
+                });
+        });
+
+        it('Accessibility of points field error message', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.errorMessage())
+        });
+
+        it('When the user enters point in Points input field then the \'Please enter points.\' validation text should disappear', () => {
+            scoringSectionBase.pointsInputField()
+                .type(allocatedPoints)
+                .should('have.value', allocatedPoints);
+            scoringSectionBase.pleaseEnterPointsErrorMessage()
+                .should('not.exist');
+        });
+    },
+
+    /**
+     * @param {number} allocatedPoints points entered in the points input field
+     * @param {number} minimumPoints points entered in the minimum score awarded (if attempted) input field
+     * @param {number} maxPoints maximum points that can be achieved for the question
+     * @description this function verifies the error conditions of minimum score awarded (if attempted) input field
+     */
+    verifyMinimumScoreIfAttemptedFieldErrorState: (allocatedPoints, minimumPoints, maxPoints) => {
+        it('When the user focuses in and out of the empty Minimum score awarded (if attempted) input field, any validation text should not be displayed', () => {
+            scoringSectionBase.minimumScoreIfAttemptedInputField()
+                .click()
+                .blur();
+            scoringSectionBase.pleaseEnterPointsErrorMessage()
+                .should('not.exist');
+        });
+
+        it('If the user enters points more than the allocated points in \'Minimum score awarded (if attempted)\' input field, an error message \'Error: Minimum score cannot be greater than allocated points.: *points in points field*\' should be displayed', () => {
+            cy.log('Pre step: allocating points')
+            scoringSectionBase.steps.allotPoints(allocatedPoints);
+            scoringSectionBase.minimumScoreIfAttemptedInputField()
+                .clear()
+                .type(minimumPoints)
+                .should('have.value', minimumPoints)
+                .blur();
+            cy.get('body')
+                .click();
+            commonComponents.errorMessage()
+                .verifyInnerText(`Error: Minimum score cannot be greater than allocated points.: ${maxPoints}`);
+        });
+
+        it('The error message should disappear once the user removes the entered points from the Minimum score awarded (if attempted) input field', () => {
+            scoringSectionBase.minimumScoreIfAttemptedInputField()
+                .clear()
+            cy.get('body')
+                .click();
+            commonComponents.errorMessage()
+                .should('not.exist');
+        });
+    },
+
+    //V3- need to update this for all files
+    verifyPointsLabelAndInputField: () => {
+        it('When the user selects \'Auto Scored\' option from the Scoring type dropdown, then \'Points\' label and input field should be displayed', () => {
+            scoringSectionBase.steps.verifyDefaultPointsLabelAndInputField();
+        });
+
+        it('CSS of \'Points\' label and input field', { tags: 'css' }, () => {
+            scoringSectionBase.pointsLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            scoringSectionBase.pointsInputField()
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        it('Accessibility of \'Points\' label and input field', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(scoringSectionBase.pointsInputField().parents('.points-wrapper'));
+        });
+    },
+
+    //V3- need to update this for all files
+    verifyMinimumScoreAwardedLabelAndInputField: () => {
+        it('When the user selects \'Auto Scored\' option from the Scoring type dropdown, then \'Minimum score awarded (if attempted)\' label and input field should be displayed', () => {
+            scoringSectionBase.steps.verifyDefaultMinimumScoreIfAttemptedLabelAndPointsField();
+        });
+
+        it('User should be able to enter points in \'Minimum score awarded (if attempted)\' input field', () => {
+            scoringSectionBase.steps.allotMinimumScoreAwardedIfAttempted(3);
+        });
+
+        it('CSS of \'Minimum score awarded (if attempted)\' label and input field', { tags: 'css' }, () => {
+            scoringSectionBase.minimumScoreIfAttemptedLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            scoringSectionBase.minimumScoreIfAttemptedInputField()
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        it('Accessibility of \'Minimum score awarded (if attempted)\' label and input field', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(scoringSectionBase.minimumScoreIfAttemptedInputField().parents('.points-container'));
+        });
+    },
+}
+
+export const scoringSectionBase = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/components/setPointsPopupBase.js

@@ -0,0 +1,79 @@
+import { dialogBoxBase } from "../dialogBoxBase";
+import { commonComponents } from "./commonComponents";
+import { scoringSectionBase } from "./scoringSectionBase";
+
+const selector = {
+    ...dialogBoxBase,
+    setPointsPopupOptions: () => cy.get('#alert-dialog-description .question-text-wrapper'),
+    setPointsPopupPointsLabel: () => cy.get('[class*="ListOrderingstyles__PointsLabel"]')
+}
+
+const steps = {
+    cancelSetPointsPopup: () => {
+        setPointsPopupBase.buttonReject()
+            .click();
+        setPointsPopupBase.dialogBox()
+            .should('not.exist');
+    },
+
+    saveSetPointsPopup: () => {
+        setPointsPopupBase.buttonAccept()
+            .click();
+        setPointsPopupBase.dialogBox()
+            .should('not.exist');
+    },
+
+    /**
+     * @param {number[]} pointsArray array of points to be added to Set points popup
+     * @description this function enters points to the points Input field of Set points popup
+     */
+    allotPointsToSetPointsPopupPointsInputField: (pointsArray) => {
+        pointsArray.forEach((points, index) => {
+            setPointsPopupBase.dialogBox()
+                .within(() => {
+                    scoringSectionBase.pointsInputField()
+                        .eq(index)
+                        .clear()
+                        .type(points)
+                        .should('have.value', points);
+                });
+        });
+    },
+
+    /**
+    * @param {number[]} pointsArray array of points to be verified in Set points popup
+    * @description this function checks points to the points Input field of Set points popup
+    */
+    verifyPointsAllotedInSetPointsPopup: (pointsArray) => {
+        pointsArray.forEach((points, index) => {
+            setPointsPopupBase.dialogBox()
+                .within(() => {
+                    scoringSectionBase.pointsInputField()
+                        .eq(index)
+                        .should('have.value', points);
+                });
+        });
+    },
+
+    /**
+     * @param index points field option index
+     * @description this function verifies points field error message
+     */
+    verifyPointsErrorMessageInSetPointsPopup: (index) => {
+        setPointsPopupBase.dialogBox()
+            .within(() => {
+                scoringSectionBase.pointsInputField()
+                    .eq(index)
+                    .parents('[class*="OptionContainerstyle__PointsWrapper"]')
+                    .within(() => {
+                        commonComponents.errorMessage()
+                            .should('have.text', 'Error: Please enter points.');
+                    });
+            });
+    }
+}
+
+export const setPointsPopupBase = {
+    ...selector,
+    steps
+}

package/cypress/pages/components/specialAndCustomSpecialCharactersComponent.js

@@ -0,0 +1,79 @@
+const selectors = {
+    specialCharactersLabel: () => cy.get('.special-character-label'),
+    displaySpecialCharactersLabel: () => cy.get('[data-ngie-testid="display-special-characters-checkbox"] .MuiFormControlLabel-label'),
+    displaySpecialCharactersCheckbox: () => cy.get('[data-ngie-testid="display-special-characters-checkbox"] input'),
+    customSpecialCharactersLabel: () => cy.get('.special-character-wrapper [class*="InlineTextFieldWithDebouncestyles__PropertyLabel"]'),
+    customSpecialCharactersInputField: () => cy.get('input[aria-label="Custom Special Characters"]'),
+    setCorrectAnsResponseFieldSpecialCharactersButton: () => cy.get('.custon-special-character-button')
+}
+
+const steps = {
+    checkDisplaySpecialCharactersCheckbox: () => {
+        specialAndCustomSpecialCharactersComponent.displaySpecialCharactersCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    /**
+     * Click on the special characters button in a response field in the set correct answer section.
+     * @param {number} responseFieldIndex - The index of the response field to click the button.
+     */
+    clickOnSpecialCharactersButtonSetCorrectAnswerSection: (responseFieldIndex) => {
+        specialAndCustomSpecialCharactersComponent.setCorrectAnsResponseFieldSpecialCharactersButton()
+            .eq(responseFieldIndex)
+            .should('be.visible')
+            .click();
+    },
+
+    /**
+     * Enter text into the custom special characters input field.
+     * @param {string} symbols - The symbols to enter into the input field.
+     */
+    enterTextInCustomSpecialCharactersInputField: (symbols) => {
+        specialAndCustomSpecialCharactersComponent.customSpecialCharactersInputField()
+            .type(symbols)
+            .should('have.value', symbols);
+    }
+}
+
+const tests = {
+    verifyAdditionalSettingsCustomSpecialCharactersSection: () => {
+        it('\'Special characters\' label and \'Display special characters\' label and checkbox should be displayed', () => {
+            specialAndCustomSpecialCharactersComponent.specialCharactersLabel()
+                .verifyInnerText('Special characters')
+                .should('be.visible');
+            specialAndCustomSpecialCharactersComponent.displaySpecialCharactersLabel()
+                .verifyInnerText('Display special characters')
+                .should('be.visible');
+            specialAndCustomSpecialCharactersComponent.displaySpecialCharactersCheckbox()
+                .should('not.be.checked')
+                .and('exist');
+        });
+
+        it('\'Custom special characters\' label and \'Custom special characters\' input field should be displayed, by default the input field should be disabled', () => {
+            specialAndCustomSpecialCharactersComponent.customSpecialCharactersLabel()
+                .verifyInnerText('Custom special characters');
+            specialAndCustomSpecialCharactersComponent.customSpecialCharactersInputField()
+                .should('be.disabled');
+        });
+
+        it('When the \'Custom special characters\' functionality is disabled then the \'Special characters\' button should not be displayed in the set correct answer response field', () => {
+            specialAndCustomSpecialCharactersComponent.setCorrectAnsResponseFieldSpecialCharactersButton()
+                .should('not.exist');
+        });
+
+        it('When user checks the \'Display special characters\' checkbox then the \'Custom special characters\' input field should be enabled', () => {
+            specialAndCustomSpecialCharactersComponent.displaySpecialCharactersCheckbox()
+                .click()
+                .should('be.checked');
+            specialAndCustomSpecialCharactersComponent.customSpecialCharactersInputField()
+                .should('be.enabled');
+        });
+    }
+}
+
+export const specialAndCustomSpecialCharactersComponent = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/components/specialCharactersFlyoutComponent.js

@@ -0,0 +1,58 @@
+import { specialOrMathCharacters } from "../../fixtures/specialAndMathCharacters"
+import { dialogBoxBase } from "../dialogBoxBase";
+
+const selectors = {
+    specialCharactersFlyoutIcon: () => cy.get('.character-wrapper')
+}
+
+const steps = {
+    verifySpecialCharactersFlyoutHeaderContents: () => {
+        dialogBoxBase.dialogBox()
+            .should('be.visible');
+        dialogBoxBase.dialogBoxTitle()
+            .verifyInnerText('Special characters')
+            .should('be.visible');
+        dialogBoxBase.buttonClose()
+            .should('be.visible');
+    },
+
+    clickingOnSpecialCharactersSymbolsFromFlyout: () => {
+        specialCharactersFlyoutComponent.specialCharactersFlyoutIcon()
+            .each(($el) => {
+                cy.wrap($el)
+                    .click();
+            });
+    },
+    
+    /**
+     * Verify the special characters flyout icons.
+     * @param {string[]} customSpecialCharactersArray - An array of expected special characters to verify.
+     */
+    verifySpecialCharactersFlyoutIcons: (customSpecialCharactersArray) => {
+        specialCharactersFlyoutComponent.specialCharactersFlyoutIcon()
+            .each(($el, index) => {
+                cy.wrap($el)
+                    .should('have.text', `${customSpecialCharactersArray[index]}`)
+            });
+    }
+}
+
+const tests = {
+    verifySpecialCharactersFlyoutSymbols: () => {
+        it(`All the ${specialOrMathCharacters['specialCharacters'].popupTitle} symbols should be displayed in the flyout`, () => {
+            let symbolsArray = Object.values(specialOrMathCharacters['specialCharacters'].characters);
+            specialCharactersFlyoutComponent.specialCharactersFlyoutIcon()
+                .each(($element, count) => {
+                    cy.wrap($element)
+                        .should('be.visible')
+                        .verifyInnerText(symbolsArray[count].symbol);
+                });
+        });
+    }
+}
+
+export const specialCharactersFlyoutComponent = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/components/studentResponseAreaAndLayoutComponent.js

@@ -0,0 +1,28 @@
+import utilities from "../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const selectors = {
+    studentResponseAreaAndLayoutLabel: () => cy.get('.additional-settings-heading-label').eq(0),
+}
+
+const tests = {
+    verifyStudentResponseAreaAndLayoutLabelAndCSS: () => {
+        it('\'Student response area and layout\' label should be displayed', () => {
+            utilities.verifyInnerText(studentResponseAndLayoutComponent.studentResponseAreaAndLayoutLabel(), 'Student response area and layout');
+            utilities.verifyElementVisibilityState(studentResponseAndLayoutComponent.studentResponseAreaAndLayoutLabel(), 'visible');
+        });
+
+        it('CSS of \'Student response area and layout\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(studentResponseAndLayoutComponent.studentResponseAreaAndLayoutLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+    }
+}
+
+export const studentResponseAndLayoutComponent = {
+    ...selectors,
+    tests
+}