itemengine-cypress-automation 1.0.30 → 1.0.32

package/cypress/e2e/ILC/DragAndDropIntoCategories/dragAndDropIntoCategoriesClickAndDrop.js

@@ -0,0 +1,669 @@
+import { dragAndDropIntoCategoriesPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const optionsArray = ['Bat', 'Eagle', 'Parrot', 'Whale'];
+const groupedOptions = [['Bat', 'Eagle', 'Whale', 'Platypus'], ['Peacock', 'Parrot', 'Ostrich', 'Flying squirrel']];
+
+const css = Cypress.env('css');
+
+describe('Create Item Page: Drag and drop into categories: Click and drop cases for \'Standard\' and \'Grouped\' response options layouts in \'Set correct answer\' section and \'Preview tab\'', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Click and drop cases for \'Standard\' response options layout in \'Set correct answer\' section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type, add input to option input fields');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.addOptionButton()
+                .click();
+            dragAndDropIntoCategoriesPage.addOptionButton()
+                .click();
+            dragAndDropIntoCategoriesPage.steps.addInputToOptionsForDragAndDropFields(optionsArray);
+        });
+
+        it('When the user has not selected any option, the options and category cells should be in inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInSetCorrectAnswerSection('drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInSetCorrectAnswerSection();
+        });
+
+        it('CSS of inactive state of options and category cells', { tags: 'css' }, () => {
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                'background-color': css.color.defaultBackground,
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption().find('.question-text-wrapper'), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOptionDragIcon(), {
+                'fill': css.color.secondaryBtn
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.setCorrectAnswerSectionCategoryGrid(), {
+                'border': `1px dashed ${css.color.figDefaultComponentBorder}`
+            });
+        });
+
+        it('Accessibility of inactive state of options and category cells', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('[class*="DragAndDropMatrixstyles__ContentWrapper"]'));
+        });
+
+        it('When the user selects an option, it should get in selected state and all the category cells should get in active state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInSetCorrectAnswerSection('drag and drop into categories', 'Bat');
+            cy.log('checking active state of selected option')
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfDraggableOptionInSetCorrectAnswerSection(0, 'drag and drop into categories');
+            cy.log('checking default state of unselected option(s)')
+            dragAndDropIntoCategoriesPage.steps.verifyDefaultStateOfUnselectedDraggableOptionsInSetCorrectAnswerSection([1, 2, 3], 'drag and drop into categories');
+            cy.log('checking active state of all category cells');
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfAllCategoryCellsInSetCorrectAnswerSection();
+        });
+
+        it('CSS of active state of options and category cells', { tags: 'css' }, () => {
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption().eq(0), {
+                'border': `1px solid ${css.color.dragOptionActiveBorder}`,
+                'background-color': css.color.figActiveComponentBg
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOptionDragIcon(), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.setCorrectAnswerSectionCategoryGrid(), {
+                'border': `1px solid ${css.color.activeComponentBorder}`
+            });
+        });
+
+        it('Accessibility of active state of options and category cells', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('[class*="DragAndDropMatrixstyles__ContentWrapper"]'));
+        });
+
+        it('When the user deselects the option, it should get in deselected state and the category cells should return to the inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInSetCorrectAnswerSection('drag and drop into categories', 'Bat');
+            cy.log('Checking default state of deselected option')
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInSetCorrectAnswerSection('drag and drop into categories');
+            cy.log('Checking default inactive state of category cells')
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInSetCorrectAnswerSection();
+        });
+
+        it('When the user drops an option in one of the category cells, the option should get removed from the response container, the category cell should get filled with that option and the other category cells should return to inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfSetCorrectAnswerSection(0, ['Bat']);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableResponsesSetCorrectAnswer('drag and drop into categories', ['Eagle', 'Parrot', 'Whale']);
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInSetCorrectAnswerSection();
+        });
+
+        it('When the user has dropped an option inside a category cell, drag handle should not be displayed in the category cell', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyDragHandleNotVisibleInFilledCategoryCellOfSetCorrectAnswerSection(0);
+        });
+
+        it('CSS of filled category cell', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.setCorrectAnswerSectionCategoryCell()
+                .eq(0)
+                .within(() => {
+                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
+                        'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                        'background-color': css.color.defaultBackground
+                    });
+                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption().find('.question-text-wrapper'), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular,
+                    });
+                });
+        });
+
+        it('Accessibility of filled category cell', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('[class*="DragAndDropMatrixstyles__ContentWrapper"]'));
+        });
+
+        it('When the user drops an option on a filled category cell, the existing option should persist in the category cell', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Eagle', 0);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfSetCorrectAnswerSection(0, ['Bat', 'Eagle']);
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInSetCorrectAnswerSection();
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableResponsesSetCorrectAnswer('drag and drop into categories', ['Parrot', 'Whale']);
+        });
+
+        it('When the user selects an option from the filled category cell, the response container as well as all category cells should get active for dropping the option', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat');
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfDraggableOptionsContainerInSetCorrectAnswerSection('drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfAllCategoryCellsInSetCorrectAnswerSection(1);
+        });
+
+        it('CSS of option from the filled category cell in selected state', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.setCorrectAnswerSectionCategoryCell()
+                .eq(0)
+                .within(() => {
+                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption().eq(0), {
+                        'border': `1px solid ${css.color.dragOptionActiveBorder}`,
+                        'background-color': css.color.figActiveComponentBg
+                    });
+                });
+        });
+
+        it('Accessibility of option from the filled category cell in selected state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('[class*="DragAndDropMatrixstyles__ContentWrapper"]'));
+        });
+
+        it('When the user deselects an option from the filled category cell, the option should return to the inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat');
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInSetCorrectAnswerSection('drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInSetCorrectAnswerSection();
+        });
+
+        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', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInResponseContainerOfSetCorrectAnswerSection('Bat');
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInResponseContainerOfSetCorrectAnswerSection('Eagle');
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableResponsesSetCorrectAnswer('drag and drop into categories', ['Bat', 'Eagle', 'Parrot', 'Whale']);
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.errorMessage(), 'Error: Please set a correct answer.');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.errorMessage(), 'visible');
+        });
+
+        dragAndDropIntoCategoriesPage.tests.verifyCSSAnda11yOfErrorMessage();
+
+        it('When the user fills a category cell, the category cell should get filled with the option and the \'Error: Please set a correct answer\' error message should disappear', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('The user should be able to move an option from one category cell to another category cell', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat');
+            dragAndDropIntoCategoriesPage.steps.clickOnCategoryCellInCategoryCellOfSetCorrectAnswerSection(1);
+            dragAndDropIntoCategoriesPage.steps.verifyEmptyStateOfCategoryCellInSetCorrectAnswerSection(0);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfSetCorrectAnswerSection(1, ['Bat']);
+        });
+    });
+
+    describe('Click and drop cases for \'Standard\' response options layout in \'Preview tab\'', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type, add input to option input fields and switch to preview tab');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.addOptionButton()
+                .click();
+            dragAndDropIntoCategoriesPage.addOptionButton()
+                .click();
+            dragAndDropIntoCategoriesPage.steps.addInputToOptionsForDragAndDropFields(optionsArray);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has not selected any option, the options and category cells should be in inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab('drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInPreviewTab();
+        });
+
+        it('CSS of inactive state of options and category cells', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.previewTabDraggableOptionsWrapper('drag and drop into categories')
+                .within(() => {
+                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
+                        'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                        'background-color': css.color.defaultBackground,
+                    });
+                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption().find('.question-text-wrapper'), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular,
+                    });
+                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOptionDragIcon(), {
+                        'fill': css.color.secondaryBtn
+                    });
+                });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.previewTabCategoryGrid(), {
+                'border': `1px dashed ${css.color.figDefaultComponentBorder}`
+            });
+        });
+
+        it('Accessibility of inactive state of options and category cells', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('.edit-question-preview-wrapper [class*="DragAndDropMatrixstyles__ContentWrapper"]'));
+        });
+
+        it('When the user selects an option, it should get in selected state and all the category cells should get in active state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInPreviewTab('drag and drop into categories', 'Bat');
+            cy.log('checking active state of selected option')
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfDraggableOptionInPreviewTab(0, 'drag and drop into categories');
+            cy.log('checking default state of unselected option(s)')
+            dragAndDropIntoCategoriesPage.steps.verifyDefaultStateOfUnselectedDraggableOptionsInPreviewTab([1, 2, 3], 'drag and drop into categories');
+            cy.log('checking active state of all category cells');
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfAllCategoryCellsInPreviewTab();
+        });
+
+        it('CSS of active state of options and category cells', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.previewTabDraggableOptionsWrapper('drag and drop into categories')
+                .within(() => {
+                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption().eq(0), {
+                        'border': `1px solid ${css.color.dragOptionActiveBorder}`,
+                        'background-color': css.color.figActiveComponentBg
+                    });
+                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOptionDragIcon(), {
+                        'fill': css.color.activeButtons
+                    });
+                });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.previewTabCategoryGrid(), {
+                'border': `1px solid ${css.color.activeComponentBorder}`
+            });
+        });
+
+        it('Accessibility of active state of options and category cells', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('.edit-question-preview-wrapper [class*="DragAndDropMatrixstyles__ContentWrapper"]'));
+        });
+
+        it('When the user deselects the option, it should get in deselected state and the category cells should return to the inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInPreviewTab('drag and drop into categories', 'Bat');
+            cy.log('Checking default state of deselected option')
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab('drag and drop into categories');
+            cy.log('Checking default inactive state of category cells')
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInPreviewTab();
+        });
+
+        it('When the user drops an option in one of the category cells, the option should get removed from the response container, the category cell should get filled with that option and the other category cells should return to inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfPreviewTab(0, ['Bat']);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableResponsesPreviewTab('drag and drop into categories', ['Eagle', 'Parrot', 'Whale']);
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInPreviewTab();
+        });
+
+        it('When the user has dropped an option inside a category cell, drag handle should not be displayed in the category cell', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyDragHandleNotVisibleInFilledCategoryCellOfPreviewTab(0);
+        });
+
+        it('CSS of filled category cell', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.previewTabCategoryCell()
+                .eq(0)
+                .within(() => {
+                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
+                        'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                        'background-color': css.color.defaultBackground
+                    });
+                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption().find('.question-text-wrapper'), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular,
+                    });
+                });
+        });
+
+        it('Accessibility of filled category cell', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('.edit-question-preview-wrapper [class*="DragAndDropMatrixstyles__ContentWrapper"]'));
+        });
+
+        it('When the user drops an option on a filled category cell, the existing option should persist in the category cell', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Eagle', 0);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfPreviewTab(0, ['Bat', 'Eagle']);
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableResponsesPreviewTab('drag and drop into categories', ['Parrot', 'Whale']);
+        });
+
+        it('When the user selects an option from the filled category cell, the response container as well as all category cells should get active for dropping the option', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInCategoryCellOfPreviewTab('Bat');
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfDraggableOptionsContainerInPreviewTab('drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfAllCategoryCellsInPreviewTab(1);
+        });
+
+        it('CSS of option from the filled category cell in selected state', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.previewTabCategoryCell()
+                .eq(0)
+                .within(() => {
+                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption().eq(0), {
+                        'border': `1px solid ${css.color.dragOptionActiveBorder}`,
+                        'background-color': css.color.figActiveComponentBg
+                    });
+                });
+        });
+
+        it('Accessibility of option from the filled category cell in selected state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('.edit-question-preview-wrapper [class*="DragAndDropMatrixstyles__ContentWrapper"]'));
+        });
+
+        it('When the user deselects an option from the filled category cell, the option should return to the inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInCategoryCellOfPreviewTab('Bat');
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab('drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInPreviewTab();
+        });
+
+        it('The user should be able to move an option from one category cell to another category cell', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInCategoryCellOfPreviewTab('Bat');
+            dragAndDropIntoCategoriesPage.steps.clickOnCategoryCellInCategoryCellOfPreviewTab(1);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfPreviewTab(0, ['Eagle']);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfPreviewTab(1, ['Bat']);
+        });
+    });
+
+    describe('Click and drop cases for \'Grouped\' response options layout in \'Set correct answer\' section', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type, add input to option input fields');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.selectResponseOptionsLayout('Grouped');
+            dragAndDropIntoCategoriesPage.steps.addGroupTitle(0, 'Group A');
+            dragAndDropIntoCategoriesPage.steps.addOption();
+            dragAndDropIntoCategoriesPage.steps.addOption();
+            dragAndDropIntoCategoriesPage.steps.addInputToOptionsForDragAndDropFields(groupedOptions[0]);
+            dragAndDropIntoCategoriesPage.steps.addGroupWithTitleAndOptionsInResponseOptionsSection(1, 'Group B', groupedOptions[1]);
+        });
+
+        it('When the user has not selected any option, the options and category cells should be in inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInSetCorrectAnswerSection('drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInSetCorrectAnswerSection();
+        });
+
+        it('CSS of inactive state of options and category cells', { tags: 'css' }, () => {
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
+                'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                'background-color': css.color.defaultBackground,
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption().find('.question-text-wrapper'), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOptionDragIcon(), {
+                'fill': css.color.secondaryBtn
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.setCorrectAnswerSectionCategoryGrid(), {
+                'border': `1px dashed ${css.color.figDefaultComponentBorder}`
+            });
+        });
+
+        it('Accessibility of inactive state of options and category cells', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('[class*="DragAndDropMatrixstyles__ContentWrapper"]'));
+        });
+
+        it('When the user selects an option, it should get in selected state and all the category cells should get in active state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInSetCorrectAnswerSection('drag and drop into categories', 'Bat');
+            cy.log('checking active state of selected option')
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfDraggableOptionInSetCorrectAnswerSection(0, 'drag and drop into categories');
+            cy.log('checking default state of unselected option(s)')
+            dragAndDropIntoCategoriesPage.steps.verifyDefaultStateOfUnselectedDraggableOptionsInSetCorrectAnswerSection([1, 2, 3, 4, 5, 6, 7], 'drag and drop into categories');
+            cy.log('checking active state of all category cells');
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfAllCategoryCellsInSetCorrectAnswerSection();
+        });
+
+        it('CSS of active state of options and category cells', { tags: 'css' }, () => {
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption().eq(0), {
+                'border': `1px solid ${css.color.dragOptionActiveBorder}`,
+                'background-color': css.color.figActiveComponentBg
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOptionDragIcon(), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.setCorrectAnswerSectionCategoryGrid(), {
+                'border': `1px solid ${css.color.activeComponentBorder}`
+            });
+        });
+
+        it('Accessibility of active state of options and category cells', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('[class*="DragAndDropMatrixstyles__ContentWrapper"]'));
+        });
+
+        it('When the user deselects the option, it should get in deselected state and the category cells should return to the inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInSetCorrectAnswerSection('drag and drop into categories', 'Bat');
+            cy.log('Checking default state of deselected option')
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInSetCorrectAnswerSection('drag and drop into categories');
+            cy.log('Checking default inactive state of category cells')
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInSetCorrectAnswerSection();
+        });
+
+        it('When the user drops an option in one of the category cells, the option should get removed from the respective group of the response container, the category cell should get filled with that option and the other category cells should return to inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfSetCorrectAnswerSection(0, ['Bat']);
+            dragAndDropIntoCategoriesPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, ['Eagle', 'Whale', 'Platypus']);
+            dragAndDropIntoCategoriesPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(1, groupedOptions[1]);
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInSetCorrectAnswerSection();
+        });
+
+        it('When the user has dropped an option inside a category cell, drag handle should not be displayed in the category cell', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyDragHandleNotVisibleInFilledCategoryCellOfSetCorrectAnswerSection(0);
+        });
+
+        it('CSS of filled category cell', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.setCorrectAnswerSectionCategoryCell()
+                .eq(0)
+                .within(() => {
+                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
+                        'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                        'background-color': css.color.defaultBackground
+                    });
+                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption().find('.question-text-wrapper'), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular,
+                    });
+                });
+        });
+
+        it('Accessibility of filled category cell', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('[class*="DragAndDropMatrixstyles__ContentWrapper"]'));
+        });
+
+        it('When the user drops an option on a filled category cell, the existing option should persist in the category cell', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Eagle', 0);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfSetCorrectAnswerSection(0, ['Bat', 'Eagle']);
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInSetCorrectAnswerSection();
+            dragAndDropIntoCategoriesPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, ['Whale', 'Platypus']);
+        });
+
+        it('When the user selects an option from the filled category cell, the response container as well as all category cells should get active for dropping the option', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat');
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfDraggableOptionsContainerInSetCorrectAnswerSection('drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfAllCategoryCellsInSetCorrectAnswerSection(1);
+        });
+
+        it('CSS of option from the filled category cell in selected state', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.setCorrectAnswerSectionCategoryCell()
+                .eq(0)
+                .within(() => {
+                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption().eq(0), {
+                        'border': `1px solid ${css.color.dragOptionActiveBorder}`,
+                        'background-color': css.color.figActiveComponentBg
+                    });
+                });
+        });
+
+        it('Accessibility of option from the filled category cell in selected state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('[class*="DragAndDropMatrixstyles__ContentWrapper"]'));
+        });
+
+        it('When the user deselects an option from the filled category cell, the option should return to the inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat');
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInSetCorrectAnswerSection('drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInSetCorrectAnswerSection();
+        });
+
+        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', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInGroupedResponseContainerOfSetCorrectAnswerSection('Bat');
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInGroupedResponseContainerOfSetCorrectAnswerSection('Eagle');
+            dragAndDropIntoCategoriesPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, groupedOptions[0]);
+            dragAndDropIntoCategoriesPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(1, groupedOptions[1]);
+            utilities.verifyInnerText(dragAndDropIntoCategoriesPage.errorMessage(), 'Error: Please set a correct answer.');
+            utilities.verifyElementVisibilityState(dragAndDropIntoCategoriesPage.errorMessage(), 'visible');
+        });
+
+        dragAndDropIntoCategoriesPage.tests.verifyCSSAnda11yOfErrorMessage();
+
+        it('When the user fills a category cell, the category cell should get filled with the option and the \'Error: Please set a correct answer\' error message should disappear', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('The user should be able to move an option from one category cell to another category cell', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Bat');
+            dragAndDropIntoCategoriesPage.steps.clickOnCategoryCellInCategoryCellOfSetCorrectAnswerSection(1);
+            dragAndDropIntoCategoriesPage.steps.verifyEmptyStateOfCategoryCellInSetCorrectAnswerSection(0);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfSetCorrectAnswerSection(1, ['Bat']);
+        });
+
+        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', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Eagle', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Whale', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfSetCorrectAnswerSection('Platypus', 0);
+            dragAndDropIntoCategoriesPage.steps.verifyGroupTitleInSetCorrectAnswerSection(0, 'Group A')
+            dragAndDropIntoCategoriesPage.steps.verifyEmptyGroupInSetCorrectAnswerSection(0);
+        });
+    });
+
+    describe('Click and drop cases for \'Grouped\' response options layout in \'Preview tab\'', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigate to Drag and drop into categories question type, add input to option input fields and switch to preview tab');
+            dragAndDropIntoCategoriesPage.steps.navigateToCreateQuestion('drag and drop into categories');
+            cy.barsPreLoaderWait();
+            dragAndDropIntoCategoriesPage.steps.selectResponseOptionsLayout('Grouped');
+            dragAndDropIntoCategoriesPage.steps.addGroupTitle(0, 'Group A');
+            dragAndDropIntoCategoriesPage.steps.addOption();
+            dragAndDropIntoCategoriesPage.steps.addOption();
+            dragAndDropIntoCategoriesPage.steps.addInputToOptionsForDragAndDropFields(groupedOptions[0]);
+            dragAndDropIntoCategoriesPage.steps.addGroupWithTitleAndOptionsInResponseOptionsSection(1, 'Group B', groupedOptions[1]);
+            dragAndDropIntoCategoriesPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has not selected any option, the options and category cells should be in inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab('drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInPreviewTab();
+        });
+
+        it('CSS of inactive state of options and category cells', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.previewTabDraggableOptionsWrapper('drag and drop into categories')
+                .within(() => {
+                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
+                        'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                        'background-color': css.color.defaultBackground,
+                    });
+                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption().find('.question-text-wrapper'), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular,
+                    });
+                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOptionDragIcon(), {
+                        'fill': css.color.secondaryBtn
+                    });
+                });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.previewTabCategoryGrid(), {
+                'border': `1px dashed ${css.color.figDefaultComponentBorder}`
+            });
+        });
+
+        it('Accessibility of inactive state of options and category cells', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('.edit-question-preview-wrapper [class*="DragAndDropMatrixstyles__ContentWrapper"]'));
+        });
+
+        it('When the user selects an option, it should get in selected state and all the category cells should get in active state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInPreviewTab('drag and drop into categories', 'Bat');
+            cy.log('checking active state of selected option')
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfDraggableOptionInPreviewTab(0, 'drag and drop into categories');
+            cy.log('checking default state of unselected option(s)')
+            dragAndDropIntoCategoriesPage.steps.verifyDefaultStateOfUnselectedDraggableOptionsInPreviewTab([1, 2, 3, 4, 5, 6, 7], 'drag and drop into categories');
+            cy.log('checking active state of all category cells');
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfAllCategoryCellsInPreviewTab();
+        });
+
+        it('CSS of active state of options and category cells', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.previewTabDraggableOptionsWrapper('drag and drop into categories')
+                .within(() => {
+                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption().eq(0), {
+                        'border': `1px solid ${css.color.dragOptionActiveBorder}`,
+                        'background-color': css.color.figActiveComponentBg
+                    });
+                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOptionDragIcon(), {
+                        'fill': css.color.activeButtons
+                    });
+                });
+            utilities.verifyCSS(dragAndDropIntoCategoriesPage.previewTabCategoryGrid(), {
+                'border': `1px solid ${css.color.activeComponentBorder}`
+            });
+        });
+
+        it('Accessibility of active state of options and category cells', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('.edit-question-preview-wrapper [class*="DragAndDropMatrixstyles__ContentWrapper"]'));
+        });
+
+        it('When the user deselects the option, it should get in deselected state and the category cells should return to the inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInPreviewTab('drag and drop into categories', 'Bat');
+            cy.log('Checking default state of deselected option')
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab('drag and drop into categories');
+            cy.log('Checking default inactive state of category cells')
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInPreviewTab();
+        });
+
+        it('When the user drops an option in one of the category cells, the option should get removed from the respective group of the response container, the category cell should get filled with that option and the other category cells should return to inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Bat', 0);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfPreviewTab(0, ['Bat']);
+            dragAndDropIntoCategoriesPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, ['Eagle', 'Whale', 'Platypus']);
+            dragAndDropIntoCategoriesPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(1, groupedOptions[1]);
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInPreviewTab();
+        });
+
+        it('When the user has dropped an option inside a category cell, drag handle should not be displayed in the category cell', () => {
+            dragAndDropIntoCategoriesPage.steps.verifyDragHandleNotVisibleInFilledCategoryCellOfPreviewTab(0);
+        });
+
+        it('CSS of filled category cell', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.previewTabCategoryCell()
+                .eq(0)
+                .within(() => {
+                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption(), {
+                        'border': `1px solid ${css.color.figDefaultComponentBorder}`,
+                        'background-color': css.color.defaultBackground
+                    });
+                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption().find('.question-text-wrapper'), {
+                        'color': css.color.text,
+                        'font-size': css.fontSize.default,
+                        'font-weight': css.fontWeight.regular,
+                    });
+                });
+        });
+
+        it('Accessibility of filled category cell', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('.edit-question-preview-wrapper [class*="DragAndDropMatrixstyles__ContentWrapper"]'));
+        });
+
+        it('When the user drops an option on a filled category cell, the existing option should persist in the category cell', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Eagle', 0);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfPreviewTab(0, ['Bat', 'Eagle']);
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInPreviewTab();
+            dragAndDropIntoCategoriesPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, ['Whale', 'Platypus']);
+        });
+
+        it('When the user selects an option from the filled category cell, the response container as well as all category cells should get active for dropping the option', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInCategoryCellOfPreviewTab('Bat');
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfDraggableOptionsContainerInPreviewTab('drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.verifyActiveStateOfAllCategoryCellsInPreviewTab(1);
+        });
+
+        it('CSS of option from the filled category cell in selected state', { tags: 'css' }, () => {
+            dragAndDropIntoCategoriesPage.previewTabCategoryCell()
+                .eq(0)
+                .within(() => {
+                    utilities.verifyCSS(dragAndDropIntoCategoriesPage.draggableOption().eq(0), {
+                        'border': `1px solid ${css.color.dragOptionActiveBorder}`,
+                        'background-color': css.color.figActiveComponentBg
+                    });
+                });
+        });
+
+        it('Accessibility of option from the filled category cell in selected state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropIntoCategoriesPage.draggableOption().parents('.edit-question-preview-wrapper [class*="DragAndDropMatrixstyles__ContentWrapper"]'));
+        });
+
+        it('When the user deselects an option from the filled category cell, the option should return to the inactive state', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInCategoryCellOfPreviewTab('Bat');
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab('drag and drop into categories');
+            dragAndDropIntoCategoriesPage.steps.verifyInactiveStateOfAllCategoryCellsInPreviewTab();
+        });
+
+        it('The user should be able to move an option from one category cell to another category cell', () => {
+            dragAndDropIntoCategoriesPage.steps.clickOnDraggableOptionInCategoryCellOfPreviewTab('Bat');
+            dragAndDropIntoCategoriesPage.steps.clickOnCategoryCellInCategoryCellOfPreviewTab(1);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfPreviewTab(0, ['Eagle']);
+            dragAndDropIntoCategoriesPage.steps.verifyDraggableOptionInCategoryCellOfPreviewTab(1, ['Bat']);
+        });
+
+        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', () => {
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Whale', 0);
+            dragAndDropIntoCategoriesPage.steps.clickAndDropDraggableOptionInCategoryCellOfPreviewTab('Platypus', 0);
+            dragAndDropIntoCategoriesPage.steps.verifyGroupTitleInPreviewTab(0, 'Group A')
+            dragAndDropIntoCategoriesPage.steps.verifyEmptyGroupInPreviewTab(0);
+        });
+    });
+});