itemengine-cypress-automation 1.0.24 → 1.0.25

package/cypress/e2e/ILC/FillInTheGapsText/fillInTheGapsTextAdditionalSettingsBasic.js

@@ -0,0 +1,263 @@
+import { specialOrMathCharacters } from "../../../fixtures/specialAndMathCharacters";
+import { dialogBoxBase, fillInTheGapsTextPage } from "../../../pages";
+import { commonComponents } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+
+describe('Fill In the Gaps Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional Settings accordion', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+        });
+
+        fillInTheGapsTextPage.tests.verifyAdditonalSettingsAccordionProperties();
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/535989
+    describe('Additional Settings: Font Size dropdown', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to fill in the gaps - text type, adding question instructions and options, allotting points and expanding additional settings accordion')
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.questionInstructionsInputField()
+                .type('Question Instructions');
+            fillInTheGapsTextPage.pointsInputField()
+                .type('4');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($element) => {
+                    cy.wrap($element)
+                        .type('Answer input');
+                });
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsTextPage.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`, () => {
+                fillInTheGapsTextPage.fontSizeDropdown()
+                    .click();
+                fillInTheGapsTextPage.fontSizeListOptions(count)
+                    .click();
+                fillInTheGapsTextPage.fontSizeDropdown()
+                    .verifyInnerText(`${option}`);
+                cy.log('Checking correct answer section font size')
+                fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                    .each(($element) => {
+                        cy.wrap($element)
+                            .parent()
+                            .should('have.attr', 'font-size', font[count]);
+                    });
+                cy.log('Switching to Preview tab')
+                fillInTheGapsTextPage.steps.switchToPreviewTab();
+                cy.log('Checking Preview section font size')
+                fillInTheGapsTextPage.questionInstructionsText()
+                    .should('have.css', 'font-size', font[count]);
+                commonComponents.previewTabQuestionWrapper()
+                    .within(() => {
+                        fillInTheGapsTextPage.previewTabResponseField()
+                            .each(($element) => {
+                                cy.wrap($element)
+                                    .parent()
+                                    .should('have.attr', 'font-size', font[count]);
+                            });
+                    });
+                fillInTheGapsTextPage.previewTabQuestionContainer()
+                    .should('have.css', 'font-size', font[count]);
+                cy.log('Post step: Switch to Edit tab')
+                fillInTheGapsTextPage.steps.switchToEditTab();
+            });
+        });
+    });
+
+    describe('Additional Settings: Student response area and layout', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Student response area and layout\' label should be displayed', () => {
+            fillInTheGapsTextPage.studentResponseAreaAndLayoutLabel()
+                .verifyInnerText('Student response area and layout')
+                .should('be.visible');
+        });
+
+        it('CSS of \'Student response area and layout\' section', { tags: 'css' }, () => {
+            fillInTheGapsTextPage.studentResponseAreaAndLayoutLabel()
+                .verifyCSS(css.color.labels, css.fontSize.default, css.fontWeight.semibold);
+        });
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+    });
+
+    describe('Additional Settings: Check Answer', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.questionInstructionsInputField()
+                .type('Question Instructions');
+            fillInTheGapsTextPage.pointsInputField()
+                .type('4');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($element) => {
+                    cy.wrap($element)
+                        .type('Answer input');
+                });
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsTextPage.tests.verifyCheckAnswerSectionAndPreviewTabCheckAnswerButton();
+    });
+
+    describe('Additional Settings: Check Answer - Functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.questionInstructionsInputField()
+                .type('Question Instructions');
+            fillInTheGapsTextPage.pointsInputField()
+                .type('4');
+            fillInTheGapsTextPage.steps.setCorrectAnswerResponses(['Response 1', 'Response 2']);
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsTextPage.steps.setMaximumCheckAnswerAttempts(2);
+            fillInTheGapsTextPage.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', () => {
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('have.value', '');
+                });
+            fillInTheGapsTextPage.checkAnswerButton()
+                .click();
+            fillInTheGapsTextPage.correctIcon()
+                .should('not.exist');
+            fillInTheGapsTextPage.incorrectIcon()
+                .should('not.exist');
+            fillInTheGapsTextPage.correctIncorectAnswerLabel()
+                .should('not.exist');
+            fillInTheGapsTextPage.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', () => {
+            fillInTheGapsTextPage.steps.enterAnswerResponsesInPreviewTab(['Response 1']);
+            fillInTheGapsTextPage.checkAnswerButton()
+                .click();
+            fillInTheGapsTextPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsTextPage.steps.verifyCorrectIncorrectIconNotVisible(1);
+            fillInTheGapsTextPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect')
+            fillInTheGapsTextPage.steps.verifyIncorrectAttemptBorder();
+        });
+
+        it('When the user has added 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', () => {
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(1)
+                .type('Response 2')
+                .should('have.value', 'Response 2');
+            fillInTheGapsTextPage.checkAnswerButton()
+                .click();
+            fillInTheGapsTextPage.steps.verifyCorrectOptionCheckmarkIcon(0);
+            fillInTheGapsTextPage.steps.verifyCorrectOptionCheckmarkIcon(1);
+            fillInTheGapsTextPage.steps.verifyCorrectIncorrectAnswerLabel('Correct');
+            fillInTheGapsTextPage.steps.verifyCorrectAttemptBorder();
+        });
+
+
+        fillInTheGapsTextPage.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')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.maximumCheckAnswerAttemptsInputField()
+                .clear()
+                .type(1)
+                .should('have.value', '1');
+            cy.log('Switching to Preview tab');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.checkAnswerButton()
+                .should('be.enabled');
+            fillInTheGapsTextPage.steps.enterAnswerResponsesInPreviewTab(['Response 1', 'Response 2']);
+            fillInTheGapsTextPage.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', () => {
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.steps.clearMaximumCheckAnswerAttemptsInputField();
+            fillInTheGapsTextPage.steps.addInputToMaximumCheckAnswerAttemptsInputField(0);
+            cy.log('Switching to Preview tab')
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.checkAnswerButton()
+                .should('be.enabled');
+            cy.log('Clicking on \'Check Answer\' to check state of \'Check Answer\' to be enabled')
+            fillInTheGapsTextPage.steps.enterAnswerResponsesInPreviewTab(['Incorrect Answer', 'Incorrect Answer'])
+            fillInTheGapsTextPage.checkAnswerButton()
+                .click();
+            fillInTheGapsTextPage.steps.verifyIncorrectOptionCrossmarkIcon(0)
+            fillInTheGapsTextPage.steps.verifyIncorrectOptionCrossmarkIcon(1)
+            fillInTheGapsTextPage.checkAnswerButton()
+                .should('be.enabled');
+            fillInTheGapsTextPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect')
+            fillInTheGapsTextPage.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')
+            fillInTheGapsTextPage.steps.enterAnswerResponsesInPreviewTab(['Response 1', 'Response 2'])
+            fillInTheGapsTextPage.checkAnswerButton()
+                .click();
+            fillInTheGapsTextPage.steps.verifyCorrectIncorrectAnswerLabel('Correct')
+            fillInTheGapsTextPage.steps.verifyCorrectAttemptBorder()
+            fillInTheGapsTextPage.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')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.maximumCheckAnswerAttemptsInputField()
+                .clear()
+                .should('have.value', '');
+            cy.log('Switching to Preview tab');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.checkAnswerButton()
+                .should('be.enabled');
+            cy.log('Clicking on \'Check Answer\' to check state of \'Check Answer\' to be enabled')
+            fillInTheGapsTextPage.steps.enterAnswerResponsesInPreviewTab(['Incorrect Answer', 'Incorrect Answer'])
+            fillInTheGapsTextPage.checkAnswerButton()
+                .click();
+            fillInTheGapsTextPage.steps.verifyIncorrectOptionCrossmarkIcon(0)
+            fillInTheGapsTextPage.steps.verifyIncorrectOptionCrossmarkIcon(1)
+            fillInTheGapsTextPage.checkAnswerButton()
+                .should('be.enabled');
+            fillInTheGapsTextPage.steps.verifyCorrectIncorrectAnswerLabel('Incorrect')
+            fillInTheGapsTextPage.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')
+            fillInTheGapsTextPage.steps.enterAnswerResponsesInPreviewTab(['Response 1', 'Response 2'])
+            fillInTheGapsTextPage.checkAnswerButton()
+                .click();
+            fillInTheGapsTextPage.steps.verifyCorrectIncorrectAnswerLabel('Correct')
+            fillInTheGapsTextPage.steps.verifyCorrectAttemptBorder()
+            fillInTheGapsTextPage.checkAnswerButton()
+                .should('be.enabled');
+        });
+    });
+
+    describe('Additional Settings: Details section', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsTextPage.tests.verifyDetailsSection();
+    });
+});