itemengine-cypress-automation 1.0.51 → 1.0.62

package/cypress/e2e/ILC/FillInTheGapsOverImageDropdown/fillInTheGapsOverImageDropdownAdditionalSettingsStudentResponseAndLayout.js

@@ -0,0 +1,206 @@
+import { fillInTheGapsOverImageDropdownPage } from "../../../pages";
+import { uploadImageSectionComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const optionsForResponse1 = ['Flower', 'Petal', 'Stem', 'Branch'];
+const optionsForResponse2 = ['Leaf', 'Leaves', 'Stem', 'Seed'];
+const answerNumerationDropdownOptions = ['Numerical', 'Uppercase alphabet', 'Lowercase alphabet'];
+const correctTabAnswerArray = ['Flower', 'Leaf'];
+const incorrectAnswerArray = ['Branch', 'Seed'];
+const numbers = ['1', '2'];
+const lowercase = ['a', 'b'];
+const uppercase = ['A', 'B'];
+
+describe('Fill In the gaps over image - dropdown - 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 - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Student response area and layout\' label should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.studentResponseAreaAndLayoutLabel(), 'Student response area and layout');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.studentResponseAreaAndLayoutLabel(), 'visible');
+        });
+
+        it('CSS of \'Student response area and layout\' section', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.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', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+        });
+
+        fillInTheGapsOverImageDropdownPage.tests.verifyAnswerNumerationContents();
+    });
+
+    describe('Additional settings: \'Answer numeration\' (only while grading) - Set correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+        });
+
+        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(fillInTheGapsOverImageDropdownPage.answerNumerationDropdown(), `${answerNumerationDropdownOptions[0]}`)
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.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\'`, () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[1]}`);
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.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\'`, () => {
+            fillInTheGapsOverImageDropdownPage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[2]}`);
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseNumeration(), 'notExist');
+        });
+    });
+
+    describe('Additional settings: \'Answer numeration\' (only while grading) - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(0, optionsForResponse1);
+            fillInTheGapsOverImageDropdownPage.steps.addInputToResponseOptionFields(1, optionsForResponse2);
+            fillInTheGapsOverImageDropdownPage.steps.allotPoints(20);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(0, correctTabAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromSetCorrectAnswerSectionResponseDropdown(1, correctTabAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+        });
+
+        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(fillInTheGapsOverImageDropdownPage.answerNumerationDropdown(), `${answerNumerationDropdownOptions[0]}`);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, incorrectAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(1, incorrectAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.checkShowCorrectAnswerCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount(correctTabAnswerArray, 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`, () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[1]}`);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, incorrectAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(1, incorrectAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount(correctTabAnswerArray, 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`, () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.selectAnswerNumerationDropdownOption(`${answerNumerationDropdownOptions[2]}`);
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(0, incorrectAnswerArray[0]);
+            fillInTheGapsOverImageDropdownPage.steps.selectResponseFromDropdownInPreviewTab(1, incorrectAnswerArray[1]);
+            fillInTheGapsOverImageDropdownPage.steps.verifyCorrectAnswerResponsesInCorrectAnswerContainerAndCount(correctTabAnswerArray, 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 - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+        });
+
+        it('\'Display answer numeration to students\' functionality label and checkbox should be displayed and by default it should be unchecked', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDropdownPage.displayAnswerNumerationToStudentsLabel(), 'Display answer numeration to students');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.displayAnswerNumerationToStudentsLabel(), 'visible');
+            fillInTheGapsOverImageDropdownPage.steps.verifyDisplayAnswerNumerationToStudentsCheckboxNotChecked();
+        });
+
+        it('CSS of \'Display answer numeration to students\' section - unchecked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.displayAnswerNumerationToStudentsLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.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 dropdown', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.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 dropdown', () => {
+            fillInTheGapsOverImageDropdownPage.steps.checkDisplayAnswerNumerationToStudentsCheckbox();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseNumeration(), 'notExist');
+        });
+
+        it('CSS of \'Display answer numeration to students\' section - checked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDropdownPage.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(fillInTheGapsOverImageDropdownPage.displayAnswerNumerationToStudentsCheckbox().parents('.additional-settings-container'));
+        });
+    });
+
+    describe('Additional settings: Display answer numeration to students - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to fill in the gaps over image - dropdown question type');
+            fillInTheGapsOverImageDropdownPage.steps.navigateToCreateQuestion('fill in the gaps over image - dropdown');
+            fillInTheGapsOverImageDropdownPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDropdownPage.steps.clickOnImagePopupOkButton();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.addResponseContainer();
+            fillInTheGapsOverImageDropdownPage.steps.expandAdditonalSettings();
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+        });
+
+        it('When \'Display answer numeration to students\' checkbox is unchecked, answer numeration should not be displayed in preview tab response dropdown', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseNumeration(), 'notExist');
+        });
+
+        it('When the user checks the \'Display answer numeration to students\' checkbox, answer numeration should be displayed in preview tab response dropdown', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.checkDisplayAnswerNumerationToStudentsCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDropdownPage.steps.verifyResponseDropdownNumeration(['1', '2']);
+        });
+
+        it('When the user unchecks the \'Display answer numeration to students\' checkbox, answer numeration should not be displayed in preview tab response dropdown', () => {
+            fillInTheGapsOverImageDropdownPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDropdownPage.steps.uncheckDisplayAnswerNumerationToStudentsCheckbox();
+            fillInTheGapsOverImageDropdownPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDropdownPage.responseNumeration(), 'notExist');
+        });
+    });
+});