itemengine-cypress-automation 1.0.2

package/cypress/pages/components/draggableOptionsContainer.js

@@ -0,0 +1,857 @@
+import { createQuestionBasePage } from "./createQuestionBasePage"
+import { dragAndDropResponseOptions } from "./dragAndDropResponseOptions"
+import { optionsWrapperComponent } from "./optionsWrapperComponent"
+const css = Cypress.env('css');
+let optionsForResponses = ['Response 1', 'Response 2'];
+let optionsForThreeResponses = ['Response 1', 'Response 2', 'Response 3'];
+let responseForGroup2 = ['Response 3', 'Response 4'];
+
+const selectors = {
+    draggableOption: () => cy.get('[class*="DraggableItems"][class*="style__ItemWrapper"]'),
+    draggableOptionDragIcon: () => cy.get('.drag-indicator-icon'),
+    setCorrectAnswerSectionGroupedResponseTitle: () => cy.get('[class*="GroupTitleWrapper"]'),
+    setCorrectAnswerSectionGroupedResponseContainer: () => cy.get('[class*="GroupDiv"]'),
+    //TODO: will need to update all these conditional selectors once, common selectors are implemented across  all drag and drop question types
+    setCorrectAnswerDraggableOptionsWrapper: (questionType) => {
+        if (questionType === 'drag and drop into categories') {
+            return cy.get('.option-drag-and-drop')
+        } else {
+            return cy.get('.draggable-wrapper')
+        }
+    },
+    previewTabDraggableOptionsWrapper: (questionType) => {
+        if (questionType === 'drag and drop into categories') {
+            return cy.get('.edit-question-preview-wrapper .option-drag-and-drop')
+        } else {
+            return cy.get('.edit-question-preview-wrapper .draggable-wrapper')
+        }
+    },
+    previewTabGroupedResponseContainer: () => cy.get('.edit-question-preview-wrapper [class*="GroupDiv"]'),
+    previewTabGroupedResponseTitle: () => cy.get('.edit-question-preview-wrapper [class*="GroupTitleWrapper"]'),
+    previewTabGroupedResponseOptionsGrid: () => cy.get('.edit-question-preview-wrapper [class*="DraggableGroupsGrid"]')
+}
+
+const steps = {
+    verifyDraggableOptionContentsInPreviewTab: (questionType) => {
+        draggableOptionsContainer.previewTabDraggableOptionsWrapper(questionType)
+            .each(($element) => {
+                cy.wrap($element)
+                    .within(() => {
+                        draggableOptionsContainer.draggableOption()
+                            .should('have.text', '');
+                        draggableOptionsContainer.draggableOptionDragIcon()
+                            .should('be.visible');
+                    });
+            });
+    },
+
+    verifyDefaultStateOfDraggableOptionsInSetCorrectAnswerSection: (questionType, optionIndex) => {
+        draggableOptionsContainer.setCorrectAnswerDraggableOptionsWrapper(questionType)
+            .within(() => {
+                draggableOptionsContainer.draggableOption()
+                    .eq(optionIndex)
+                    .should('have.text', '');
+                draggableOptionsContainer.draggableOptionDragIcon()
+                    .should('be.visible');
+            });
+    },
+
+    verifyDefaultStateOfDraggableOptionsInPreviewTab: (questionType, optionIndex) => {
+        draggableOptionsContainer.previewTabDraggableOptionsWrapper(questionType)
+            .within(() => {
+                draggableOptionsContainer.draggableOption()
+                    .eq(optionIndex)
+                    .should('have.text', '');
+                draggableOptionsContainer.draggableOptionDragIcon()
+                    .should('be.visible');
+            });
+    },
+
+    verifyCountOfDraggableOptionsInSetCorrectAnswerSection: (questionType, count) => {
+        draggableOptionsContainer.setCorrectAnswerDraggableOptionsWrapper(questionType)
+            .within(() => {
+                draggableOptionsContainer.draggableOption()
+                    .should('have.length', count);
+            });
+    },
+
+    verifyCountOfDraggableOptionsInPreviewTab: (questionType, count) => {
+        draggableOptionsContainer.previewTabDraggableOptionsWrapper(questionType)
+            .within(() => {
+                draggableOptionsContainer.draggableOption()
+                    .should('have.length', count);
+            });
+    },
+
+    verifyDraggableResponsesSetCorrectAnswer: (questionType, draggableOptionsArray) => {
+        draggableOptionsContainer.setCorrectAnswerDraggableOptionsWrapper(questionType)
+            .within(() => {
+                draggableOptionsArray.forEach((draggableOption, optionIndex) => {
+                    draggableOptionsContainer.draggableOption()
+                        .eq(optionIndex)
+                        .should('have.text', draggableOption);
+                });
+                draggableOptionsContainer.draggableOption()
+                    .should('have.length', draggableOptionsArray.length);
+            });
+    },
+
+    verifyDraggableResponsesPreviewTab: (questionType, draggableOptionsArray) => {
+        draggableOptionsContainer.previewTabDraggableOptionsWrapper(questionType)
+            .within(() => {
+                draggableOptionsArray.forEach((draggableOption, optionIndex) => {
+                    draggableOptionsContainer.draggableOption()
+                        .eq(optionIndex)
+                        .should('have.text', draggableOption);
+                });
+                draggableOptionsContainer.draggableOption()
+                    .should('have.length', draggableOptionsArray.length);
+            });
+    },
+
+    verifyGroupedResponseContainerContentsInPreviewTab: (groupIndex, draggableOptionsArray) => {
+        draggableOptionsContainer.previewTabGroupedResponseContainer()
+            .eq(groupIndex)
+            .should('be.visible')
+            .within(() => {
+                draggableOptionsArray.forEach((draggableOption, optionIndex) => {
+                    draggableOptionsContainer.draggableOption()
+                        .eq(optionIndex)
+                        .should('have.text', draggableOption)
+                        .and('be.visible');
+                });
+                draggableOptionsContainer.draggableOption()
+                    .should('have.length', draggableOptionsArray.length);
+            });
+    },
+
+    verifyGroupedResponseContainerContentsInSetCorrectAnswerSection: (groupIndex, draggableOptionsArray) => {
+        draggableOptionsContainer.setCorrectAnswerSectionGroupedResponseContainer()
+            .eq(groupIndex)
+            .should('be.visible')
+            .within(() => {
+                draggableOptionsContainer.draggableOption()
+                    .should('have.length', draggableOptionsArray.length);
+                draggableOptionsArray.forEach((draggableOption, optionIndex) => {
+                    draggableOptionsContainer.draggableOption()
+                        .eq(optionIndex)
+                        .should('have.text', draggableOption)
+                        .and('be.visible');
+                });
+            });
+    },
+
+    verifyCountOfGroupsInSetCorrectAnswerSection: (count) => {
+        draggableOptionsContainer.setCorrectAnswerSectionGroupedResponseContainer()
+            .should('have.length', count);
+    },
+
+    /**
+    * @param {number} count
+    * @description Verify the count of option groups displayed in preview tab
+    */
+    verifyCountOfGroupsInPreviewTab: (count) => {
+        draggableOptionsContainer.previewTabGroupedResponseContainer()
+            .should('have.length', count);
+    },
+
+    //V3 this functions needs to be updated in all files
+    /**
+    * @param {number[]} optionArray Array of options set in set correct answer section
+    * @param {string} questionType Name of the question type
+    * @description Verify that options are randomized in preview tab
+    */
+    verifyRandomizeOptionOrder: (optionArray, questionType) => {
+        let currentOptions = [...optionArray]
+        draggableOptionsContainer.previewTabDraggableOptionsWrapper(questionType)
+            .within(() => {
+                for (let index = 0; index < currentOptions.length; index++) {
+                    draggableOptionsContainer.draggableOption()
+                        .eq(index)
+                        .then(($element) => {
+                            expect($element.text()).to.be.oneOf(currentOptions);
+                            currentOptions = currentOptions.filter((value) => value !== $element.text())
+                        });
+                };
+            });
+        draggableOptionsContainer.steps.verifyRerandomizedOptionsOrder(optionArray, questionType);
+    },
+
+    /**
+    * @param {string[]} previousOrderOfOptions Array of options displayed in preview tab
+    * @param {string} questionType Name of the question type
+    * @description Verify that options are re-randomized in preview tab for standard options layout
+    */
+    verifyRerandomizedOptionsOrder: (previousOrderOfOptions, questionType) => {
+        draggableOptionsContainer.previewTabDraggableOptionsWrapper(questionType)
+            .within(() => {
+                draggableOptionsContainer.draggableOption()
+                    .should('not.have.text', '')
+                    .and('not.have.text', previousOrderOfOptions.join(''));
+            });
+    },
+
+    verifyRerandomizedGroupOrder: (previousOrderOfGroups) => {
+        draggableOptionsContainer.previewTabGroupedResponseTitle()
+            .should('not.have.text', '')
+            .and('not.have.text', previousOrderOfGroups.join(''));
+    },
+
+    /**
+    * @param {string} questionType Name of the question type
+    * @description Get options array of the options displayed in preview tab
+    */
+    getOptionsArray: (questionType) => {
+        const optionsArray = [];
+        draggableOptionsContainer.previewTabDraggableOptionsWrapper(questionType)
+            .within(() => {
+                draggableOptionsContainer.draggableOption()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .invoke('text')
+                            .then((text) => {
+                                optionsArray.push(text);
+                            });
+                    });
+            });
+        return optionsArray;
+    },
+
+    getGroupTitleArray: () => {
+        const groupTitleArray = [];
+        draggableOptionsContainer.previewTabGroupedResponseTitle()
+            .each(($el) => {
+                cy.wrap($el)
+                    .invoke('text')
+                    .then((text) => {
+                        groupTitleArray.push(text);
+                    });
+            });
+        return groupTitleArray;
+    },
+
+    /**
+     * @param {string} questionType question type
+     * @param {string[]} groupTitlesArray array of group titles
+     * @description verify randomization of grouped options in preview tab
+     */
+    verifyRandomizationOfGroupsInPreviewTab: (groupTitlesArray) => {
+        let groupTitles = [...groupTitlesArray];
+        for (let index = 0; index < groupTitles.length; index++) {
+            draggableOptionsContainer.previewTabGroupedResponseTitle()
+                .eq(index)
+                .then(($element) => {
+                    expect($element.text()).to.be.oneOf(groupTitles);
+                    groupTitles = groupTitles.filter((value) => value !== $element.text())
+                });
+        };
+        draggableOptionsContainer.previewTabGroupedResponseTitle()
+            .then((newElements) => {
+                const newOrder = Array.from(newElements).map((element) => element.textContent);
+                expect(newOrder).to.not.deep.equal(groupTitlesArray);
+            });
+    },
+
+    verifyRandomizeOptionOrderInGroup: (groupTitle, optionArray) => {
+        let currentOptions = [...optionArray];
+        draggableOptionsContainer.previewTabGroupedResponseContainer()
+            .contains(groupTitle)
+            .parents('.edit-question-preview-wrapper [class*="GroupDiv"]')
+            .within(() => {
+                for (let index = 0; index < currentOptions.length; index++) {
+                    draggableOptionsContainer.draggableOption()
+                        .eq(index)
+                        .then(($element) => {
+                            expect($element.text()).to.be.oneOf(currentOptions);
+                            currentOptions = currentOptions.filter((value) => value !== $element.text())
+                        });
+                };
+                draggableOptionsContainer.draggableOption()
+                    .then((newElements) => {
+                        const newOrder = Array.from(newElements).map((element) => element.textContent);
+                        expect(newOrder).to.not.deep.equal(optionArray);
+                    });
+            });
+    },
+
+    verifyDragIconVisibleInOptionsInSetCorrectAnswerSection: (questionType) => {
+        draggableOptionsContainer.setCorrectAnswerDraggableOptionsWrapper(questionType)
+            .within(() => {
+                draggableOptionsContainer.draggableOption()
+                    .each($element => {
+                        cy.wrap($element)
+                            .within(() => {
+                                draggableOptionsContainer.draggableOptionDragIcon()
+                                    .should('be.visible');
+                            });
+                    });
+            })
+    },
+
+    verifyDragIconNotVisibleInOptionsInSetCorrectAnswerSection: (questionType) => {
+        draggableOptionsContainer.setCorrectAnswerDraggableOptionsWrapper(questionType)
+            .within(() => {
+                draggableOptionsContainer.draggableOption()
+                    .each($element => {
+                        cy.wrap($element)
+                            .within(() => {
+                                draggableOptionsContainer.draggableOptionDragIcon()
+                                    .should('not.exist');
+                            });
+                    });
+            });
+    },
+
+    verifyDragIconVisibleInOptionsInPreviewTab: (questionType) => {
+        draggableOptionsContainer.previewTabDraggableOptionsWrapper(questionType)
+            .within(() => {
+                draggableOptionsContainer.draggableOption()
+                    .each($element => {
+                        cy.wrap($element)
+                            .within(() => {
+                                draggableOptionsContainer.draggableOptionDragIcon()
+                                    .should('be.visible');
+                            });
+                    });
+            });
+    },
+
+    verifyDragIconNotVisibleInOptionsInPreviewTab: (questionType) => {
+        draggableOptionsContainer.previewTabDraggableOptionsWrapper(questionType)
+            .within(() => {
+                draggableOptionsContainer.draggableOption()
+                    .each($element => {
+                        cy.wrap($element)
+                            .within(() => {
+                                draggableOptionsContainer.draggableOptionDragIcon()
+                                    .should('not.exist');
+                            });
+                    });
+            });
+    },
+
+    verifyGroupTitleInSetCorrectAnswerSection: (groupIndex, groupTitle) => {
+        draggableOptionsContainer.setCorrectAnswerSectionGroupedResponseTitle()
+            .eq(groupIndex)
+            .verifyInnerText(groupTitle);
+    },
+
+    verifyGroupTitleInPreviewTab: (groupIndex, groupTitle) => {
+        draggableOptionsContainer.previewTabGroupedResponseTitle()
+            .eq(groupIndex)
+            .verifyInnerText(groupTitle);
+    },
+
+    //V3 - This function should be updated in all files
+    /**
+     * @param {string} questionType Text displayed inside the draggable option
+     * @description Verify inactive state of all options in set correct answer section
+     */
+    verifyInactiveStateOfAllDraggableOptionsInSetCorrectAnswerSection: (questionType) => {
+        const expectedClass = questionType === 'drag and drop into categories' ? 'isSelected' : 'item-selected';
+
+        draggableOptionsContainer.setCorrectAnswerDraggableOptionsWrapper(questionType)
+            .within(() => {
+                draggableOptionsContainer.draggableOption()
+                    .each($element => {
+                        cy.wrap($element)
+                            .should('not.have.class', expectedClass);
+                    });
+            });
+    },
+
+    //V3 - This function should be updated in all files
+    /**
+     * @param {string} questionType Text displayed inside the draggable option
+     * @description Verify inactive state of all options in set correct answer section
+     */
+    verifyInactiveStateOfAllDraggableOptionsInPreviewTab: (questionType) => {
+        const expectedClass = questionType === 'drag and drop into categories' ? 'isSelected' : 'item-selected';
+
+        draggableOptionsContainer.previewTabDraggableOptionsWrapper(questionType)
+            .within(() => {
+                draggableOptionsContainer.draggableOption()
+                    .each($element => {
+                        cy.wrap($element)
+                            .should('not.have.class', expectedClass);
+                    });
+            });
+    },
+
+    //V3 - This function should be updated in all files
+    /**
+     * @param {string} optionText Text displayed inside the draggable option
+     * @description Click on the draggable option to select or deselect it
+     */
+    clickOnDraggableOptionInSetCorrectAnswerSection: (questionType, optionText) => {
+        draggableOptionsContainer.setCorrectAnswerDraggableOptionsWrapper(questionType)
+            .within(() => {
+                draggableOptionsContainer.draggableOption()
+                    .contains(`${optionText}`)
+                    .click();
+            });
+    },
+
+    //V3 - This function should be updated in all files
+    /**
+     * @param {string} optionText Text displayed inside the draggable option
+     * @description Click on the draggable option to select or deselect it
+     */
+    clickOnDraggableOptionInPreviewTab: (questionType, optionText) => {
+        draggableOptionsContainer.previewTabDraggableOptionsWrapper(questionType)
+            .within(() => {
+                draggableOptionsContainer.draggableOption()
+                    .contains(`${optionText}`)
+                    .click();
+            });
+    },
+
+    //V3 - This function should be updated in all files
+    /**
+     * @param {number} optionIndex Index of the option
+     * @param {string} questionType
+     * @description Verify active state of option in set correct answer section
+     */
+    verifyActiveStateOfDraggableOptionInSetCorrectAnswerSection: (optionIndex, questionType) => {
+        const expectedClass = questionType === 'drag and drop into categories' ? 'isSelected' : 'item-selected';
+
+        draggableOptionsContainer.draggableOption()
+            .eq(optionIndex)
+            .should('have.class', expectedClass);
+        if (questionType !== 'drag and drop into categories') {
+            draggableOptionsContainer.setCorrectAnswerDraggableOptionsWrapper(questionType)
+                .should('have.class', 'itemSelected');
+        }
+    },
+
+    //V3 - This function should be updated in all files
+    /**
+     * @param {number} optionIndex Index of the option
+     * @param {string} questionType
+     * @description Verify active state of option in preview tab
+     */
+    verifyActiveStateOfDraggableOptionInPreviewTab: (optionIndex, questionType) => {
+        const expectedClass = questionType === 'drag and drop into categories' ? 'isSelected' : 'item-selected';
+        draggableOptionsContainer.previewTabDraggableOptionsWrapper(questionType)
+            .within(() => {
+                draggableOptionsContainer.draggableOption()
+                    .eq(optionIndex)
+                    .should('have.class', expectedClass);
+            });
+        if (questionType !== 'drag and drop into categories') {
+            draggableOptionsContainer.previewTabDraggableOptionsWrapper(questionType)
+                .should('have.class', 'itemSelected');
+        };
+    },
+
+    //V3 - This function should be updated in all files
+    /**
+     * @param {number[]} unselectedOptionIndexArray Array of index of options which are in unselected state
+     * @param {string} questionType
+     * @description Verify default inactive state of options in set correct answer section
+     */
+    verifyDefaultStateOfUnselectedDraggableOptionsInSetCorrectAnswerSection: (unselectedOptionIndexArray, questionType) => {
+        const expectedClass = questionType === 'drag and drop into categories' ? 'isSelected' : 'item-selected';
+
+        draggableOptionsContainer.setCorrectAnswerDraggableOptionsWrapper(questionType)
+            .within(() => {
+                unselectedOptionIndexArray.forEach((optionIndex) => {
+                    draggableOptionsContainer.draggableOption()
+                        .eq(optionIndex)
+                        .should('not.have.class', expectedClass);
+                });
+            });
+    },
+
+    //V3 - This function should be updated in all files
+    /**
+     * @param {number[]} unselectedOptionIndexArray Array of index of options which are in unselected state
+     * @param {string} questionType
+     * @description Verify default inactive state of options in preview tab
+     */
+    verifyDefaultStateOfUnselectedDraggableOptionsInPreviewTab: (unselectedOptionIndexArray, questionType) => {
+        const expectedClass = questionType === 'drag and drop into categories' ? 'isSelected' : 'item-selected';
+        draggableOptionsContainer.previewTabDraggableOptionsWrapper(questionType)
+            .within(() => {
+                unselectedOptionIndexArray.forEach((optionIndex) => {
+                    draggableOptionsContainer.draggableOption()
+                        .eq(optionIndex)
+                        .should('not.have.class', expectedClass);
+                });
+            });
+    },
+
+    //V3 - This function should be updated in all files
+    /**
+     * @param {string} questionType
+     * @description Verify active state of options container in set correct answer section
+     */
+    verifyActiveStateOfDraggableOptionsContainerInSetCorrectAnswerSection: (questionType) => {
+        const expectedClass = questionType === 'drag and drop into categories' ? 'active-area-on-tap' : 'isActiveForDropping';
+
+        draggableOptionsContainer.setCorrectAnswerDraggableOptionsWrapper(questionType)
+            .should('have.class', expectedClass);
+    },
+
+    //V3 - This function should be updated in all files
+    /**
+     * @param {string} questionType
+     * @description Verify active state of options container in preview tab
+     */
+    verifyActiveStateOfDraggableOptionsContainerInPreviewTab: (questionType) => {
+        const expectedClass = questionType === 'drag and drop into categories' ? 'active-area-on-tap' : 'isActiveForDropping';
+
+        draggableOptionsContainer.previewTabDraggableOptionsWrapper(questionType)
+            .should('have.class', expectedClass);
+    },
+
+    /**
+     * @param {number} groupIndex Index of group
+     * @description Verify the empty group displayed in set correct answer section
+     */
+    verifyEmptyGroupInSetCorrectAnswerSection: (groupIndex) => {
+        draggableOptionsContainer.setCorrectAnswerSectionGroupedResponseContainer()
+            .eq(groupIndex)
+            .should('be.visible')
+            .within(() => {
+                draggableOptionsContainer.draggableOption()
+                    .should('not.exist');
+            });
+    },
+
+    /**
+     * @param {number} groupIndex Index of group
+     * @description Verify the empty group displayed in set correct answer section
+     */
+    verifyEmptyGroupInPreviewTab: (groupIndex) => {
+        draggableOptionsContainer.previewTabGroupedResponseContainer()
+            .eq(groupIndex)
+            .should('be.visible')
+            .within(() => {
+                draggableOptionsContainer.draggableOption()
+                    .should('not.exist');
+            })
+    },
+}
+
+const tests = {
+    verifyStandardResponseDraggableOptionsInSetCorrectAnswerSection: (questionType) => {
+        it('When the user has not entered text in the options input field then two empty draggable options along with drag handles should be displayed in the response options container of the \'Set correct answer\' section', () => {
+            draggableOptionsContainer.steps.verifyCountOfDraggableOptionsInSetCorrectAnswerSection(questionType, 2);
+            for (let index = 0; index < 2; index++) {
+                draggableOptionsContainer.steps.verifyDefaultStateOfDraggableOptionsInSetCorrectAnswerSection(questionType, index);
+            };
+        });
+
+        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 \'Set correct answer\' section', () => {
+            dragAndDropResponseOptions.steps.addInputToOptionsForDragAndDropFields(optionsForResponses);
+            draggableOptionsContainer.steps.verifyDraggableResponsesSetCorrectAnswer(questionType, optionsForResponses);
+        });
+
+        it('When the user adds an option using \'Add Option\' button then the added option should be displayed along with drag handle in the response options container of the \'Set Correct Answer\' section', () => {
+            optionsWrapperComponent.addOptionButton()
+                .click();
+            cy.log('Checking the added input field should be displayed along with its drag handle and be blank')
+            draggableOptionsContainer.steps.verifyCountOfDraggableOptionsInSetCorrectAnswerSection(questionType, 3);
+            draggableOptionsContainer.steps.verifyDefaultStateOfDraggableOptionsInSetCorrectAnswerSection(questionType, 2);
+            cy.log('Checking that input text to the newly added option is displayed in the response options container of the \'Set Correct Answer\' section')
+            optionsWrapperComponent.steps.editOptionInputField(2, `${optionsForThreeResponses[2]}`);
+            draggableOptionsContainer.steps.verifyDraggableResponsesSetCorrectAnswer(questionType, optionsForThreeResponses);
+        });
+
+        it('When the user adds an identical option in the options field, then both options should be displayed in the response options container of the \'Set Correct Answer\' section', () => {
+            cy.log('Pre step: Editing the Response 3 to Response 2 to make two responses identical')
+            optionsWrapperComponent.steps.editOptionInputField(2, `${optionsForThreeResponses[1]}`);
+            draggableOptionsContainer.steps.verifyCountOfDraggableOptionsInSetCorrectAnswerSection(questionType, 3);
+            draggableOptionsContainer.setCorrectAnswerDraggableOptionsWrapper(questionType)
+                .within(() => {
+                    for (let index = 1; index <= 2; index++) {
+                        draggableOptionsContainer.draggableOption()
+                            .eq(index)
+                            .should('be.visible')
+                            .should('have.text', 'Response 2');
+                    };
+                });
+            cy.log('Post step: Editing the the identical option back to Response 3')
+            optionsWrapperComponent.steps.editOptionInputField(2, `${optionsForThreeResponses[2]}`);
+        });
+    },
+
+    verifyStandardResponseDraggableOptionsInPreviewTab: (questionType) => {
+        it('When the user has not entered text in the options input field then two empty draggable options along with drag handles should be displayed in the response options container of the \'Preview tab\'', () => {
+            draggableOptionsContainer.steps.verifyCountOfDraggableOptionsInPreviewTab(questionType, 2);
+            for (let index = 0; index < 2; index++) {
+                draggableOptionsContainer.steps.verifyDefaultStateOfDraggableOptionsInPreviewTab(questionType, index);
+            }
+        });
+
+        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')
+            createQuestionBasePage.steps.switchToEditTab();
+            dragAndDropResponseOptions.steps.addInputToOptionsForDragAndDropFields(optionsForResponses);
+            cy.log('Switching to preview tab to check Preview tab draggable options')
+            createQuestionBasePage.steps.switchToPreviewTab();
+            draggableOptionsContainer.steps.verifyDraggableResponsesPreviewTab(questionType, optionsForResponses);
+        });
+
+        it('When the user adds an option using \'Add Option\' button then the added option should be displayed in the response options container of the \'Preview tab\'', () => {
+            cy.log('Pre-step : Switching to \'Edit\' tab')
+            createQuestionBasePage.steps.switchToEditTab();
+            optionsWrapperComponent.steps.addOption();
+            cy.log('Checking the added input field should be displayed in the Preview tab along with its drag handle and be blank')
+            createQuestionBasePage.steps.switchToPreviewTab();
+            draggableOptionsContainer.steps.verifyCountOfDraggableOptionsInPreviewTab(questionType, 3);
+            draggableOptionsContainer.steps.verifyDefaultStateOfDraggableOptionsInPreviewTab(questionType, 2);
+            cy.log('Checking that input text to the newly added option is displayed in the option in Preview tab section')
+            createQuestionBasePage.steps.switchToEditTab();
+            optionsWrapperComponent.steps.editOptionInputField(2, `${optionsForThreeResponses[2]}`);
+            createQuestionBasePage.steps.switchToPreviewTab();
+            draggableOptionsContainer.steps.verifyDraggableResponsesPreviewTab(questionType, optionsForThreeResponses);
+        });
+
+        it('When the user adds an identical option in the options field, then both options should be displayed in the response options container of the \'Preview tab\'', () => {
+            cy.log('Pre-step : Switching to \'Edit\' tab and editing the Response 3 to Response 2 to make two responses identical')
+            createQuestionBasePage.steps.switchToEditTab();
+            optionsWrapperComponent.steps.editOptionInputField(2, `${optionsForThreeResponses[1]}`);
+            createQuestionBasePage.steps.switchToPreviewTab();
+            draggableOptionsContainer.steps.verifyCountOfDraggableOptionsInPreviewTab(questionType, 3);
+            draggableOptionsContainer.previewTabDraggableOptionsWrapper(questionType)
+                .within(() => {
+                    for (let index = 1; index <= 2; index++) {
+                        draggableOptionsContainer.draggableOption()
+                            .eq(index)
+                            .should('be.visible')
+                            .should('have.text', 'Response 2');
+                    };
+                });
+            cy.log('Post step: Editing the the identical option back to Response 3')
+            createQuestionBasePage.steps.switchToEditTab();
+            optionsWrapperComponent.steps.editOptionInputField(2, `${optionsForThreeResponses[2]}`);
+        });
+
+        it('When the user deletes an option then the deleted option should get removed from the response options container of the \'Preview tab\'', () => {
+            const optionsAfterDeleting = optionsForThreeResponses.filter((el) => el !== 'Response 3')
+            cy.log('Pre-step : Switching to \'Edit\' tab')
+            createQuestionBasePage.steps.switchToEditTab();
+            optionsWrapperComponent.steps.deleteOption(2);
+            cy.log('Checking the deleted option should not exist in the Preview tab')
+            createQuestionBasePage.steps.switchToPreviewTab();
+            draggableOptionsContainer.steps.verifyCountOfDraggableOptionsInPreviewTab(questionType, 2);
+            draggableOptionsContainer.steps.verifyDraggableResponsesPreviewTab(questionType, optionsAfterDeleting);
+        });
+    },
+
+    verifyGroupedResponseDraggableOptionsInSetCorrectAnswerSection: () => {
+        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', () => {
+            draggableOptionsContainer.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', () => {
+            dragAndDropResponseOptions.steps.addGroupTitle(0, 'Group title A');
+            draggableOptionsContainer.setCorrectAnswerSectionGroupedResponseTitle()
+                .should('have.text', 'Group title A');
+        });
+
+        it('When the user has not entered text in the options input field then two empty draggable options along with drag handles should be displayed as a group in the response options container of the \'Set Correct Answer\' section', () => {
+            draggableOptionsContainer.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, ['', '']);
+        });
+
+        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', () => {
+            dragAndDropResponseOptions.steps.addInputToOptionsForDragAndDropFields(optionsForResponses);
+            cy.wait(500);
+            draggableOptionsContainer.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, optionsForResponses);
+        });
+
+        it('CSS of \'Grouped\' container in the \'Set Correct Answer\' section', { tags: 'css' }, () => {
+            draggableOptionsContainer.setCorrectAnswerSectionGroupedResponseContainer()
+                .should('have.css', 'border', `1px solid ${css.color.defaultDropdownBorder}`);
+            draggableOptionsContainer.draggableOption()
+                .should('have.css', 'border', `1px solid ${css.color.figDefaultComponentBorder}`)
+                .find('.question-text-wrapper')
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+            draggableOptionsContainer.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(draggableOptionsContainer.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', () => {
+            optionsWrapperComponent.steps.addOption();
+            draggableOptionsContainer.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, ['Response 1', 'Response 2', '']);
+            cy.log('Checking that input text to the newly added option is displayed in the response options container of the \'Set Correct Answer\' section')
+            optionsWrapperComponent.steps.editOptionInputField(2, `${optionsForThreeResponses[2]}`);
+            cy.wait(500);
+            draggableOptionsContainer.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, optionsForThreeResponses);
+        });
+
+        it('When the user adds an identical option in the options field, then both options should be displayed inside the group in the response options container of the \'Set Correct Answer\' section', () => {
+            cy.log('Pre step: Editing the Response 3 to Response 2 to make two responses identical')
+            optionsWrapperComponent.steps.editOptionInputField(2, `${optionsForThreeResponses[1]}`);
+            cy.wait(500);
+            draggableOptionsContainer.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, ['Response 1', 'Response 2', 'Response 2']);
+            cy.log('Post step: Editing the the identical option back to Response 3')
+            optionsWrapperComponent.steps.editOptionInputField(2, `${optionsForThreeResponses[2]}`);
+        });
+
+        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', () => {
+            dragAndDropResponseOptions.groupResponseContainer()
+                .eq(0)
+                .within(() => {
+                    optionsWrapperComponent.steps.deleteOption(2);
+                });
+            cy.log('verifying the text of draggable options after deleting an option')
+            draggableOptionsContainer.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(0, ['Response 1', 'Response 2']);
+        });
+
+        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', () => {
+            dragAndDropResponseOptions.steps.addGroup();
+            draggableOptionsContainer.setCorrectAnswerSectionGroupedResponseContainer()
+                .should('have.length', 2);
+            draggableOptionsContainer.setCorrectAnswerSectionGroupedResponseContainer()
+                .eq(1)
+                .should('be.visible');
+        });
+
+        it('By default, the newly added group should have two empty draggable options along with drag handles', () => {
+            draggableOptionsContainer.setCorrectAnswerSectionGroupedResponseContainer()
+                .eq(1)
+                .within(() => {
+                    draggableOptionsContainer.setCorrectAnswerSectionGroupedResponseTitle()
+                        .should('not.exist');
+                });
+            draggableOptionsContainer.steps.verifyGroupedResponseContainerContentsInSetCorrectAnswerSection(1, ['', '']);
+        });
+    },
+
+    verifyGroupedResponseDraggableOptionsInPreviewTab: () => {
+        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\'', () => {
+            draggableOptionsContainer.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')
+            createQuestionBasePage.steps.switchToEditTab();
+            dragAndDropResponseOptions.steps.addGroupTitle(0, 'Group title A');
+            createQuestionBasePage.steps.switchToPreviewTab();
+            draggableOptionsContainer.previewTabGroupedResponseTitle()
+                .should('have.text', 'Group title A');
+        });
+
+        it('When the user has not entered text in the options input field then two empty draggable options along with drag handles should be displayed as a group in the response options container of the \'Preview tab\'', () => {
+            draggableOptionsContainer.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')
+            createQuestionBasePage.steps.switchToEditTab();
+            dragAndDropResponseOptions.steps.addInputToOptionsForDragAndDropFields(optionsForResponses);
+            createQuestionBasePage.steps.switchToPreviewTab();
+            draggableOptionsContainer.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, optionsForResponses);
+        });
+
+        it('CSS of \'Grouped\' container in the response options container of the \'Preview tab\'', { tags: 'css' }, () => {
+            draggableOptionsContainer.previewTabGroupedResponseContainer()
+                .should('have.css', 'border', `1px solid ${css.color.defaultDropdownBorder}`)
+                .within(() => {
+                    draggableOptionsContainer.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(draggableOptionsContainer.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')
+            createQuestionBasePage.steps.switchToEditTab();
+            optionsWrapperComponent.steps.addOption();
+            createQuestionBasePage.steps.switchToPreviewTab();
+            draggableOptionsContainer.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, ['Response 1', 'Response 2', '']);
+            cy.log('Checking that input text to the newly added option is displayed in the option in Preview tab section')
+            createQuestionBasePage.steps.switchToEditTab();
+            optionsWrapperComponent.steps.editOptionInputField(2, `${optionsForThreeResponses[2]}`);
+            createQuestionBasePage.steps.switchToPreviewTab();
+            draggableOptionsContainer.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, optionsForThreeResponses);
+        });
+
+        it('When the user adds an identical option in the options field, then both options should be displayed inside the group in the response options container of the \'Preview tab\'', () => {
+            cy.log('Pre step: Switching to edit tab')
+            createQuestionBasePage.steps.switchToEditTab();
+            cy.log('Editing the Response 3 to Response 2 to make two responses identical')
+            optionsWrapperComponent.steps.editOptionInputField(2, `${optionsForThreeResponses[1]}`);
+            createQuestionBasePage.steps.switchToPreviewTab();
+            draggableOptionsContainer.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, ['Response 1', 'Response 2', 'Response 2']);
+            cy.log('Post step: Editing the identical option back to Response 3')
+            createQuestionBasePage.steps.switchToEditTab();
+            optionsWrapperComponent.steps.editOptionInputField(2, `${optionsForThreeResponses[2]}`);
+        });
+
+        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')
+            createQuestionBasePage.steps.switchToEditTab();
+            dragAndDropResponseOptions.groupResponseContainer()
+                .eq(0)
+                .within(() => {
+                    optionsWrapperComponent.steps.deleteOption(2);
+                });
+            cy.log('Checking the deleted option should not exist in the Preview tab')
+            createQuestionBasePage.steps.switchToPreviewTab();
+            cy.log('verifying the text of draggable options after deleting an option')
+            draggableOptionsContainer.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, ['Response 1', 'Response 2']);
+        });
+
+        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')
+            createQuestionBasePage.steps.switchToEditTab();
+            dragAndDropResponseOptions.addGroupButton()
+                .click();
+            createQuestionBasePage.steps.switchToPreviewTab();
+            draggableOptionsContainer.previewTabGroupedResponseContainer()
+                .should('have.length', 2);
+            draggableOptionsContainer.previewTabGroupedResponseContainer()
+                .eq(1)
+                .should('be.visible');
+        });
+
+        it('By default, the newly added group should have two empty draggable options along with drag handles', () => {
+            draggableOptionsContainer.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')
+            createQuestionBasePage.steps.switchToEditTab();
+            cy.log('Pre step: Entering text into the text fields of group 2 response container')
+            dragAndDropResponseOptions.groupResponseContainer()
+                .eq(1)
+                .within(() => {
+                    dragAndDropResponseOptions.steps.addInputToOptionsForDragAndDropFields(responseForGroup2);
+                });
+            dragAndDropResponseOptions.steps.addGroupTitle(1, 'Group title B');
+            dragAndDropResponseOptions.steps.deleteGroup(0);
+            createQuestionBasePage.steps.switchToPreviewTab();
+            draggableOptionsContainer.previewTabGroupedResponseContainer()
+                .should('have.length', 1);
+            draggableOptionsContainer.previewTabGroupedResponseContainer()
+                .eq(1)
+                .should('not.exist');
+            cy.log('verifying the contents of group 2 after deleting group 1')
+            draggableOptionsContainer.steps.verifyGroupedResponseContainerContentsInPreviewTab(0, responseForGroup2);
+            draggableOptionsContainer.previewTabGroupedResponseTitle()
+                .should('have.text', 'Group title B');
+        });
+    },
+}
+
+export const draggableOptionsContainer = {
+    ...selectors,
+    steps,
+    tests
+}