itemengine-cypress-automation 1.0.78 → 1.0.80

package/cypress/pages/components/draggableOptionContainer.js

@@ -0,0 +1,628 @@
+import utilities from "../../support/helpers/utilities";
+import { commonComponents } from "./commonComponents";
+import { createQuestionBasePage } from "./createQuestionBasePage";
+import { draggableOptionsSectionComponent } from "./draggableOptionsSectionComponent";
+import { optionsWrapperComponent } from "./optionsWrapperComponent";
+const css = Cypress.env('css');
+const options = ['option 1', 'option 2'];
+const threeOptions = ['option 1', 'option 2', 'option 3'];
+
+const selectors = {
+    draggableOption: () => cy.get('[class*="DraggableItems"][class*="style__ItemWrapper"]'),
+    optionsContainerSpecifyCorrectAnswerSection: () => cy.get('[data-rbd-droppable-id*="item-list"]').eq(0),
+    optionsContainerPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [data-rbd-droppable-id*="item-list"]').eq(0),
+    groupedOptionsTitleSpecifyCorrectAnswerSection: () => cy.get('[class*="GroupTitleWrapper"]'),
+    groupedOptionsContainerSpecifyCorrectAnswerSection: () => cy.get('[class*="GroupDiv"]'),
+    groupedOptionsContainerPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="GroupDiv"]'),
+    groupedOptionsTitlePreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="GroupTitleWrapper"]'),
+    groupedOptionsGridPreviewTab: () => cy.get('[class*="question-preview-wrapper"] [class*="DraggableGroupsGrid"]'),
+    draggableOptionText: () => cy.get('.icon-container-wrapper [class*="DraggableItemsstyle__QuestionTextWrapper"]'),
+    optionContainerItemListPreviewTab: () => cy.get('[class*="question-preview-wrapper"] .item-list'),
+    optionContainerItemListSpecifyCorrectAnswerSection: () => cy.get('.item-list'),
+    draggableOptionDragIcon: () => cy.get('.drag-icon-button')
+}
+
+const steps = {
+    /**
+     * Verifies the appearance of a draggable option in the preview tab.
+     * @param {number} optionIndex - The index of the draggable option.
+     * @param {string} optionText - The expected text content of the draggable option.
+     */
+    verifyDraggableOptionPreviewTab: (optionIndex, optionText) => {
+        draggableOptionContainer.optionsContainerPreviewTab()
+            .within(() => {
+                utilities.verifyElementVisibilityState(utilities.getNthElement(draggableOptionContainer.draggableOptionDragIcon(), optionIndex), 'exist');
+                utilities.verifyTextContent(utilities.getNthElement(draggableOptionContainer.draggableOption(), optionIndex), optionText);
+            });
+    },
+
+    /**
+     * Verifies draggable options in the Specify Correct Answer section of the options container.
+     * @param {Array<string>} draggableOptionsArray - An array of expected text content for draggable options.
+     */
+    verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection: (draggableOptionsArray) => {
+        draggableOptionContainer.optionsContainerSpecifyCorrectAnswerSection()
+            .within(() => {
+                draggableOptionsArray.forEach((optionText, optionIndex) => {
+                    utilities.verifyElementCount(draggableOptionContainer.draggableOption(), draggableOptionsArray.length);
+                    utilities.verifyElementVisibilityState(utilities.getNthElement(draggableOptionContainer.draggableOptionDragIcon(), optionIndex), 'exist');
+                    utilities.verifyTextContent(utilities.getNthElement(draggableOptionContainer.draggableOption(), optionIndex), optionText);
+                });
+            });
+    },
+
+    /**
+     * Verifies draggable options in the preview tab of the options container.
+     * @param {Array<string>} draggableOptionsArray - An array of expected text content for draggable options.
+     */
+    verifyDraggableOptionsInOptionsContainerPreviewTab: (draggableOptionsArray) => {
+        draggableOptionContainer.optionsContainerPreviewTab()
+            .within(() => {
+                draggableOptionsArray.forEach((optionText, optionIndex) => {
+                    utilities.verifyElementCount(draggableOptionContainer.draggableOption(), draggableOptionsArray.length);
+                    utilities.verifyElementVisibilityState(utilities.getNthElement(draggableOptionContainer.draggableOptionDragIcon(), optionIndex), 'exist');
+                    utilities.verifyTextContent(utilities.getNthElement(draggableOptionContainer.draggableOption(), optionIndex), optionText);
+                });
+            });
+    },
+
+    /**
+    * @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) => {
+        let currentOptions = [...optionArray]
+        draggableOptionContainer.optionsContainerPreviewTab()
+            .within(() => {
+                for (let index = 0; index < currentOptions.length; index++) {
+                    draggableOptionContainer.draggableOption()
+                        .eq(index)
+                        .then(($element) => {
+                            expect($element.text()).to.be.oneOf(currentOptions);
+                            currentOptions = currentOptions.filter((value) => value !== $element.text())
+                        });
+                };
+            });
+        draggableOptionContainer.steps.verifyOptionsAreRerandomized(optionArray);
+    },
+
+    /**
+     * Verifies that options in the preview tab have been re-randomized compared to the previous order.
+     * @param {Array<string>} previousOrderOfOptions - An array representing the previous order of options.
+     */
+    verifyOptionsAreRerandomized: (previousOrderOfOptions) => {
+        draggableOptionContainer.optionsContainerPreviewTab()
+            .within(() => {
+                draggableOptionContainer.draggableOption()
+                    .should('not.have.text', '')
+                    .and('not.have.text', previousOrderOfOptions.join(''));
+            });
+    },
+
+    getOptionsArray: () => {
+        const optionsArray = []
+        commonComponents.previewTabQuestionWrapper()
+            .within(() => {
+                draggableOptionContainer.draggableOption()
+                    .each(($el) => {
+                        cy.wrap($el)
+                            .invoke('text')
+                            .then((text) => {
+                                optionsArray.push(text);
+                            });
+                    });
+            });
+        return optionsArray;
+    },
+
+    /**
+     * Verifies the count of draggable options in the Specify Correct Answer section.
+     * @param {number} elementCount - The expected count of draggable options.
+     */
+    verifyCountOfDraggableOptionsInSpecifyCorrectAnswerSection: (elementCount) => {
+        utilities.verifyElementCount(draggableOptionContainer.draggableOption(), elementCount)
+    },
+
+    /**
+     * Verifies the contents of a grouped container in the Specify Correct Answer section.
+     * @param {number} groupIndex - The index of the grouped container.
+     * @param {Array<string>} draggableOptionsArray - An array of expected text content for draggable options.
+     */
+    verifyGroupedContainerContentsInSpecifyCorrectAnswerSection: (groupIndex, draggableOptionsArray) => {
+        draggableOptionContainer.groupedOptionsContainerSpecifyCorrectAnswerSection()
+            .eq(groupIndex)
+            .should('be.visible')
+            .within(() => {
+                utilities.verifyElementCount(draggableOptionContainer.draggableOption(), draggableOptionsArray.length);
+                draggableOptionsArray.forEach((draggableOption, optionIndex) => {
+                    utilities.verifyInnerText(utilities.getNthElement(draggableOptionContainer.draggableOption(), optionIndex), draggableOption);
+                });
+            });
+    },
+
+    /**
+     * Verifies the contents of a grouped container in the preview tab.
+     * @param {number} groupIndex - The index of the grouped container.
+     * @param {Array<string>} draggableOptionsArray - An array of expected text content for draggable options.
+     */
+    verifyGroupedContainerContentsInPreviewTab: (groupIndex, draggableOptionsArray) => {
+        draggableOptionContainer.groupedOptionsContainerPreviewTab()
+            .eq(groupIndex)
+            .should('be.visible')
+            .within(() => {
+                utilities.verifyElementCount(draggableOptionContainer.draggableOption(), draggableOptionsArray.length);
+                draggableOptionsArray.forEach((draggableOption, optionIndex) => {
+                    utilities.verifyInnerText(utilities.getNthElement(draggableOptionContainer.draggableOption(), optionIndex), draggableOption);
+                });
+            });
+    },
+
+    /**
+     * Verifies the title of a grouped options section in the Preview Tab based on its index.
+     *
+     * @param {number} groupIndex - The index of the grouped options section.
+     * @param {string} groupTitle - The expected title of the grouped options section.
+     */
+    verifyGroupedOptionsTitlePreviewTab: (groupIndex, groupTitle) => {
+        utilities.verifyInnerText(utilities.getNthElement(draggableOptionContainer.groupedOptionsTitlePreviewTab(), groupIndex), groupTitle)
+    },
+
+    /**
+     * Verifies the title of a grouped options section in the Specify Correct Answer section based on its index.
+     *
+     * @param {number} groupIndex - The index of the grouped options section.
+     * @param {string} groupTitle - The expected title of the grouped options section.
+     */
+    verifyGroupedOptionsTitleSpecifyCorrectAnswerSection: (groupIndex, groupTitle) => {
+        utilities.verifyInnerText(utilities.getNthElement(draggableOptionContainer.groupedOptionsTitleSpecifyCorrectAnswerSection(), groupIndex), groupTitle)
+    },
+
+    getGroupTitleArray: () => {
+        const groupTitleArray = [];
+        draggableOptionContainer.groupedOptionsTitlePreviewTab()
+            .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++) {
+            draggableOptionContainer.groupedOptionsTitlePreviewTab()
+                .eq(index)
+                .then(($element) => {
+                    expect($element.text()).to.be.oneOf(groupTitles);
+                    groupTitles = groupTitles.filter((value) => value !== $element.text())
+                });
+        };
+        draggableOptionContainer.groupedOptionsTitlePreviewTab()
+            .then((newElements) => {
+                const newOrder = Array.from(newElements).map((element) => element.textContent);
+                expect(newOrder).to.not.deep.equal(groupTitlesArray);
+            });
+    },
+
+    verifyRandomizeOptionOrderInGroup: (groupTitle, optionArray) => {
+        let currentOptions = [...optionArray];
+        draggableOptionContainer.groupedOptionsContainerPreviewTab()
+            .contains(groupTitle)
+            .parents('[class*="question-preview-wrapper"] [class*="GroupDiv"]')
+            .within(() => {
+                for (let index = 0; index < currentOptions.length; index++) {
+                    draggableOptionContainer.draggableOption()
+                        .eq(index)
+                        .then(($element) => {
+                            expect($element.text()).to.be.oneOf(currentOptions);
+                            currentOptions = currentOptions.filter((value) => value !== $element.text())
+                        });
+                };
+                draggableOptionContainer.draggableOption()
+                    .then((newElements) => {
+                        const newOrder = Array.from(newElements).map((element) => element.textContent);
+                        expect(newOrder).to.not.deep.equal(optionArray);
+                    });
+            });
+    },
+
+    verifyGroupsAreRerandomized: (previousOrderOfGroups) => {
+        draggableOptionContainer.groupedOptionsTitlePreviewTab()
+            .should('not.have.text', '')
+            .and('not.have.text', previousOrderOfGroups.join(''));
+    },
+
+    verifyInactiveStateOfAllDraggableOptionsInSpecifyCorrectAnswerSection: () => {
+        draggableOptionContainer.optionsContainerSpecifyCorrectAnswerSection()
+            .within(() => {
+                draggableOptionContainer.draggableOption()
+                    .each($element => {
+                        cy.wrap($element)
+                            .should('not.have.class', 'isSelected');
+                    });
+            });
+    },
+
+    /**
+     * @param {string} optionName denotes the text content of the draggable option
+     * @description click on draggable option in specify correct answer section options container
+     */
+    clickOnDraggableOptionInSpecifyCorrectAnswerSection: (optionName) => {
+        draggableOptionContainer.optionsContainerSpecifyCorrectAnswerSection()
+            .within(() => {
+                draggableOptionContainer.draggableOption()
+                    .contains(optionName)
+                    .click();
+            });
+    },
+
+    /**
+     * @param {number} optionIndex denotes the index of the draggable option
+     * @description Verify active state of draggable option
+     */
+    verifyActiveStateOfDraggableOptionInSpecifyCorrectAnswerSection: (optionIndex) => {
+        draggableOptionContainer.optionsContainerSpecifyCorrectAnswerSection()
+            .within(() => {
+                draggableOptionContainer.draggableOption()
+                    .eq(optionIndex)
+                    .should('have.class', 'isSelected');
+            });
+    },
+
+    verifyInactiveStateOfUnselectedDraggableOptionsInSpecifyCorrectAnswerSection: (optionIndexArray) => {
+        draggableOptionContainer.optionsContainerSpecifyCorrectAnswerSection()
+            .within(() => {
+                optionIndexArray.forEach((optionIndex) => {
+                    draggableOptionContainer.draggableOption()
+                        .eq(optionIndex)
+                        .should('not.have.class', 'isSelected');
+                });
+            });
+    },
+
+    verifyActiveStateOfDraggableOptionsContainerInSpecifyCorrectAnswerSection: () => {
+        draggableOptionContainer.optionsContainerSpecifyCorrectAnswerSection()
+            .should('have.class', 'active-area-on-tap');
+    },
+
+    verifyInactiveStateOfAllDraggableOptionsInPreviewTab: () => {
+        draggableOptionContainer.optionsContainerPreviewTab()
+            .within(() => {
+                draggableOptionContainer.draggableOption()
+                    .each($element => {
+                        cy.wrap($element)
+                            .should('not.have.class', 'isSelected');
+                    });
+            });
+    },
+
+    /**
+     * @param {string} optionName denotes the text content of the draggable option
+     * @description click on draggable option in preview tab options container
+     */
+    clickOnDraggableOptionInPreviewTab: (optionName) => {
+        draggableOptionContainer.optionsContainerPreviewTab()
+            .within(() => {
+                draggableOptionContainer.draggableOption()
+                    .contains(optionName)
+                    .click();
+            });
+    },
+
+    /**
+     * @param {number} optionIndex denotes the index of the draggable option
+     * @description Verify active state of draggable option
+     */
+    verifyActiveStateOfDraggableOptionInPreviewTab: (optionIndex) => {
+        draggableOptionContainer.optionsContainerPreviewTab()
+            .within(() => {
+                draggableOptionContainer.draggableOption()
+                    .eq(optionIndex)
+                    .should('have.class', 'isSelected');
+            });
+    },
+
+    verifyInactiveStateOfUnselectedDraggableOptionsInPreviewTab: (optionIndexArray) => {
+        draggableOptionContainer.optionsContainerPreviewTab()
+            .within(() => {
+                optionIndexArray.forEach((optionIndex) => {
+                    draggableOptionContainer.draggableOption()
+                        .eq(optionIndex)
+                        .should('not.have.class', 'isSelected');
+                });
+            });
+    },
+
+    verifyActiveStateOfDraggableOptionsContainerInPreviewTab: () => {
+        draggableOptionContainer.optionsContainerPreviewTab()
+            .should('have.class', 'active-area-on-tap');
+    },
+
+    /**
+     * @param {number} groupIndex Index of group
+     * @description Verify the empty group displayed in specify correct answer section
+     */
+    verifyEmptyGroupInSpecifyCorrectAnswerSection: (groupIndex) => {
+        draggableOptionContainer.groupedOptionsContainerSpecifyCorrectAnswerSection()
+            .eq(groupIndex)
+            .should('be.visible')
+            .within(() => {
+                utilities.verifyElementVisibilityState(draggableOptionContainer.draggableOption(), 'notExist');
+            });
+    },
+}
+
+const tests = {
+    verifyDraggableOptionsForStandardLayoutInSpecifyCorrectAnswerSection: () => {
+        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 options container of the specify correct answer section section', () => {
+            draggableOptionContainer.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(['', '']);
+        });
+
+        it('When the user enters text in options input fields then the entered text should be displayed in the respective draggable options in the options container of the specify correct answer section section', () => {
+            optionsWrapperComponent.steps.addInputToOptionsInputField(options);
+            draggableOptionContainer.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(options);
+        });
+
+        it('When the user adds an option using \'Add Option\' button then the added option should be displayed along with drag handle in the options container of the \'Specify correct answer section section\' section', () => {
+            optionsWrapperComponent.steps.addOption();
+            draggableOptionContainer.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(['option 1', 'option 2', '']);
+            cy.log('Checking that input text to the newly added option is displayed in the options container of the \'Specify correct answer section section\' section')
+            optionsWrapperComponent.steps.enterTextInOptionInputField(2, 'option 3');
+            draggableOptionContainer.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(threeOptions);
+        });
+
+        it('When the user adds an identical option in the options field, then both options should be displayed in the options container of the \'Specify correct answer section section\' section', () => {
+            cy.log('Pre step: Editing the option 3 to option 2 to make two options identical')
+            optionsWrapperComponent.steps.editOptionInputField(2, 'option 2');
+            draggableOptionContainer.steps.verifyCountOfDraggableOptionsInSpecifyCorrectAnswerSection(3);
+            draggableOptionContainer.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(['option 1', 'option 2', 'option 2']);
+
+            cy.log('Post step: Editing the the identical option back to option 3')
+            optionsWrapperComponent.steps.editOptionInputField(2, 'option 3');
+        });
+    },
+
+    verifyDraggableOptionsForStandardLayoutInPreviewTab: () => {
+        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 options container of the \'Preview tab\'', () => {
+            draggableOptionContainer.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(['', '']);
+        });
+
+        it('When the user enters text in options input fields then the entered text should be displayed in the respective draggable options in the options container of the \'Preview tab\'', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            optionsWrapperComponent.steps.addInputToOptionsInputField(options);
+            createQuestionBasePage.steps.switchToPreviewTab();
+            draggableOptionContainer.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(options);
+        });
+
+        it('When the user adds an option using \'Add Option\' button then the added option should be displayed in the options container of the \'Preview tab\'', () => {
+            cy.log('Pre-step : Switching to \'Edit\' tab')
+            createQuestionBasePage.steps.switchToEditTab();
+            optionsWrapperComponent.steps.addOption();
+            createQuestionBasePage.steps.switchToPreviewTab();
+            draggableOptionContainer.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(['option 1', 'option 2', '']);
+            cy.log('Checking that input text to the newly added option is displayed in the options container of the preview tab')
+            createQuestionBasePage.steps.switchToEditTab();
+            optionsWrapperComponent.steps.enterTextInOptionInputField(2, 'option 3');
+            createQuestionBasePage.steps.switchToPreviewTab();
+            draggableOptionContainer.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(threeOptions);
+        });
+
+        it('When the user adds an identical option in the options field, then both options should be displayed in the options container of the \'Preview tab\'', () => {
+            cy.log('Pre-step : Switching to \'Edit\' tab and editing the option 3 to option 2 to make two options identical')
+            createQuestionBasePage.steps.switchToEditTab();
+            optionsWrapperComponent.steps.editOptionInputField(2, 'option 2');
+            createQuestionBasePage.steps.switchToPreviewTab();
+            draggableOptionContainer.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(['option 1', 'option 2', 'option 2'])
+            cy.log('Post step: Editing the the identical option back to option 3')
+            createQuestionBasePage.steps.switchToEditTab();
+            optionsWrapperComponent.steps.editOptionInputField(2, `option 3`);
+        });
+
+        it('When the user deletes an option then the deleted option should get removed from the options container of the \'Preview tab\'', () => {
+            const optionsAfterDeleting = threeOptions.filter((el) => el !== 'option 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();
+            draggableOptionContainer.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(optionsAfterDeleting);
+        });
+    },
+
+    verifyDraggableOptionsForGroupedLayoutInSpecifyCorrectAnswerSection: () => {
+        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 options container of the specify correct answer section', () => {
+            utilities.verifyElementVisibilityState(draggableOptionContainer.groupedOptionsTitleSpecifyCorrectAnswerSection(), 'notExist');
+        });
+
+        it('When the user enters text in the \'Group title\' input field, a group title should be displayed for the group in the options container of the specify correct answer section', () => {
+            draggableOptionsSectionComponent.steps.addGroupTitle('Group title A');
+            utilities.verifyInnerText(draggableOptionContainer.groupedOptionsTitleSpecifyCorrectAnswerSection(), 'Group title A');
+            utilities.verifyElementVisibilityState(draggableOptionContainer.groupedOptionsTitleSpecifyCorrectAnswerSection(), 'visible');
+        });
+
+        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 options container of the specify correct answer section', () => {
+            draggableOptionContainer.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(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 options container of the specify correct answer section', () => {
+            optionsWrapperComponent.steps.addInputToOptionsInputField(options);
+            draggableOptionContainer.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(0, options);
+        });
+
+        it('CSS of \'Grouped\' container in the specify correct answer section', { tags: 'css' }, () => {
+            utilities.verifyCSS(draggableOptionContainer.groupedOptionsContainerSpecifyCorrectAnswerSection(), {
+                'border': `1px solid ${css.color.defaultDropdownBorder}`
+            });
+            utilities.verifyCSS(draggableOptionContainer.optionsContainerSpecifyCorrectAnswerSection(), {
+                'background-color': css.color.draggableOptionsContainerBg,
+                'border': `1px solid ${css.color.draggableOptionsContainerBorder}`
+            });
+            utilities.verifyCSS(draggableOptionContainer.draggableOption(), {
+                'background-color': css.color.defaultBackground,
+                'border': `1px solid ${css.color.draggableOptionBorder}`
+            });
+            utilities.verifyCSS(draggableOptionContainer.draggableOption().find('.question-text-wrapper'), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of \'Grouped\' container in the specify correct answer section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(draggableOptionContainer.groupedOptionsContainerSpecifyCorrectAnswerSection());
+        });
+
+        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 options container of the specify correct answer section', () => {
+            optionsWrapperComponent.steps.addOption();
+            draggableOptionContainer.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(0, ['option 1', 'option 2', '']);
+            cy.log('Checking that input text to the newly added option is displayed in the options container of the specify correct answer section')
+            optionsWrapperComponent.steps.editOptionInputField(2, `${threeOptions[2]}`);
+            draggableOptionContainer.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(0, threeOptions);
+        });
+
+        it('When the user adds an identical option in the options field, then both options should be displayed inside the group in the options container of the specify correct answer section', () => {
+            cy.log('Pre step: Editing the option 3 to option 2 to make two responses identical')
+            optionsWrapperComponent.steps.editOptionInputField(2, `${threeOptions[1]}`);
+            draggableOptionContainer.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(0, ['option 1', 'option 2', 'option 2']);
+            cy.log('Post step: Editing the the identical option back to option 3')
+            optionsWrapperComponent.steps.editOptionInputField(2, `${threeOptions[2]}`);
+        });
+
+        it('When the user deletes an option then the deleted option should get removed from the group in the options container of the specify correct answer section', () => {
+            optionsWrapperComponent.steps.deleteOption(2);
+            cy.log('verifying the text of draggable options after deleting an option')
+            draggableOptionContainer.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(0, ['option 1', 'option 2']);
+        });
+
+        it('When the user adds a new group, the new group should be displayed in the options container of the specify correct answer section', () => {
+            draggableOptionsSectionComponent.steps.addGroup();
+            utilities.verifyElementCount(draggableOptionContainer.groupedOptionsContainerSpecifyCorrectAnswerSection(), 2);
+        });
+
+        it('By default, the newly added group should have two empty draggable options along with drag handles', () => {
+            draggableOptionContainer.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(1, ['', '']);
+        });
+    },
+
+    verifyDraggableOptionsForGroupedLayoutInPreviewTab: () => {
+        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 options container of the \'Preview tab\'', () => {
+            utilities.verifyElementVisibilityState(draggableOptionContainer.groupedOptionsTitlePreviewTab(), 'notExist');
+        });
+
+        it('When the user enters text in the \'Group title\' input field, a group title should be displayed for the group in the options container of the \'Preview tab\'', () => {
+            cy.log('Pre step: Switching to edit tab')
+            createQuestionBasePage.steps.switchToEditTab();
+            draggableOptionsSectionComponent.steps.addGroupTitle('Group title A');
+            createQuestionBasePage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(draggableOptionContainer.groupedOptionsTitlePreviewTab(), 'Group title A');
+            utilities.verifyElementVisibilityState(draggableOptionContainer.groupedOptionsTitlePreviewTab(), 'visible');
+        });
+
+        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 options container of the \'Preview tab\'', () => {
+            draggableOptionContainer.steps.verifyGroupedContainerContentsInPreviewTab(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 options container of the \'Preview tab\'', () => {
+            cy.log('Pre step: Switching to edit tab')
+            createQuestionBasePage.steps.switchToEditTab();
+            optionsWrapperComponent.steps.addInputToOptionsInputField(options);
+            createQuestionBasePage.steps.switchToPreviewTab();
+            draggableOptionContainer.steps.verifyGroupedContainerContentsInPreviewTab(0, options);
+        });
+
+        it('CSS of \'Grouped\' container in the options container of the \'Preview tab\'', { tags: 'css' }, () => {
+            utilities.verifyCSS(draggableOptionContainer.groupedOptionsContainerPreviewTab(), {
+                'border': `1px solid ${css.color.defaultDropdownBorder}`
+            });
+            utilities.verifyCSS(draggableOptionContainer.optionsContainerPreviewTab(), {
+                'background-color': css.color.draggableOptionsContainerBg,
+                'border': `1px solid ${css.color.draggableOptionsContainerBorder}`
+            });
+            utilities.verifyCSS(draggableOptionContainer.draggableOption(), {
+                'background-color': css.color.defaultBackground,
+                'border': `1px solid ${css.color.draggableOptionBorder}`
+            });
+            utilities.verifyCSS(draggableOptionContainer.draggableOption().find('.question-text-wrapper'), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+
+        it('Accessibility of \'Grouped\' container in the options container of the \'Preview tab\'', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.previewTabQuestionWrapper());
+        });
+
+        it('When the user adds an option using \'Add Option\' button then the added option should be displayed inside the group in the options container of the \'Preview tab\'', () => {
+            cy.log('Pre step: Switching to edit tab')
+            createQuestionBasePage.steps.switchToEditTab();
+            optionsWrapperComponent.steps.addOption();
+            createQuestionBasePage.steps.switchToPreviewTab();
+            draggableOptionContainer.steps.verifyGroupedContainerContentsInPreviewTab(0, ['option 1', 'option 2', '']);
+            cy.log('Checking that input text to the newly added option is displayed in the options container of the preview tab')
+            createQuestionBasePage.steps.switchToEditTab();
+            optionsWrapperComponent.steps.editOptionInputField(2, `${threeOptions[2]}`);
+            createQuestionBasePage.steps.switchToPreviewTab();
+            draggableOptionContainer.steps.verifyGroupedContainerContentsInPreviewTab(0, threeOptions);
+        });
+
+        it('When the user adds an identical option in the options field, then both options should be displayed inside the group in the options container of the \'Preview tab\'', () => {
+            cy.log('Pre step: Editing the option 3 to option 2 to make two responses identical')
+            createQuestionBasePage.steps.switchToEditTab();
+            optionsWrapperComponent.steps.editOptionInputField(2, `${threeOptions[1]}`);
+            createQuestionBasePage.steps.switchToPreviewTab();
+            draggableOptionContainer.steps.verifyGroupedContainerContentsInPreviewTab(0, ['option 1', 'option 2', 'option 2']);
+            cy.log('Post step: Editing the the identical option back to option 3')
+            createQuestionBasePage.steps.switchToEditTab();
+            optionsWrapperComponent.steps.editOptionInputField(2, `${threeOptions[2]}`);
+        });
+
+        it('When the user deletes an option then the deleted option should get removed from the group in the options container of the \'Preview tab\'', () => {
+            optionsWrapperComponent.steps.deleteOption(2);
+            createQuestionBasePage.steps.switchToPreviewTab();
+            draggableOptionContainer.steps.verifyGroupedContainerContentsInPreviewTab(0, ['option 1', 'option 2']);
+        });
+
+        it('When the user adds a new group, the new group should be displayed in the options container of the \'Preview tab\'', () => {
+            createQuestionBasePage.steps.switchToEditTab();
+            draggableOptionsSectionComponent.steps.addGroup();
+            createQuestionBasePage.steps.switchToPreviewTab();
+            utilities.verifyElementCount(draggableOptionContainer.groupedOptionsContainerPreviewTab(), 2);
+        });
+
+        it('By default, the newly added group should have two empty draggable options along with drag handles', () => {
+            draggableOptionContainer.steps.verifyGroupedContainerContentsInPreviewTab(1, ['', '']);
+        });
+
+        //Need to update once https://redmine.zeuslearning.com/issues/557984 is resolved
+        it('When the user deletes a group, it should get removed from 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')
+            optionsWrapperComponent.steps.addInputToOptionsInputField(['option 3', 'option 4']);
+            draggableOptionsSectionComponent.steps.addGroupTitle('Group title B');
+            draggableOptionsSectionComponent.steps.switchToGroupTab(0);
+            draggableOptionsSectionComponent.steps.deleteGroup(0);
+            createQuestionBasePage.steps.switchToPreviewTab();
+            utilities.verifyElementCount(draggableOptionContainer.groupedOptionsContainerPreviewTab(), 1);
+            cy.log('verifying the contents of group 2 after deleting group 1')
+            draggableOptionContainer.steps.verifyGroupedContainerContentsInPreviewTab(0, ['option 3', 'option 4']);
+            utilities.verifyInnerText(draggableOptionContainer.groupedOptionsTitlePreviewTab(), 'Group title B');
+        });
+    }
+}
+
+export const draggableOptionContainer = {
+    ...selectors,
+    steps,
+    tests
+}