itemengine-cypress-automation 1.0.2

package/cypress/pages/components/autoScoredAdditionalSettings.js

@@ -0,0 +1,183 @@
+import { autoScoredPreviewBase } from "./autoScoredPreviewBase";
+import { createQuestionBasePage } from "./createQuestionBasePage";
+
+const css = Cypress.env('css');
+
+const selectors = {
+    allowStudentsToCheckAnswerLabel: () => cy.get('.allow-student-check-answer-checkbox-wrapper .MuiFormControlLabel-label'),
+    allowStudentsToCheckAnswerCheckbox: () => cy.get('.ngie-checkbox [aria-label="Allow students to check answer"]'),
+    checkAnswerLabel: () => cy.get('.edit-check-answer-label'),
+    maximumCheckAnswerAttemptsLabel: () => cy.get('[class*="CheckAnswerstyles__OptionWrapper"] label[class*="MuiFormLabel-root MuiInputLabel-root"]'),
+    maximumCheckAnswerAttemptsInputField: () => cy.get('[class*="CheckAnswerstyles__OptionWrapper"] input[type="text"]'),
+}
+
+const steps = {
+    //V3 - This function should be updated in all files
+    clearMaximumCheckAnswerAttemptsInputField: () => {
+        autoScoredAdditionalSettings.maximumCheckAnswerAttemptsInputField()
+            .clear()
+            .should('have.value', '');
+    },
+
+    //V3 - This function should be updated in all files
+    addInputToMaximumCheckAnswerAttemptsInputField: (maxCheckAnswerAttempts) => {
+        autoScoredAdditionalSettings.maximumCheckAnswerAttemptsInputField()
+            .type(maxCheckAnswerAttempts)
+            .should('have.value', maxCheckAnswerAttempts);
+    },
+
+    setMaximumCheckAnswerAttempts: (maxCheckAnswerAttempts) => {
+        autoScoredAdditionalSettings.steps.checkAllowStudentsToCheckAnswerCheckbox()
+        autoScoredAdditionalSettings.steps.addInputToMaximumCheckAnswerAttemptsInputField(maxCheckAnswerAttempts)
+    },
+
+    //V3 - This function should be updated in all files
+    checkAllowStudentsToCheckAnswerCheckbox: () => {
+        autoScoredAdditionalSettings.allowStudentsToCheckAnswerCheckbox()
+            .click()
+            .should('be.checked');
+    }
+}
+
+const tests = {
+    verifyCheckAnswerSectionAndPreviewTabCheckAnswerButton: (questionType) => {
+        it('CSS of \'Check Answer\' section', { tags: 'css' }, () => {
+            autoScoredAdditionalSettings.checkAnswerLabel()
+                .verifyCSS(css.color.labels, css.fontSize.default, css.fontWeight.semibold);
+            autoScoredAdditionalSettings.allowStudentsToCheckAnswerLabel()
+                .verifyCSS(css.color.labelText, css.fontSize.normal, css.fontWeight.regular);
+        });
+
+        it('\'Check Answer\' label, \'Allow students to check answer\' checkbox label and checkbox should be displayed and by default it should be unchecked', () => {
+            autoScoredAdditionalSettings.checkAnswerLabel()
+                .verifyInnerText('Check answer');
+            autoScoredAdditionalSettings.allowStudentsToCheckAnswerLabel()
+                .verifyInnerText('Allow students to check answer');
+            autoScoredAdditionalSettings.allowStudentsToCheckAnswerCheckbox()
+                .should('not.be.checked');
+            if (questionType === 'multiple selection' || questionType === 'single selection') {
+                autoScoredAdditionalSettings.maximumCheckAnswerAttemptsInputField()
+                    .should('not.exist');
+            } else {
+                autoScoredAdditionalSettings.maximumCheckAnswerAttemptsInputField()
+                    .should('be.disabled');
+            }
+        });
+
+        it('When the user checks the \'Allow students to check answer\' checkbox, \'Maximum check answer attempts\' label and input field should be displayed', () => {
+            autoScoredAdditionalSettings.allowStudentsToCheckAnswerCheckbox()
+                .click()
+                .should('be.checked');
+            if (questionType === 'multipleSelection') {
+                autoScoredAdditionalSettings.maximumCheckAnswerAttemptsInputField()
+                    .should('be.visible');
+            } else {
+                autoScoredAdditionalSettings.maximumCheckAnswerAttemptsInputField()
+                    .should('be.enabled');
+            }
+
+            autoScoredAdditionalSettings.maximumCheckAnswerAttemptsLabel()
+                .verifyInnerText('Maximum check answer attempts');
+        });
+
+        it('CSS of \'Maximum check answer attempts\' input field', { tags: 'css' }, () => {
+            autoScoredAdditionalSettings.maximumCheckAnswerAttemptsLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            autoScoredAdditionalSettings.maximumCheckAnswerAttemptsInputField()
+                .should('have.css', 'background-color', css.color.transparent)
+        });
+
+        it('When the \'Maximum check answer attempts\' input field is empty and user switches to Preview tab, then the \'Check Answer\' button should be displayed and it should be enabled', () => {
+            //TODO: Need to discuss if we need add script to verify maximum input upto 999 and no decimal can be added
+            autoScoredAdditionalSettings.maximumCheckAnswerAttemptsInputField()
+                .should('have.value', '');
+            cy.log('Switching to Preview tab')
+            createQuestionBasePage.steps.switchToPreviewTab();
+            autoScoredPreviewBase.checkAnswerButton()
+                .should('be.enabled')
+                .and('be.visible');
+        });
+
+        it('CSS of Check Answer button', { tags: 'css' }, () => {
+            autoScoredPreviewBase.checkAnswerButton()
+                .verifyCSS(css.color.primaryBtn, css.fontSize.default, css.fontWeight.semibold)
+                .should('have.css', 'background-color', css.color.primaryBtnBg);
+        });
+
+        it('Accessibility of enabled Check Answer button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(autoScoredPreviewBase.checkAnswerButton());
+        });
+
+        it('When the user adds some value more than 0 in the \'Maximum check answer attempts\' input field, then the \'Check Answer\' button should become enabled in the Preview tab', () => {
+            cy.log('Pre step: Switching to Edit tab')
+            createQuestionBasePage.steps.switchToEditTab();
+            autoScoredAdditionalSettings.maximumCheckAnswerAttemptsInputField()
+                .clear()
+                .type('2')
+                .should('have.value', '2');
+            cy.log('Switching to Preview tab')
+            createQuestionBasePage.steps.switchToPreviewTab();
+            autoScoredPreviewBase.checkAnswerButton()
+                .should('not.have.class', 'Mui-disabled');
+        });
+
+        it('When the user unchecks the \'Allow students to check answer\' checkbox, then the \'Maximum check answer attempts\' input field should not be displayed and in Preview tab the \'Check Answer\' button should not be displayed', () => {
+            cy.log('Pre step: Switching to Edit tab')
+            createQuestionBasePage.steps.switchToEditTab();
+            autoScoredAdditionalSettings.allowStudentsToCheckAnswerCheckbox()
+                .click()
+                .should('not.be.checked');
+            if (questionType === 'multiple selection' || questionType === 'single selection') {
+                autoScoredAdditionalSettings.maximumCheckAnswerAttemptsInputField()
+                    .should('not.exist');
+            } else {
+                autoScoredAdditionalSettings.maximumCheckAnswerAttemptsInputField()
+                    .should('be.disabled');
+            }
+            cy.log('Switching to Preview tab')
+            createQuestionBasePage.steps.switchToPreviewTab();
+            autoScoredPreviewBase.checkAnswerButton()
+                .should('not.exist');
+        });
+    },
+
+    verifyDisabledCheckAnswerButtonWithCSSAnda11y: () => {
+        it('When the user reaches maximum check answer attempts, then the \'Check Answer\' button should become disabled', () => {
+            autoScoredPreviewBase.checkAnswerButton()
+                .should('be.disabled');
+        });
+
+        it('CSS of disabled \'Check Answer\' button', { tags: 'css' }, () => {
+            autoScoredPreviewBase.checkAnswerButton()
+                .verifyCSS(css.color.primaryBtnDisabled, css.fontSize.default, css.fontWeight.semibold);
+        });
+
+        it('Accessibility of disabled Check Answer button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(autoScoredPreviewBase.checkAnswerButton());
+        });
+    },
+
+    verifyCheckAnswerButtonFunctionalityWhenQuestionIsUnattempted: () => {
+        it('When the user has not attempted the question and clicks on the \'Check Answer\' button, then no changes should be displayed and the \'Check answer\' button should not get disabled', () => {
+            //comment: clicking on check answer button twice to verify if it stays in enabled state
+            autoScoredPreviewBase.checkAnswerButton()
+                .click();
+            autoScoredPreviewBase.checkAnswerButton()
+                .click();
+            autoScoredPreviewBase.correctIncorectAnswerLabel()
+                .should('not.exist');
+            autoScoredPreviewBase.correctIcon()
+                .should('not.exist');
+            autoScoredPreviewBase.incorrectIcon()
+                .should('not.exist');
+            autoScoredPreviewBase.checkAnswerButton()
+                .should('be.enabled');
+        });
+    }
+}
+
+export const autoScoredAdditionalSettings = {
+    ...selectors,
+    steps,
+    tests
+}

package/cypress/pages/components/autoScoredPreviewBase.js

@@ -0,0 +1,94 @@
+import { previewScoringAndShowCorrectAnswerComponent } from "./previewScoringAndShowCorrectAnswerComponent";
+
+const css = Cypress.env('css');
+const selectors = {
+    correctIcon: () => cy.get('.icon-correct'),
+    incorrectIcon: () => cy.get('.icon-incorrect'),
+    correctIncorectAnswerLabel: () => cy.get('.answer-label-text'),
+    checkAnswerButton: () => cy.get('.check-answer-and-status-wrapper button'),
+    correctIncorrectAnswerBorder: () => cy.get('.edit-question-preview-wrapper [class*="correct-answer-border"]')
+}
+
+const steps = {
+    //V3 - This function should be updated in all files
+    checkAnswer: () => {
+        autoScoredPreviewBase.checkAnswerButton()
+            .click();
+    },
+
+    //V3 - This function should be updated in all files
+    verifyCheckAnswerButtonEnabled: () => {
+        autoScoredPreviewBase.checkAnswerButton()
+            .should('be.enabled');
+    },
+
+    //V3 - This function should be updated in all files
+    verifyCheckAnswerButtonDisabled: () => {
+        autoScoredPreviewBase.checkAnswerButton()
+            .should('be.disabled');
+    },
+
+    verifyCorrectIncorrectAnswerLabel: (labelText) => {
+        autoScoredPreviewBase.correctIncorectAnswerLabel()
+            .should('be.visible')
+            .verifyInnerText(`${labelText} answer`)
+            .parents('[class*="CorrectIncorrectAnswerstyles__AnswerLabelWrapper"]')
+            .find('.answer-label-icon')
+            .should('be.visible')
+            .should('have.text', `${labelText}-Icon`)
+    },
+
+    verifyCorrectAttemptBorder: () => {
+        autoScoredPreviewBase.correctIncorrectAnswerBorder()
+            .should('have.css', 'border', `1px solid ${css.color.correctAnswer}`);
+    },
+
+    verifyIncorrectAttemptBorder: () => {
+        autoScoredPreviewBase.correctIncorrectAnswerBorder()
+            .should('have.css', 'border', `1px solid ${css.color.incorrectAnswer}`);
+    },
+
+    verifyCorrectIncorrectBorderNotVisible: () => {
+        autoScoredPreviewBase.correctIncorrectAnswerBorder()
+            .should('have.css', 'border')
+            .and('match', /0px none/);
+    },
+
+    verifyCorrectIncorrectBorderNotExists: () => {
+        autoScoredPreviewBase.correctIncorrectAnswerBorder()
+            .should('not.exist');
+    },
+
+    verifyCorrectIncorrectAnswerLabelNotExists: () => {
+        autoScoredPreviewBase.correctIncorectAnswerLabel()
+            .should('not.exist');
+    },
+
+    verifyQuestionPreviewStateWhenShowCorrectAnswerIsUnchecked: () => {
+        cy.log('After deselecting Show correct answer checkbox, the question preview should return to the previous state');
+        previewScoringAndShowCorrectAnswerComponent.showCorrectAnswerCheckbox()
+            .click()
+            .should('not.be.checked');
+        autoScoredPreviewBase.correctIcon()
+            .should('not.exist');
+        autoScoredPreviewBase.incorrectIcon()
+            .should('not.exist');
+        autoScoredPreviewBase.correctIncorectAnswerLabel()
+            .should('not.exist');
+        autoScoredPreviewBase.correctIncorrectAnswerBorder()
+            .should('not.exist');
+    },
+
+    //V3 - This function should be updated in all files
+    verifyCorrectIncorrectIconsDoesNotExist: () => {
+        autoScoredPreviewBase.correctIcon()
+            .should('not.exist');
+        autoScoredPreviewBase.incorrectIcon()
+            .should('not.exist');
+    }
+}
+
+export const autoScoredPreviewBase = {
+    ...selectors,
+    steps
+}

package/cypress/pages/components/autoScoredScoringSection.js

@@ -0,0 +1,195 @@
+import { autoScoredPreviewBase } from "./autoScoredPreviewBase";
+import { autoScoredSetCorrectAnswerSection } from "./autoScoredSetCorrectAnswerSection";
+import { createQuestionBasePage } from "./createQuestionBasePage";
+import { scoringSectionBase } from "./scoringSectionBase";
+import { commonComponents } from "./commonComponents";
+import { previewScoringAndShowCorrectAnswerComponent } from "./previewScoringAndShowCorrectAnswerComponent";
+const css = Cypress.env('css');
+
+const steps = {
+    correctIncorrectLabelAndBorderExists: (questionType) => {
+        switch (questionType) {
+            case 'multiple selection':
+                return true;
+            case 'single selection':
+                return false;
+            case 'fill in the gaps - text':
+                return true;
+            case 'fill in the gaps - dropdown':
+                return true;
+            case 'fill in the gaps - drag and drop':
+                return true;
+            case 'short text response':
+                return false;
+            case 'fill in the gaps - drag and drop':
+                return true;
+            case 'list matching':
+                return true;
+            case 'list ordering':
+                return true;
+            case 'list sorting':
+                return true;
+            case 'highlight':
+                return true;
+            case 'fill in the gaps over image - text':
+                return true;
+            case 'fill in the gaps over image - dropdown':
+                return true;
+            default:
+                throw new Error('Invalid question type');
+        }
+    },
+
+    verifyPreviewTabPointsBackgroundForIncorrectOrPartiallyCorrectAnswer: () => {
+        previewScoringAndShowCorrectAnswerComponent.previewScoreText()
+            .should('have.css', 'color', css.color.labels)
+            .and('not.have.css', 'background-color', css.color.correctAnswer);
+    },
+
+    verifyPreviewTabPointsBackgroundForCorrectAnswer: () => {
+        previewScoringAndShowCorrectAnswerComponent.previewScoreText()
+            .should('have.css', 'color', css.color.whiteText)
+            .and('have.css', 'background-color', css.color.correctAnswer);
+    }
+}
+
+const tests = {
+    verifyAutoScoredAllOrNothingPointsAndMinimumScoreAwardedLabelAndInputField: () => {
+        it('When the user selects \'Auto Scored\' option from the Scoring Type dropdown, then \'Points\' and \'Minimum score awarded (if attempted)\' labels and input fields should be displayed', () => {
+            scoringSectionBase.pointsLabel()
+                .verifyInnerText('Points')
+                .and('be.visible');
+            scoringSectionBase.pointsInputField()
+                .should('have.value', '')
+                .and('be.visible');
+            scoringSectionBase.minimumScoreIfAttemptedLabel()
+                .verifyInnerText('Minimum score awarded (if attempted)')
+                .and('be.visible');
+            scoringSectionBase.minimumScoreIfAttemptedInputField()
+                .should('have.value', '')
+                .and('be.visible');
+        });
+
+        it('CSS of \'Points\' and \'Minimum score awarded (if attempted)\' labels', { tags: 'css' }, () => {
+            scoringSectionBase.minimumScoreIfAttemptedLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            scoringSectionBase.pointsLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+        });
+
+        it('Accessibility of \'Points\' and \'Minimum score awarded (if attempted)\' labels and input fields', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(scoringSectionBase.minimumScoreIfAttemptedInputField());
+            cy.checkAccessibility(scoringSectionBase.pointsInputField());
+        });
+    },
+
+    verifyEditTabNonScoredScoringSectionContents: () => {
+        it('When the user selects \'Non Scored\' option from the Scoring Type dropdown, then the \'Set Correct Answer\' section should be displayed and \'Points\' input field should be displayed in disabled state with prefilled \'0\' points and \'Minimum score awarded (if attempted)\' input field should not be displayed', () => {
+            scoringSectionBase.steps.selectAScoringTypeFromScoringTypeDropdown('Non scored');
+            autoScoredSetCorrectAnswerSection.setCorrectAnswerLabel()
+                .should('be.visible');
+            autoScoredSetCorrectAnswerSection.correctTab()
+                .should('be.visible');
+            scoringSectionBase.pointsLabel()
+                .should('be.visible')
+                .verifyInnerText('Points');
+            scoringSectionBase.pointsInputField()
+                .should('have.value', '0')
+                .should('be.disabled');
+            scoringSectionBase.minimumScoreIfAttemptedInputField()
+                .should('not.exist');
+        });
+
+        it('Accessibility of disabled Points field', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(scoringSectionBase.pointsLabel().parents('.set-correct-answer-points-wrapper'));
+        });
+    },
+
+    verifyShowCorrectAnswerAndPointsInPreviewTabWhenNoCorrectAnswerIsSet: () => {
+        it('When the user has not set correct answer option(s) and alloted points, \'Show correct answer\' and points should not be displayed in the preview tab', () => {
+            createQuestionBasePage.steps.switchToPreviewTab();
+            previewScoringAndShowCorrectAnswerComponent.showCorrectAnswerCheckbox()
+                .should('not.exist');
+            previewScoringAndShowCorrectAnswerComponent.previewScoreText()
+                .should('not.exist');
+        });
+    },
+
+    verifyCSSAndA11yOfCorrectAnswerIcon: () => {
+        it('Check CSS of correct answer icon', { tags: 'css' }, () => {
+            for (let index = 0; index < 2; index++) {
+                autoScoredPreviewBase.correctIcon()
+                    .verifyPseudoClassBeforeProperty('color', css.color.correctAnswer);
+            };
+        });
+
+        it('Accessibility of correct answer icon', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(autoScoredPreviewBase.correctIcon());
+        });
+    },
+
+    verifyCSSAndA11yOfFullScoreTextAndCorrectAnswerLabel: (questionType) => {
+        it('CSS of check score text full score state and Correct Answer label', { tags: 'css' }, () => {
+            previewScoringAndShowCorrectAnswerComponent.previewScoreText()
+                .should('have.css', 'color', css.color.primaryBtn)
+                .and('have.css', 'background-color', css.color.correctAnswer)
+            if (steps.correctIncorrectLabelAndBorderExists(questionType)) {
+                autoScoredPreviewBase.correctIncorectAnswerLabel()
+                    .verifyCSS(css.color.correctAnswer, css.fontSize.normal, css.fontWeight.bold)
+                    .parent()
+                    .find('.answer-label-icon')
+                    .verifyPseudoClassBeforeProperty('color', css.color.correctAnswer);
+                autoScoredPreviewBase.steps.verifyCorrectAttemptBorder();
+            } else {
+                autoScoredPreviewBase.correctIncorectAnswerLabel()
+                    .should('not.exist');
+                autoScoredPreviewBase.correctIncorrectAnswerBorder()
+                    .should('not.exist');
+            }
+        });
+
+        it('Accessibility of check score text full score state and Correct Answer label', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.previewTabQuestionWrapper());
+        });
+    },
+
+    verifyCSSAndA11yOfIncorrectAnswerLabel: (questionType) => {
+        it('CSS of incorrect answer state', { tags: 'css' }, () => {
+            cy.log('Pre requisite: The user has attempted the question incorrectly')
+            cy.log('Pre step: Select show answer checkbox')
+            previewScoringAndShowCorrectAnswerComponent.showCorrectAnswerCheckbox()
+                .click()
+                .should('be.checked');
+            cy.log('Verifying CSS of incorrect crossmark icon')
+            autoScoredPreviewBase.incorrectIcon()
+                .eq(0)
+                .verifyPseudoClassBeforeProperty('color', css.color.incorrectAnswer);
+            if (steps.correctIncorrectLabelAndBorderExists(questionType)) {
+                autoScoredPreviewBase.correctIncorectAnswerLabel()
+                    .verifyCSS(css.color.incorrectAnswer, css.fontSize.normal, css.fontWeight.bold)
+                    .parent()
+                    .find('.answer-label-icon')
+                    .verifyPseudoClassBeforeProperty('color', css.color.incorrectAnswer);
+                autoScoredPreviewBase.steps.verifyIncorrectAttemptBorder();
+            } else {
+                autoScoredPreviewBase.correctIncorectAnswerLabel()
+                    .should('not.exist');
+                autoScoredPreviewBase.correctIncorrectAnswerBorder()
+                    .should('not.exist');
+            }
+        });
+
+        it('Accessibility of incorrect answer state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.previewTabQuestionWrapper());
+            cy.log('Post step: Deselect show answer checkbox')
+            previewScoringAndShowCorrectAnswerComponent.showCorrectAnswerCheckbox()
+                .click()
+                .should('not.be.checked');
+        });
+    }
+}
+
+export const autoScoredScoringSection = {
+    tests,
+    steps
+}