itemengine-cypress-automation 1.0.31 → 1.0.36

package/cypress/e2e/ILC/FillInTheGapsDropdown/fillInTheGapsDropdownAdditionalSettings.js

@@ -1,25 +1,14 @@
-import { commonComponents } from "../../../pages/components";
 import { fillInTheGapsDropdownPage } from "../../../pages/fillInTheGapsDropdownPage";
 import abortEarlySetup from "../../../support/helpers/abortEarly";
 const css = Cypress.env('css');
 
 let optionsForResponse1 = ['changing', 'progressively', 'healthy', 'new'];
-let optionsForResponse2 = ['increasingly', 'decreasingly', 'extensively', 'exclusively'];
 
-describe('Fill In the Gaps Additional settings and Responses accordion', () => {
+describe('Fill In the Gaps - Dropdown: Additional settings - Advanced settings for all response areas and Response accordion', () => {
     before(() => {
         cy.loginAs('admin');
     });
 
-    describe('Additional Settings accordion', () => {
-        abortEarlySetup();
-        before(() => {
-            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
-        });
-
-        fillInTheGapsDropdownPage.tests.verifyAdditonalSettingsAccordionProperties();
-    });
-
     describe('Additional Settings: Advanced settings for all response areas', () => {
         abortEarlySetup();
         before(() => {
@@ -758,407 +747,4 @@ describe('Fill In the Gaps Additional settings and Responses accordion', () => {
                 .should('have.attr', 'width', '400px');
         });
     });
-
-    describe('Additional Settings: Answer numeration (only while grading) dropdown', () => {
-        const dropdownOptions = ['Numerical', 'Uppercase alphabet', 'Lowercase alphabet'];
-        const numbers = ['1', '2', '3', '4'];
-        const lowercase = ['a', 'b', 'c', 'd'];
-        const uppercase = ['A', 'B', 'C', 'D'];
-        abortEarlySetup();
-        before(() => {
-            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
-            fillInTheGapsDropdownPage.steps.addResponseTokenInQuestionField();
-            fillInTheGapsDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
-            fillInTheGapsDropdownPage.steps.addInputToResponseOptionFields(1, optionsForResponse2);
-            fillInTheGapsDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(0, 'new');
-            fillInTheGapsDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(1, 'exclusively');
-            fillInTheGapsDropdownPage.steps.allotPoints(20);
-            fillInTheGapsDropdownPage.steps.expandAdditonalSettings();
-            fillInTheGapsDropdownPage.allowStudentsToCheckAnswerCheckbox()
-                .click();
-        });
-
-        fillInTheGapsDropdownPage.tests.verifyAnswerNumerationContents();
-
-        //Answer numeration cases for Edit tab
-        it(`When the user selects any option from the Answer numeration dropdown then it should not affect the Options for response numeration as well as set correct answer response dropdown`, () => {
-            cy.log('Selecting an option from the dropdown')
-            fillInTheGapsDropdownPage.steps.selectAnswerNumerationDropdownOption('Lowercase alphabet')
-            cy.log('The numerical option numeration for the Options for response fields should not be affected by the Answer numeration dropdown')
-            fillInTheGapsDropdownPage.optionsSectionWrapper()
-                .each(($el) => {
-                    cy.wrap($el)
-                        .within(() => {
-                            fillInTheGapsDropdownPage.optionWrapper()
-                                .each(($el, index) => {
-                                    cy.wrap($el)
-                                        .within(() => {
-                                            fillInTheGapsDropdownPage.optionNumeration()
-                                                .should('have.text', numbers[index]);
-                                        });
-                                });
-                        });
-                });
-            cy.log('The option numeration should not be displayed in the set correct answer section')
-            fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
-                .each(($el, index) => {
-                    cy.wrap($el)
-                        .contains(uppercase[index])
-                        .should('not.exist');
-                });
-        });
-
-        //Answer numeration cases for preview tab
-        dropdownOptions.forEach((option) => {
-            it(`When the user selects ${option} option from the Answer numeration dropdown then it should not be displayed in the Preview tab response dropdown`, () => {
-                fillInTheGapsDropdownPage.answerNumerationDropdown()
-                    .click();
-                fillInTheGapsDropdownPage.answerNumerationDropdownListOptions(option)
-                    .click();
-                fillInTheGapsDropdownPage.answerNumerationDropdown()
-                    .verifyInnerText(`${option}`);
-                fillInTheGapsDropdownPage.steps.switchToPreviewTab()
-                fillInTheGapsDropdownPage.steps.verifyAnswerNumerationShouldNotExistInPreviewTabResponseDropdown()
-            });
-
-            it(`When the user clicks on Show correct answer checkbox then ${option} numeration should be displayed in the Preview tab response dropdown and the correct answer container`, () => {
-                fillInTheGapsDropdownPage.showCorrectAnswerCheckbox()
-                    .click()
-                    .should('be.checked');
-                cy.log('Checking answer numeration for response dropdown')
-                fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
-                    .each(($el, index) => {
-                        cy.wrap($el)
-                            .within(() => {
-                                switch (option) {
-                                    case 'Numerical':
-                                        fillInTheGapsDropdownPage.responseDropdownAnswerNumeration()
-                                            .should('have.text', numbers[index])
-                                            .should('be.visible');
-                                        break;
-                                    case 'Uppercase alphabet':
-                                        fillInTheGapsDropdownPage.responseDropdownAnswerNumeration()
-                                            .should('have.text', uppercase[index])
-                                            .should('be.visible');
-                                        break;
-                                    case 'Lowercase alphabet':
-                                        fillInTheGapsDropdownPage.responseDropdownAnswerNumeration()
-                                            .should('have.text', lowercase[index])
-                                            .should('be.visible');
-                                        break;
-                                    default:
-                                        throw new Error('Invalid numeration option');
-                                }
-                            });
-                    });
-                cy.log('Checking the answer numeration should be displayed in the correct answer container')
-                fillInTheGapsDropdownPage.previewTabCorrectAnswerResponseWrapper()
-                    .each(($el, index) => {
-                        cy.wrap($el)
-                            .parents('.response-dropdown-wrapper')
-                            .within(() => {
-                                switch (option) {
-                                    case 'Numerical':
-                                        fillInTheGapsDropdownPage.responseDropdownAnswerNumeration()
-                                            .should('have.text', numbers[index])
-                                            .should('be.visible');
-                                        break;
-                                    case 'Uppercase alphabet':
-                                        fillInTheGapsDropdownPage.responseDropdownAnswerNumeration()
-                                            .should('have.text', uppercase[index])
-                                            .should('be.visible');
-                                        break;
-                                    case 'Lowercase alphabet':
-                                        fillInTheGapsDropdownPage.responseDropdownAnswerNumeration()
-                                            .should('have.text', lowercase[index])
-                                            .should('be.visible');
-                                        break;
-                                    default:
-                                        throw new Error('Invalid numeration option');
-                                }
-                            });
-                    });
-            });
-
-            it('CSS of option numeration in response dropdown and correct answer container', { tags: 'css' }, () => {
-                cy.log('CSS of Response dropdown numeration')
-                fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
-                    .eq(0)
-                    .within(() => {
-                        fillInTheGapsDropdownPage.responseDropdownAnswerNumeration()
-                            .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
-                    });
-                cy.log('CSS of Correct answer container dropdown numeration')
-                fillInTheGapsDropdownPage.previewTabCorrectAnswerResponseWrapper()
-                    .eq(0)
-                    .parents('.response-dropdown-wrapper')
-                    .within(() => {
-                        fillInTheGapsDropdownPage.responseDropdownAnswerNumeration()
-                            .eq(0)
-                            .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
-                    });
-            });
-
-            it('Accessibility of option numeration in response dropdown and correct answer container', { tags: 'a11y' }, () => {
-                cy.log('Accessibility of Response dropdown numeration')
-                cy.checkAccessibility(fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper());
-                cy.log('Accessibility of Correct answer container dropdown numeration')
-                cy.checkAccessibility(fillInTheGapsDropdownPage.previewTabCorrectAnswerResponseWrapper().parents('.response-dropdown-wrapper'));
-            });
-
-            it(`When user clicks on Check answer button then ${option} numeration should not be displayed in the preview tab Response dropdown`, () => {
-                cy.log('Pre step: Unchecking the show correct answer checkbox')
-                fillInTheGapsDropdownPage.showCorrectAnswerCheckbox()
-                    .click()
-                    .should('not.be.checked');
-                fillInTheGapsDropdownPage.checkAnswerButton()
-                    .click();
-                fillInTheGapsDropdownPage.steps.verifyAnswerNumerationShouldNotExistInPreviewTabResponseDropdown()
-                cy.log('Post step: Swicthing to Edit tab')
-                fillInTheGapsDropdownPage.steps.switchToEditTab()
-            });
-        });
-
-        //TODO: We have not checked the Response numeration in Grading view
-    });
-
-    describe('Additional Settings: Font Size dropdown', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigating to fill in the gaps - dropdown type, adding question instructions and options, alloting points and expanding additional settings accordion')
-            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
-            fillInTheGapsDropdownPage.questionInstructionsInputField()
-                .type('Question Instructions');
-            fillInTheGapsDropdownPage.pointsInputField()
-                .type('4');
-            fillInTheGapsDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
-            fillInTheGapsDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(0, 'new')
-            fillInTheGapsDropdownPage.steps.expandAdditonalSettings();
-        });
-
-        fillInTheGapsDropdownPage.tests.verifyFontSizeSectionContents();
-
-        const fontsizes = ['Default', 'Small', 'Normal', 'Large', 'Extra large', 'Huge'];
-        const font = ['16px', '12px', '14px', '17px', '20px', '24px'];
-        fontsizes.forEach((option, count) => {
-            it(`When the user selects \'${option}\' option from the Font Size dropdown, then font size of the preview tab contents should be changed to ${option} in the \'Set Correct Answer\' section as well as in the \'Preview\' tab`, () => {
-                fillInTheGapsDropdownPage.fontSizeDropdown()
-                    .click();
-                fillInTheGapsDropdownPage.fontSizeListOptions(count)
-                    .click();
-                fillInTheGapsDropdownPage.fontSizeDropdown()
-                    .verifyInnerText(`${option}`);
-                cy.log('Checking correct answer section font size')
-                fillInTheGapsDropdownPage.responseDropdownWrapperSetCorrectAnswerSection()
-                    .should('have.css', 'font-size', font[count])
-                fillInTheGapsDropdownPage.responseDropdownSetCorrectAnswerSection()
-                    .click();
-                fillInTheGapsDropdownPage.responseDropdownOptions()
-                    .each(($el) => {
-                        cy.wrap($el)
-                            .find('span')
-                            .should('have.css', 'font-size', font[count]);
-                    });
-                cy.log('Closing the dropdown')
-                cy.get('body')
-                    .click();
-                cy.log('Switching to Preview tab')
-                fillInTheGapsDropdownPage.steps.switchToPreviewTab();
-                cy.log('Checking Preview section font size')
-                fillInTheGapsDropdownPage.questionInstructionsText()
-                    .should('have.css', 'font-size', font[count]);
-                fillInTheGapsDropdownPage.previewTabResponseDropdown()
-                    .click();
-                cy.log('Checking font size of options')
-                fillInTheGapsDropdownPage.responseDropdownOptions()
-                    .each(($el) => {
-                        cy.wrap($el)
-                            .find('span')
-                            .should('have.css', 'font-size', font[count]);
-                    });
-                cy.log('selecting an option to collapse the response dropdown')
-                fillInTheGapsDropdownPage.steps.selectOptionFromResponseDropdown('new');
-                cy.log('Checking font size of response dropdown')
-                fillInTheGapsDropdownPage.previewTabResponseDropdownWrapper()
-                    .should('have.css', 'font-size', font[count]);
-                fillInTheGapsDropdownPage.previewTabQuestionContainer()
-                    .should('have.css', 'font-size', font[count]);
-                cy.log('Post step: Switch to Edit tab')
-                fillInTheGapsDropdownPage.steps.switchToEditTab();
-            });
-        });
-    });
-
-    describe('Additional Settings: Check Answer', () => {
-        abortEarlySetup();
-        before(() => {
-            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
-            fillInTheGapsDropdownPage.questionInstructionsInputField()
-                .type('Question Instructions');
-            fillInTheGapsDropdownPage.pointsInputField()
-                .type('4');
-            fillInTheGapsDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
-            fillInTheGapsDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(0, 'new')
-            fillInTheGapsDropdownPage.steps.expandAdditonalSettings();
-        });
-
-        fillInTheGapsDropdownPage.tests.verifyCheckAnswerSectionAndPreviewTabCheckAnswerButton();
-    });
-
-    describe('Additional Settings: Check Answer - Functionality', () => {
-        abortEarlySetup();
-        before(() => {
-            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
-            fillInTheGapsDropdownPage.questionInstructionsInputField()
-                .type('Question Instructions');
-            fillInTheGapsDropdownPage.pointsInputField()
-                .type('6');
-            fillInTheGapsDropdownPage.questionInputField()
-                .click();
-            fillInTheGapsDropdownPage.ckEditorAddResponseButton()
-                .click();
-            fillInTheGapsDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
-            fillInTheGapsDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(0, 'new')
-            fillInTheGapsDropdownPage.steps.addInputToResponseOptionFields(1, optionsForResponse2);
-            fillInTheGapsDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(1, 'extensively')
-            fillInTheGapsDropdownPage.steps.expandAdditonalSettings();
-            fillInTheGapsDropdownPage.steps.setMaximumCheckAnswerAttempts(2);
-            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
-        });
-
-        it('When the user has not set any responses then on clicking on the Check Answer button icons should not be displayed beside both empty responses, label should not be displayed below the box', () => {
-            fillInTheGapsDropdownPage.previewTabResponseDropdown()
-                .each(($el) => {
-                    cy.wrap($el)
-                        .should('not.have.text')
-                });
-            fillInTheGapsDropdownPage.checkAnswerButton()
-                .click();
-            fillInTheGapsDropdownPage.correctIcon()
-                .should('not.exist');
-            fillInTheGapsDropdownPage.incorrectIcon()
-                .should('not.exist');
-            fillInTheGapsDropdownPage.correctIncorectAnswerLabel()
-                .should('not.exist');
-            fillInTheGapsDropdownPage.previewTabCorrectAnswerContainer()
-                .should('not.exist')
-        });
-
-        it('When the user has added correct response for one option then on clicking on the Check Answer button, green checkmark icon should be displayed besides the correct response, red crossmark should not be displayed beside empty response and \'Incorrect Answer\' label should be displayed below the box', () => {
-            fillInTheGapsDropdownPage.steps.selectResponseFromPreviewTabResponseDropdown(0, 'new');
-            fillInTheGapsDropdownPage.checkAnswerButton()
-                .click();
-            fillInTheGapsDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0);
-            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectIconNotVisible(1);
-            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect')
-            fillInTheGapsDropdownPage.steps.verifyIncorrectAttemptBorder()
-        });
-
-        it('When the user has added both correct responses then on clicking on the Check Answer button, green checkmark icon should be displayed besides the responses and \'Correct Answer\' label should be displayed below the box', () => {
-            fillInTheGapsDropdownPage.steps.selectResponseFromPreviewTabResponseDropdown(1, 'extensively');
-            fillInTheGapsDropdownPage.checkAnswerButton()
-                .click();
-            fillInTheGapsDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(0)
-            fillInTheGapsDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(1)
-            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Correct')
-            fillInTheGapsDropdownPage.steps.verifyCorrectAttemptBorder()
-        });
-
-
-        fillInTheGapsDropdownPage.tests.verifyDisabledCheckAnswerButtonWithCSSAnda11y()
-
-        it('When the user updates the value of Maximum check answer attempts input field, it should get reflected on the Preview tab', () => {
-            cy.log('Pre step: Switching to Edit tab')
-            fillInTheGapsDropdownPage.steps.switchToEditTab();
-            fillInTheGapsDropdownPage.maximumCheckAnswerAttemptsInputField()
-                .clear()
-                .type(1)
-                .should('have.value', '1');
-            cy.log('Switching to Preview tab');
-            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
-            fillInTheGapsDropdownPage.checkAnswerButton()
-                .should('be.enabled');
-            fillInTheGapsDropdownPage.steps.selectResponseFromPreviewTabResponseDropdown(0, 'new');
-            fillInTheGapsDropdownPage.steps.selectResponseFromPreviewTabResponseDropdown(1, 'extensively');
-            fillInTheGapsDropdownPage.checkAnswerButton()
-                .click()
-                .should('be.disabled');
-        });
-
-        it('When the \'Maximum check answer attempts\' input field has value \'0\' and user switches to Preview tab, then the \'Check Answer\' button should be enabled and user should be able to check answer multiple times', () => {
-            fillInTheGapsDropdownPage.steps.switchToEditTab();
-            fillInTheGapsDropdownPage.steps.clearMaximumCheckAnswerAttemptsInputField();
-            fillInTheGapsDropdownPage.steps.addInputToMaximumCheckAnswerAttemptsInputField(0);
-            cy.log('Switching to Preview tab')
-            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
-            fillInTheGapsDropdownPage.checkAnswerButton()
-                .should('be.enabled');
-            cy.log('Clicking on \'Check Answer\' to check state of \'Check Answer\' to be enabled')
-            fillInTheGapsDropdownPage.steps.selectResponseFromPreviewTabResponseDropdown(0, 'changing');
-            fillInTheGapsDropdownPage.steps.selectResponseFromPreviewTabResponseDropdown(1, 'decreasingly');
-            fillInTheGapsDropdownPage.checkAnswerButton()
-                .click();
-            fillInTheGapsDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(0)
-            fillInTheGapsDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(1)
-            fillInTheGapsDropdownPage.checkAnswerButton()
-                .should('be.enabled');
-            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect')
-            fillInTheGapsDropdownPage.steps.verifyIncorrectAttemptBorder()
-            cy.log('As the user is able to check answer multiple times, verifying state of \'Check Answer\' to be enabled by adding another response')
-            fillInTheGapsDropdownPage.steps.selectResponseFromPreviewTabResponseDropdown(0, 'healthy');
-            fillInTheGapsDropdownPage.steps.selectResponseFromPreviewTabResponseDropdown(1, 'extensively');
-            fillInTheGapsDropdownPage.checkAnswerButton()
-                .click();
-            fillInTheGapsDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(0)
-            fillInTheGapsDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(1)
-            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect')
-            fillInTheGapsDropdownPage.steps.verifyIncorrectAttemptBorder()
-            fillInTheGapsDropdownPage.checkAnswerButton()
-                .should('be.enabled');
-        });
-
-        it('When the \'Maximum check answer attempts\' input field is empty and user switches to Preview tab, then the \'Check Answer\' button should be enabled and user should be able to check answer multiple times', () => {
-            cy.log('Pre step: Switching to Edit tab')
-            fillInTheGapsDropdownPage.steps.switchToEditTab();
-            fillInTheGapsDropdownPage.maximumCheckAnswerAttemptsInputField()
-                .clear()
-                .should('have.value', '');
-            cy.log('Switching to Preview tab');
-            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
-            fillInTheGapsDropdownPage.checkAnswerButton()
-                .should('be.enabled');
-            cy.log('Clicking on \'Check Answer\' to check state of \'Check Answer\' to be enabled')
-            fillInTheGapsDropdownPage.steps.selectResponseFromPreviewTabResponseDropdown(0, 'changing');
-            fillInTheGapsDropdownPage.steps.selectResponseFromPreviewTabResponseDropdown(1, 'decreasingly');
-            fillInTheGapsDropdownPage.checkAnswerButton()
-                .click();
-            fillInTheGapsDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(0)
-            fillInTheGapsDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(1)
-            fillInTheGapsDropdownPage.checkAnswerButton()
-                .should('be.enabled');
-            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect')
-            fillInTheGapsDropdownPage.steps.verifyIncorrectAttemptBorder()
-            cy.log('As the user is able to check answer multiple times, verifying state of \'Check Answer\' to be enabled by adding another response')
-            fillInTheGapsDropdownPage.steps.selectResponseFromPreviewTabResponseDropdown(0, 'healthy');
-            fillInTheGapsDropdownPage.steps.selectResponseFromPreviewTabResponseDropdown(1, 'extensively');
-            fillInTheGapsDropdownPage.checkAnswerButton()
-                .click();
-            fillInTheGapsDropdownPage.steps.verifyIncorrectOptionCrossmarkIcon(0)
-            fillInTheGapsDropdownPage.steps.verifyCorrectOptionCheckmarkIcon(1)
-            fillInTheGapsDropdownPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect')
-            fillInTheGapsDropdownPage.steps.verifyIncorrectAttemptBorder()
-            fillInTheGapsDropdownPage.checkAnswerButton()
-                .should('be.enabled');
-        });
-    });
-
-    describe('Additional Settings: Details section', () => {
-        abortEarlySetup();
-        before(() => {
-            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
-            fillInTheGapsDropdownPage.steps.expandAdditonalSettings();
-        });
-
-        fillInTheGapsDropdownPage.tests.verifyDetailsSection();
-    });
 });