itemengine-cypress-automation 1.0.32 → 1.0.36

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

@@ -0,0 +1,207 @@
+import { listMatchingPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+
+const optionsForGroup2 = ['Response 5', 'Response 6'];
+let optionsForThreeResponses = ['Response 1', 'Response 2', 'Response 3'];
+let optionsForFourResponses = ['Response 1', 'Response 2', 'Response 3', 'Response 4'];
+
+describe('Create Item Page: List matching: Grouped response layout - Edit tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('\'Grouped\' response options layout - Edit tab section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to List Matching question type');
+            listMatchingPage.steps.navigateToCreateQuestion('list matching');
+            cy.barsPreLoaderWait();
+        });
+
+        listMatchingPage.tests.verifyGroupedOptionsContentAndFunctionality();
+    });
+
+    describe('\'Grouped\' response options layout - Set correct answer section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to List Matching question type');
+            listMatchingPage.steps.navigateToCreateQuestion('list matching');
+            cy.barsPreLoaderWait();
+            listMatchingPage.steps.selectResponseOptionsLayout('Grouped');
+        });
+
+        it('When the user has not entered text in the \'Group title\' input field then no group title should be displayed for the group in the response options container of the \'Set Correct Answer\' section', () => {
+            listMatchingPage.setCorrectAnswerSectionGroupedResponseTitle()
+                .should('not.exist');
+        });
+
+        it('When the user enters text in the \'Group title\' input field, a group title should be displayed for the group in the response options container of the \'Set Correct Answer\' section', () => {
+            listMatchingPage.steps.addGroupTitle(0, 'Group title A');
+            listMatchingPage.setCorrectAnswerSectionGroupedResponseTitle()
+                .should('have.text', 'Group title A');
+        });
+
+        it('When the user has not entered text in the options input field then three empty draggable options along with drag handles should be displayed as a group in the response options container of the \'Set Correct Answer\' section', () => {
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, ['', '', '']);
+            listMatchingPage.steps.verifyDragIconVisibleInOptionsInSetCorrectAnswerSection();
+        });
+
+        it('When the user enters text in options input fields then the entered text should be displayed in the respective draggable options in a group in the response options container of the \'Set Correct Answer\' section', () => {
+            listMatchingPage.steps.addInputToOptionsForDragAndDropFields(optionsForThreeResponses);
+            cy.wait(500);
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, optionsForThreeResponses);
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/541421
+        it('CSS of \'Grouped\' container in the \'Set Correct Answer\' section', { tags: 'css' }, () => {
+            listMatchingPage.setCorrectAnswerSectionGroupedResponseContainer()
+                .should('have.css', 'border', `1px solid ${css.color.defaultDropdownBorder}`);
+            listMatchingPage.draggableOption()
+                .should('have.css', 'border', `1px solid ${css.color.figDefaultComponentBorder}`)
+                .find('.question-text-wrapper')
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+            listMatchingPage.draggableOption()
+                .find('.drag-indicator-icon')
+                .should('have.css', 'fill', `${css.color.activeButtons}`);
+        });
+
+        it('Accessibility of \'Grouped\' container in the \'Set Correct Answer\' section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(listMatchingPage.setCorrectAnswerSectionGroupedResponseContainer());
+        });
+
+        it('When the user adds an option using \'Add Option\' button then the added option should be displayed along with drag handle inside the group in the response options container of the \'Set Correct Answer\' section', () => {
+            listMatchingPage.steps.addOption();
+            listMatchingPage.steps.verifyCountOfDraggableOptionsInSetCorrectAnswerSection('List matching', 4);
+            listMatchingPage.steps.verifyDefaultStateOfDraggableOptionsInSetCorrectAnswerSection('List matching', 3);
+            cy.log('Checking that input text to the newly added option is displayed in the response options container of the \'Set Correct Answer\' section')
+            listMatchingPage.steps.addInputToOptionForDragAndDropInputField(optionsForFourResponses[3], 3);
+            cy.wait(500);
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, optionsForFourResponses);
+        });
+
+        it('When the user deletes an option then the deleted option should get removed from the group in the response options container of the \'Set Correct Answer\' section', () => {
+            listMatchingPage.steps.deleteResponseOptionInputField(3);
+            cy.log('verifying the text of draggable options after deleting an option')
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, optionsForThreeResponses);
+        });
+
+        it('When the user adds a new group, the new group should be displayed in the response options container of the \'Set Correct Answer\' section', () => {
+            listMatchingPage.steps.addGroup();
+            listMatchingPage.steps.verifyCountOfGroupsInSetCorrectAnswerSection(2);
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(1, ['', '']);
+        });
+
+        it('When the user deletes a group, then the deleted group should get removed from the response options container as well as from the response areas (if any) of the \'Set Correct Answer\' section', () => {
+            cy.log('Pre step: Entering text into the text fields of group 2 response container')
+            listMatchingPage.steps.addInputToOptionsForGroupedResponseLayout(1, optionsForGroup2);
+            listMatchingPage.steps.addGroupTitle(1, 'Group title B');
+            cy.log('Setting a correct answer option')
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInSetCorrectAnswerSection('Response 2', 0);
+            cy.log('Deleting the 1st group')
+            listMatchingPage.steps.deleteGroup(0);
+            listMatchingPage.steps.verifyCountOfGroupsInSetCorrectAnswerSection(1);
+            listMatchingPage.steps.verifyErroredStateOfEmptyResponseFieldInSetCorrectAnswerSection(0);
+            cy.log('verifying the contents of group 2 after deleting group 1')
+            listMatchingPage.steps.verifyGroupedResponseOptionsInSetCorrectAnswerSection(0, 'Group title B', optionsForGroup2);
+        });
+    });
+
+    describe('\'Grouped\' response options layout - Preview tab contents', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to List Matching question type');
+            listMatchingPage.steps.navigateToCreateQuestion('list matching');
+            cy.barsPreLoaderWait();
+            listMatchingPage.steps.selectResponseOptionsLayout('Grouped');
+            listMatchingPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has not entered text in the \'Group title\' input field then no group title should be displayed for the group in the response options container of the \'Preview tab\'', () => {
+            listMatchingPage.previewTabGroupedResponseTitle()
+                .should('not.exist');
+        });
+
+        it('When the user enters text in the \'Group title\' input field, a group title should be displayed for the group in the response options container of the \'Preview tab\'', () => {
+            cy.log('Pre step: Switching to edit tab')
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.addGroupTitle(0, 'Group title A');
+            listMatchingPage.steps.switchToPreviewTab();
+            listMatchingPage.previewTabGroupedResponseTitle()
+                .should('have.text', 'Group title A');
+        });
+
+        it('When the user has not entered text in the options input field then three empty draggable options along with drag handles should be displayed as a group in the response options container of the \'Preview tab\'', () => {
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, ['', '', '']);
+        });
+
+        it('When the user enters text in options input fields then the entered text should be displayed in the respective draggable options in the response options container of the \'Preview tab\'', () => {
+            cy.log('Pre step: Switching to edit tab')
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.addInputToOptionsForDragAndDropFields(optionsForThreeResponses);
+            listMatchingPage.steps.switchToPreviewTab();
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, optionsForThreeResponses);
+        });
+
+        it('CSS of \'Grouped\' container in the response options container of the \'Preview tab\'', { tags: 'css' }, () => {
+            listMatchingPage.previewTabGroupedResponseContainer()
+                .should('have.css', 'border', `1px solid ${css.color.defaultDropdownBorder}`)
+                .within(() => {
+                    listMatchingPage.draggableOption()
+                        .should('have.css', 'border', `1px solid ${css.color.figDefaultComponentBorder}`)
+                        .find('.drag-indicator-icon')
+                        .should('have.css', 'fill', `${css.color.activeButtons}`);
+                });
+        });
+
+        it('Accessibility of \'Grouped\' container in the response options container of the \'Preview tab\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(listMatchingPage.previewTabGroupedResponseContainer());
+        });
+
+        it('When the user adds an option using \'Add Option\' button then the added option should be displayed inside the group in the response options container of the \'Preview tab\'', () => {
+            cy.log('Pre step: Switching to edit tab')
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.addOption();
+            listMatchingPage.steps.switchToPreviewTab();
+            listMatchingPage.steps.verifyCountOfDraggableOptionsInPreviewTab('List matching', 4);
+            listMatchingPage.steps.verifyDefaultStateOfDraggableOptionsInPreviewTab('List matching', 3);
+            cy.log('Checking that input text to the newly added option is displayed in the option in Preview tab section')
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.addInputToOptionForDragAndDropInputField(optionsForFourResponses[3], 3);
+            listMatchingPage.steps.switchToPreviewTab();
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, optionsForFourResponses);
+        });
+
+        it('When the user deletes an option then the deleted option should get removed from the group in the response options container of the \'Preview tab\'', () => {
+            cy.log('Pre step: Switching to edit tab')
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.deleteResponseOptionInputField(3);
+            cy.log('Checking the deleted option should not exist in the Preview tab')
+            listMatchingPage.steps.switchToPreviewTab();
+            cy.log('verifying the text of draggable options after deleting an option')
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, optionsForThreeResponses);
+        });
+
+        it('When the user adds a new group, the new group should be displayed in the response options container of the \'Preview tab\'', () => {
+            cy.log('Pre step: Switching to edit tab')
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.addGroup();
+            listMatchingPage.steps.switchToPreviewTab();
+            listMatchingPage.steps.verifyCountOfGroupsInPreviewTab(2);
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(1, ['', '']);
+        });
+
+        it('When the user deletes a group, it should get removed from response options container of the \'Preview tab\'', () => {
+            cy.log('Pre step: Switching to edit tab')
+            listMatchingPage.steps.switchToEditTab();
+            cy.log('Pre step: Entering text into the text fields of group 2 response container')
+            listMatchingPage.steps.addInputToOptionsForGroupedResponseLayout(1, optionsForGroup2)
+            listMatchingPage.steps.addGroupTitle(1, 'Group title B');
+            listMatchingPage.steps.deleteGroup(0);
+            listMatchingPage.steps.switchToPreviewTab();
+            listMatchingPage.steps.verifyCountOfGroupsInPreviewTab(1);
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, optionsForGroup2);
+            listMatchingPage.steps.verifyGroupTitleInPreviewTab(0, 'Group title B');
+        });
+    });
+})

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

@@ -0,0 +1,139 @@
+import { listMatchingPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+
+let stems = ['Stem 1', 'Stem 2', 'Stem 3', 'Stem 4'];
+let optionsForResponses = [
+    ['Response 1', 'Response 2', 'Response 3', 'Response 4'],
+    ['Response 5', 'Response 6', 'Response 7', 'Response 8'],
+    ['Response 9', 'Response 10', 'Response 11', 'Response 12'],
+    ['Response 13', 'Response 14', 'Response 15', 'Response 16']
+];
+let groupTitles = ['Group title A', 'Group title B', 'Group title C', 'Group title D'];
+
+describe('Create Item page - List Matching: Randomize options, Reuse options, Hide drag handle functionalities for \'Grouped\' response option layout in edit tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Randomize options - Functionality : Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to List Matching question type');
+            listMatchingPage.steps.navigateToCreateQuestion('list matching');
+            cy.barsPreLoaderWait();
+            listMatchingPage.steps.addInputToAllStemFields(['Stem 1', 'Stem 2', 'Stem 3']);
+            listMatchingPage.steps.addStem();
+            listMatchingPage.steps.addInputToStemField(3, stems[3]);
+            listMatchingPage.steps.selectResponseOptionsLayout('Grouped');
+            listMatchingPage.steps.addOptionInGroupedResponseLayout(0);
+            listMatchingPage.steps.addGroupTitle(0, groupTitles[0]);
+            listMatchingPage.steps.addInputToOptionsForGroupedResponseLayout(0, optionsForResponses[0]);
+            listMatchingPage.steps.addGroupWithTitleAndOptionsInResponseOptionsSection(1, groupTitles[1], optionsForResponses[1]);
+            listMatchingPage.steps.addGroupWithTitleAndOptionsInResponseOptionsSection(2, groupTitles[2], optionsForResponses[2]);
+            listMatchingPage.steps.addGroupWithTitleAndOptionsInResponseOptionsSection(3, groupTitles[3], optionsForResponses[3]);
+        });
+
+        it('When the \'Randomize options\' functionality is disabled, the grouped draggable options in the option container should be displayed in the order in which the user has set them in the \'Options for drag & drop\' section', () => {
+            optionsForResponses.forEach((options, index) => {
+                listMatchingPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(index, options);
+            });
+        });
+
+        it('When the \'Randomize options\' functionality is disabled, the stem fields in the set correct answer section should be displayed in the order in which the user has set them in the Stems section', () => {
+            listMatchingPage.steps.verifyStemFieldsInSetCorrectAnswerSection(stems);
+        });
+
+        it('When the user enables the \'Randomize options\' functionality, then the draggable options in the response container should be in the order in which the user has set them in the \'Options for drag & drop\' section', () => {
+            listMatchingPage.steps.checkRandomizeOptionsCheckbox();
+            optionsForResponses.forEach((options, index) => {
+                listMatchingPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(index, options);
+            });
+            groupTitles.forEach((groupTitle, groupIndex) => {
+                listMatchingPage.steps.verifyGroupTitleInSetCorrectAnswerSection(groupIndex, groupTitle);
+            });
+        });
+
+        it('When the user enables the \'Randomize options\' functionality, then the stem fields in the set correct answer section should be in the order in which the user has set them in the Stems section', () => {
+            listMatchingPage.steps.verifyStemFieldsInSetCorrectAnswerSection(stems);
+        });
+
+        listMatchingPage.tests.verifyCSSAndA11yOfCheckedStateOfRandomizeOptionsCheckbox();
+    });
+
+    describe('Reuse options - Functionality : Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            listMatchingPage.steps.navigateToCreateQuestion('list matching');
+            cy.barsPreLoaderWait();
+            listMatchingPage.steps.selectResponseOptionsLayout('Grouped');
+            listMatchingPage.steps.deleteResponseOptionInputField(0);
+            listMatchingPage.steps.addInputToOptionsForGroupedResponseLayout(0, ['Response 1', 'Response 2']);
+            listMatchingPage.steps.addGroup();
+            listMatchingPage.steps.addInputToOptionsForGroupedResponseLayout(1, ['Response 3', 'Response 4']);
+        });
+
+        it('When the \'Reuse options\' functionality is disabled, then on setting correct answer in the response area, the draggable options should get removed from the respective group container', () => {
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInSetCorrectAnswerSection('Response 1', 0);
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, ['Response 2']);
+        });
+
+        it('When the user enables the \'Reuse options\' functionality, then on setting correct answer in the response area, the draggable options should persist in the respective group container', () => {
+            cy.log('Pre step: Removing the set correct answer option from the response area')
+            listMatchingPage.steps.clickAndDropOptionFromResponseAreaToDraggableOptionsContainerInSetCorrectAnswerSection(0);
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, ['Response 1', 'Response 2']);
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(1, ['Response 3', 'Response 4']);
+            cy.log('Checking the reuse option checkbox and setting the correct answer option')
+            listMatchingPage.steps.checkReuseOptionsCheckbox();
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInSetCorrectAnswerSection('Response 1', 0);
+            listMatchingPage.steps.verifyFilledResponseAreaInSetCorrectAnswerSection(0, 'Response 1');
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, ['Response 1', 'Response 2']);
+        });
+
+        listMatchingPage.tests.verifyCSSAndA11yOfCheckedStateOfReuseOptionsCheckbox();
+
+        it('The user should be able to use the same draggable option for multiple response areas', () => {
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInSetCorrectAnswerSection('Response 1', 1);
+            listMatchingPage.steps.verifyFilledResponseAreaInSetCorrectAnswerSection(0, 'Response 1');
+            listMatchingPage.steps.verifyFilledResponseAreaInSetCorrectAnswerSection(1, 'Response 1');
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, ['Response 1', 'Response 2']);
+        });
+
+        it('When the user removes the option from the response area and moves it into the grouped options container, only one option should be displayed in the respective group', () => {
+            listMatchingPage.steps.clickAndDropOptionFromResponseAreaToDraggableOptionsContainerInSetCorrectAnswerSection(0);
+            listMatchingPage.steps.clickAndDropOptionFromResponseAreaToDraggableOptionsContainerInSetCorrectAnswerSection(1);
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, ['Response 1', 'Response 2']);
+        });
+
+        it('When the user disables the \'Reuse options\' functionality, the duplicate answer set as correct answer should get removed from the response area and the draggable option should also not exist in the respective group container of the \'Set correct answer\' section', () => {
+            cy.log('PRe-step: Setting the same draggable option for multiple response areas');
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInSetCorrectAnswerSection('Response 1', 0);
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInSetCorrectAnswerSection('Response 1', 1);
+            listMatchingPage.steps.uncheckReuseOptionsCheckbox();
+            listMatchingPage.steps.verifyFilledResponseAreaInSetCorrectAnswerSection(0, 'Response 1');
+            listMatchingPage.steps.verifyEmptyResponseAreaInSetCorrectAnswerSection(1);
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, ['Response 2']);
+        });
+    });
+
+    describe('Hide drag handle - Functionality: Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to List Matching question type');
+            listMatchingPage.steps.navigateToCreateQuestion('list matching');
+            cy.barsPreLoaderWait();
+            listMatchingPage.steps.selectResponseOptionsLayout('Grouped');
+        });
+
+        it('When the \'Hide drag handle\' functionality is disabled, then the draggable options displayed in response container of the \'Set correct answer\' section should have a drag handle', () => {
+            listMatchingPage.steps.verifyDragIconVisibleInOptionsInSetCorrectAnswerSection()
+        });
+
+        it('When the user enables the \'Hide drag handle\' functionality, then the draggable options displayed in response container of the \'Set correct answer\' section should not have a drag handle', () => {
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.checkHideDragHandleCheckbox();
+            listMatchingPage.steps.verifyDragIconNotVisibleInOptionsInSetCorrectAnswerSection();
+        });
+
+        listMatchingPage.tests.verifyCSSAndA11yOfCheckedStateOfHideDragHandleCheckbox();
+    });
+});

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

@@ -0,0 +1,227 @@
+import { listMatchingPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+
+let stems = ['Stem 1', 'Stem 2', 'Stem 3', 'Stem 4'];
+let optionsForResponses = [
+    ['Response 1', 'Response 2', 'Response 3', 'Response 4'],
+    ['Response 5', 'Response 6', 'Response 7', 'Response 8'],
+    ['Response 9', 'Response 10', 'Response 11', 'Response 12'],
+    ['Response 13', 'Response 14', 'Response 15', 'Response 16']
+];
+let groupTitles = ['Group title A', 'Group title B', 'Group title C', 'Group title D'];
+
+describe('Create Item page - List Matching: Randomize options, Reuse options, Hide drag handle functionalities for \'Grouped\' response option layout in preview tab', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Randomize options - Functionality : Preview tab', () => {
+        let optionsArray = [];
+        let stemsArray = [];
+        let groupTitleArray = [];
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to List Matching question type');
+            listMatchingPage.steps.navigateToCreateQuestion('list matching');
+            cy.barsPreLoaderWait();
+            listMatchingPage.steps.addInputToAllStemFields(['Stem 1', 'Stem 2', 'Stem 3']);
+            listMatchingPage.steps.addStem();
+            listMatchingPage.steps.addInputToStemField(3, stems[3]);
+            listMatchingPage.steps.selectResponseOptionsLayout('Grouped');
+            listMatchingPage.steps.addOptionInGroupedResponseLayout(0);
+            listMatchingPage.steps.addGroupTitle(0, groupTitles[0]);
+            listMatchingPage.steps.addInputToOptionsForGroupedResponseLayout(0, optionsForResponses[0]);
+            listMatchingPage.steps.addGroupWithTitleAndOptionsInResponseOptionsSection(1, groupTitles[1], optionsForResponses[1]);
+            listMatchingPage.steps.addGroupWithTitleAndOptionsInResponseOptionsSection(2, groupTitles[2], optionsForResponses[2]);
+            listMatchingPage.steps.addGroupWithTitleAndOptionsInResponseOptionsSection(3, groupTitles[3], optionsForResponses[3]);
+            listMatchingPage.steps.switchToPreviewTab();
+        });
+
+        it('When the \'Randomize options\' functionality is disabled, then the grouped draggable options in the option  container should be displayed in the order in which the user has set them in the \'Options for drag & drop\' section', () => {
+            optionsForResponses.forEach((options, index) => {
+                listMatchingPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(index, options);
+            });
+            groupTitles.forEach((groupTitle, groupIndex) => {
+                listMatchingPage.steps.verifyGroupTitleInPreviewTab(groupIndex, groupTitle);
+            });
+        });
+
+        it('When the \'Randomize options\' functionality is disabled, the stem fields should be displayed in the order in which the user has set them in the Stems section', () => {
+            listMatchingPage.steps.verifyStemFieldsInPreviewTab(stems);
+        });
+
+        it('When the user enables the \'Randomize options\' functionality, then the groups as well as the draggable options inside the groups should be displayed in a random order', () => {
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.checkRandomizeOptionsCheckbox();
+            cy.log('Added wait here to prevent cypress from switching to preview tab just after checking randomize options checkbox');
+            cy.wait(1000);
+            listMatchingPage.steps.switchToPreviewTab();
+            listMatchingPage.steps.verifyRandomizationOfGroupsInPreviewTab(groupTitles);
+            for (let groupIndex = 0; groupIndex < groupTitles.length; groupIndex++) {
+                listMatchingPage.steps.verifyRandomizeOptionOrderInGroup(groupTitles[groupIndex], optionsForResponses[groupIndex]);
+            };
+            optionsArray = listMatchingPage.steps.getOptionsArray('List Matching');
+            groupTitleArray = listMatchingPage.steps.getGroupTitleArray();
+        });
+
+        it('When the user enables the \'Randomize options\' functionality, then the stem fields should be displayed in a random order', () => {
+            listMatchingPage.steps.verifyRandomizedStemsOrder(stems);
+            stemsArray = listMatchingPage.steps.getStemsArray();
+        });
+
+        it('When the user switches to \'Edit tab\' and does not modify any question properties, then the order of the draggable options should not change in the response container', () => {
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.switchToPreviewTab();
+            listMatchingPage.steps.verifyOptionsInPreviewTab(optionsArray);
+        });
+
+        it('When the user switches to \'Edit tab\' and does not modify any question properties, then the order of the stem fields should not change in the response container', () => {
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.switchToPreviewTab();
+            listMatchingPage.steps.verifyStemFieldsInPreviewTab(stemsArray);
+        });
+
+        it('When the user switches to \'Edit tab\' and modifies any of question properties, then the order of the draggable options should change in the response container', () => {
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.allotPoints(5);
+            cy.log('Added wait here to prevent cypress from switching to preview tab just after modifying the question');
+            cy.wait(1000);
+            listMatchingPage.steps.switchToPreviewTab();
+            for (let groupIndex = 0; groupIndex < groupTitles.length; groupIndex++) {
+                listMatchingPage.steps.verifyRandomizeOptionOrderInGroup(groupTitles[groupIndex], optionsForResponses[groupIndex]);
+            };
+            listMatchingPage.steps.verifyRerandomizedOptionsOrder(optionsArray, 'List matching');
+            listMatchingPage.steps.verifyRerandomizedGroupOrder(groupTitleArray);
+        });
+
+        it('When the user switches to \'Edit tab\' and modifies any of question properties, then the order of the stem fields should change in the response container', () => {
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.selectPartialEqualWeightsCheckbox();
+            cy.log('Added wait here to prevent cypress from switching to preview tab just after modifying the question');
+            cy.wait(1000);
+            listMatchingPage.steps.switchToPreviewTab();
+            listMatchingPage.steps.verifyRandomizedStemsOrder(stems);
+            listMatchingPage.steps.verifyRerandomizedStemsOrder(stemsArray);
+        });
+
+        it('When the user disables the \'Randomize options\' functionality, then the draggable options in the response container should be displayed in the order in which the user has set them in the \'Options for drag & drop\' section', () => {
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.uncheckRandomizeOptionsCheckbox();
+            listMatchingPage.steps.switchToPreviewTab();
+            optionsForResponses.forEach((options, index) => {
+                listMatchingPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(index, options);
+            });
+            groupTitles.forEach((groupTitle, groupIndex) => {
+                listMatchingPage.steps.verifyGroupTitleInPreviewTab(groupIndex, groupTitle);
+            });
+        });
+
+        it('When the user has disabled the \'Randomize options\' functionality, then the stem fields should be displayed in the order in which the user has set them in the set correct answer section', () => {
+            listMatchingPage.steps.verifyStemFieldsInPreviewTab(stems)
+        });
+    });
+
+    describe('Reuse options - Functionality: Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to List Matching question type');
+            listMatchingPage.steps.navigateToCreateQuestion('list matching');
+            cy.barsPreLoaderWait();
+            listMatchingPage.steps.selectResponseOptionsLayout('Grouped');
+            listMatchingPage.steps.deleteResponseOptionInputField(0);
+            listMatchingPage.steps.addInputToOptionsForGroupedResponseLayout(0, ['Response 1', 'Response 2']);
+            listMatchingPage.steps.addGroup();
+            listMatchingPage.steps.addInputToOptionsForGroupedResponseLayout(1, ['Response 3', 'Response 4']);
+        });
+
+        it('When the \'Reuse options\' functionality is disabled, then on attempting the question, the draggable options should get removed from the respective group container', () => {
+            listMatchingPage.steps.switchToPreviewTab();
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Response 1', 0);
+            listMatchingPage.steps.verifyFilledOptionResponseAreaInPreviewTab(0, 'Response 1')
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, ['Response 2']);
+        });
+
+        it('When the \'Reuse options\' functionality is enabled, then on attempting the question, the draggable options should persist in the respective group container', () => {
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.checkReuseOptionsCheckbox();
+            listMatchingPage.steps.switchToPreviewTab();
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Response 1', 0);
+            listMatchingPage.steps.verifyFilledOptionResponseAreaInPreviewTab(0, 'Response 1');
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, ['Response 1', 'Response 2']);
+        });
+
+        it('The user should be able to use the same draggable option for multiple response areas', () => {
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Response 1', 0);
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Response 1', 1);
+            listMatchingPage.steps.verifyFilledOptionResponseAreaInPreviewTab(0, 'Response 1');
+            listMatchingPage.steps.verifyFilledOptionResponseAreaInPreviewTab(1, 'Response 1');
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, ['Response 1', 'Response 2']);
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(1, ['Response 3', 'Response 4']);
+        });
+
+        it('When the user removes the option from the response area and moves it into the grouped options container, only one option should be displayed in the respective group', () => {
+            listMatchingPage.steps.clickAndDropOptionFromResponseAreaToDraggableOptionsContainerInPreviewTab(0);
+            listMatchingPage.steps.clickAndDropOptionFromResponseAreaToDraggableOptionsContainerInPreviewTab(1);
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, ['Response 1', 'Response 2']);
+        });
+
+        it('When the user disables the \'Reuse options\' functionality, then on attempting the question, the draggable options should get removed from the response container', () => {
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.uncheckReuseOptionsCheckbox();
+            listMatchingPage.steps.switchToPreviewTab();
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Response 1', 0);
+            listMatchingPage.steps.verifyFilledOptionResponseAreaInPreviewTab(0, 'Response 1');
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, ['Response 2']);
+        });
+    });
+
+    describe('Reuse options - Scoring', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to List Matching question type');
+            listMatchingPage.steps.navigateToCreateQuestion('list matching');
+            cy.barsPreLoaderWait();
+            listMatchingPage.steps.selectResponseOptionsLayout('Grouped');
+            listMatchingPage.steps.deleteResponseOptionInputField(0);
+            listMatchingPage.steps.addInputToOptionsForGroupedResponseLayout(0, ['Response 1', 'Response 2']);
+            listMatchingPage.steps.addGroup();
+            listMatchingPage.steps.addInputToOptionsForGroupedResponseLayout(1, ['Response 3', 'Response 4']);
+            listMatchingPage.steps.allotPoints(5);
+            listMatchingPage.steps.checkReuseOptionsCheckbox();
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInSetCorrectAnswerSection('Response 1', 0);
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInSetCorrectAnswerSection('Response 1', 1);
+            listMatchingPage.steps.switchToPreviewTab();
+        });
+
+        it('When the user has set same answer options in the \'Set correct answer\' section, then the user should be awarded full points on attempting the question with reused options', () => {
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Response 1', 0);
+            listMatchingPage.steps.clickAndDropOptionInStemResponseAreaInPreviewTab('Response 1', 1);
+            listMatchingPage.previewScoreText()
+                .verifyInnerText('5/5');
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, ['Response 1', 'Response 2']);
+            listMatchingPage.steps.verifyGroupedResponseContainerContentsInPreviewTab(1, ['Response 3', 'Response 4']);
+        });
+    });
+
+    describe('Hide drag handle - Functionality: Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            cy.log('Navigating to List Matching question type');
+            listMatchingPage.steps.navigateToCreateQuestion('list matching');
+            cy.barsPreLoaderWait();
+            listMatchingPage.steps.selectResponseOptionsLayout('Grouped');
+        });
+
+        it('When the \'Hide drag handle\' functionality is disabled, then the draggable options displayed in response container of the preview tab should have a drag handle', () => {
+            listMatchingPage.steps.switchToPreviewTab();
+            listMatchingPage.steps.verifyDragIconVisibleInOptionsInPreviewTab();
+        });
+
+        it('When the \'Hide drag handle\' functionality is enabled, then the draggable options displayed in response container of the preview tab should not have a drag handle', () => {
+            listMatchingPage.steps.switchToEditTab();
+            listMatchingPage.steps.checkHideDragHandleCheckbox();
+            listMatchingPage.steps.switchToPreviewTab();
+            listMatchingPage.steps.verifyDragIconNotVisibleInOptionsInPreviewTab();
+        });
+    });
+});