itemengine-cypress-automation 1.0.162-questionInsructionSelectorFix-15973d5.0 → 1.0.162

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

@@ -0,0 +1,634 @@
+import { matchingPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const groupedOptions = ['Petals', 'Flower', 'Stem'];
+const groupedOptionsTwo = ['option 1', 'option 2', 'option 3'];
+
+describe('Create Item Page: Matching: Click and drop cases for \'Standard\' and \'Grouped\' response options layouts in \'Specify correct answer\' section and \'Preview tab\'', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Click and drop cases for \'Standard\' response options layout in \'Specify correct answer\' section', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.enterTextInOptionInputField(groupedOptions);
+        });
+
+        it('When the user has not selected any option, the options and dropzone should be in inactive state', () => {
+            matchingPage.steps.verifyInactiveStateOfAllDraggableOptionsInSpecifyCorrectAnswerSection();
+            matchingPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
+        });
+
+        it('CSS of inactive state of options and dropzone', { tags: 'css' }, () => {
+            utilities.verifyCSS(matchingPage.draggableOption(), {
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                'background-color': css.color.defaultBackground,
+            });
+            utilities.verifyCSS(matchingPage.draggableOption().find('.question-text-wrapper'), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+            });
+            utilities.verifyCSS(matchingPage.draggableOptionDragIcon().find('g path').eq(1), {
+                'fill': css.color.secondaryBtn
+            });
+            utilities.verifyCSS(matchingPage.dropzoneSpecifyCorrectAnswerSection().eq(0), {
+                'border-left': `2px dashed ${css.color.activeComponentBorder}`
+            });
+        });
+
+        it('Accessibility of inactive state of options and dropzone', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(matchingPage.pointsWrapper().parents('.ngie-accordion-detail'));
+        });
+
+        it('When the user selects an option, it should get in selected state and all the other options should be displayed in inactive state and dropzones should be in active state', () => {
+            matchingPage.steps.clickOnDraggableOptionInSpecifyCorrectAnswerSection('Petals');
+            cy.log('checking active state of selected option')
+            matchingPage.steps.verifyActiveStateOfDraggableOptionInSpecifyCorrectAnswerSection(0);
+            cy.log('checking default state of unselected option(s)')
+            matchingPage.steps.verifyInactiveStateOfUnselectedDraggableOptionsInSpecifyCorrectAnswerSection([1, 2]);
+            matchingPage.steps.verifyActiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
+        });
+
+        it('CSS of active state of options and inactive state of dropzone', { tags: 'css' }, () => {
+            utilities.verifyCSS(matchingPage.draggableOption().eq(0), {
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(matchingPage.draggableOptionDragIcon().find('g path').eq(1), {
+                'fill': css.color.secondaryBtn
+            });
+            utilities.verifyCSS(utilities.getNthElement(matchingPage.dropzoneSpecifyCorrectAnswerSection(), 0), {
+                'border-left': `2px dashed ${css.color.activeComponentBorder}`
+            });
+        });
+
+        it('Accessibility of active state of options and dropzone', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(matchingPage.pointsWrapper().parents('.ngie-accordion-detail'));
+        });
+
+        it('When the user deselects the option, it should get in deselected state and the dropzone should remain in the inactive state', () => {
+            matchingPage.steps.clickOnDraggableOptionInSpecifyCorrectAnswerSection('Petals');
+            cy.log('Checking default state of deselected option')
+            matchingPage.steps.verifyInactiveStateOfAllDraggableOptionsInSpecifyCorrectAnswerSection();
+            cy.log('checking inactive state of all dropzones');
+            matchingPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
+        });
+
+        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', () => {
+            matchingPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection([{ optionText: 'Petals', dropzoneIndex: 0 }]);
+            matchingPage.steps.verifyDraggableOptionInDropzoneSpecifyCorrectAnswerSection(0, ['Petals']);
+            matchingPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(['Flower', 'Stem']);
+            matchingPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
+        });
+
+        it('When the user has dropped an option inside a dropzone, drag handle should not be displayed in the dropzone', () => {
+            matchingPage.steps.verifyDragHandleNotVisibleInFilledDropzoneOfSpecifyCorrectAnswerSection(0);
+        });
+
+        it('CSS of filled dropzone', { tags: 'css' }, () => {
+            matchingPage.dropzoneSpecifyCorrectAnswerSection()
+                .eq(0)
+                .within(() => {
+                    utilities.verifyCSS(matchingPage.droppedDraggableOptionInDropzoneSpecifyCorrectAnswerSection().find('.item-content-wrapper'), {
+                        'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                        'background-color': css.color.defaultBackground
+                    });
+                    utilities.verifyCSS(matchingPage.droppedDraggableOptionInDropzoneSpecifyCorrectAnswerSection().find('.question-text-wrapper'), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular,
+                    });
+                });
+        });
+
+        it('Accessibility of filled dropzone', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(matchingPage.pointsWrapper().parents('.ngie-accordion-detail'));
+        });
+
+        it('When the user drops an option on a filled dropzone, the dropzone should have newly dropped option', () => {
+            matchingPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection([{ optionText: 'Flower', dropzoneIndex: 0 }]);
+            matchingPage.steps.verifyDraggableOptionInDropzoneSpecifyCorrectAnswerSection(0, ['Flower']);
+            matchingPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
+            matchingPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(['Petals', 'Stem']);
+        });
+
+        it('When the user selects an option from the filled dropzone, dropzone should be in active', () => {
+            matchingPage.steps.clickOnDraggableOptionInDropzoneOfSpecifyCorrectAnswerSection('Flower', 0);
+            matchingPage.steps.verifyActiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
+        });
+
+        it('When the user deselects an option from the filled dropzone, the option should return to the inactive state', () => {
+            matchingPage.steps.clickOnDraggableOptionInDropzoneOfSpecifyCorrectAnswerSection('Flower', 0);
+            matchingPage.steps.verifyInactiveStateOfAllDraggableOptionsInSpecifyCorrectAnswerSection();
+            matchingPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
+        });
+
+        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', () => {
+            matchingPage.steps.clickAndDropOptionInOptionsContainerInSpecifyCorrectAnswerSection('Flower');
+            matchingPage.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(['Petals', 'Flower', 'Stem']);
+            utilities.verifyInnerText(matchingPage.errorMessage(), 'Error: Please set a correct answer.');
+            utilities.verifyElementVisibilityState(matchingPage.errorMessage(), 'visible');
+        });
+
+        matchingPage.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When the user fills a dropzone, the dropzone should get filled with the option and the \'Error: Please set a correct answer\' error message should disappear', () => {
+            matchingPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection([{ optionText: 'Petals', dropzoneIndex: 0 }]);
+            matchingPage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('The user should be able to move an option from one dropzone to another dropzone', () => {
+            matchingPage.steps.clickOnDraggableOptionInDropzoneOfSpecifyCorrectAnswerSection('Petals', 0);
+            matchingPage.steps.clickOnDropzoneOfSpecifyCorrectAnswerSection(1);
+            matchingPage.steps.verifyDropzoneTextSpecifyCorrectAnswerSection(0, '');
+            matchingPage.steps.verifyDraggableOptionInDropzoneSpecifyCorrectAnswerSection(1, ['Petals']);
+        });
+    });
+
+    describe('Click and drop cases for \'Standard\' response options layout in \'Preview tab\'', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.enterTextInOptionInputField(groupedOptions);
+            matchingPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has not selected any option, the options and dropzone should be in inactive state', () => {
+            matchingPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab();
+            matchingPage.steps.verifyInactiveStateOfAllDropzoneInPreviewTab();
+        });
+
+        it('CSS of inactive state of options and dropzone', { tags: 'css' }, () => {
+            matchingPage.optionsContainerPreviewTab()
+                .within(() => {
+                    utilities.verifyCSS(matchingPage.draggableOption(), {
+                        'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                        'background-color': css.color.defaultBackground,
+                    });
+                    utilities.verifyCSS(matchingPage.draggableOption().find('.question-text-wrapper'), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular,
+                    });
+                    utilities.verifyCSS(matchingPage.draggableOptionDragIcon().find('g path').eq(1), {
+                        'fill': css.color.secondaryBtn
+                    });
+                });
+            utilities.verifyCSS(matchingPage.dropzonePreviewTab().eq(0), {
+                'border-left': `2px dashed ${css.color.activeComponentBorder}`
+            });
+        });
+
+        it('Accessibility of inactive state of options and dropzone', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(matchingPage.dropzonePreviewTab().parents('.preview-container'));
+        });
+
+        it('When the user selects an option, it should get in selected state and all other options should remain in inactive state and dropzones should be in active state', () => {
+            matchingPage.steps.clickOnDraggableOptionInPreviewTab('Petals');
+            cy.log('checking active state of selected option')
+            matchingPage.steps.verifyActiveStateOfDraggableOptionInPreviewTab(0);
+            cy.log('checking default state of unselected option(s)')
+            matchingPage.steps.verifyInactiveStateOfUnselectedDraggableOptionsInPreviewTab([1, 2]);
+            matchingPage.steps.verifyActiveStateOfAllDropzoneInPreviewTab();
+        });
+
+        it('CSS of active state of options and dropzone', { tags: 'css' }, () => {
+            matchingPage.optionsContainerPreviewTab()
+                .within(() => {
+                    utilities.verifyCSS(matchingPage.draggableOption().eq(0), {
+                        'border': `1px solid ${css.color.activeComponentBorder}`,
+                        'background-color': css.color.defaultBackground
+                    });
+                    utilities.verifyCSS(matchingPage.draggableOptionDragIcon().find('g path').eq(1), {
+                        'fill': css.color.activeButtons
+                    });
+                });
+            utilities.verifyCSS(matchingPage.dropzonePreviewTab().eq(0), {
+                'border-left': `2px dashed ${css.color.activeComponentBorder}`
+            });
+        });
+
+        it('Accessibility of active state of options and dropzone', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(matchingPage.dropzonePreviewTab().parents('.no-split-pane-wrapper'));
+        });
+
+        it('When the user deselects the option, it should get in deselected state and the dropzone should remain in the inactive state', () => {
+            matchingPage.steps.clickOnDraggableOptionInPreviewTab('Petals');
+            cy.log('Checking default state of deselected option')
+            matchingPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab();
+            cy.log('checking inactive state of all dropzones');
+            matchingPage.steps.verifyInactiveStateOfAllDropzoneInPreviewTab();
+        });
+
+        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', () => {
+            matchingPage.steps.clickAndDropOptionInDropzonePreviewTab([{ optionText: 'Petals', dropzoneIndex: 0 }]);
+            matchingPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(0, ['Petals']);
+            matchingPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(['Flower', 'Stem']);
+            matchingPage.steps.verifyInactiveStateOfAllDropzoneInPreviewTab();
+        });
+
+        it('When the user has dropped an option inside a dropzone, drag handle should not be displayed in the dropzone', () => {
+            matchingPage.steps.verifyDragHandleNotVisibleInFilledDropzoneOfPreviewTab(0);
+        });
+
+        it('CSS of filled dropzone', { tags: 'css' }, () => {
+            matchingPage.dropzonePreviewTab()
+                .eq(0)
+                .within(() => {
+                    utilities.verifyCSS(matchingPage.droppedDraggableOptionInDropzonePreviewTab().find('.item-content-wrapper'), {
+                        'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                        'background-color': css.color.defaultBackground
+                    });
+                    utilities.verifyCSS(matchingPage.droppedDraggableOptionInDropzonePreviewTab().find('.question-text-wrapper'), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular,
+                    });
+                });
+        });
+
+        it('Accessibility of filled dropzone', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(matchingPage.dropzonePreviewTab().parents('.preview-container'));
+        });
+
+        it('When the user drops an option on a filled dropzone, the dropzone should have newly dropped option and previously added option should be dropped in options container', () => {
+            matchingPage.steps.clickAndDropOptionInDropzonePreviewTab([{ optionText: 'Flower', dropzoneIndex: 0 }]);
+            matchingPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(0, ['Flower']);
+            matchingPage.steps.verifyInactiveStateOfAllDropzoneInPreviewTab();
+            matchingPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(['Petals', 'Stem']);
+        });
+
+        it('When the user selects an option from the filled dropzone, the dropzone should be in active state', () => {
+            matchingPage.steps.clickOnDraggableOptionInDropzoneOfPreviewTab('Flower', 0);
+            matchingPage.steps.verifyActiveStateOfAllDropzoneInPreviewTab();
+        });
+
+        it('CSS of option from the filled dropzone in selected state', { tags: 'css' }, () => {
+            matchingPage.dropzonePreviewTab()
+                .eq(0)
+                .within(() => {
+                    utilities.verifyCSS(matchingPage.droppedDraggableOptionInDropzonePreviewTab(), {
+                        'border': `1px solid ${css.color.activeComponentBorder}`,
+                        'background-color': css.color.defaultBackground
+                    });
+                });
+        });
+
+        it('Accessibility of option from the filled dropzone in selected state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(matchingPage.dropzonePreviewTab().parents('.preview-container'));
+        });
+
+        it('When the user deselects an option from the filled dropzone, the option should return to the inactive state', () => {
+            matchingPage.steps.clickOnDraggableOptionInDropzoneOfPreviewTab('Flower', 0);
+            matchingPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab();
+            matchingPage.steps.verifyInactiveStateOfAllDropzoneInPreviewTab();
+        });
+
+        it('The user should be able to move an option from one dropzone to another dropzone', () => {
+            matchingPage.steps.clickOnDraggableOptionInDropzoneOfPreviewTab('Flower', 0);
+            matchingPage.steps.clickOnDropzoneOfPreviewTab(1);
+            matchingPage.steps.verifyDropzoneTextContentPreviewTab(0, '');
+            matchingPage.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', () => {
+            matchingPage.steps.clickAndDropDraggableOptionFromDropzoneToOptionsContainerPreviewTab('Flower', 1);
+            matchingPage.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(groupedOptions);
+        });
+    });
+
+    describe('Click and drop cases for \'Grouped\' response options layout in \'Specify correct answer\' section', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.expandDraggableOptionsLayoutDropdown();
+            matchingPage.steps.selectOptionFromDraggableOptionsLayoutDropdown('Grouped');
+            matchingPage.steps.addGroupTitle('Group A');
+            matchingPage.steps.enterTextInOptionInputField(groupedOptions);
+            matchingPage.steps.addGroupWithTitleAndOptionsInDraggableOptionsSection('Group A', groupedOptionsTwo);
+        });
+
+        it('When the user has not selected any option, the options and dropzone should be in inactive state', () => {
+            matchingPage.steps.verifyInactiveStateOfAllDraggableOptionsInSpecifyCorrectAnswerSection();
+            matchingPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
+        });
+
+        it('CSS of inactive state of options and dropzone', { tags: 'css' }, () => {
+            utilities.verifyCSS(matchingPage.draggableOption(), {
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                'background-color': css.color.defaultBackground,
+            });
+            utilities.verifyCSS(matchingPage.draggableOption().find('.question-text-wrapper'), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(matchingPage.draggableOptionDragIcon().find('g path').eq(1), {
+                'fill': css.color.secondaryBtn
+            });
+            utilities.verifyCSS(matchingPage.dropzoneSpecifyCorrectAnswerSection().eq(0), {
+                'border-left': `2px dashed ${css.color.activeComponentBorder}`
+            });
+        });
+
+        it('Accessibility of inactive state of options and dropzone', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(matchingPage.dropzoneSpecifyCorrectAnswerSection().parents('.ngie-accordion-detail'));
+        });
+
+        it('When the user selects an option, it should get in selected state and all other remain in inactive state and dropzones should be in active state', () => {
+            matchingPage.steps.clickOnDraggableOptionInSpecifyCorrectAnswerSection('Petals');
+            cy.log('checking active state of selected option')
+            matchingPage.steps.verifyActiveStateOfDraggableOptionInSpecifyCorrectAnswerSection(0);
+            cy.log('checking default state of unselected option(s)')
+            matchingPage.steps.verifyInactiveStateOfUnselectedDraggableOptionsInSpecifyCorrectAnswerSection([1, 2]);
+            matchingPage.steps.verifyActiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
+        });
+
+        it('CSS of active state of options and dropzone', { tags: 'css' }, () => {
+            utilities.verifyCSS(matchingPage.draggableOption().eq(0), {
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                'background-color': css.color.defaultBackground
+            });
+            utilities.verifyCSS(matchingPage.draggableOptionDragIcon().find('g path').eq(1), {
+                'fill': css.color.secondaryBtn
+            });
+        });
+
+        it('Accessibility of active state of options and dropzone', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(matchingPage.dropzoneSpecifyCorrectAnswerSection().parents('.ngie-accordion-detail'));
+        });
+
+        it('When the user deselects the option, it should get in deselected state and the dropzone should return to the inactive state', () => {
+            matchingPage.steps.clickOnDraggableOptionInSpecifyCorrectAnswerSection('Petals');
+            cy.log('Checking default state of deselected option')
+            matchingPage.steps.verifyInactiveStateOfAllDraggableOptionsInSpecifyCorrectAnswerSection();
+            cy.log('checking inactive state of all dropzones');
+            matchingPage.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 options container, the dropzone should get filled with that option and the other dropzone should return to inactive state', () => {
+            matchingPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection([{ optionText: 'Petals', dropzoneIndex: 0 }]);
+            matchingPage.steps.verifyDraggableOptionInDropzoneSpecifyCorrectAnswerSection(0, ['Petals']);
+            matchingPage.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(0, ['Flower', 'Stem']);
+            matchingPage.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(1, groupedOptionsTwo);
+        });
+
+        it('When the user has dropped an option inside a dropzone, drag handle should not be displayed in the dropzone', () => {
+            matchingPage.steps.verifyDragHandleNotVisibleInFilledDropzoneOfSpecifyCorrectAnswerSection(0);
+        });
+
+        it('CSS of filled dropzone', { tags: 'css' }, () => {
+            matchingPage.dropzoneSpecifyCorrectAnswerSection()
+                .eq(0)
+                .within(() => {
+                    utilities.verifyCSS(matchingPage.droppedDraggableOptionInDropzoneSpecifyCorrectAnswerSection().find('.item-content-wrapper'), {
+                        'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                        'background-color': css.color.defaultBackground
+                    });
+                    utilities.verifyCSS(matchingPage.droppedDraggableOptionInDropzoneSpecifyCorrectAnswerSection().find('.question-text-wrapper'), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular,
+                    });
+                });
+        });
+
+        it('Accessibility of filled dropzone', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(matchingPage.dropzoneSpecifyCorrectAnswerSection().parents('.ngie-accordion-detail'));
+        });
+
+        it('When the user drops an option on a filled dropzone, then the dropzone should have newly dropped option and previously added option should be dropped in options container', () => {
+            matchingPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection([{ optionText: 'Flower', dropzoneIndex: 0 }]);
+            matchingPage.steps.verifyDraggableOptionInDropzoneSpecifyCorrectAnswerSection(0, ['Flower']);
+            matchingPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
+            matchingPage.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(0, ['Petals', 'Stem']);
+        });
+
+        it('When the user selects an option from the filled dropzone, the dropzone should be in active state', () => {
+            matchingPage.steps.clickOnDraggableOptionInDropzoneOfSpecifyCorrectAnswerSection('Flower', 0);
+            matchingPage.steps.verifyActiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
+        });
+
+        it('CSS of option from the filled dropzone in selected state', { tags: 'css' }, () => {
+            matchingPage.dropzoneSpecifyCorrectAnswerSection()
+                .eq(0)
+                .within(() => {
+                    utilities.verifyCSS(matchingPage.droppedDraggableOptionInDropzoneSpecifyCorrectAnswerSection().find('.item-content-wrapper'), {
+                        'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                        'background-color': css.color.defaultBackground
+                    });
+                });
+        });
+
+        it('Accessibility of option from the filled dropzone in selected state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(matchingPage.dropzoneSpecifyCorrectAnswerSection().parents('.ngie-accordion-detail'));
+        });
+
+        it('When the user deselects an option from the filled dropzone, the option should return to the inactive state', () => {
+            matchingPage.steps.clickOnDraggableOptionInDropzoneOfSpecifyCorrectAnswerSection('Flower', 0);
+            matchingPage.steps.verifyInactiveStateOfAllDraggableOptionsInSpecifyCorrectAnswerSection();
+            matchingPage.steps.verifyInactiveStateOfAllDropzoneInSpecifyCorrectAnswerSection();
+        });
+
+        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', () => {
+            matchingPage.steps.clickAndDropOptionInOptionsContainerInSpecifyCorrectAnswerSection('Flower');
+            matchingPage.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(0, groupedOptions);
+            matchingPage.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(1, groupedOptionsTwo);
+            utilities.verifyInnerText(matchingPage.errorMessage(), 'Error: Please set a correct answer.');
+            utilities.verifyElementVisibilityState(matchingPage.errorMessage(), 'visible');
+        });
+
+        matchingPage.tests.verifyErrorMessageCSSAndA11y();
+
+        it('When the user fills a dropzone, the dropzone should get filled with the option and the \'Error: Please set a correct answer\' error message should disappear', () => {
+            matchingPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection([{ optionText: 'Petals', dropzoneIndex: 0 }]);
+            matchingPage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('The user should be able to move an option from one dropzone to another dropzone', () => {
+            matchingPage.steps.clickOnDraggableOptionInDropzoneOfSpecifyCorrectAnswerSection('Petals', 0);
+            matchingPage.steps.clickOnDropzoneOfSpecifyCorrectAnswerSection(1);
+            matchingPage.steps.verifyDropzoneTextSpecifyCorrectAnswerSection(0, '');
+            matchingPage.steps.verifyDraggableOptionInDropzoneSpecifyCorrectAnswerSection(1, ['Petals']);
+        });
+
+        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', () => {
+            matchingPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection([{ optionText: 'Flower', dropzoneIndex: 0 }, { optionText: 'Stem', dropzoneIndex: 2 }]);
+            matchingPage.steps.verifyGroupedOptionsTitleSpecifyCorrectAnswerSection(0, 'Group A')
+            matchingPage.steps.verifyEmptyGroupInSpecifyCorrectAnswerSection(0);
+        });
+    });
+
+    describe('Click and drop cases for \'Grouped\' response options layout in \'Preview tab\'', () => {
+        abortEarlySetup();
+        before(() => {
+            matchingPage.steps.navigateToCreateQuestion('matching');
+            cy.barsPreLoaderWait();
+            matchingPage.steps.expandDraggableOptionsLayoutDropdown();
+            matchingPage.steps.selectOptionFromDraggableOptionsLayoutDropdown('Grouped');
+            matchingPage.steps.addGroupTitle('Group A');
+            matchingPage.steps.enterTextInOptionInputField(groupedOptions);
+            matchingPage.steps.addGroupWithTitleAndOptionsInDraggableOptionsSection('Group A', groupedOptionsTwo);
+            matchingPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has not selected any option, the options and dropzone should be in inactive state', () => {
+            matchingPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab();
+            matchingPage.steps.verifyInactiveStateOfAllDropzoneInPreviewTab();
+        });
+
+        it('CSS of inactive state of options and dropzone', { tags: 'css' }, () => {
+            matchingPage.optionsContainerPreviewTab()
+                .within(() => {
+                    utilities.verifyCSS(matchingPage.draggableOption(), {
+                        'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                        'background-color': css.color.defaultBackground,
+                    });
+                    utilities.verifyCSS(matchingPage.draggableOption().find('.question-text-wrapper'), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular,
+                    });
+                    utilities.verifyCSS(matchingPage.draggableOptionDragIcon().find('g path').eq(1), {
+                        'fill': css.color.secondaryBtn
+                    });
+                });
+            utilities.verifyCSS(matchingPage.dropzonePreviewTab().eq(0), {
+                'border-left': `2px dashed ${css.color.activeComponentBorder}`
+            });
+        });
+
+        it('Accessibility of inactive state of options and dropzone', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(matchingPage.dropzonePreviewTab().parents('.preview-container'));
+        });
+
+        it('When the user selects an option, it should get in selected state and all other options should get in inactive state and dropzones should be in active state', () => {
+            matchingPage.steps.clickOnDraggableOptionInPreviewTab('Petals');
+            cy.log('checking active state of selected option')
+            matchingPage.steps.verifyActiveStateOfDraggableOptionInPreviewTab(0);
+            cy.log('checking default state of unselected option(s)')
+            matchingPage.steps.verifyInactiveStateOfUnselectedDraggableOptionsInPreviewTab([1, 2]);
+            cy.log('checking inactive state of all dropzones');
+            matchingPage.steps.verifyActiveStateOfAllDropzoneInPreviewTab();
+        });
+
+        it('CSS of active state of options and dropzone', { tags: 'css' }, () => {
+            matchingPage.optionsContainerPreviewTab()
+                .within(() => {
+                    utilities.verifyCSS(matchingPage.draggableOption().eq(0), {
+                        'border': `1px solid ${css.color.activeComponentBorder}`,
+                        'background-color': css.color.defaultBackground
+                    });
+                    utilities.verifyCSS(matchingPage.draggableOptionDragIcon().find('g path').eq(1), {
+                        'fill': css.color.activeButtons
+                    });
+                });
+            utilities.verifyCSS(matchingPage.dropzonePreviewTab().eq(0), {
+                'border-left': `2px dashed ${css.color.activeComponentBorder}`
+            });
+        });
+
+        it('Accessibility of active state of options and dropzone', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(matchingPage.dropzonePreviewTab().parents('.preview-container'));
+        });
+
+        it('When the user deselects the option, it should get in deselected state and the dropzone should return to the inactive state', () => {
+            matchingPage.steps.clickOnDraggableOptionInPreviewTab('Petals');
+            cy.log('Checking default state of deselected option')
+            matchingPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab();
+            cy.log('checking inactive state of all dropzones');
+            matchingPage.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 options container, the dropzone should get filled with that option and the other dropzone should return to inactive state', () => {
+            matchingPage.steps.clickAndDropOptionInDropzonePreviewTab([{ optionText: 'Petals', dropzoneIndex: 0 }]);
+            matchingPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(0, ['Petals']);
+            matchingPage.steps.verifyGroupedContainerContentsInPreviewTab(0, ['Flower', 'Stem']);
+            matchingPage.steps.verifyGroupedContainerContentsInPreviewTab(1, groupedOptionsTwo);
+            matchingPage.steps.verifyInactiveStateOfAllDropzoneInPreviewTab();
+        });
+
+        it('When the user has dropped an option inside a dropzone, drag handle should not be displayed in the dropzone', () => {
+            matchingPage.steps.verifyDragHandleNotVisibleInFilledDropzoneOfPreviewTab(0);
+        });
+
+        it('CSS of filled dropzone', { tags: 'css' }, () => {
+            matchingPage.dropzonePreviewTab()
+                .eq(0)
+                .within(() => {
+                    utilities.verifyCSS(matchingPage.droppedDraggableOptionInDropzonePreviewTab(), {
+                        'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                        'background-color': css.color.transparent
+                    });
+                    utilities.verifyCSS(matchingPage.droppedDraggableOptionInDropzonePreviewTab().find('.question-text-wrapper'), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular,
+                    });
+                });
+        });
+
+        it('Accessibility of filled dropzone', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(matchingPage.dropzonePreviewTab().parents('.preview-container'));
+        });
+
+        it('When the user drops an option on a filled dropzone, then the dropzone should have newly dropped option and previously added option should be dropped in options container', () => {
+            matchingPage.steps.clickAndDropOptionInDropzonePreviewTab([{ optionText: 'Flower', dropzoneIndex: 0 }]);
+            matchingPage.steps.verifyDraggableOptionInDropzoneOfPreviewTab(0, ['Flower']);
+            matchingPage.steps.verifyInactiveStateOfAllDropzoneInPreviewTab();
+            matchingPage.steps.verifyGroupedContainerContentsInPreviewTab(0, ['Petals', 'Stem']);
+        });
+
+        it('When the user selects an option from the filled dropzone, the dropzones should be in active state', () => {
+            matchingPage.steps.clickOnDraggableOptionInDropzoneOfPreviewTab('Flower', 0);
+            matchingPage.steps.verifyActiveStateOfAllDropzoneInPreviewTab(1);
+        });
+
+        it('CSS of option from the filled dropzone in selected state', { tags: 'css' }, () => {
+            matchingPage.dropzonePreviewTab()
+                .eq(0)
+                .within(() => {
+                    utilities.verifyCSS(matchingPage.droppedDraggableOptionInDropzonePreviewTab(), {
+                        'border': `1px solid ${css.color.activeComponentBorder}`,
+                        'background-color': css.color.optionsBg
+                    });
+                });
+        });
+
+        it('Accessibility of option from the filled dropzone in selected state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(matchingPage.dropzonePreviewTab().parents('.preview-container'));
+        });
+
+        it('When the user deselects an option from the filled dropzone, the option should return to the inactive state', () => {
+            matchingPage.steps.clickOnDraggableOptionInDropzoneOfPreviewTab('Flower', 0);
+            matchingPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab();
+            matchingPage.steps.verifyInactiveStateOfAllDropzoneInPreviewTab();
+        });
+
+        it('The user should be able to move an option from one dropzone to another dropzone', () => {
+            matchingPage.steps.clickOnDraggableOptionInDropzoneOfPreviewTab('Flower', 0);
+            matchingPage.steps.clickOnDropzoneOfPreviewTab(1);
+            matchingPage.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', () => {
+            matchingPage.steps.clickAndDropDraggableOptionFromDropzoneToOptionsContainerPreviewTab('Flower', 1);
+            matchingPage.steps.verifyGroupedContainerContentsInPreviewTab(0, groupedOptions);
+            matchingPage.steps.verifyGroupedContainerContentsInPreviewTab(1, groupedOptionsTwo);
+        });
+
+        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', () => {
+            matchingPage.steps.clickAndDropOptionInDropzonePreviewTab([{ optionText: 'Petals', dropzoneIndex: 0 }, { optionText: 'Flower', dropzoneIndex: 1 }, { optionText: 'Stem', dropzoneIndex: 2 }]);
+            matchingPage.steps.verifyGroupedOptionsTitlePreviewTab(0, 'Group A')
+            matchingPage.steps.verifyEmptyGroupInPreviewTab(0);
+        });
+    });
+});