itemengine-cypress-automation 1.0.2

package/cypress/pages/components/fillInTheGapsDropdownCommonComponent.js

@@ -0,0 +1,442 @@
+import utilities from "../../support/helpers/utilities"
+import { commonComponents } from "./commonComponents"
+import { optionsWrapperComponent } from "./optionsWrapperComponent"
+import { scoringSectionBase } from "./scoringSectionBase"
+import { autoScoredSetCorrectAnswerSection } from "./autoScoredSetCorrectAnswerSection"
+import { autoScoredScoringSectionMultipleResponsesType } from "./autoScoredScoringSectionMultipleResponsesType"
+import { additionalSettingsPanel } from "./additionalSettingsPanel"
+import { autoScoredAdditionalSettings } from "./autoScoredAdditionalSettings"
+const css = Cypress.env('css');
+
+let optionsForResponse = ['changing', 'progressively', 'healthy', 'new'];
+
+const selectors = {
+    ...commonComponents,
+    ...optionsWrapperComponent,
+    ...scoringSectionBase,
+    optionsForResponseContainer: () => cy.get('.edit-mcq-options-wrapper'),
+    optionsForResponseLabel: () => cy.get('.options-label'),
+    responseDropdownOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[role="listbox"] .dropdown-menu-item[aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get('[role="listbox"] .dropdown-menu-item')
+        }
+    },
+    responseDropdownSetCorrectAnswerSection: () => cy.get('.response-dropdown [role="combobox"]'),
+    responseFieldLabelSetCorrectAnswerSection: () => cy.get('.cloze-with-text-form-control-wrapper .input-field-label'),
+    responseDropdownWrapperSetCorrectAnswerSection: () => cy.get('.response-dropdown-wrapper .dropdown-form-control'),
+    optionsForResponseInputField: () => cy.get('.input-editable  input[type*="text"]'),
+    //TODO: Update class name once https://redmine.zeuslearning.com/issues/518498 is resolved
+    optionIsRequiredErrorMessage: () => cy.get('.Mui-error.Mui-required'),
+    optionNumeration: () => cy.get('.MuiInputAdornment-positionStart'),
+    responseDropdownPlaceholderText: () => cy.get('.cloze-with-dropdown-placeholder'),
+    randomizeOptionsCheckbox: () => cy.get('[data-ngie-testid="randomize-options-checkbox"] input'),
+    matchFromAllResponsesCheckbox: () => cy.get('[data-ngie-testid="match-from-all-responses-checkbox"] input'),
+    randomizeOptionsLabel: () => cy.get('[data-ngie-testid="randomize-options-checkbox"] .MuiFormControlLabel-label'),
+    matchFromAllResponsesLabel: () => cy.get('[data-ngie-testid="match-from-all-responses-checkbox"] .MuiFormControlLabel-label'),
+}
+
+const steps = {
+    ...scoringSectionBase.steps,
+    /**
+     * @param {number} responseIndex index of the response token/container
+     * @description Verify that options for response label and its section is displayed for the response token 
+     */
+    verifyOptionsForResponseLabelAndSectionIsDisplayed: (responseIndex) => {
+        utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.optionsForResponseContainer().eq(responseIndex), 'visible');
+        utilities.verifyInnerText(fillInTheGapsDropdownCommonComponent.optionsForResponseLabel().eq(responseIndex), `Options for response ${responseIndex + 1}`);
+    },
+
+    /**
+     * @param {number} optionsForResponseIndex Index of the options for response section
+     * @param {string[]} responseTextArray Array of text to be given as input in options input field
+     * @description Add input to options input fields
+     */
+    addInputToResponseOptionFields: (optionsForResponseIndex, responseTextArray) => {
+        fillInTheGapsDropdownCommonComponent.optionsSectionWrapper()
+            .eq(optionsForResponseIndex)
+            .within(() => {
+                responseTextArray.forEach((responseFieldText, optionIndex) => {
+                    fillInTheGapsDropdownCommonComponent.steps.addInputToResponseOptionInputField(optionIndex, responseFieldText);
+                });
+            });
+    },
+
+    /**
+     * @param {number} optionIndex index of the option input field 
+     * @param {string} responseText text to be given as input in option input field
+     * @description Add input to options input fields
+     */
+    addInputToResponseOptionInputField: (optionIndex, responseFieldText) => {
+        fillInTheGapsDropdownCommonComponent.optionsForResponseInputField()
+            .eq(optionIndex)
+            .clear()
+            .type(responseFieldText, { delay: 0 })
+            .should('have.value', responseFieldText);
+    },
+
+    /**
+     * @param {string} dropdownOption Option to be selected from dropdown
+     * @description Select option from dropdown
+     */
+    selectOptionFromResponseDropdown: (dropdownOption) => {
+        fillInTheGapsDropdownCommonComponent.responseDropdownOptions(dropdownOption)
+            .click();
+        fillInTheGapsDropdownCommonComponent.dropdownList()
+            .should('not.exist');
+    },
+
+    /**
+     * @param {number} dropdownIndex Index of the dropdown
+     * @param {string} dropdownOption Option to be selected in the dropdown
+     * @description Select option from dropdown in set correct answer section
+     */
+    selectResponseFromSetCorrectAnswerSectionResponseDropdown: (dropdownIndex, dropdownOption) => {
+        fillInTheGapsDropdownCommonComponent.steps.expandResponseDropdownInSetCorrectAnswerSection(dropdownIndex)
+        fillInTheGapsDropdownCommonComponent.steps.selectOptionFromResponseDropdown(dropdownOption);
+        fillInTheGapsDropdownCommonComponent.responseDropdownSetCorrectAnswerSection()
+            .eq(dropdownIndex)
+            .verifyInnerText(dropdownOption);
+    },
+
+    /**
+     * @param {string[]} dropdownOptionsArray Array of dropdown options
+     * @description Verify the options displayed in dropdown
+     */
+    verifyResponseDropdownOptions: (dropdownOptionsArray) => {
+        dropdownOptionsArray.forEach((dropdownOption, optionIndex) => {
+            fillInTheGapsDropdownCommonComponent.responseDropdownOptions()
+                .eq(optionIndex)
+                .should('have.attr', 'data-value', dropdownOption)
+            fillInTheGapsDropdownCommonComponent.responseDropdownOptions()
+                .eq(dropdownOptionsArray.length)
+                .should('not.exist');
+        });
+    },
+
+    /**
+     * @param {number} responseTokenIndex Index of the response token 
+     * @description Verify the contents of options for response section displayed for a response token
+     */
+    verifyOptionsForResponseContents: (responseTokenIndex) => {
+        fillInTheGapsDropdownCommonComponent.optionsSectionWrapper()
+            .eq(responseTokenIndex)
+            .should('exist')
+            .within(() => {
+                fillInTheGapsDropdownCommonComponent.optionWrapper()
+                    .each(($el, index) => {
+                        cy.wrap($el)
+                            .within(() => {
+                                fillInTheGapsDropdownCommonComponent.optionsForResponseInputField()
+                                    .should('have.attr', 'placeholder', 'Enter option');
+                                commonComponents.dragHandleButton()
+                                    .should('exist');
+                                commonComponents.deleteButton()
+                                    .should('be.visible');
+                                fillInTheGapsDropdownCommonComponent.optionNumeration()
+                                    .should('have.text', index + 1)
+                            });
+                    });
+            });
+    },
+
+    /**
+     * @param {string[]} optionArray Array of options displayed in dropdown 
+     * @description Verify randomized order of options in dropdown
+     */
+    verifyRandomizeOptionOrder: (optionArray) => {
+        let currentOptions = [...optionArray]
+        commonComponents.dropdownList()
+            .within(() => {
+                for (let index = 0; index < currentOptions.length; index++) {
+                    fillInTheGapsDropdownCommonComponent.responseDropdownOptions()
+                        .eq(index)
+                        .then(($element) => {
+                            expect($element.text()).to.be.oneOf(currentOptions);
+                            currentOptions = currentOptions.filter((value) => value !== $element.text())
+                        });
+                };
+            });
+        fillInTheGapsDropdownCommonComponent.steps.verifyRerandomizedOptionsOrder(optionArray);
+    },
+
+    /**
+    * @param {string[]} previousOrderOfOptions Array of options displayed in preview tab
+    * @description Verify that dropdown options are re-randomized in preview tab
+    */
+    verifyRerandomizedOptionsOrder: (previousOrderOfOptions) => {
+        commonComponents.dropdownList()
+            .should('not.have.text', '')
+            .and('not.have.text', previousOrderOfOptions.join(''));
+    },
+
+    getDropdownOptionsArray: () => {
+        const dropdownOptionsArray = []
+        fillInTheGapsDropdownCommonComponent.responseDropdownOptions()
+            .each(($el) => {
+                cy.wrap($el)
+                    .invoke('text')
+                    .then((text) => {
+                        dropdownOptionsArray.push(text);
+                    });
+            });
+        return dropdownOptionsArray;
+    },
+
+    /**
+     * @param {number} responseDropdownIndex Index of response dropdown
+     * @description Verify response dropdown is displayed in set correct answer section
+     */
+    verifyResponseDropdownIsDisplayedInSetCorrectAnswerSection: (responseDropdownIndex) => {
+        utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.responseDropdownSetCorrectAnswerSection().eq(responseDropdownIndex), 'visible');
+    },
+
+    verifyDisabledResponseDropdownInSetCorrectAnswerSection: () => {
+        fillInTheGapsDropdownCommonComponent.responseDropdownSetCorrectAnswerSection()
+            .should('have.class', 'Mui-disabled');
+        fillInTheGapsDropdownCommonComponent.responseDropdownSetCorrectAnswerSection()
+            .click();
+        fillInTheGapsDropdownCommonComponent.dropdownList()
+            .should('not.exist');
+    },
+
+    /**
+     * @param {number} responseDropdownIndex Index of response dropdown in set correct answer section
+     * @description Expand response dropdown in set correct answer section
+     */
+    expandResponseDropdownInSetCorrectAnswerSection: (responseDropdownIndex) => {
+        fillInTheGapsDropdownCommonComponent.responseDropdownSetCorrectAnswerSection()
+            .eq(responseDropdownIndex)
+            .click({ position: "right" });
+        fillInTheGapsDropdownCommonComponent.responseDropdownSetCorrectAnswerSection()
+            .eq(responseDropdownIndex)
+            .should('have.attr', 'aria-expanded', 'true');
+    },
+
+    verifyOptionsForResponseInputFieldDeleteButtonTooltip: () => {
+        fillInTheGapsDropdownCommonComponent.deleteButton()
+            .eq(1)
+            .verifyTooltip('Delete option');
+    },
+
+    verifyOptionsForResponseInputFieldDisabledDeleteButtonTooltip: () => {
+        fillInTheGapsDropdownCommonComponent.deleteButton()
+            .eq(1)
+            .trigger('mouseover', { force: true })
+        fillInTheGapsDropdownCommonComponent.tooltipText()
+            .should('have.text', 'Minimum two options are required');
+        fillInTheGapsDropdownCommonComponent.deleteButton()
+            .eq(1)
+            .trigger('mouseout', { force: true });
+        fillInTheGapsDropdownCommonComponent.tooltipText()
+            .should('not.exist');
+    },
+
+    /**
+     * @param {number} index of the option input field
+     * @description this function focuses in and out of options input fields
+     */
+    focusInAndFocusOutOfOptionsForResponseInputField: (index) => {
+        fillInTheGapsDropdownCommonComponent.optionsForResponseInputField()
+            .eq(index)
+            .focus();
+        fillInTheGapsDropdownCommonComponent.optionsForResponseInputField()
+            .eq(index)
+            .blur();
+    },
+
+    /**
+     * @param {number} index of option input field
+     * @description this function verifies error message of option input field
+     */
+    verifyOptionsForResponseInputFieldErrorMessage: (index) => {
+        fillInTheGapsDropdownCommonComponent.optionWrapper()
+            .eq(index)
+            .within(() => {
+                fillInTheGapsDropdownCommonComponent.optionIsRequiredErrorMessage()
+                    .should('have.text', 'Error: Option is required.');
+            });
+    },
+
+    /**
+    * @param {number} index of option input field
+    * @description this function verifies error message does not exist for option input field
+    */
+    verifyOptionsForResponseInputFieldErrorMessageDoesNotExist: (index) => {
+        fillInTheGapsDropdownCommonComponent.optionWrapper()
+            .eq(index)
+            .within(() => {
+                fillInTheGapsDropdownCommonComponent.optionIsRequiredErrorMessage()
+                    .should('not.exist');
+            });
+    },
+    verifyMatchFromAllResponsesLabelAndCheckboxEnabledState: () => {
+        fillInTheGapsDropdownCommonComponent.matchFromAllResponsesLabel()
+            .should('not.have.class', 'Mui-disabled');
+        fillInTheGapsDropdownCommonComponent.matchFromAllResponsesCheckbox()
+            .and('not.be.disabled');
+    },
+
+    checkRandomizeOptionsCheckbox: () => {
+        fillInTheGapsDropdownCommonComponent.randomizeOptionsCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    uncheckRandomizeOptionsCheckbox: () => {
+        fillInTheGapsDropdownCommonComponent.randomizeOptionsCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    checkMatchFromAllResponsesCheckbox: () => {
+        fillInTheGapsDropdownCommonComponent.matchFromAllResponsesCheckbox()
+            .click()
+            .should('be.checked');
+    },
+
+    uncheckMatchFromAllResponsesCheckbox: () => {
+        fillInTheGapsDropdownCommonComponent.matchFromAllResponsesCheckbox()
+            .click()
+            .should('not.be.checked');
+    },
+
+    verifyRandomizeOptionsCheckboxNotChecked: () => {
+        fillInTheGapsDropdownCommonComponent.randomizeOptionsCheckbox()
+            .should('not.be.checked');
+    },
+
+    verifyMatchFromAllResponsesLabelAndCheckboxDisabledState: () => {
+        fillInTheGapsDropdownCommonComponent.matchFromAllResponsesLabel()
+            .should('have.class', 'Mui-disabled');
+        fillInTheGapsDropdownCommonComponent.matchFromAllResponsesCheckbox()
+            .and('be.disabled');
+    },
+
+    /**
+     * @param {index} responseDropdownIndex Index of response dropdown
+     * @param {string} ariaLabel Aria-label of response dropdown
+     * @description Verify aria-label of response dropdown in set correct answer section
+     */
+    verifyDropdownAriaLabelAttributeInSetCorrectAnswerSection: (responseDropdownIndex, ariaLabel) => {
+        fillInTheGapsDropdownCommonComponent.responseDropdownSetCorrectAnswerSection()
+            .eq(responseDropdownIndex)
+            .should('have.attr', 'aria-label', ariaLabel);
+    }
+}
+
+const tests = {
+    verifyCorrectResponseConditionSectionDefaultState: () => {
+        it('\'Randomize options\' functionality label and checkbox should be displayed and by default it should be unchecked', () => {
+            utilities.verifyInnerText(fillInTheGapsDropdownCommonComponent.randomizeOptionsLabel(), 'Randomize options');
+            utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.randomizeOptionsLabel(), 'visible');
+            fillInTheGapsDropdownCommonComponent.steps.verifyRandomizeOptionsCheckboxNotChecked();
+        });
+
+        it('\'Match from all responses\' functionality label and checkbox should be displayed and by default it should be unchecked and disabled', () => {
+            utilities.verifyInnerText(fillInTheGapsDropdownCommonComponent.matchFromAllResponsesLabel(), 'Match from all responses');
+            utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.matchFromAllResponsesLabel(), 'visible');
+            fillInTheGapsDropdownCommonComponent.steps.verifyMatchFromAllResponsesLabelAndCheckboxDisabledState();
+        });
+
+        it('CSS of correct response conditions section', { tags: 'css' }, () => {
+            const labels = [fillInTheGapsDropdownCommonComponent.randomizeOptionsLabel, fillInTheGapsDropdownCommonComponent.matchFromAllResponsesLabel]
+            const uncheckedCheckboxes = [fillInTheGapsDropdownCommonComponent.randomizeOptionsCheckbox, fillInTheGapsDropdownCommonComponent.matchFromAllResponsesCheckbox]
+            labels.forEach((checkingLabel) => {
+                utilities.verifyCSS(checkingLabel(), {
+                    'color': css.color.labelText,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.regular
+                });
+            });
+            uncheckedCheckboxes.forEach((uncheckedCheckbox) => {
+                utilities.verifyCSS(uncheckedCheckbox().parent().find('svg'), {
+                    'fill': css.color.uncheckedCheckbox
+                });
+            });
+        });
+
+        it(`Accessibility of correct response conditions section`, { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDropdownCommonComponent.randomizeOptionsLabel().parents('.ngie-checkbox-form-group'));
+        });
+    },
+
+    /**
+     * @param {string} tabName Correct or Alternate tab
+     * @description This function verifies the input field and error states of set correct answer section
+     */
+    verifySetCorrectAnswerTabContentsAndFunctionality: (tabName) => {
+        it('An empty points input field and two dropdowns with labels \'Response 1\' and \'Response 2\' should be present', () => {
+            fillInTheGapsDropdownCommonComponent.steps.verifyPointsFieldValue('');
+            for (let index = 0; index < 2; index++) {
+                utilities.verifyInnerText(fillInTheGapsDropdownCommonComponent.responseFieldLabelSetCorrectAnswerSection().eq(index), `Response ${index + 1}`)
+                utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.responseDropdownSetCorrectAnswerSection().eq(index), 'visible');
+            };
+        });
+
+        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', () => {
+            fillInTheGapsDropdownCommonComponent.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(0, optionsForResponse[0]);
+            fillInTheGapsDropdownCommonComponent.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(1, optionsForResponse[1]);
+        });
+
+        autoScoredSetCorrectAnswerSection.tests.verifyAutoScoredPointsErrorMessageWhenPointsFieldIsEmpty(tabName);
+
+        it(`CSS of ${tabName} contents`, { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsDropdownCommonComponent.responseFieldLabelSetCorrectAnswerSection(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsDropdownCommonComponent.responseDropdownSetCorrectAnswerSection(), {
+                'opacity': '1',
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+            });
+            //CSS of selected dropdown option which appears on dropdown
+            utilities.verifyCSS(fillInTheGapsDropdownCommonComponent.responseDropdownSetCorrectAnswerSection(), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it(`Accessibility of ${tabName} contents`, { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDropdownCommonComponent.responseDropdownSetCorrectAnswerSection().parents('.cloze-with-text-authoring-mode-response-wrapper'));
+        });
+    },
+
+    verifyResponseContentsOfSetCorrectAnswerSection: () => {
+        it('Response dropdown contents should be displayed in the set correct answer section', () => {
+            for (let index = 0; index < 2; index++) {
+                utilities.verifyInnerText(fillInTheGapsDropdownCommonComponent.responseFieldLabelSetCorrectAnswerSection().eq(index), `Response ${index + 1}`)
+                utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.responseDropdownSetCorrectAnswerSection().eq(index), 'visible');
+            };
+        });
+    },
+
+    verifyManualScoringEditTabFunctionality: () => {
+        it('When the user has selected \'Manually scored\' option from the \'Scoring type\' dropdown then the \'Set correct answer\' section should not be displayed; \'All or nothing\', \'Partial - equal weights\' and \'Partial - different weights\' radio buttons should not be displayed; \'Points\' and \'Minimum score awarded (if attempted)\' labels and input fields should be displayed and inside additional settings accordion, Check answer section i.e. \'Allow students to check answer\' checkbox should not be displayed', () => {
+            utilities.verifyElementVisibilityState(autoScoredSetCorrectAnswerSection.setCorrectAnswerLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(autoScoredScoringSectionMultipleResponsesType.allOrNothingCheckbox(), 'notExist');
+            utilities.verifyElementVisibilityState(autoScoredScoringSectionMultipleResponsesType.partialEqualWeightsCheckbox(), 'notExist');
+            utilities.verifyElementVisibilityState(autoScoredScoringSectionMultipleResponsesType.partialDifferentWeightsCheckbox(), 'notExist');
+            utilities.verifyElementVisibilityState(autoScoredScoringSectionMultipleResponsesType.penaltyPointsInputField(), 'notExist');
+            utilities.verifyElementVisibilityState(autoScoredScoringSectionMultipleResponsesType.penaltyPointsLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(autoScoredScoringSectionMultipleResponsesType.rounddownScoreCheckbox(), 'notExist');
+            utilities.verifyElementVisibilityState(autoScoredScoringSectionMultipleResponsesType.rounddownScoreCheckboxLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.randomizeOptionsCheckbox(), 'notExist');
+            utilities.verifyElementVisibilityState(fillInTheGapsDropdownCommonComponent.matchFromAllResponsesCheckbox(), 'notExist');
+            scoringSectionBase.steps.verifyDefaultMinimumScoreIfAttemptedLabelAndPointsField();
+            additionalSettingsPanel.steps.expandAdditonalSettings();
+            utilities.verifyElementVisibilityState(autoScoredAdditionalSettings.checkAnswerLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(autoScoredAdditionalSettings.allowStudentsToCheckAnswerLabel(), 'notExist');
+            utilities.verifyElementVisibilityState(autoScoredAdditionalSettings.allowStudentsToCheckAnswerCheckbox(), 'notExist');
+        });
+    }
+}
+
+export const fillInTheGapsDropdownCommonComponent = {
+    ...selectors,
+    steps,
+    tests
+}