itemengine-cypress-automation 1.0.23 → 1.0.25

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

@@ -0,0 +1,511 @@
+import { 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: Advanced settings for all response areas', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional Settings: Advanced settings for all response areas', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsTextPage.tests.verifyAdvanceSettingsForAllResponsesLabelAndCSS();
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+    });
+
+    describe('Additional Settings: Placeholder text', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsTextPage.tests.verifyPlaceholderTextLabelInputFieldAndCSS()
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+
+        //Placeholder test cases for Set correct answer section response fields
+        it('When \'Placeholder text\' input field is empty then no \'Placeholder text\' should be displayed in the set correct answer response field', () => {
+            fillInTheGapsTextPage.placeholderTextInputField()
+                .should('have.value', '');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('not.have.attr', 'placeholder');
+                });
+        });
+
+        it('When the user adds a text in the Placeholder input field, the added placeholder should be displayed in the set correct answer response field', () => {
+            fillInTheGapsTextPage.placeholderTextInputField()
+                .type('Lorem Ipsum')
+                .should('have.value', 'Lorem Ipsum');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('have.attr', 'placeholder', 'Lorem Ipsum');
+                });
+        });
+
+        //Comment: not possible to check css of placeholder since it is added as an attribute, properties of placeholder is not visible in dev tools
+
+        it('Accessibility of \'Placeholder text\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsTextPage.setCorrectAnswerResponseField().parents('.response-input-field'));
+        });
+
+        it('When the user starts typing in the response field, then the placeholder text should disappear and on clearing the input field the placeholder text should re-appear for the set correct answer section response fields', () => {
+            //TODO: Need to update script after https://redmine.zeuslearning.com/issues/527580 is resolved
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .type('Response')
+                .should('have.value', 'Response')
+                .should('not.have.attr', 'placeholder')
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .clear()
+                .should('have.attr', 'placeholder', 'Lorem Ipsum');
+        });
+
+        //Placeholder test cases for Preview tab response fields
+        it('When \'Placeholder text\' input field is empty then no \'Placeholder text\' should be displayed in the preview tab response field', () => {
+            cy.log('Pre step: Clearinng the placeholder text and switching to Preview tab')
+            fillInTheGapsTextPage.placeholderTextInputField()
+                .clear()
+                .should('have.value', '');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('not.have.attr', 'placeholder');
+                });
+        });
+
+        it('When the user adds a text in the Placeholder input field, the added placeholder should be displayed in the preview tab response field', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.placeholderTextInputField()
+                .type('Lorem Ipsum')
+                .should('have.value', 'Lorem Ipsum');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .should('have.attr', 'placeholder', 'Lorem Ipsum');
+                });
+        });
+
+        //Comment: not possible to check css of placeholder since it is added as an attribute, properties of placeholder is not visible in dev tools
+
+        it('Accessibility of \'Placeholder text\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsTextPage.previewTabResponseField().parents('.response-input-field'))
+        });
+
+        it('When the user starts typing in the response field, then the placeholder text should disappear and on clearing the input field the placeholder text should re-appear for the preview tab response fields', () => {
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .type('Response')
+                .should('have.value', 'Response')
+                .should('not.have.attr', 'placeholder');
+            fillInTheGapsTextPage.previewTabResponseField()
+                .eq(0)
+                .clear()
+                .blur()
+                .should('have.attr', 'placeholder', 'Lorem Ipsum');
+        });
+    });
+
+    describe('Additional Settings: Type of answer input', () => {
+        const typeOfAnswers = ['Text', 'Number'];
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Type of answer\' label and dropdown should be displayed and in \'Type of answer\' dropdown \'Text\' option should be selected by default', () => {
+            fillInTheGapsTextPage.typeOfAnswerInputLabel()
+                .verifyInnerText('Type of answer input');
+            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                .verifyInnerText('Text');
+        });
+
+        it('CSS of \'Type of answer\' dropdown', { tags: 'css' }, () => {
+            fillInTheGapsTextPage.typeOfAnswerInputLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+
+        it(`Clicking on Type of answer dropdown should open a list of 2 options - ${typeOfAnswers}`, () => {
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(0)
+                .should('be.visible');
+            typeOfAnswers.forEach((index, count) => {
+                fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(count)
+                    .verifyInnerText(index);
+            });
+        });
+
+        it('CSS of Type of answer dropdown in Active state', { tags: 'css' }, () => {
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(0)
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
+                .should('have.css', 'background-color', css.color.liTextSelectedBg);
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(1)
+                .should('have.css', 'background-color', css.color.transparent);
+        });
+
+        it('Accessibility of Type of answer dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.dropdownList());
+        });
+
+        //Type of answer input test cases for set correct answer section response fields
+        it('When \'Text\' option is set in the dropdown, then user should be able to add alpha-numeric characters in the \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                .verifyInnerText('Text');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .type('Response 1')
+                        .should('have.value', 'Response 1');
+                });
+        });
+
+        it('When the user selects \'Number\' option from the dropdown the the user should be able to add only numeric characters in the set correct answer response field', () => {
+            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                .click();
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(1)
+                .click();
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .type('Response 1')
+                        .should('have.value', '1');
+                });
+        });
+
+        //Type of answer input test cases for preview tab response fields
+        it('When \'Text\' option is set in the dropdown, then user should be able to add alpha-numeric characters in preview tab response fields', () => {
+            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                .click();
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(0)
+                .click();
+            fillInTheGapsTextPage.steps.switchToPreviewTab()
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .type('Response 1')
+                        .should('have.value', 'Response 1');
+                });
+        });
+
+        it('When the user selects \'Number\' option from the dropdown then the user should be able to add only numeric characters in the preview tab input field', () => {
+            cy.log('Switching to edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab()
+            fillInTheGapsTextPage.typeOfAnswerInputDropdown()
+                .click();
+            fillInTheGapsTextPage.typeOfAnswerInputDropdownListOptions(1)
+                .click();
+            fillInTheGapsTextPage.steps.switchToPreviewTab()
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .type('Response 1')
+                        .should('have.value', '1');
+                });
+        })
+    });
+
+    describe('Additional Settings: Set character limit', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Set character limit\' label and input field should be displayed and in \'Set character limit\' input field the default value should be \'20\'', () => {
+            fillInTheGapsTextPage.setCharacterLimitLabel()
+                .verifyInnerText('Set character limit')
+                .should('be.visible');
+            fillInTheGapsTextPage.setCharacterLimitInputField()
+                .should('have.value', '20')
+                .and('be.visible');
+        });
+
+        it('User should not be able to Set character limit value below 1', () => {
+            fillInTheGapsTextPage.setCharacterLimitInputField()
+                .clear()
+                .type('0')
+                .should('have.value', '0');
+            cy.get('body')
+                .click();
+            fillInTheGapsTextPage.setCharacterLimitInputField()
+                .should('not.have.value', '0')
+                .and('have.value', '1');
+        });
+
+        it('When the user removes the default set characters limit then user should be able to enter \'20\' characters', () => {
+            fillInTheGapsTextPage.setCharacterLimitInputField()
+                .clear()
+                .blur();
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .focus()
+                .type('ut placerat orci nulla')
+                .should('have.value', 'ut placerat orci nulla');
+            cy.log('Post step: Setting character limit to 20 and clearing the added text')
+            fillInTheGapsTextPage.setCharacterLimitInputField()
+                .type('20')
+                .should('have.value', '20');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .eq(0)
+                .clear();
+        });
+
+        //Set character limit test cases for set correct answer section response fields
+        it('User should not be able to add characters more than the default Set character limit value in the Set correct answer response fields', () => {
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .type('ut placerat orci nulla')
+                        .should('have.value', 'ut placerat orci nul');
+                });
+        });
+
+        it('When tries to enter a response using Enter key in the repsonse fields then the user should not be able to do so and should be able to enter the specified number of characters only for the set correct answer section response fields', () => {
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .clear()
+                        .type('at i{enter}n{enter}t{enter}e{enter}llu{enter}s in{enter}te gers')
+                        .should('have.value', 'at intellus inte ger');
+                });
+        });
+
+        it('User should be able to edit the \'Set character limit\' input field', () => {
+            fillInTheGapsTextPage.setCharacterLimitInputField()
+                .clear()
+                .type('45')
+                .should('have.value', '45');
+        });
+
+        it('User should not be able to add characters more than the Set character limit value in the Set correct answers', () => {
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .clear()
+                        .type('ut placerat orci nulla pellentesque dignissim e')
+                        .should('have.value', 'ut placerat orci nulla pellentesque dignissim');
+                });
+        });
+
+        //Type of answer input test cases for preview tab response fields
+        it('User should not be able to add characters more than the default Set character limit value in the preview tab response fields', () => {
+            fillInTheGapsTextPage.setCharacterLimitInputField()
+                .clear()
+                .type('20')
+                .should('have.value', '20');
+            fillInTheGapsTextPage.steps.switchToPreviewTab()
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .type('ut placerat orci nulla')
+                        .should('have.value', 'ut placerat orci nul');
+                });
+        });
+
+        it('When tries to enter a response using Enter key in the response fields then the user should not be able to do so and should be able to enter the specified number of characters only for the preview tab response fields', () => {
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .clear()
+                        .type('at i{enter}n{enter}t{enter}e{enter}llu{enter}s in{enter}te gers')
+                        .should('have.value', 'at intellus inte ger');
+                });
+        });
+
+        it('User should be able to edit the \'Set character limit\' input field', () => {
+            cy.log('Switching to edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab()
+            fillInTheGapsTextPage.setCharacterLimitInputField()
+                .clear()
+                .type('45')
+                .should('have.value', '45');
+        });
+
+        it('User should not be able to add characters more than the Set character limit value in the preview tab response fields', () => {
+            fillInTheGapsTextPage.steps.switchToPreviewTab()
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .type('ut placerat orci nulla pellentesque dignissim e')
+                        .should('have.value', 'ut placerat orci nulla pellentesque dignissim');
+                });
+        });
+    });
+
+    describe('Additional Settings: Height and Width', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsTextPage.steps.navigateToCreateQuestion('fill in the gaps with text');
+            fillInTheGapsTextPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsTextPage.tests.verifyHeightAndWidthLabelInputFieldWithCSSAnda11y()
+
+        //Height and width test cases for set correct answer section response fields
+        //TODO: We will need to revisit below case as it will fail for mobile view
+        it('When the input field of \'Height\' and \'Width\' is kept empty, the default dimension of the response field should be (197x46)px in the \'Set correct answer\' section response field', () => {
+            fillInTheGapsTextPage.heightInputField()
+                .should('have.value', '');
+            fillInTheGapsTextPage.widthInputField()
+                .should('have.value', '');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .parents('.response-input-field')
+                        .should('have.attr', 'height', '46px')
+                        .and('have.attr', 'width', '13.7em')
+                });
+        });
+
+        it('When the user adds \'Height\' for the response field then the height of the response field should get updated accordingly in the \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.heightInputField()
+                .type('100')
+                .should('have.value', '100');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .parents('.response-input-field')
+                        .should('have.attr', 'height', '100px');
+                });
+        });
+
+        it('When the user adds \'Width\' for the response field then the Width of the response field should get updated accordingly in the \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.heightInputField()
+                .clear()
+                .should('have.value', '');
+            fillInTheGapsTextPage.widthInputField()
+                .type('100')
+                .should('have.value', '100');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .parents('.response-input-field')
+                        .should('have.attr', 'width', '100px');
+                });
+        });
+
+        it('When the user enters a value below 80px in the \'Width\' input field then the width of the input field should remain 80px in \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.widthInputField()
+                .clear()
+                .type('20')
+                .should('have.value', '20');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .parents('.response-input-field')
+                        .should('have.attr', 'width', '80px');
+                });
+        });
+
+        it('When the user enters a value above 400px in the \'Width\' input field then the width of the input field should remain 400px in \'Set correct answer\' section', () => {
+            fillInTheGapsTextPage.widthInputField()
+                .clear()
+                .type('800')
+                .should('have.value', '800');
+            fillInTheGapsTextPage.setCorrectAnswerResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .parents('.response-input-field')
+                        .should('have.attr', 'width', '400px');
+                });
+        });
+
+        //Height and width test cases for preview tab response fields
+        //TODO: We will need to revisit below case as it will fail for mobile view
+        it('When the input field of \'Height\' and \'Width\' is kept empty, the default dimension of the response field should be (197x46)px for the preview tab', () => {
+            fillInTheGapsTextPage.widthInputField()
+                .clear()
+                .should('have.value', '');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .parents('.response-input-field')
+                        .should('have.attr', 'height', '46px')
+                        .and('have.attr', 'width', '13.7em')
+                });
+        });
+
+        it('When the user adds \'Height\' for the response field then the height of the response field should get updated accordingly in the preview tab', () => {
+            cy.log('Pre step: Switching to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.heightInputField()
+                .type('100')
+                .should('have.value', '100');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .parents('.response-input-field')
+                        .should('have.attr', 'height', '100px');
+                });
+        });
+
+        it('When the user adds \'Width\' for the response field then the response fields should get updated accordingly in the preview tab', () => {
+            cy.log('Pre step: Switching to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.heightInputField()
+                .clear()
+                .should('have.value', '');
+            fillInTheGapsTextPage.widthInputField()
+                .type('100')
+                .should('have.value', '100');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .parents('.response-input-field')
+                        .should('have.attr', 'width', '100px');
+                });
+        });
+
+        it('When the user enters a value below 80px in the \'Width\' input field then the input field should remain 80px for the preview tab response fields', () => {
+            cy.log('Pre step: Switching to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.widthInputField()
+                .clear()
+                .type('20')
+                .should('have.value', '20');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .parents('.response-input-field')
+                        .should('have.attr', 'width', '80px');
+                });
+        });
+
+        it('When the user enters a value above 400px in the \'Width\' input field then the input field should remain 400px for preview tab repsonse field', () => {
+            cy.log('Pre step: Switching to Edit tab')
+            fillInTheGapsTextPage.steps.switchToEditTab();
+            fillInTheGapsTextPage.widthInputField()
+                .clear()
+                .type('800')
+                .should('have.value', '800');
+            fillInTheGapsTextPage.steps.switchToPreviewTab();
+            fillInTheGapsTextPage.previewTabResponseField()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .parents('.response-input-field')
+                        .should('have.attr', 'width', '400px');
+                });
+        });
+    });
+});