itemengine-cypress-automation 1.0.78 → 1.0.80

package/cypress/e2e/ILC/ListMatching/listMatchingClickAndDrop.js

@@ -1,644 +0,0 @@
-import { listMatchingPage } from "../../../pages";
-const css = Cypress.env('css');
-import abortEarlySetup from "../../../support/helpers/abortEarly";
-
-describe('Create Item Page: List matching: 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 List matching question type, give input to stem and option input fields');
-            listMatchingPage.steps.navigateToCreateQuestion('list matching');
-            cy.barsPreLoaderWait();
-            listMatchingPage.steps.setQuestionStemsAndOptionsForScoringWithoutAlternateTab();
-        });
-
-        it('When the user has not selected any draggable option, the draggable options and response areas should be in inactive state', () => {
-            listMatchingPage.steps.verifyInactiveStateOfAllDraggableOptionsInSetCorrectAnswerSection('List matching');
-            listMatchingPage.steps.verifyInactiveStateOfAllStemResponseAreasInSetCorrectAnswerSection();
-        });
-
-        it('CSS of inactive state of draggable options and response areas', { tags: 'css' }, () => {
-            listMatchingPage.draggableOption()
-                .should('have.css', 'border', `1px solid ${css.color.figDefaultComponentBorder}`)
-                .and('have.css', 'background-color', css.color.defaultBackground)
-                .find('.drag-indicator-icon')
-                .should('have.css', 'fill', css.color.activeButtons);
-            listMatchingPage.setCorrectAnswerStemResponseArea()
-                .should('have.css', 'border', `2px dashed ${css.color.figDefaultComponentBorder}`);
-        });
-
-        it('Accessibility of inactive state of draggable options and response areas', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(listMatchingPage.draggableOption().parents('.cloze-width-drag-and-drop-set-correct-response'));
-        });
-
-        it('When the user selects a draggable option, it should get in selected state and all the response areas should get in active state', () => {
-            listMatchingPage.steps.clickOnDraggableOptionInSetCorrectAnswerSection('List matching', 'Correct answer for stem 1');
-            cy.log('checking active state of selected draggable option')
-            listMatchingPage.steps.verifyActiveStateOfDraggableOptionInSetCorrectAnswerSection(0, 'List matching');
-            cy.log('checking default state of unselected draggable option(s)')
-            listMatchingPage.steps.verifyDefaultStateOfUnselectedDraggableOptionsInSetCorrectAnswerSection([1, 2, 3], 'List matching');
-            cy.log('checking active state of all response areas');
-            listMatchingPage.steps.verifyActiveStateOfAllStemResponseAreasInSetCorrectAnswerSection();
-        });
-
-        it('CSS of active state of draggable options and response areas', { tags: 'css' }, () => {
-            listMatchingPage.draggableOption()
-                .eq(0)
-                .should('have.css', 'border', `1px solid ${css.color.activeComponentBorder}`)
-                .and('have.css', 'background-color', css.color.figActiveComponentBg)
-                .find('.drag-indicator-icon')
-                .should('have.css', 'fill', css.color.activeButtons);
-            listMatchingPage.setCorrectAnswerStemResponseArea()
-                .should('have.css', 'border', `1px solid ${css.color.activeComponentBorder}`);
-        });
-
-        it('Accessibility of active state of draggable options and response areas', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(listMatchingPage.draggableOption().parents('.cloze-width-drag-and-drop-set-correct-response'));
-        });
-
-        it('When the user deselects the draggable option, it should get in deselected state and the response areas should return to the inactive state', () => {
-            listMatchingPage.steps.clickOnDraggableOptionInSetCorrectAnswerSection('List matching', 'Correct answer for stem 1');
-            cy.log('Checking default state of deselected draggable option')
-            listMatchingPage.steps.verifyInactiveStateOfAllDraggableOptionsInSetCorrectAnswerSection('List matching');
-            cy.log('Checking default inactive state of response areas')
-            listMatchingPage.steps.verifyInactiveStateOfAllStemResponseAreasInSetCorrectAnswerSection();
-        });
-
-        it('When the user drops a draggable option in one of the response areas, the draggable option should get removed from the response container, the response area should get filled with that option and the other response area should return to inactive state', () => {
-            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInSetCorrectAnswerSection('Correct answer for stem 1', 0);
-            listMatchingPage.steps.verifyFilledResponseAreaInSetCorrectAnswerSection(0, 'Correct answer for stem 1');
-            listMatchingPage.steps.verifyOptionsInSetCorrectAnswerSection(['Correct answer for stem 2', 'Incorrect answer 1', 'Incorrect answer 2'])
-            listMatchingPage.steps.verifyInactiveStateOfStemResponseAreaInSetCorrectAnswerSection(1);
-        });
-
-        it('When the user has dropped a draggable option inside a response area, drag handle should not be displayed in the response area', () => {
-            listMatchingPage.steps.verifyDragHandleNotVisibleInFilledResponseAreaInSetCorrectAnswerSection(0);
-        });
-
-        it('CSS of filled response area', { tags: 'css' }, () => {
-            listMatchingPage.setCorrectAnswerStemResponseArea()
-                .eq(0)
-                .should('have.css', 'border', `1px solid ${css.color.figDefaultComponentBorder}`)
-                .should('have.css', 'background-color', css.color.transparent)
-                .find('.question-text-wrapper')
-                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
-        });
-
-        it('Accessibility of filled response area', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(listMatchingPage.draggableOption().parents('.cloze-width-drag-and-drop-set-correct-response'));
-        });
-
-        it('When the response areas are partially filled and the user selects a draggable option, then only the empty response area should get in active state', () => {
-            listMatchingPage.steps.clickOnDraggableOptionInSetCorrectAnswerSection('List matching', 'Correct answer for stem 2');
-            listMatchingPage.steps.verifyInactiveStateOfFilledStemResponseAreaInSetCorrectAnswerSection(0);
-            listMatchingPage.steps.verifyActiveStateOfStemResponseAreaInSetCorrectAnswerSection(1);
-            cy.log('Post step: deselecting the draggable option')
-            listMatchingPage.steps.clickOnDraggableOptionInSetCorrectAnswerSection('List matching', 'Correct answer for stem 2');
-        });
-
-        it('When the user drops a draggable option on a filled response area, the existing draggable option should get removed from the response area, it should return in the response container and the response area should get filled with the new draggable option', () => {
-            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInSetCorrectAnswerSection('Correct answer for stem 2', 0);
-            listMatchingPage.steps.verifyFilledResponseAreaInSetCorrectAnswerSection(0, 'Correct answer for stem 2');
-            listMatchingPage.steps.verifyInactiveStateOfStemResponseAreaInSetCorrectAnswerSection(1);
-            listMatchingPage.steps.verifyOptionsInSetCorrectAnswerSection(['Correct answer for stem 1', 'Incorrect answer 1', 'Incorrect answer 2']);
-        });
-
-        it('When the user selects a draggable option from the filled response area, the response container should get active for dropping the option, the filled response area should not get in active state and only the empty response area should get active', () => {
-            listMatchingPage.steps.clickOnResponseAreaInSetCorrectAnswerSection(0);
-            listMatchingPage.steps.verifyActiveStateOfDraggableOptionsContainerInSetCorrectAnswerSection('List matching');
-            listMatchingPage.steps.verifyInactiveStateOfFilledStemResponseAreaInSetCorrectAnswerSection(0);
-            listMatchingPage.steps.verifyActiveStateOfStemResponseAreaInSetCorrectAnswerSection(1);
-        });
-
-        it('CSS of draggable option from the filled response area in selected state', { tags: 'css' }, () => {
-            listMatchingPage.setCorrectAnswerStemResponseArea()
-                .eq(0)
-                .should('have.css', 'border', `1px solid ${css.color.activeComponentBorder}`)
-                .and('have.css', 'background-color', css.color.figActiveComponentBg);
-        });
-
-        it('Accessibility of draggable option from the filled response area in selected state', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(listMatchingPage.setCorrectAnswerStemResponseArea().parents('.cloze-width-drag-and-drop-set-correct-response'));
-        });
-
-        it('When the user deselects a draggable option from the filled response area, the draggable option should return to the inactive state', () => {
-            listMatchingPage.steps.clickOnResponseAreaInSetCorrectAnswerSection(0);
-            listMatchingPage.steps.verifyInactiveStateOfFilledStemResponseAreaInSetCorrectAnswerSection(0);
-            listMatchingPage.steps.verifyInactiveStateOfStemResponseAreaInSetCorrectAnswerSection(1);
-        });
-
-        it('When the user selects a filled option and clicks in the response container, the selected draggable option should get back in the response container, the response area should get errored and \'Error: Please set a correct answer\' error message should be displayed', () => {
-            listMatchingPage.steps.clickAndDropOptionFromResponseAreaToDraggableOptionsContainerInSetCorrectAnswerSection(0);
-            listMatchingPage.steps.verifyOptionsInSetCorrectAnswerSection(['Correct answer for stem 1', 'Correct answer for stem 2', 'Incorrect answer 1', 'Incorrect answer 2']);
-            listMatchingPage.steps.verifyErroredStateOfEmptyResponseFieldInSetCorrectAnswerSection(0);
-            listMatchingPage.steps.verifyPleaseSetACorrectAnswerErrorMessage();
-        });
-
-        it('CSS of error state of response area', { tags: 'css' }, () => {
-            listMatchingPage.setCorrectAnswerStemResponseArea()
-                .eq(0)
-                .should('have.css', 'border', `2px dashed ${css.color.errorFieldBorder}`)
-                .and('have.css', 'background-color', css.color.textAreaErrorBg);
-        });
-
-        it('Accessibility of error state of response area', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(listMatchingPage.setCorrectAnswerStemResponseArea().parents('.cloze-width-drag-and-drop-set-correct-response'));
-        });
-
-        it('When the user selects a draggable option when a response area is in errored state, the error state of the response area should persist and the user should be able to drop an option into the errored response area', () => {
-            listMatchingPage.steps.clickOnDraggableOptionInSetCorrectAnswerSection('List matching', 'Correct answer for stem 1');
-            listMatchingPage.steps.verifyErroredStateOfEmptyResponseFieldInSetCorrectAnswerSection(0);
-            listMatchingPage.steps.verifyActiveStateOfStemResponseAreaInSetCorrectAnswerSection
-            listMatchingPage.steps.clickOnResponseAreaInSetCorrectAnswerSection(0);
-            listMatchingPage.steps.verifyFilledResponseAreaInSetCorrectAnswerSection(0, 'Correct answer for stem 1');
-        });
-
-        it('When the user has filled the errored response area, the response area should get filled with the dropped option and the \'Error: Please set a correct answer\' error message should disappear', () => {
-            listMatchingPage.steps.verifyNonErroredStateOfFilledResponseFieldInSetCorrectAnswerSection(0);
-            listMatchingPage.steps.verifyErrorMessageIsNotDisplayed();
-        });
-
-        it('The user should be able to move a draggable option from one response area to another response area and the empty response area should get errored and \'Error: Please set a correct answer\' error message should be displayed', () => {
-            listMatchingPage.steps.clickOnResponseAreaInSetCorrectAnswerSection(0);
-            listMatchingPage.steps.clickOnResponseAreaInSetCorrectAnswerSection(1);
-            listMatchingPage.steps.verifyFilledResponseAreaInSetCorrectAnswerSection(1, 'Correct answer for stem 1');
-            listMatchingPage.steps.verifyErroredStateOfEmptyResponseFieldInSetCorrectAnswerSection(0);
-            listMatchingPage.steps.verifyPleaseSetACorrectAnswerErrorMessage();
-        });
-    });
-
-    describe('Click and drop cases for \'Standard\' response options layout in \'Preview tab\'', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigate to List matching question type, give input to stem and option input fields and switch to preview tab');
-            listMatchingPage.steps.navigateToCreateQuestion('list matching');
-            cy.barsPreLoaderWait();
-            listMatchingPage.steps.setQuestionStemsAndOptionsForScoringWithoutAlternateTab();
-            listMatchingPage.steps.switchToPreviewTab();
-        });
-
-        it('When the user has not selected any draggable option, the draggable options and response areas should be in inactive state', () => {
-            listMatchingPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab('List matching');
-            listMatchingPage.steps.verifyInactiveStateOfAllStemResponseAreasInPreviewTab();
-        });
-
-        it('CSS of inactive state of draggable options and response areas', { tags: 'css' }, () => {
-            listMatchingPage.previewTabDraggableOptionsWrapper()
-                .within(() => {
-                    listMatchingPage.draggableOption()
-                        .should('have.css', 'border', `1px solid ${css.color.figDefaultComponentBorder}`)
-                        .and('have.css', 'background-color', css.color.defaultBackground)
-                        .find('.drag-indicator-icon')
-                        .should('have.css', 'fill', css.color.activeButtons);
-                });
-            listMatchingPage.previewTabStemResponseArea()
-                .should('have.css', 'border', `2px dashed ${css.color.figDefaultComponentBorder}`);
-        });
-
-        it('Accessibility of inactive state of draggable options and response areas', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(listMatchingPage.previewTabDraggableOptionsWrapper().parents('.cloze-with-drag-and-drop-preview'));
-        });
-
-        it('When the user selects a draggable option, it should get in selected state and all the response areas should get in active state', () => {
-            listMatchingPage.steps.clickOnDraggableOptionInPreviewTab('List matching', 'Correct answer for stem 1');
-            cy.log('checking active state of selected draggable option')
-            listMatchingPage.steps.verifyActiveStateOfDraggableOptionInPreviewTab(0, 'List matching');
-            cy.log('checking default state of unselected draggable option(s)')
-            listMatchingPage.steps.verifyDefaultStateOfUnselectedDraggableOptionsInPreviewTab([1, 2, 3], 'List matching');
-            cy.log('checking active state of all response areas');
-            listMatchingPage.steps.verifyActiveStateOfAllStemResponseAreasInPreviewTab();
-        });
-
-        it('CSS of active state of draggable options and response areas', { tags: 'css' }, () => {
-            listMatchingPage.previewTabDraggableOptionsWrapper()
-                .within(() => {
-                    listMatchingPage.draggableOption()
-                        .eq(0)
-                        .should('have.css', 'border', `1px solid ${css.color.activeComponentBorder}`)
-                        .and('have.css', 'background-color', css.color.figActiveComponentBg)
-                        .find('.drag-indicator-icon')
-                        .should('have.css', 'fill', css.color.activeButtons);
-                });
-            listMatchingPage.previewTabStemResponseArea()
-                .eq(0)
-                .should('have.css', 'border', `1px solid ${css.color.activeComponentBorder}`);
-        });
-
-        it('Accessibility of active state of draggable options and response areas', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(listMatchingPage.previewTabDraggableOptionsWrapper().parents('.cloze-with-drag-and-drop-preview'));
-        });
-
-        it('When the user deselects the draggable option, it should get in deselected state and the response areas should return to the inactive state', () => {
-            listMatchingPage.steps.clickOnDraggableOptionInPreviewTab('List matching', 'Correct answer for stem 1');
-            listMatchingPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab('List matching');
-            cy.log('Checking default inactive state of response areas')
-            listMatchingPage.steps.verifyInactiveStateOfAllStemResponseAreasInPreviewTab();
-        });
-
-        it('When the user drops a draggable option in one of the response areas, the draggable option should get removed from the response container, the response area should get filled with that option and the other response area should return to inactive state', () => {
-            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Correct answer for stem 1', 0);
-            listMatchingPage.steps.verifyFilledOptionResponseAreaInPreviewTab(0, 'Correct answer for stem 1');
-            listMatchingPage.steps.verifyOptionsInPreviewTab(['Correct answer for stem 2', 'Incorrect answer 1', 'Incorrect answer 2'])
-            listMatchingPage.steps.verifyInactiveStateOfStemResponseAreaInPreviewTab(1);
-        });
-
-        it('When the user has dropped a draggable option inside a response area, drag handle should not be displayed in the response area', () => {
-            listMatchingPage.steps.verifyDragHandleNotVisibleInFilledResponseAreaInPreviewTab(0);
-        });
-
-        it('CSS of filled response area', { tags: 'css' }, () => {
-            listMatchingPage.previewTabStemResponseArea()
-                .eq(0)
-                .should('have.css', 'border', `1px solid ${css.color.figDefaultComponentBorder}`)
-                .find('.question-text-wrapper')
-                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
-        });
-
-        it('Accessibility of filled response area', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(listMatchingPage.previewTabDraggableOptionsWrapper().parents('.cloze-with-drag-and-drop-preview'));
-        });
-
-        it('When the response areas are partially filled and the user selects a draggable option, then only the empty response area should get in active state', () => {
-            listMatchingPage.steps.clickOnDraggableOptionInPreviewTab('List matching', 'Correct answer for stem 2');
-            listMatchingPage.steps.verifyInactiveStateOfFilledStemResponseAreaInPreviewTab(0);
-            listMatchingPage.steps.verifyActiveStateOfStemResponseAreaInPreviewTab(1);
-            cy.log('Post step: deselecting the draggable option')
-            listMatchingPage.steps.clickOnDraggableOptionInPreviewTab('List matching', 'Correct answer for stem 2');
-        });
-
-        it('When the user drops a draggable option on a filled response area, the existing draggable option should get removed from the response area, it should return in the response container and the response area should get filled with the new draggable option', () => {
-            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Correct answer for stem 2', 0);
-            listMatchingPage.steps.verifyFilledOptionResponseAreaInPreviewTab(0, 'Correct answer for stem 2');
-            listMatchingPage.steps.verifyInactiveStateOfStemResponseAreaInPreviewTab(1);
-            listMatchingPage.steps.verifyOptionsInPreviewTab(['Correct answer for stem 1', 'Incorrect answer 1', 'Incorrect answer 2']);
-        });
-
-        it('When the user selects a draggable option from the filled response area, the response container should get active for dropping the option, the filled response area should not get in active state and only the empty response area should get active', () => {
-            listMatchingPage.steps.clickOnResponseAreaInPreviewTab(0);
-            listMatchingPage.steps.verifyActiveStateOfDraggableOptionsContainerInPreviewTab('List matching');
-            listMatchingPage.steps.verifyInactiveStateOfFilledStemResponseAreaInPreviewTab(0);
-            listMatchingPage.steps.verifyActiveStateOfStemResponseAreaInPreviewTab(1);
-        });
-
-        it('CSS of draggable option from the filled response area in selected state', { tags: 'css' }, () => {
-            listMatchingPage.previewTabStemResponseArea()
-                .eq(0)
-                .should('have.css', 'border', `1px solid ${css.color.activeComponentBorder}`)
-                .and('have.css', 'background-color', css.color.figActiveComponentBg);
-        });
-
-        it('Accessibility of draggable option from the filled response area in selected state', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(listMatchingPage.previewTabDraggableOptionsWrapper('List matching').parents('.cloze-with-drag-and-drop-preview'));
-        });
-
-        it('When the user deselects a draggable option from the filled response area, the draggable option should return to the inactive state', () => {
-            listMatchingPage.steps.clickOnResponseAreaInPreviewTab(0);
-            listMatchingPage.steps.verifyInactiveStateOfFilledStemResponseAreaInPreviewTab(0);
-            listMatchingPage.steps.verifyInactiveStateOfStemResponseAreaInPreviewTab(1);
-        });
-
-        it('When the user selects a filled option and clicks in the response container, the selected draggable option should get back in the response container', () => {
-            listMatchingPage.steps.clickAndDropOptionFromResponseAreaToDraggableOptionsContainerInPreviewTab(0);
-            listMatchingPage.steps.verifyOptionsInPreviewTab(['Correct answer for stem 1', 'Correct answer for stem 2', 'Incorrect answer 1', 'Incorrect answer 2']);
-        });
-
-        it('The user should be able to move a draggable option from one response area to another response area', () => {
-            cy.log('Pre step: Setting up an option in the response area');
-            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Correct answer for stem 1', 0);
-            listMatchingPage.steps.clickOnResponseAreaInPreviewTab(0);
-            listMatchingPage.steps.clickOnResponseAreaInPreviewTab(1);
-            listMatchingPage.steps.verifyFilledOptionResponseAreaInPreviewTab(1, 'Correct answer for stem 1');
-            listMatchingPage.steps.verifyInactiveStateOfStemResponseAreaInPreviewTab(0);
-        });
-    });
-
-    describe('Click and drop cases for \'Grouped\' response options layout in \'Set correct answer\' section', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigate to List matching question type, give input to stem and grouped option input fields');
-            listMatchingPage.steps.navigateToCreateQuestion('list matching');
-            cy.barsPreLoaderWait();
-            listMatchingPage.steps.setQuestionStemsAndGroupedOptionsForScoringWithoutAlternateTab();
-        });
-
-        it('When the user has not selected any draggable option, the draggable options and response areas should be in inactive state', () => {
-            listMatchingPage.steps.verifyInactiveStateOfAllDraggableOptionsInSetCorrectAnswerSection('List matching');
-            listMatchingPage.steps.verifyInactiveStateOfAllStemResponseAreasInSetCorrectAnswerSection();
-        });
-
-        it('CSS of inactive state of draggable options and response areas', { tags: 'css' }, () => {
-            listMatchingPage.draggableOption()
-                .should('have.css', 'border', `1px solid ${css.color.figDefaultComponentBorder}`)
-                .and('have.css', 'background-color', css.color.defaultBackground)
-                .find('.drag-indicator-icon')
-                .should('have.css', 'fill', css.color.activeButtons);
-            listMatchingPage.setCorrectAnswerStemResponseArea()
-                .should('have.css', 'border', `2px dashed ${css.color.figDefaultComponentBorder}`);
-        });
-
-        it('Accessibility of inactive state of draggable options and response areas', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(listMatchingPage.draggableOption().parents('.cloze-width-drag-and-drop-set-correct-response'));
-        });
-
-        it('When the user selects a draggable option, it should get in selected state and all the response areas should get in active state', () => {
-            listMatchingPage.steps.clickOnDraggableOptionInSetCorrectAnswerSection('List matching', 'Correct answer for stem 1');
-            cy.log('checking active state of selected draggable option')
-            listMatchingPage.steps.verifyActiveStateOfDraggableOptionInSetCorrectAnswerSection(0, 'List matching');
-            cy.log('checking default state of unselected draggable option(s)')
-            listMatchingPage.steps.verifyDefaultStateOfUnselectedDraggableOptionsInSetCorrectAnswerSection([1, 2, 3], 'List matching');
-            cy.log('checking active state of all response areas');
-            listMatchingPage.steps.verifyActiveStateOfAllStemResponseAreasInSetCorrectAnswerSection();
-        });
-
-        it('CSS of active state of draggable options and response areas', { tags: 'css' }, () => {
-            listMatchingPage.draggableOption()
-                .eq(0)
-                .should('have.css', 'border', `1px solid ${css.color.activeComponentBorder}`)
-                .and('have.css', 'background-color', css.color.figActiveComponentBg)
-                .find('.drag-indicator-icon')
-                .should('have.css', 'fill', css.color.activeButtons);
-            listMatchingPage.setCorrectAnswerStemResponseArea()
-                .should('have.css', 'border', `1px solid ${css.color.activeComponentBorder}`);
-        });
-
-        it('Accessibility of active state of draggable options and response areas', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(listMatchingPage.draggableOption().parents('.cloze-width-drag-and-drop-set-correct-response'));
-        });
-
-        it('When the user deselects the draggable option, it should get in deselected state and the response areas should return to the inactive state', () => {
-            listMatchingPage.steps.clickOnDraggableOptionInSetCorrectAnswerSection('List matching', 'Correct answer for stem 1');
-            cy.log('Checking default state of deselected draggable option')
-            listMatchingPage.steps.verifyInactiveStateOfAllDraggableOptionsInSetCorrectAnswerSection('List matching');
-            cy.log('Checking default inactive state of response areas')
-            listMatchingPage.steps.verifyInactiveStateOfAllStemResponseAreasInSetCorrectAnswerSection();
-        });
-
-        it('When the user drops a draggable option in one of the response areas, the draggable option should get removed from the respective group of the response container, the response area should get filled with that option and the other response area should return to inactive state', () => {
-            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInSetCorrectAnswerSection('Correct answer for stem 1', 0);
-            listMatchingPage.steps.verifyFilledResponseAreaInSetCorrectAnswerSection(0, 'Correct answer for stem 1');
-            listMatchingPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, ['Incorrect answer 1']);
-            listMatchingPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(1, ['Correct answer for stem 2', 'Incorrect answer 2']);
-            listMatchingPage.steps.verifyInactiveStateOfStemResponseAreaInSetCorrectAnswerSection(1);
-        });
-
-        it('When the user has dropped a draggable option inside a response area, drag handle should not be displayed in the response area', () => {
-            listMatchingPage.steps.verifyDragHandleNotVisibleInFilledResponseAreaInSetCorrectAnswerSection(0);
-        });
-
-        it('CSS of filled response area', { tags: 'css' }, () => {
-            listMatchingPage.setCorrectAnswerStemResponseArea()
-                .eq(0)
-                .should('have.css', 'border', `1px solid ${css.color.figDefaultComponentBorder}`)
-                .should('have.css', 'background-color', css.color.transparent)
-                .find('.question-text-wrapper')
-                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
-        });
-
-        it('Accessibility of filled response area', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(listMatchingPage.draggableOption().parents('.cloze-width-drag-and-drop-set-correct-response'));
-        });
-
-        it('When the response areas are partially filled and the user selects a draggable option, then only the empty response area should get in active state', () => {
-            listMatchingPage.steps.clickOnDraggableOptionInSetCorrectAnswerSection('List matching', 'Correct answer for stem 2');
-            listMatchingPage.steps.verifyInactiveStateOfFilledStemResponseAreaInSetCorrectAnswerSection(0);
-            listMatchingPage.steps.verifyActiveStateOfStemResponseAreaInSetCorrectAnswerSection(1);
-            cy.log('Post step: deselecting the draggable option')
-            listMatchingPage.steps.clickOnDraggableOptionInSetCorrectAnswerSection('List matching', 'Correct answer for stem 2');
-        });
-
-        it('When the user drops a draggable option on a filled response area, the existing draggable option should get removed from the response area, it should return in the respective group of the response container and the response area should get filled with the new draggable option', () => {
-            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInSetCorrectAnswerSection('Correct answer for stem 2', 0);
-            listMatchingPage.steps.verifyFilledResponseAreaInSetCorrectAnswerSection(0, 'Correct answer for stem 2');
-            listMatchingPage.steps.verifyInactiveStateOfStemResponseAreaInSetCorrectAnswerSection(1);
-            listMatchingPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, ['Correct answer for stem 1', 'Incorrect answer 1']);
-            listMatchingPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(1, ['Incorrect answer 2']);
-        });
-
-        it('When the user selects a draggable option from the filled response area, the response container should get active for dropping the option, the filled response area should not get in active state and only the empty response area should get active', () => {
-            listMatchingPage.steps.clickOnResponseAreaInSetCorrectAnswerSection(0);
-            listMatchingPage.steps.verifyActiveStateOfDraggableOptionsContainerInSetCorrectAnswerSection('List matching');
-            listMatchingPage.steps.verifyInactiveStateOfFilledStemResponseAreaInSetCorrectAnswerSection(0);
-            listMatchingPage.steps.verifyActiveStateOfStemResponseAreaInSetCorrectAnswerSection(1);
-        });
-
-        it('CSS of draggable option from the filled response area in selected state', { tags: 'css' }, () => {
-            listMatchingPage.setCorrectAnswerStemResponseArea()
-                .eq(0)
-                .should('have.css', 'border', `1px solid ${css.color.activeComponentBorder}`)
-                .and('have.css', 'background-color', css.color.figActiveComponentBg);
-        });
-
-        it('Accessibility of draggable option from the filled response area in selected state', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(listMatchingPage.setCorrectAnswerStemResponseArea().parents('.cloze-width-drag-and-drop-set-correct-response'));
-        });
-
-        it('When the user deselects a draggable option from the filled response area, the draggable option should return to the inactive state', () => {
-            listMatchingPage.steps.clickOnResponseAreaInSetCorrectAnswerSection(0);
-            listMatchingPage.steps.verifyInactiveStateOfFilledStemResponseAreaInSetCorrectAnswerSection(0);
-            listMatchingPage.steps.verifyInactiveStateOfStemResponseAreaInSetCorrectAnswerSection(1);
-        });
-
-        it('When the user selects a filled option and clicks in the response container, the selected draggable option should get removed from the response area, it should return in the respective group of the response container, the response area should get errored and \'Error: Please set a correct answer\' error message should be displayed', () => {
-            listMatchingPage.steps.clickAndDropOptionFromResponseAreaToDraggableOptionsContainerInSetCorrectAnswerSection(0);
-            listMatchingPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, ['Correct answer for stem 1', 'Incorrect answer 1']);
-            listMatchingPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(1, ['Correct answer for stem 2', 'Incorrect answer 2']);
-            listMatchingPage.steps.verifyErroredStateOfEmptyResponseFieldInSetCorrectAnswerSection(0);
-            listMatchingPage.steps.verifyPleaseSetACorrectAnswerErrorMessage();
-        });
-
-        it('CSS of error state of response area', { tags: 'css' }, () => {
-            listMatchingPage.setCorrectAnswerStemResponseArea()
-                .eq(0)
-                .should('have.css', 'border', `2px dashed ${css.color.errorFieldBorder}`)
-                .and('have.css', 'background-color', css.color.textAreaErrorBg);
-        });
-
-        it('Accessibility of error state of response area', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(listMatchingPage.setCorrectAnswerStemResponseArea().parents('.cloze-width-drag-and-drop-set-correct-response'));
-        });
-
-        it('When the user selects a draggable option when a response area is in errored state, the error state of the response area should persist and the user should be able to drop an option into the errored response area', () => {
-            listMatchingPage.steps.clickOnDraggableOptionInSetCorrectAnswerSection('List matching', 'Correct answer for stem 1');
-            listMatchingPage.steps.verifyErroredStateOfEmptyResponseFieldInSetCorrectAnswerSection(0);
-            listMatchingPage.steps.verifyActiveStateOfStemResponseAreaInSetCorrectAnswerSection
-            listMatchingPage.steps.clickOnResponseAreaInSetCorrectAnswerSection(0);
-            listMatchingPage.steps.verifyFilledResponseAreaInSetCorrectAnswerSection(0, 'Correct answer for stem 1');
-        });
-
-        it('When the user has filled the errored response area, the response area should get filled with the dropped option and the \'Error: Please set a correct answer\' error message should disappear', () => {
-            listMatchingPage.steps.verifyNonErroredStateOfFilledResponseFieldInSetCorrectAnswerSection(0);
-            listMatchingPage.steps.verifyErrorMessageIsNotDisplayed();
-        });
-
-        it('The user should be able to move a draggable option from one response area to another response area and the empty response area should get errored and \'Error: Please set a correct answer\' error message should be displayed', () => {
-            listMatchingPage.steps.clickOnResponseAreaInSetCorrectAnswerSection(0);
-            listMatchingPage.steps.clickOnResponseAreaInSetCorrectAnswerSection(1);
-            listMatchingPage.steps.verifyFilledResponseAreaInSetCorrectAnswerSection(1, 'Correct answer for stem 1');
-            listMatchingPage.steps.verifyErroredStateOfEmptyResponseFieldInSetCorrectAnswerSection(0);
-            listMatchingPage.steps.verifyPleaseSetACorrectAnswerErrorMessage();
-        });
-
-        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', () => {
-            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInSetCorrectAnswerSection('Incorrect answer 1', 0);
-            listMatchingPage.steps.verifyGroupTitleInSetCorrectAnswerSection(0, 'Group 1')
-            listMatchingPage.steps.verifyEmptyGroupInSetCorrectAnswerSection(0);
-        });
-    });
-
-    describe('Click and drop cases for \'Grouped\' response options layout in \'Preview tab\'', () => {
-        abortEarlySetup();
-        before(() => {
-            cy.log('Navigate to List matching question type, give input to stem and grouped option input fields');
-            listMatchingPage.steps.navigateToCreateQuestion('list matching');
-            cy.barsPreLoaderWait();
-            listMatchingPage.steps.setQuestionStemsAndGroupedOptionsForScoringWithoutAlternateTab();
-            listMatchingPage.steps.switchToPreviewTab();
-        });
-
-        it('When the user has not selected any draggable option, the draggable options and response areas should be in inactive state', () => {
-            listMatchingPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab('List matching');
-            listMatchingPage.steps.verifyInactiveStateOfAllStemResponseAreasInPreviewTab();
-        });
-
-        it('CSS of inactive state of draggable options and response areas', { tags: 'css' }, () => {
-            listMatchingPage.previewTabDraggableOptionsWrapper()
-                .within(() => {
-                    listMatchingPage.draggableOption()
-                        .should('have.css', 'border', `1px solid ${css.color.figDefaultComponentBorder}`)
-                        .and('have.css', 'background-color', css.color.defaultBackground)
-                        .find('.drag-indicator-icon')
-                        .should('have.css', 'fill', css.color.activeButtons);
-                });
-            listMatchingPage.previewTabStemResponseArea()
-                .should('have.css', 'border', `2px dashed ${css.color.figDefaultComponentBorder}`);
-        });
-
-        it('Accessibility of inactive state of draggable options and response areas', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(listMatchingPage.previewTabDraggableOptionsWrapper().parents('.cloze-with-drag-and-drop-preview'));
-        });
-
-        it('When the user selects a draggable option, it should get in selected state and all the response areas should get in active state', () => {
-            listMatchingPage.steps.clickOnDraggableOptionInPreviewTab('List matching', 'Correct answer for stem 1');
-            cy.log('checking active state of selected draggable option')
-            listMatchingPage.steps.verifyActiveStateOfDraggableOptionInPreviewTab(0, 'List matching');
-            cy.log('checking default state of unselected draggable option(s)')
-            listMatchingPage.steps.verifyDefaultStateOfUnselectedDraggableOptionsInPreviewTab([1, 2, 3], 'List matching');
-            cy.log('checking active state of all response areas');
-            listMatchingPage.steps.verifyActiveStateOfAllStemResponseAreasInPreviewTab();
-        });
-
-        it('CSS of active state of draggable options and response areas', { tags: 'css' }, () => {
-            listMatchingPage.previewTabGroupedResponseOptionsGrid()
-                .within(() => {
-                    listMatchingPage.draggableOption()
-                        .eq(0)
-                        .should('have.css', 'border', `1px solid ${css.color.activeComponentBorder}`)
-                        .and('have.css', 'background-color', css.color.figActiveComponentBg)
-                        .find('.drag-indicator-icon')
-                        .should('have.css', 'fill', css.color.activeButtons);
-                });
-            listMatchingPage.previewTabStemResponseArea()
-                .should('have.css', 'border', `1px solid ${css.color.activeComponentBorder}`);
-        });
-
-        it('Accessibility of active state of draggable options and response areas', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(listMatchingPage.previewTabDraggableOptionsWrapper().parents('.cloze-with-drag-and-drop-preview'));
-        });
-
-        it('When the user deselects the draggable option, it should get in deselected state and the response areas should return to the inactive state', () => {
-            listMatchingPage.steps.clickOnDraggableOptionInPreviewTab('List matching', 'Correct answer for stem 1');
-            listMatchingPage.steps.verifyInactiveStateOfAllDraggableOptionsInPreviewTab('List matching');
-            cy.log('Checking default inactive state of response areas')
-            listMatchingPage.steps.verifyInactiveStateOfAllStemResponseAreasInPreviewTab();
-        });
-
-        it('When the user drops a draggable option in one of the response areas, the draggable option should get removed from the respective group of the response container, the response area should get filled with that option and the other response area should return to inactive state', () => {
-            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Correct answer for stem 1', 0);
-            listMatchingPage.steps.verifyFilledOptionResponseAreaInPreviewTab(0, 'Correct answer for stem 1');
-            listMatchingPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, ['Incorrect answer 1']);
-            listMatchingPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(1, ['Correct answer for stem 2', 'Incorrect answer 2']);
-            listMatchingPage.steps.verifyInactiveStateOfStemResponseAreaInPreviewTab(1);
-        });
-
-        it('When the user has dropped a draggable option inside a response area, drag handle should not be displayed in the response area', () => {
-            listMatchingPage.steps.verifyDragHandleNotVisibleInFilledResponseAreaInPreviewTab(0);
-        });
-
-        it('CSS of filled response area', { tags: 'css' }, () => {
-            listMatchingPage.previewTabStemResponseArea()
-                .eq(0)
-                .should('have.css', 'border', `1px solid ${css.color.figDefaultComponentBorder}`)
-                .find('.question-text-wrapper')
-                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
-        });
-
-        it('Accessibility of filled response area', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(listMatchingPage.previewTabDraggableOptionsWrapper().parents('.cloze-with-drag-and-drop-preview'));
-        });
-
-        it('When the response areas are partially filled and the user selects a draggable option, then only the empty response area should get in active state', () => {
-            listMatchingPage.steps.clickOnDraggableOptionInPreviewTab('List matching', 'Correct answer for stem 2');
-            listMatchingPage.steps.verifyInactiveStateOfFilledStemResponseAreaInPreviewTab(0);
-            listMatchingPage.steps.verifyActiveStateOfStemResponseAreaInPreviewTab(1);
-            cy.log('Post step: deselecting the draggable option')
-            listMatchingPage.steps.clickOnDraggableOptionInPreviewTab('List matching', 'Correct answer for stem 2');
-        });
-
-        it('When the user drops a draggable option on a filled response area, the existing draggable option should get removed from the response area, it should return in the respective group of the response container and the response area should get filled with the new draggable option', () => {
-            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Correct answer for stem 2', 0);
-            listMatchingPage.steps.verifyFilledOptionResponseAreaInPreviewTab(0, 'Correct answer for stem 2');
-            listMatchingPage.steps.verifyInactiveStateOfStemResponseAreaInPreviewTab(1);
-            listMatchingPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, ['Correct answer for stem 1', 'Incorrect answer 1']);
-            listMatchingPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(1, ['Incorrect answer 2']);
-        });
-
-        it('When the user selects a draggable option from the filled response area, the response container should get active for dropping the option, the filled response area should not get in active state and only the empty response area should get active', () => {
-            listMatchingPage.steps.clickOnResponseAreaInPreviewTab(0);
-            listMatchingPage.steps.verifyActiveStateOfDraggableOptionsContainerInPreviewTab('List matching');
-            listMatchingPage.steps.verifyInactiveStateOfFilledStemResponseAreaInPreviewTab(0);
-            listMatchingPage.steps.verifyActiveStateOfStemResponseAreaInPreviewTab(1);
-        });
-
-        it('CSS of draggable option from the filled response area in selected state', { tags: 'css' }, () => {
-            listMatchingPage.previewTabStemResponseArea()
-                .eq(0)
-                .should('have.css', 'border', `1px solid ${css.color.activeComponentBorder}`)
-                .and('have.css', 'background-color', css.color.figActiveComponentBg);
-        });
-
-        it('Accessibility of draggable option from the filled response area in selected state', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(listMatchingPage.previewTabDraggableOptionsWrapper('List matching').parents('.cloze-with-drag-and-drop-preview'));
-        });
-
-        it('When the user deselects a draggable option from the filled response area, the draggable option should return to the inactive state', () => {
-            listMatchingPage.steps.clickOnResponseAreaInPreviewTab(0);
-            listMatchingPage.steps.verifyInactiveStateOfFilledStemResponseAreaInPreviewTab(0);
-            listMatchingPage.steps.verifyInactiveStateOfStemResponseAreaInPreviewTab(1);
-        });
-
-        it('When the user selects a filled option and clicks in the response container, the selected draggable option should get removed from the response area and it should return in the respective group of the response container', () => {
-            listMatchingPage.steps.clickAndDropOptionFromResponseAreaToDraggableOptionsContainerInPreviewTab(0);
-            listMatchingPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, ['Correct answer for stem 1', 'Incorrect answer 1']);
-            listMatchingPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(1, ['Correct answer for stem 2', 'Incorrect answer 2']);
-        });
-
-        it('The user should be able to move a draggable option from one response area to another response area', () => {
-            cy.log('Pre step: Setting up an option in the response area')
-            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Correct answer for stem 1', 0);
-            listMatchingPage.steps.clickOnResponseAreaInPreviewTab(0);
-            listMatchingPage.steps.clickOnResponseAreaInPreviewTab(1);
-            listMatchingPage.steps.verifyFilledOptionResponseAreaInPreviewTab(1, 'Correct answer for stem 1');
-            listMatchingPage.steps.verifyInactiveStateOfStemResponseAreaInPreviewTab(0);
-        });
-
-        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', () => {
-            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Incorrect answer 1', 0);
-            listMatchingPage.steps.verifyGroupTitleInPreviewTab(0, 'Group 1');
-            listMatchingPage.steps.verifyEmptyGroupInPreviewTab(0);
-        });
-    });
-});