itemengine-cypress-automation 1.0.78 → 1.0.80

package/cypress/e2e/ILC/FillInTheGapsOverImageDragAndDrop/studentViewSettings.js

@@ -0,0 +1,539 @@
+
+import { fillInTheGapsOverImageDragAndDropPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+const options = ['Petals', 'Leaves', 'Roots', 'Stem', 'Seeds', 'Flower'];
+
+describe('Create Item page - Fill in the gaps over image - drag and drop: Student view settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Randomize options : Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image - drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.addTextInQuestionInstructionsInputField('Drag and drop options into correct dropzone');
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.addMultipleOptionFields(4);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(40);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(options);
+            fillInTheGapsOverImageDragAndDropPage.steps.allotPoints(5);
+        });
+
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyStudentViewSettingsLabelAndCSS();
+
+        it('\'Randomize options\' checkbox and label should be displayed and by default it should be unchecked', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.randomizeOptionsLabel(), 'Randomize options');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.randomizeOptionsCheckbox(), 'exist');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyRandomizeOptionsCheckboxUnchecked();
+        });
+
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyRandomizeOptionsCheckboxAndLabelUncheckedCSS();
+
+        it('When the \'Randomize options\' functionality is disabled, the options in the specify correct answer section should be displayed in the order in which the user has set them in the \'Options\' section', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyRandomizeOptionsCheckboxUnchecked();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(options);
+        });
+
+        it('When the user enables the \'Randomize options\' functionality, then the options in the specify correct answer section should be in the order in which the user has set them in the \'Options\' section', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.checkRandomizeOptionsCheckbox();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(options);
+        });
+
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyRandomizeOptionsCheckboxCheckedCSSAndA11y();
+    });
+
+    describe('Randomize options : Preview tab', () => {
+        let optionsArray = [];
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image - drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.addTextInQuestionInstructionsInputField('Drag and drop options into correct dropzone');
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.addMultipleOptionFields(4);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(40);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(options);
+            fillInTheGapsOverImageDragAndDropPage.steps.allotPoints(5);
+        });
+
+        it('When the \'Randomize options\' functionality is disabled, options in the preview tab should be displayed in the order in which the user has set them in the \'Draggable options\' section', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyRandomizeOptionsCheckboxUnchecked();
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(options);
+        });
+
+        it('When the user enables the \'Randomize options\' functionality, then options in preview tab should be displayed in a random order', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.checkRandomizeOptionsCheckbox();
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyRandomizeOptionOrder(options);
+            optionsArray = fillInTheGapsOverImageDragAndDropPage.steps.getOptionsArray();
+        });
+
+        it('When the user switches to \'Edit tab\' and does not modify any question properties, then the order of the options should not change in the preview tab', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.resetQuestionPreview();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(optionsArray);
+        });
+
+        it('When the user switches to \'Edit tab\' and modifies any of question properties, then the order of the options should change from the previous random order', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.allotPoints(12);
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyRandomizeOptionOrder(options);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyOptionsAreRerandomized(optionsArray);
+        });
+
+        it('When the user disables the \'Randomize options\' functionality, then the options in the preview tab should be displayed in the order in which the user has set them in the \'Options\' section', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab()
+            fillInTheGapsOverImageDragAndDropPage.steps.uncheckRandomizeOptionsCheckbox();
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(options);
+        });
+    });
+
+    describe('Enable outer border : Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image - drag and drop');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyEnableOuterBorderContents();
+    });
+
+    describe('Enable outer border : Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image - drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.addTextInQuestionInstructionsInputField('Drag and drop options into correct dropzone');
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        it('When the \'Enable outer border\' checkbox is in checked state, an outer border over the question preview should be visible', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.questionBorderPreviewTab(), 'visible');
+        });
+
+        it('CSS of the outer border', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.questionBorderPreviewTab(), {
+                'border': `1px solid ${css.color.draggableOptionsContainerBorder}`
+            });
+        });
+
+        it('When the user unchecks the \'Enable outer border\' checkbox, then the outer border over the question preview should not be displayed', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.uncheckEnableOuterBorderCheckbox();
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab()
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyQuestionBorderNotExist();
+        });
+
+        it('CSS of \'Enable outer border\' checkbox - unchecked state', { tags: 'css' }, () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.enableOuterBorderCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+
+        it('Accessibility of \'Enable outer border\' checkbox - unchecked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDragAndDropPage.enableOuterBorderCheckbox().parents('[data-ngie-testid="enable-outer-border-checkbox"]'));
+        });
+    });
+
+    describe('Allow multiple instances of same draggable option : Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image - drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.addTextInQuestionInstructionsInputField('Drag and drop options into correct dropzone');
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(40);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageDragAndDropPage.steps.addMultipleOptionFields(4);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(options);
+        });
+
+        it('When the \'Allow multiple instances of same draggable option\' functionality is disabled, then on dropping the option in a dropzone, the draggable options should get removed from the options container', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Flower': 0 });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(['Petals', 'Leaves', 'Roots', 'Stem', 'Seeds']);
+        });
+
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyAllowMultipleInstancesOfSameDraggableOptionCheckboxAndLabelUncheckedCSS();
+
+        it('When the user enables the \'Allow multiple instances of same draggable option\' functionality, then on setting correct answer in a dropzone, the draggable options should persist in the options container', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.checkAllowMultipleInstancesOfSameDraggableOptionCheckbox();
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Seeds': 1 });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(options);
+        });
+
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyAllowMultipleInstancesOfSameDraggableOptionCheckboxCheckedCSSAndA11y();
+
+        it('The user should be able to use the same draggable option for multiple dropzone', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Seeds': 2 });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInSpecifyCorrectAnswerSection(1, ['Seeds']);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInSpecifyCorrectAnswerSection(2, ['Seeds']);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(options);
+        });
+
+        it('When the user removes the draggable option and moves it into the options container, only one option should be displayed in the options container', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInOptionsContainerInSpecifyCorrectAnswerSection('Seeds');
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInOptionsContainerInSpecifyCorrectAnswerSection('Seeds');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(options);
+        });
+
+        it('When the user disables the \'Allow multiple instances of same draggable option\' functionality, the duplicate option set as correct answer should get removed from a dropzone and the draggable option should also not exist in the options container of the \'Specify correct answer\' section', () => {
+            cy.log('Pre step: Setting identical options as correct responses')
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Seeds': 1 });
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Seeds': 2 });
+            fillInTheGapsOverImageDragAndDropPage.steps.uncheckAllowMultipleInstancesOfSameDraggableOptionCheckbox();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInSpecifyCorrectAnswerSection(1, ['Seeds']);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzoneTextSpecifyCorrectAnswerSection(2, '');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(['Petals', 'Leaves', 'Roots', 'Stem']);
+        });
+    });
+
+    describe('Allow multiple instances of same draggable option : Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image - drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.addTextInQuestionInstructionsInputField('Drag and drop options into correct dropzone');
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(40);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageDragAndDropPage.steps.addMultipleOptionFields(4);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(options);
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        it('When the \'Allow multiple instances of same draggable option\' functionality is disabled, then on dropping the option in a dropzone, the draggable options should get removed from the options container', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Flower': 0 });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(['Petals', 'Leaves', 'Roots', 'Stem', 'Seeds']);
+        });
+
+        it('When the user enables the \'Allow multiple instances of same draggable option\' functionality, then on setting correct answer in a dropzone, the draggable options should persist in the options container', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.checkAllowMultipleInstancesOfSameDraggableOptionCheckbox();
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Seeds': 1 });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(options);
+        });
+
+        it('The user should be able to use the same draggable option for multiple dropzones', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Seeds': 2 });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(1, ['Seeds']);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(2, ['Seeds']);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(options);
+        });
+
+        it('When the user removes the draggable option and moves it into the options container, only one option should be displayed in the options container', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInOptionsContainerInPreviewTab('Seeds');
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInOptionsContainerInPreviewTab('Seeds');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzoneTextPreviewTab(1, '');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzoneTextPreviewTab(2, '');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(options);
+        });
+    });
+
+    describe('Allow multiple instances of same draggable option - Scoring', () => {
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image - drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.addTextInQuestionInstructionsInputField('Drag and drop options into correct dropzone');
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(40);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageDragAndDropPage.steps.addMultipleOptionFields(2);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(options.slice(0, 4));
+            fillInTheGapsOverImageDragAndDropPage.steps.checkAllowMultipleInstancesOfSameDraggableOptionCheckbox();
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Petals': 0 });
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Petals': 1 });
+            fillInTheGapsOverImageDragAndDropPage.steps.allotPoints(5);
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has set same answer options in the \'Set correct answer\' section, then the user should be awarded full points on attempting the question with reused options', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Petals': 0 });
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Petals': 1 });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyPreviewScore(5, 5);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyPreviewTabPointsBackgroundForCorrectAnswer();
+        });
+    });
+
+    describe('Allow students to check answer: Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image - drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.addTextInQuestionInstructionsInputField('Drag and drop options into correct dropzone');
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageDragAndDropPage.steps.addMultipleOptionFields(4);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(options);
+            fillInTheGapsOverImageDragAndDropPage.steps.allotPoints(5);
+        });
+
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyAllowStudentsToCheckAnswerLabelAndCheckboxCSS();
+
+        it('When the user checks the \'Allow student to check answer\' checkbox, then \'Maximum check answer attempts\' dropdown should be displayed', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.checkAllowStudentsToCheckAnswerCheckbox();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.maximumCheckAnswerAttemptsDropdown(), 'visible');
+        });
+
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyMaxCheckAnswerAttemptsDropdown();
+
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyAllowStudentsToCheckAnswerContentsCSSAndA11y();
+    });
+
+    describe('Allow students to check answer: Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image - drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.addTextInQuestionInstructionsInputField('Drag and drop options into correct dropzone');
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(40);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageDragAndDropPage.steps.addMultipleOptionFields(4);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(options);
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Petals': 0, 'Flower': 1, 'Leaves': 2 });
+            fillInTheGapsOverImageDragAndDropPage.steps.allotPoints(20);
+        });
+
+        it('When the user has added options and specified correct answer and points then on checking the \'Allow students to check answer\' checkbox the Check answer button should be displayed in the preview tab', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.checkAllowStudentToCheckAnswerCheckbox();
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.checkAnswerButton(), 'Check answer');
+        });
+
+        it('When the user drops an option in the dropzone and checks the answer then an icon should be displayed beside the selected option and the check answer button should be in enabled state', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Petals': 0 });
+            fillInTheGapsOverImageDragAndDropPage.steps.checkAnswer();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCorrectOptionIcon(0);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCheckAnswerButtonEnabled();
+        });
+
+        it('When the user selects an option from the Maximum check answer attempts dropdown then the user should be able to check answer only those many times in the preview tab', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.expandMaxCheckAnswerAttemptsDropdown();
+            fillInTheGapsOverImageDragAndDropPage.steps.selectMaxCheckAnswerAttemptsDropdownListOption('1');
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Petals': 0 });
+            fillInTheGapsOverImageDragAndDropPage.steps.checkAnswer();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCheckAnswerButtonDisabled();
+        });
+
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyDisabledCheckAnswerButtonWithCSSAndA11y();
+
+        it('When the user updates the value of \'Maximum check answer attempts\' dropdown, it should get reflected on the Preview tab', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.expandMaxCheckAnswerAttemptsDropdown();
+            fillInTheGapsOverImageDragAndDropPage.steps.selectMaxCheckAnswerAttemptsDropdownListOption('3');
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCheckAnswerButtonEnabled();
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Petals': 0 });
+            fillInTheGapsOverImageDragAndDropPage.steps.checkAnswer();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCheckAnswerButtonEnabled();
+        });
+
+        it('When the user selects \'No limit\' option from the dropdown then user should be able to check answer multiple times', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.expandMaxCheckAnswerAttemptsDropdown();
+            fillInTheGapsOverImageDragAndDropPage.steps.selectMaxCheckAnswerAttemptsDropdownListOption('no limit');
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCheckAnswerButtonEnabled();
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Petals': 0 });
+            fillInTheGapsOverImageDragAndDropPage.steps.checkAnswer();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCheckAnswerButtonEnabled();
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Flower': 1 });
+            fillInTheGapsOverImageDragAndDropPage.steps.checkAnswer();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCheckAnswerButtonEnabled();
+        });
+    });
+
+    describe('Maximum capacity per dropzone and Show students the dropzone limits: Edit tab', () => {
+        const defaultListOptions = ['None', '1', '2']
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image - drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.addTextInQuestionInstructionsInputField('Drag and drop options into correct dropzone');
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(40);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(options.splice(0, 2));
+            fillInTheGapsOverImageDragAndDropPage.steps.allotPoints(5);
+        });
+
+        it('\'Maximum capacity per dropzone\' label and dropdown should be displayed. By default the \'1\' should be the selected option in the \'Maximum capacity per dropzone\' dropdown', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.maxCapacityPerDropzoneLabel(), 'Maximum capacity per dropzone');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.maxCapacityPerDropzoneLabel(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.maxCapacityPerDropzoneDropdown(), '1');
+        });
+
+        it(`When the user expands the \'Maximum capacity per dropzone\' dropdown, a list of ${defaultListOptions.length} options - ${defaultListOptions.join(',')} should be displayed`, () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.dropdownList(), 'visible')
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyMaxCapacityPerDropzoneListOptions(defaultListOptions);
+        });
+
+        it('CSS of \'Maximum capacity per dropzone\' dropdown in active state', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.maxCapacityPerDropzoneDropdownListOptions(defaultListOptions[1]), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg
+            })
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.maxCapacityPerDropzoneDropdownListOptions(defaultListOptions[0]), {
+                'background-color': css.color.transparent
+            })
+        });
+
+        it('Accessibility of \'Maximum capacity per dropzone\' dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDragAndDropPage.dropdownList())
+        });
+
+        it('When the user adds new options, the list options in the \'Maximum capacity per dropzone\' dropdown should also update accordingly', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.addMultipleOptionFields(5);
+            fillInTheGapsOverImageDragAndDropPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.dropdownList(), 'visible')
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyMaxCapacityPerDropzoneListOptions(['None', '1', '2', '3', '4', '5', '6', '7']);
+        });
+
+        it('When the user selects \'None\' from the \'Maximum capacity per dropzone\' dropdown, then the user should be able to set n number of options in a dropzone in the specify correct answer section', () => {
+            cy.log('Pre step: Adding input to the empty options input field')
+            fillInTheGapsOverImageDragAndDropPage.steps.enterTextInOptionInputField(2, 'Flower');
+            fillInTheGapsOverImageDragAndDropPage.steps.enterTextInOptionInputField(3, 'Seeds');
+            fillInTheGapsOverImageDragAndDropPage.steps.enterTextInOptionInputField(4, 'Stem');
+            fillInTheGapsOverImageDragAndDropPage.steps.enterTextInOptionInputField(5, 'Roots');
+            fillInTheGapsOverImageDragAndDropPage.steps.enterTextInOptionInputField(6, 'Branch');
+            fillInTheGapsOverImageDragAndDropPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            fillInTheGapsOverImageDragAndDropPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('None');
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Flower': 1, 'Seeds': 1, 'Stem': 1 });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInSpecifyCorrectAnswerSection(1, ['Flower', 'Seeds', 'Stem']);
+        });
+
+        it('When the user selects a finite number of options value from the \'Maximum capacity per dropzone\' dropdown, then the user should only be able to set options in a dropzone in the specify correct answer section according to the selected option', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            fillInTheGapsOverImageDragAndDropPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('2');
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Branch': 0, 'Roots': 0, 'Petals': 0 });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInSpecifyCorrectAnswerSection(0, ['Branch', 'Roots']);
+        });
+
+        it('\'Show students the dropzone limits\' label and checkbox should be displayed. By default the checkbox should be unchecked', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.showStudentsDropzoneLimitsCheckboxLabel(), 'Show students the dropzone limits');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.showStudentsDropzoneLimitsCheckboxLabel(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.showStudentsDropzoneLimitsCheckbox(), 'exist');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyShowStudentsDropzoneLimitsCheckboxUnchecked();
+        });
+
+        it('CSS of \'Show students the dropzone limits\' checkbox and label - unchecked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.showStudentsDropzoneLimitsCheckboxLabel(), {
+                'color': css.color.labelText,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.showStudentsDropzoneLimitsCheckbox().parent().find('svg'), {
+                'fill': css.color.uncheckedCheckbox
+            });
+        });
+
+        it('When the user checks the \'Show students the dropzone limits\' checkbox, help text should \'Maximum answers in each dropzone: #\' not be displayed in the specify correct answer section', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.checkShowStudentsDropzoneLimitsCheckbox();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.maxLimitInEachDropzoneHelpText(), 'notExist');
+        });
+
+        it('CSS of \'Show students the dropzone limits\' label and checkbox - checked state', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.showStudentsDropzoneLimitsCheckbox().parent().find('svg g g').eq(0), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of \'Show students the dropzone limits\' checkbox - checked state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDragAndDropPage.showStudentsDropzoneLimitsCheckbox().parents('[data-ngie-testid="show-students-the-dropzone-limits-checkbox"]'));
+        });
+    });
+
+    describe('Maximum capacity per dropzone and Show students the dropzone limits: Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image - drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.addTextInQuestionInstructionsInputField('Drag and drop options into correct dropzone');
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(40);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageDragAndDropPage.steps.addMultipleOptionFields(3);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(options.slice(0, 5));
+            fillInTheGapsOverImageDragAndDropPage.steps.allotPoints(5);
+        });
+
+        it('When the user selects \'None\' from the \'Maximum capacity per dropzone\' dropdown, then the user should be able to set n number of options in a dropzone in the preview tab', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            fillInTheGapsOverImageDragAndDropPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('None');
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Leaves': 1, 'Stem': 1, 'Roots': 1 });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(1, ['Leaves', 'Stem', 'Roots']);
+        });
+
+        it('When the user selects a finite number of options value from the \'Maximum capacity per dropzone\' dropdown, then the user should only be able to drop options in a dropzone in the preview tab according to the selected option', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.expandMaxCapacityPerDropzoneDropdown();
+            fillInTheGapsOverImageDragAndDropPage.steps.selectOptionFromMaxCapacityPerDropzoneDropdown('2');
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Leaves': 0, 'Petals': 0, 'Seeds': 0 });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(0, ['Leaves', 'Petals']);
+        });
+
+        it('When \'Show students the dropzone limits\' checkbox is in unchecked state, no help text should be displayed in the preview tab', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.maxLimitInEachDropzoneHelpText(), 'notExist');
+        });
+
+        it('When the user checks the \'Show students the dropzone limits\' checkbox, a help text \'Maximum answers in each dropzone: #\' should be displayed in the preview tab', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.checkShowStudentsDropzoneLimitsCheckbox();
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.maxLimitInEachDropzoneHelpText(), 'Maximum answers in each dropzone: 2');
+        });
+
+        it('CSS of \'Maximum answers in each dropzone\' help-text', () => {
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.maxLimitInEachDropzoneHelpText(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.maxLimitInEachDropzoneHelpText().find('span'), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+        });
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsOverImageDragAndDrop/switchingCasesBetweenOptionsLayout.js

@@ -0,0 +1,54 @@
+import { fillInTheGapsOverImageDragAndDropPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const options1 = ['Flower', 'Petals'];
+const options2 = ['Seeds', 'Stem'];
+const options3 = options1.concat(options2);
+
+describe('Create Item Page: Fill in the gaps over image with drag and drop: Switching cases between \'Standard\' and \'Grouped\' options layout', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Fill in the gaps over image with drag and drop: Switching cases between \'Standard\' and \'Grouped\' options layout: \'Response Options section\'', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image - drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.addTextInQuestionInstructionsInputField('Drag and drop options into correct dropzone');
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(40);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToOptionsInputField(options1);
+        });
+
+        it('When the user switches from \'Standard\' response layout to \'Grouped\', all the option input fields along with text should appear in the group options', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.expandDraggableOptionsLayoutDropdown();
+            fillInTheGapsOverImageDragAndDropPage.steps.selectOptionFromDraggableOptionsLayoutDropdown('Grouped');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyOptionFieldContentsInOptionsSection(options1);
+            cy.log('verifying draggable options in \'Specify correct answer\' section')
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(0, options1);
+        });
+
+        it('When the user creates more than one group of options and switches to \'Standard\' response layout, all the option input fields along with text should appear in the standard options', () => {
+            cy.log('Adding a new group and adding input to the option fields')
+            fillInTheGapsOverImageDragAndDropPage.steps.addGroupWithTitleAndOptionsInDraggableOptionsSection('Group B', options2);
+            fillInTheGapsOverImageDragAndDropPage.steps.expandDraggableOptionsLayoutDropdown();
+            fillInTheGapsOverImageDragAndDropPage.steps.selectOptionFromDraggableOptionsLayoutDropdown('Standard');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyOptionFieldContentsInOptionsSection(options3);
+            cy.log('verifying draggable options in \'Specify correct answer\' section')
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(options3);
+        });
+
+        it('On switching back to \'Grouped\' response layout, all option input fields should be present under Group A and no other group should exist', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.expandDraggableOptionsLayoutDropdown();
+            fillInTheGapsOverImageDragAndDropPage.steps.selectOptionFromDraggableOptionsLayoutDropdown('Grouped');
+            utilities.verifyElementCount(fillInTheGapsOverImageDragAndDropPage.groupTab(), 1);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyOptionFieldContentsInOptionsSection(options3);
+            cy.log('verifying draggable options in \'Specify correct answer\' section')
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(0, options3);
+        });
+    });
+});