itemengine-cypress-automation 1.0.47 → 1.0.48

package/cypress/e2e/ILC/FillInTheGapsOverImageText/fillInTheGapsOverImageTextAdditionalSettingsStudentResponseAreaAndLayout.js

@@ -0,0 +1,262 @@
+import { specialOrMathCharacters } from "../../../fixtures/specialAndMathCharacters";
+import { fillInTheGapsOverImageTextPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const correctTabAnswerArray = ['Flower', 'Leaf'];
+const incorrectAnswerArray = ['Root', 'Branch'];
+const numbers = ['1', '2'];
+const lowercase = ['a', 'b'];
+const uppercase = ['A', 'B'];
+const answerNumerationDropdownOptions = ['Numerical', 'Uppercase alphabet', 'Lowercase alphabet'];
+let symbolsString = specialOrMathCharacters['specialCharacters'].characters.map((icon) => icon.symbol);
+symbolsString = symbolsString.join('');
+
+describe('Fill In the gaps over image - text - Additional settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional settings: Student response area and layout', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Student response area and layout\' label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.studentResponseAreaAndLayoutLabel(), 'Student response area and layout');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.studentResponseAreaAndLayoutLabel(), 'visible');
+        });
+
+        it('CSS of \'Student response area and layout\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.studentResponseAreaAndLayoutLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+    });
+
+    describe('Additional settings: \'Answer numeration\' (only while grading) - Contents and set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsOverImageTextPage.tests.verifyAnswerNumerationContents();
+
+        it(`When the user selects ${answerNumerationDropdownOptions[0]} option from the \'Answer numeration\' dropdown, then correct response numeration should not be displayed in the \'Set correct answer section\'`, () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.answerNumerationDropdown(), `${answerNumerationDropdownOptions[0]}`)
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseNumeration(), 'notExist');
+        });
+
+        it(`When the user selects ${answerNumerationDropdownOptions[1]} option from the \'Answer numeration\' dropdown, then correct response numeration should not be displayed in the \'Set correct answer section\'`, () => {
+            fillInTheGapsOverImageTextPage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[1]}`);
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseNumeration(), 'notExist');
+        });
+
+        it(`When the user selects ${answerNumerationDropdownOptions[2]} option from the \'Answer numeration\' dropdown, then correct response numeration should not be displayed in the \'Set correct answer section\'`, () => {
+            fillInTheGapsOverImageTextPage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[2]}`);
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseNumeration(), 'notExist');
+        });
+    });
+
+    describe('Additional settings: \'Answer numeration\' (only while grading) - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldSetCorrectAnswerSection(1, correctTabAnswerArray[1]);
+            fillInTheGapsOverImageTextPage.steps.allotPoints(10);
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+        });
+
+        it(`When the user attempts the question when ${answerNumerationDropdownOptions[0]} is selected and selects \'Show correct answer\' checkbox then the correct answer section should have ${answerNumerationDropdownOptions[0]} numeration`, () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.answerNumerationDropdown(), `${answerNumerationDropdownOptions[0]}`);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, incorrectAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, incorrectAnswerArray[1]);
+            fillInTheGapsOverImageTextPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewTabResponseFieldAndCorrectAnswerNumeration(numbers);
+        });
+
+        it(`When the user attempts the question when ${answerNumerationDropdownOptions[1]} is selected and selects \'Show correct answer\' checkbox then the correct answer section should have ${answerNumerationDropdownOptions[1]} numeration`, () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[1]}`);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, incorrectAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, incorrectAnswerArray[1]);
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewTabResponseFieldAndCorrectAnswerNumeration(uppercase);
+        });
+
+        it(`When the user attempts the question when ${answerNumerationDropdownOptions[2]} is selected and selects \'Show correct answer\' checkbox then the correct answer section should have ${answerNumerationDropdownOptions[2]} numeration`, () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[2]}`);
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(0, incorrectAnswerArray[0]);
+            fillInTheGapsOverImageTextPage.steps.enterTextInResponseFieldPreviewTab(1, incorrectAnswerArray[1]);
+            fillInTheGapsOverImageTextPage.steps.verifyPreviewTabResponseFieldAndCorrectAnswerNumeration(lowercase);
+        });
+    });
+
+    describe('Additional settings: Display answer numeration to students - Contents and set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Display answer numeration to students\' functionality label and checkbox should be displayed and by default it should be unchecked', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.displayAnswerNumerationToStudentsLabel(), 'Display answer numeration to students');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.displayAnswerNumerationToStudentsLabel(), 'visible');
+            fillInTheGapsOverImageTextPage.steps.verifyDisplayAnswerNumerationToStudentsCheckboxNotChecked();
+        });
+
+        it('CSS of \'Display answer numeration to students\' section - unchecked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.displayAnswerNumerationToStudentsLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.displayAnswerNumerationToStudentsCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+
+        it('When \'Display answer numeration to students\' checkbox is unchecked, answer numeration should not be displayed in set correct answer section response fields', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseNumeration(), 'notExist');
+        });
+
+        it('When the user checks the \'Display answer numeration to students\' checkbox, answer numeration should not be displayed in set correct answer section response fields', () => {
+            fillInTheGapsOverImageTextPage.steps.checkDisplayAnswerNumerationToStudentsCheckbox();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseNumeration(), 'notExist');
+        });
+
+        it('CSS of \'Display answer numeration to students\' section - checked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.displayAnswerNumerationToStudentsCheckbox().parent().find('svg g g'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Display answer numeration to students\' section - checked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.displayAnswerNumerationToStudentsCheckbox().parents('.additional-settings-container'));
+        });
+    });
+
+    //Failing due to https://redmine.zeuslearning.com/issues/548127
+    describe('Additional settings: Display answer numeration to students - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+        });
+
+        it('When \'Display answer numeration to students\' checkbox is unchecked, answer numeration should not be displayed in preview tab response fields', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.responseNumeration(), 'notExist');
+        });
+
+        it('When the user checks the \'Display answer numeration to students\' checkbox, answer numeration should not be displayed in preview tab response fields', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.checkDisplayAnswerNumerationToStudentsCheckbox();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifyResponseFieldNumeration(['1', '2']);
+        });
+    });
+
+    describe('Additional settings: Spell check - Contents and set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Spell check\' functionality label and checkbox should be displayed and by default it should be unchecked', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageTextPage.spellCheckLabel(), 'Spell check');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageTextPage.spellCheckLabel(), 'visible');
+            fillInTheGapsOverImageTextPage.steps.verifySpellCheckCheckboxNotChecked();
+        });
+
+        it('CSS of \'Spell check\' section - unchecked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.spellCheckLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.spellCheckCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+
+        //Note: a11y covered in Additional settings accordion, verifyAdditonalSettingsAccordionProperties
+
+        //Spell check test cases for set correct answer section response fields
+        it('When the \'Spell check\' functionality is disabled, the response field should have \'spellcheck\' attribute set as \'false\' in \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageTextPage.steps.verifySpellCheckOfResponseFieldSetCorrectAnswerSectionDisabled(0);
+        });
+
+        it('When the \'Spell check\' functionality is enabled, the response field should have \'spellcheck\' attribute set as \'true\' in \'Set correct answer\' section', () => {
+            fillInTheGapsOverImageTextPage.steps.checkSpellCheckCheckbox();
+            fillInTheGapsOverImageTextPage.steps.verifySpellCheckOfResponseFieldSetCorrectAnswerSectionEnabled(0);
+        });
+
+        it('CSS of \'Spell check\' section - checked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageTextPage.spellCheckCheckbox().parent().find('svg g g'), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Spell check\' section - checked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageTextPage.spellCheckCheckbox().parents('.additional-settings-container'));
+        });
+    });
+
+    describe('Additional settings: Spell check - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - text question type');
+            fillInTheGapsOverImageTextPage.steps.navigateToCreateQuestion('fill in the gaps over image - text');
+            fillInTheGapsOverImageTextPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageTextPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageTextPage.steps.addResponseContainer();
+            fillInTheGapsOverImageTextPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+        });
+        it('When the \'Spell check\' functionality is disabled, the response field should have \'spellcheck\' attribute set as \'false\' in preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.verifySpellCheckOfResponseFieldPreviewTabDisabled(0);
+        });
+
+        it('When the \'Spell check\' functionality is enabled, the response field should have \'spellcheck\' attribute set as \'true\' in the preview tab', () => {
+            fillInTheGapsOverImageTextPage.steps.switchToEditTab();
+            fillInTheGapsOverImageTextPage.steps.checkSpellCheckCheckbox();
+            fillInTheGapsOverImageTextPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageTextPage.steps.verifySpellCheckOfResponseFieldPreviewTabEnabled(0);
+        });
+    });
+});