itemengine-cypress-automation 1.0.169-uploadResponseMigration-83ab996.0 → 1.0.169

package/cypress/e2e/ILC/FillInTheGapsDragAndDrop/fillInTheGapsDragAndDropAdditionalSettingsResponseAccordion.js

@@ -0,0 +1,299 @@
+import { fillInTheGapsDragAndDropPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+
+describe('Fill In the Gaps Additional settings and Responses accordion', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Additional Settings: Advanced settings for all Response Areas', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandAdditionalSettings();
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyAdvanceSettingsForAllResponsesLabelAndCSS();
+    });
+
+    describe('Response Accordions: ARIA label', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandAdditionalSettings();
+            fillInTheGapsDragAndDropPage.steps.expandResponseAccordion(0);
+            fillInTheGapsDragAndDropPage.steps.expandResponseAccordion(1);
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyDefaultStateOfAriaLabelInputFieldInResponseAccordionAndCSS();
+
+        //Note: a11y covered in Additional Settings: Response accordion
+
+        //ARIA label test cases for set correct answer section
+        it('When the user has not set \'ARIA label\' input field then the default \'ARIA label\' should be present for the \'Set correct answer\' section response field', () => {
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                    .eq(index)
+                    .should('have.attr', 'aria-label', 'Response Area');
+            };
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyCustomLabelNotVisibleOnResponseAccordion('ARIA label');
+
+        it('When the user has set \'ARIA label\' in the response accordion then it should be present for the \'Set correct answer\' section response field and for the other response field, value of the aria-label should remain the same', () => {
+            fillInTheGapsDragAndDropPage.steps.setAriaLabelInResponseAccordion(0, 'Custom Aria Label');
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(0)
+                .should('have.attr', 'aria-label', 'Custom Aria Label');
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(1)
+                .should('have.attr', 'aria-label', 'Response Area');
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyCustomLabelVisibleOnResponseAccordion('ARIA label');
+
+        fillInTheGapsDragAndDropPage.tests.verifyCustomLabelOnResponseAccordionCSS();
+
+        it('Accessibility of input field in \'Set correct answer\' section when custom \'ARIA label\' is set and Custom label', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea())
+            cy.checkAccessibility(fillInTheGapsDragAndDropPage.responseAccordionCustomLabel())
+        });
+
+        it('When the user clears the set value in the \'ARIA label\' input field, then the default \'ARIA label\' should be present for the response fields in the \'Set correct answer\' section', () => {
+            fillInTheGapsDragAndDropPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDragAndDropPage.ariaLabelInputField()
+                        .clear()
+                        .should('have.value', '')
+                        .blur();
+                });
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                    .eq(index)
+                    .should('have.attr', 'aria-label', 'Response Area');
+            };
+        });
+
+        //ARIA label test cases for preview tab
+        it('When the user has not set \'ARIA label\' input field then in the preview tab default \'ARIA label\' should be present for the response field in the preview tab', () => {
+            cy.log('Pre step: Switch to Preview tab')
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                    .eq(index)
+                    .should('have.attr', 'aria-label', 'Response Area');
+            };
+        });
+
+        it('When the user has set \'ARIA label\' in the response accordion then it should be present for the response field in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.setAriaLabelInResponseAccordion(0, 'Custom Aria Label');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .eq(0)
+                .should('have.attr', 'aria-label', 'Custom Aria Label');
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .eq(1)
+                .should('have.attr', 'aria-label', 'Response Area');
+        });
+
+        it('Accessibility of input field in preview tab when custom \'ARIA label\' is set', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDragAndDropPage.previewTabResponseArea())
+        });
+
+        it('When the user clears the set value in the \'ARIA label\' input field, then the default \'ARIA label\' should be present for the response field in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.responseAccordionWrapper()
+                .eq(0)
+                .within(() => {
+                    fillInTheGapsDragAndDropPage.ariaLabelInputField()
+                        .clear()
+                        .should('have.value', '');
+                });
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                    .eq(index)
+                    .should('have.attr', 'aria-label', 'Response Area');
+            };
+        });
+    });
+
+    describe('Response Accordions: Height and Width', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.expandAdditionalSettings();
+            fillInTheGapsDragAndDropPage.steps.expandResponseAccordion(0);
+            fillInTheGapsDragAndDropPage.steps.expandResponseAccordion(1);
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyDefaultStateOfHeightAndWidthInputFieldInResponseAccordionAndCSS();
+
+        //Note: a11y covered in Additional Settings: Response accordion
+
+        //TODO: We will need to revisit below case as it will fail for mobile view
+        it('When the user has not set \'Height\' and \'Width\' for response fields then the default dimension of the response field in the \'Set correct answer\' section response fields should be (197x46)px', () => {
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                    .eq(index)
+                    .should('have.attr', 'height', '46.000')
+                    .and('have.attr', 'width', '197.000px');
+            };
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyCustomLabelNotVisibleOnResponseAccordion('Height and Width');
+
+        it('When the user has set \'Height\' for the response field then the Height of the response field should get updated accordingly in the \'Set correct answer\' section', () => {
+            fillInTheGapsDragAndDropPage.steps.setHeightInResponseAccordion(0, '100');
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(0)
+                .should('have.attr', 'height', '100.000');
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyCustomLabelVisibleOnResponseAccordion('Height and Width');
+
+        it('When the user has set \'Width\' for the response field then the Width of the response field should get updated accordingly in the \'Set correct answer\' section', () => {
+            fillInTheGapsDragAndDropPage.steps.setWidthInResponseAccordion(0, '100');
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(0)
+                .should('have.attr', 'width', '100.000px');
+        });
+
+        it('When the user has set width below 80px then the width should remain 80px in the \'Set correct answer\' section', () => {
+            fillInTheGapsDragAndDropPage.steps.setWidthInResponseAccordion(0, '20');
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(0)
+                .should('have.attr', 'width', '80.000px');
+        });
+
+        it('When the user has set width above 400px then the width should remain 400px in the \'Set correct answer\' section', () => {
+            fillInTheGapsDragAndDropPage.steps.setWidthInResponseAccordion(0, '800');
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(0)
+                .should('have.attr', 'width', '400.000px');
+        });
+
+        it('When the user has set \'Height\' and \'Width\' in the individual responses accordion then it should override the \'Height\' and \'Width\'set in the \'Advanced settings for all response areas\' in the \'Set correct answer\' section', () => {
+            fillInTheGapsDragAndDropPage.widthInputField()
+                .clear()
+                .type('250')
+                .should('have.value', '250');
+            fillInTheGapsDragAndDropPage.heightInputField()
+                .clear()
+                .type('180')
+                .should('have.value', '180');
+            fillInTheGapsDragAndDropPage.steps.setWidthInResponseAccordion(0, '175');
+            fillInTheGapsDragAndDropPage.steps.setHeightInResponseAccordion(0, '120');
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(0)
+                .should('have.attr', 'width', '175.000px')
+                .and('have.attr', 'height', '120.000');
+            fillInTheGapsDragAndDropPage.setCorrectAnswerResponseArea()
+                .eq(1)
+                .should('have.attr', 'width', '250.000px')
+                .and('have.attr', 'height', '180.000');
+        });
+
+        //Height and width test cases for preview tab
+        //TODO: We will need to revisit below case as it will fail for mobile view
+        it('When the user has not set \'Height\' and \'Width\' for the response accordion then the default dimension of the response field in the preview tab response field should be (197x46)px', () => {
+            cy.log('Pre step: clearing the set values of height and width to bring back the dimensions of the response field to default dimensions')
+            fillInTheGapsDragAndDropPage.widthInputField()
+                .clear()
+                .should('have.value', '');
+            fillInTheGapsDragAndDropPage.heightInputField()
+                .clear()
+                .should('have.value', '');
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.responseAccordionWrapper()
+                    .eq(index)
+                    .within(() => {
+                        fillInTheGapsDragAndDropPage.heightInputField()
+                            .clear()
+                            .should('have.value', '');
+                        fillInTheGapsDragAndDropPage.widthInputField()
+                            .clear()
+                            .should('have.value', '');
+                    });
+            };
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                    .eq(index)
+                    .should('have.attr', 'height', '46.000')
+                    .and('have.attr', 'width', '197.000px');
+            };
+        });
+
+        it('When the user has set \'Height\' for the response field then the height of the preview tab response field should get updated accordingly in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.setHeightInResponseAccordion(0, '100');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .eq(0)
+                .should('have.attr', 'height', '100.000');
+        });
+
+        it('When the user has set \'Width\' for the response field then the width of the preview tab response field should get updated accordingly in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.setWidthInResponseAccordion(0, '100');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .eq(0)
+                .should('have.attr', 'width', '100.000px');
+        });
+
+        it('When the user has set width below 80px then the width should remain 80px in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.setWidthInResponseAccordion(0, '20');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .eq(0)
+                .should('have.attr', 'width', '80.000px');
+        });
+
+        it('When the user has set width above 400px then the width should remain 400px in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.setWidthInResponseAccordion(0, '800');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .eq(0)
+                .should('have.attr', 'width', '400.000px');
+        });
+
+        it('When the user has set \'Height\' and \'Width\' in the individual responses accordion then it should override the \'Height\' and \'Width\'set in the \'Advanced settings for all response areas\' in the preview tab', () => {
+            cy.log('Pre step: Switch to Edit tab')
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.widthInputField()
+                .clear()
+                .type('250')
+                .should('have.value', '250');
+            fillInTheGapsDragAndDropPage.heightInputField()
+                .clear()
+                .type('180')
+                .should('have.value', '180');
+            fillInTheGapsDragAndDropPage.steps.setWidthInResponseAccordion(0, '175');
+            fillInTheGapsDragAndDropPage.steps.setHeightInResponseAccordion(0, '120');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .eq(0)
+                .should('have.attr', 'width', '175.000px')
+                .and('have.attr', 'height', '120.000');
+            fillInTheGapsDragAndDropPage.previewTabResponseArea()
+                .eq(1)
+                .should('have.attr', 'width', '250.000px')
+                .and('have.attr', 'height', '180.000')
+        });
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsDragAndDropNew/clickAndDrop.js

@@ -83,7 +83,7 @@ describe('Create Item Page: Fill in the gaps with drag and drop: Click and drop
             fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
         });
 
-        it('When the user drops an option in one of the dropzone, the option should get removed from the response container, the dropzone should get filled with that option and the other dropzone should remain in inactive state', () => {
+        it('When the user drops an option in one of the dropzone, the option should get removed from the options container, the dropzone should get filled with that option and the other dropzone should remain in inactive state', () => {
             fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Petals': 0 });
             fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionInDropzoneSpecifyCorrectAnswerSection(0, ['Petals']);
             fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(['Flower', 'Stem', 'Seed']);
@@ -148,7 +148,7 @@ describe('Create Item Page: Fill in the gaps with drag and drop: Click and drop
             fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
         });
 
-        it('When the user selects a filled option and clicks in the response container, the selected option should get back in the response container and \'Error: Please set a correct answer\' error message should be displayed', () => {
+        it('When the user selects a filled option and clicks in the options container, the selected option should get back in the options container and \'Error: Please set a correct answer\' error message should be displayed', () => {
             fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInOptionsContainerInSpecifyCorrectAnswerSection('Petals');
             fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInOptionsContainerInSpecifyCorrectAnswerSection('Flower');
             fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(['Petals', 'Flower', 'Stem', 'Seed']);
@@ -251,7 +251,7 @@ describe('Create Item Page: Fill in the gaps with drag and drop: Click and drop
             fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInPreviewTab();
         });
 
-        it('When the user drops an option in one of the dropzone, the option should get removed from the response container, the dropzone should get filled with that option and the other dropzone should return to inactive state', () => {
+        it('When the user drops an option in one of the dropzone, the option should get removed from the options container, the dropzone should get filled with that option and the other dropzone should return to inactive state', () => {
             fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Petals': 0 });
             fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(0, ['Petals']);
             fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(['Flower', 'Stem', 'Seed']);
@@ -322,6 +322,11 @@ describe('Create Item Page: Fill in the gaps with drag and drop: Click and drop
             fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(1, ['Flower']);
             fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(2, ['Petals']);
         });
+        
+        it('When the user selects a filled option and clicks in the options container, the selected option should get back in the options container', () => {
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInOptionsContainerInPreviewTab('Flower');
+            fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(['Flower', 'Stem', 'Seed']);
+        });
     });
 
     describe('Click and drop cases for \'Grouped\' response options layout in \'Specify correct answer\' section', () => {
@@ -398,7 +403,7 @@ describe('Create Item Page: Fill in the gaps with drag and drop: Click and drop
             fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
         });
 
-        it('When the user drops an option in one of the dropzone, the option should get removed from the respective group of the response container, the dropzone should get filled with that option and the other dropzone should return to inactive state', () => {
+        it('When the user drops an option in one of the dropzone, the option should get removed from the respective group of the options container, the dropzone should get filled with that option and the other dropzone should return to inactive state', () => {
             fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Petals': 0 });
             fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionInDropzoneSpecifyCorrectAnswerSection(0, ['Petals']);
             fillInTheGapsDragAndDropPage.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(0, ['Flower', 'Stem', 'Seed']);
@@ -464,7 +469,7 @@ describe('Create Item Page: Fill in the gaps with drag and drop: Click and drop
             fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
         });
 
-        it('When the user selects a filled option and clicks in the response container, the selected option should get back in the response container and \'Error: Please set a correct answer\' error message should be displayed', () => {
+        it('When the user selects a filled option and clicks in the options container, the selected option should get back in the options container and \'Error: Please set a correct answer\' error message should be displayed', () => {
             fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInOptionsContainerInSpecifyCorrectAnswerSection('Petals');
             fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInOptionsContainerInSpecifyCorrectAnswerSection('Flower');
             fillInTheGapsDragAndDropPage.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(0, groupedOptions[0]);
@@ -578,7 +583,7 @@ describe('Create Item Page: Fill in the gaps with drag and drop: Click and drop
             fillInTheGapsDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInPreviewTab();
         });
 
-        it('When the user drops an option in one of the dropzone, the option should get removed from the respective group of the response container, the dropzone should get filled with that option and the other dropzone should return to inactive state', () => {
+        it('When the user drops an option in one of the dropzone, the option should get removed from the respective group of the options container, the dropzone should get filled with that option and the other dropzone should return to inactive state', () => {
             fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Petals': 0 });
             fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(0, ['Petals']);
             fillInTheGapsDragAndDropPage.steps.verifyGroupedContainerContentsInPreviewTab(0, ['Flower', 'Stem', 'Seed']);
@@ -649,8 +654,14 @@ describe('Create Item Page: Fill in the gaps with drag and drop: Click and drop
             fillInTheGapsDragAndDropPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(1, ['Flower']);
         });
 
+        it('When the user selects a filled option and clicks in the options container, the selected option should get back in the options container', () => {
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInOptionsContainerInPreviewTab('Flower');
+            fillInTheGapsDragAndDropPage.steps.verifyGroupedContainerContentsInPreviewTab(0, ['Petals', 'Flower', 'Stem', 'Seed']);
+            fillInTheGapsDragAndDropPage.steps.verifyGroupedContainerContentsInPreviewTab(1, groupedOptions[1]);
+        });
+
         it('When user has dropped all the options from a group in the response areas, then empty group should be displayed in the options container', () => {
-            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Stem': 0, 'Seed': 2, 'Petals': 3 });
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Stem': 0, 'Seed': 2, 'Petals': 3 , 'Flower':1});
             fillInTheGapsDragAndDropPage.steps.verifyGroupedOptionsTitlePreviewTab(0, 'Group A')
             fillInTheGapsDragAndDropPage.steps.verifyEmptyGroupInPreviewTab(0);
         });

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

@@ -89,7 +89,7 @@ describe('Create Item Page: Fill in the gaps over image - drag and drop: Click a
             fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
         });
 
-        it('When the user drops an option in one of the dropzone, the option should get removed from the response container, the dropzone should get filled with that option and the other dropzone should remain in inactive state', () => {
+        it('When the user drops an option in one of the dropzone, the option should get removed from the options container, the dropzone should get filled with that option and the other dropzone should remain in inactive state', () => {
             fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Petals': 0 });
             fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInDropzoneSpecifyCorrectAnswerSection(0, ['Petals']);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(['Flower', 'Stem', 'Seed']);
@@ -153,7 +153,7 @@ describe('Create Item Page: Fill in the gaps over image - drag and drop: Click a
             fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
         });
 
-        it('When the user selects a filled option and clicks in the response container, the selected option should get back in the response container and \'Error: Please set a correct answer\' error message should be displayed', () => {
+        it('When the user selects a filled option and clicks in the options container, the selected option should get back in the options container and \'Error: Please set a correct answer\' error message should be displayed', () => {
             fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInOptionsContainerInSpecifyCorrectAnswerSection('Petals');
             fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInOptionsContainerInSpecifyCorrectAnswerSection('Flower');
             fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(['Petals', 'Flower', 'Stem', 'Seed']);
@@ -262,7 +262,7 @@ describe('Create Item Page: Fill in the gaps over image - drag and drop: Click a
             fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInPreviewTab();
         });
 
-        it('When the user drops an option in one of the dropzone, the option should get removed from the response container, the dropzone should get filled with that option and the other dropzone should return to inactive state', () => {
+        it('When the user drops an option in one of the dropzone, the option should get removed from the options container, the dropzone should get filled with that option and the other dropzone should return to inactive state', () => {
             fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Petals': 0 });
             fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(0, ['Petals']);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(['Flower', 'Stem', 'Seed']);
@@ -332,6 +332,11 @@ describe('Create Item Page: Fill in the gaps over image - drag and drop: Click a
             fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(0, ['Flower']);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(1, ['Petals']);
         });
+
+        it('When the user selects a filled option and clicks in the options container, the selected option should get back in the options container', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInOptionsContainerInPreviewTab('Flower');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(['Stem', 'Seed', 'Flower']);
+        });
     });
 
     describe('Click and drop cases for \'Grouped\' response options layout in \'Specify correct answer\' section', () => {
@@ -413,7 +418,7 @@ describe('Create Item Page: Fill in the gaps over image - drag and drop: Click a
             fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
         });
 
-        it('When the user drops an option in one of the dropzone, the option should get removed from the respective group of the response container, the dropzone should get filled with that option and the other dropzone should return to inactive state', () => {
+        it('When the user drops an option in one of the dropzone, the option should get removed from the respective group of the options container, the dropzone should get filled with that option and the other dropzone should return to inactive state', () => {
             fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Petals': 0 });
             fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInDropzoneSpecifyCorrectAnswerSection(0, ['Petals']);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(0, ['Flower', 'Stem', 'Seed']);
@@ -478,7 +483,7 @@ describe('Create Item Page: Fill in the gaps over image - drag and drop: Click a
             fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
         });
 
-        it('When the user selects a filled option and clicks in the response container, the selected option should get back in the response container and \'Error: Please set a correct answer\' error message should be displayed', () => {
+        it('When the user selects a filled option and clicks in the options container, the selected option should get back in the options container and \'Error: Please set a correct answer\' error message should be displayed', () => {
             fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropGroupedOptionInOptionsContainerInSpecifyCorrectAnswerSection('Petals');
             fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropGroupedOptionInOptionsContainerInSpecifyCorrectAnswerSection('Flower');
             fillInTheGapsOverImageDragAndDropPage.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(0, groupedOptions[0]);
@@ -597,7 +602,7 @@ describe('Create Item Page: Fill in the gaps over image - drag and drop: Click a
             fillInTheGapsOverImageDragAndDropPage.steps.verifyInactiveStateOfAllDropzoneInPreviewTab();
         });
 
-        it('When the user drops an option in one of the dropzone, the option should get removed from the respective group of the response container, the dropzone should get filled with that option and the other dropzone should return to inactive state', () => {
+        it('When the user drops an option in one of the dropzone, the option should get removed from the respective group of the options container, the dropzone should get filled with that option and the other dropzone should return to inactive state', () => {
             fillInTheGapsOverImageDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Petals': 0 });
             fillInTheGapsOverImageDragAndDropPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(0, ['Petals']);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyGroupedContainerContentsInPreviewTab(0, ['Flower', 'Stem', 'Seed']);