itemengine-cypress-automation 1.0.151-28MarchRepoUpdate-20de036.0 → 1.0.152-28th-March-fixes-6236e0e.0

package/cypress/pages/itemPreviewSettingsPage.js

@@ -5,7 +5,7 @@ import { createItemPage } from "./createItemPage";
 import { shortTextResponsePage } from "./shortTextResponsePage";
 import { scoringSectionBase } from "./components";
 import { questionInstructionsComponent } from "./components";
-import { passagePage } from "./passagePage";
+import { contentBlocksPage } from "./contentBlocksPage";
 import { createQuestionBasePage } from "./components";
 
 const selectors = {
@@ -13,7 +13,7 @@ const selectors = {
     ...shortTextResponsePage,
     ...scoringSectionBase,
     ...questionInstructionsComponent,
-    ...passagePage,
+    ...contentBlocksPage,
     ...createQuestionBasePage,
     headerWrapper: () => cy.get('.settings-header-wrapper'),
     //HeadingSectionSelectors
@@ -101,7 +101,7 @@ const selectors = {
 const steps = {
     ...createItemPage.steps,
     ...shortTextResponsePage.steps,
-    ...passagePage.steps,
+    ...contentBlocksPage.steps,
     ...scoringSectionBase.steps,
     ...questionInstructionsComponent.steps,
     ...selectQuestionResourceToolPage.steps,

package/cypress/pages/matchingPage.js

@@ -2,18 +2,27 @@ import constants from "../fixtures/constants";
 import utilities from "../support/helpers/utilities";
 import { createQuestionBasePage, questionInstructionsComponent, autoScoredScoringPreviewTab, scoringSectionBaseEditTab, draggableOptionContainer, draggableOptionsSectionComponent, correctIncorrectAnswerLabelComponent, maximumCapacityPerDropzoneComponent, optionsWrapperComponent, ckEditorToolbar, equationEditorFlyout, autoScoredStudentViewSettings, autoScoredSpecifyCorrectAnswerSection, commonComponents, autoScoredScoringSectionMultiResponseType } from "./components";
 const css = Cypress.env('css');
+const options = ['option 1', 'option 2', 'option 3'];
+const fourOptions = ['option 1', 'option 2', 'option 3', 'option 4'];
 
 const selectors = {
     ...correctIncorrectAnswerLabelComponent,
     ...questionInstructionsComponent,
     ...commonComponents,
     ...autoScoredScoringPreviewTab,
+    ...draggableOptionsSectionComponent,
     ...autoScoredScoringSectionMultiResponseType,
     ...autoScoredSpecifyCorrectAnswerSection,
     ...draggableOptionContainer,
     //Edit tab
     promptInputField: () => cy.get('.edit-mcq-stems-wrapper [role="textbox"]'),
     optionInputField: () => cy.get('.edit-mcq-options-wrapper').eq(1).find('[data-rbd-draggable-id*="option-draggable"] [role="textbox"]'),
+    optionWrapper: () => cy.get('.response-options-wrapper [data-rbd-draggable-id*="option-draggable"]'),
+    optionNumeration: () => cy.get('.response-options-wrapper [class*="SingleOptionstyle__AdornmentDiv"]'),
+    //Specify correct answer section
+    dropzoneSpecifyCorrectAnswerSection: () => cy.get('.authoring-droppable-hotspot-wrapper'),
+    optionContainerOptionsSpecifyCorrectAnswerSection: () => cy.get('.draggable-selected-item'),
+    optionsLabel: () => cy.get('.cloze-with-drag-and-drop-options-label'),
     addPromptButton: () => cy.get('.add-option-wrapper-cls button').contains('Add prompt'),
     deletePromptButton: () => cy.get('.edit-mcq-stems-wrapper [type="button"]'),
 
@@ -29,7 +38,7 @@ const selectors = {
 
     //Preview tab
     promptContainerPreviewTab: () => cy.get('.stem-container'),
-    dropzonePreviewTab: () => cy.get('[class*="MultipleDroppableHotspotstyle__DroppableHotspotWrapper"]'),
+    dropzonePreviewTab: () => cy.get('.cloze-with-drag-and-drop-preview [class*="MultipleDroppableHotspotstyle__DroppableHotspotWrapper"]'),
     dropzoneOptionPreviewTab: () => cy.get('[class*="MultipleDroppedItemstyles__FlexWrapper"]'),
     dropzoneNumeration: () => cy.get('[class*="NumerationDiv"]'),
     correctAnswersNumeration: () => cy.get('.answer-numeration-number-box'),
@@ -50,6 +59,8 @@ const steps = {
     ...equationEditorFlyout.steps,
     ...autoScoredStudentViewSettings.steps,
     ...autoScoredSpecifyCorrectAnswerSection.steps,
+    ...draggableOptionsSectionComponent.steps,
+    ...draggableOptionContainer.steps,
     ...autoScoredScoringSectionMultiResponseType.steps,
     //Edit tab
     addPrompt: () => {
@@ -136,11 +147,26 @@ const steps = {
             matchingPage.optionInputField()
                 .eq(index)
                 .clear()
-                .type(options)
+                .type(options, { delay: 500 })
+                .blur();
+            matchingPage.optionInputField()
+                .eq(index)
                 .should('have.text', options);
         });
     },
 
+    /**
+     * Verifies text in multiple option input fields.
+     * @param {string[]} optionsArray - Array of text to enter into the option input fields.
+     */
+    verifyTextInOptionInputField: (optionsArray) => {
+        optionsArray.forEach((option, index) => {
+            matchingPage.optionInputField()
+                .eq(index)
+                .should('have.text', option);
+        });
+    },
+
     /**
      * This function enters text in an option
      * @param {number} index of option
@@ -149,7 +175,23 @@ const steps = {
     enterTextInOneOptionInputField: (index, options) => {
         matchingPage.optionInputField()
             .eq(index)
-            .type(options);
+            .type(options)
+            .blur();
+        matchingPage.optionInputField()
+            .eq(index)
+            .should('have.text', options);
+    },
+
+    /**
+    * @param {number} index of option input field
+    * @param {string} textContent to enter text in the options input field
+    */
+    editOptionInputField: (index, textContent) => {
+        matchingPage.optionInputField()
+            .eq(index)
+            .clear()
+            .type(textContent)
+            .blur();
     },
 
     /**
@@ -186,6 +228,32 @@ const steps = {
             .should('have.text', '​​​​​​​This is a bold option');
     },
 
+    /**
+    * @param {number} index of the option
+    * @description verify the enter option input field, drag handle, delete button and option numeration
+    */
+    verifyOptionsContents: (index) => {
+        matchingPage.optionInputField()
+            .eq(index)
+            .should('have.attr', 'data-cke-editorplaceholder', 'Enter option');
+        utilities.verifyElementVisibilityState(commonComponents.dragHandleButton(), 'exist');
+        utilities.verifyElementVisibilityState(commonComponents.deleteButton(), 'visible');
+        matchingPage.optionNumeration()
+            .eq(index)
+            .should('have.text', index + 1);
+    },
+
+    verifyDeleteOptionButtonDisabledState: () => {
+        matchingPage.optionWrapper()
+            .eq(0)
+            .within(() => {
+                optionsWrapperComponent.deleteOptionButton()
+                    .each(($element) => {
+                        utilities.verifyElementDisabled(cy.wrap($element))
+                    });
+            });
+    },
+
     /**
     * @description Allots penalty points for each incorrect dropzone
     * @param {number} points - The penalty points to be allotted for each dropzone.
@@ -255,7 +323,7 @@ const steps = {
     /**
     * @param {string} groupTitle group title
     * @param {string[]} optionArray array of options for a particular group
-    * @description add a group with title and options in the response options section 
+    * @description add a group with title and options in the response options section
     */
     addGroupWithTitleAndOptionsInDraggableOptionsSection: (groupTitle, optionArray) => {
         const numOptionsToAdd = Math.max(0, optionArray.length - 2);
@@ -286,6 +354,16 @@ const steps = {
         matchingPage.steps.addGroupWithTitleAndOptionsInDraggableOptionsSection(groupTitles[3], animals[3]);
     },
 
+    verifyOptionContainerOptionSpecifyCorrectAnswerSection: (optionsArray) => {
+        optionsArray.forEach(({ index, optionText }) => {
+            utilities.verifyInnerText(utilities.getNthElement(matchingPage.optionContainerOptionsSpecifyCorrectAnswerSection(), index), optionText);
+        });
+    },
+
+    verifyDropzoneTextSpecifyCorrectAnswerSection: (count, text) => {
+        utilities.verifyInnerText(utilities.getNthElement(matchingPage.dropzoneSpecifyCorrectAnswerSection(), count), text);
+    },
+
     //Preview tab
     /**
     * Enter text in the answer input fields of the specify correct answer section.
@@ -553,13 +631,396 @@ const steps = {
     verifyGradingViewOptionDisabled: () => {
         matchingPage.correctAnswersOptionContainer()
             .should('have.css', 'pointer-events', 'none');
-    }
+    },
+
+    /**
+    * @param {string} groupTitle group title
+    * @param {string[]} optionArray array of options for a particular group
+    * @description add a group with title and options in the response options section 
+    */
+    addGroupWithTitleAndOptionsInDraggableOptionsSection: (groupTitle, optionArray) => {
+        const numOptionsToAdd = Math.max(0, optionArray.length - 2);
+        draggableOptionsSectionComponent.steps.addGroup();
+        draggableOptionsSectionComponent.steps.addGroupTitle(groupTitle);
+        for (let i = 0; i < numOptionsToAdd; i++) {
+            optionsWrapperComponent.steps.addOption();
+        }
+        steps.enterTextInOptionInputField(optionArray);
+    },
 }
 
 const tests = {
     ...autoScoredScoringPreviewTab.tests,
+    ...draggableOptionsSectionComponent.tests,
+    ...optionsWrapperComponent.tests,
+    ...draggableOptionContainer.tests,
     ...scoringSectionBaseEditTab.tests,
     ...autoScoredScoringSectionMultiResponseType.tests,
+
+    //Need to remove when https://redmine.zeuslearning.com/issues/566720 is resolved
+    /**
+     * Verifies the contents and styling of the 'Options' section.
+     * @param {number} optionFieldsCount - The expected number of option input fields.
+     */
+    verifyOptionsSectionContents: ({ optionFieldsCount, optionLabel }) => {
+        it(`\'${optionLabel}\' label should be displayed`, () => {
+            utilities.verifyInnerText(matchingPage.optionsLabel(), optionLabel);
+        });
+
+        it(`By default ${optionFieldsCount} option input fields with placeholder text, drag handle and delete option icon buttons should be displayed`, () => {
+            for (let index = 0; index < optionFieldsCount; index++) {
+                steps.verifyOptionsContents(index);
+            };
+        });
+
+        it('\'Add Option\' button should be present', () => {
+            utilities.verifyInnerText(optionsWrapperComponent.addOptionButton(), 'Add option');
+            utilities.verifyElementVisibilityState(optionsWrapperComponent.addOptionButton(), 'visible');
+        });
+
+        it('CSS of Options section', { tags: 'css' }, () => {
+            utilities.verifyCSS(matchingPage.optionsLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(commonComponents.dragHandleButton().find('path'), {
+                'fill': css.color.secondaryBtnActive
+            });
+            commonComponents.deleteButton()
+                .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
+            utilities.verifyCSS(optionsWrapperComponent.optionsInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(optionsWrapperComponent.addOptionButton(), {
+                'color': css.color.secondaryBtnActive,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+        });
+    },
+
+    //Need to remove when https://redmine.zeuslearning.com/issues/566720 is resolved
+    verifyAddOptionFunctionality: () => {
+        it('When user adds an option using \'Add Option\' button then the added option input field should be displayed and option numeration should increment', () => {
+            let initialOptionCount;
+            matchingPage.steps.getOptionCount().then((count) => {
+                initialOptionCount = count;
+                optionsWrapperComponent.steps.addOption();
+                matchingPage.steps.getOptionCount().should('eq', initialOptionCount + 1);
+                matchingPage.steps.verifyOptionsContents(initialOptionCount);
+            });
+        });
+    },
+
+    //Need to remove when https://redmine.zeuslearning.com/issues/566720 is resolved
+    /**
+     * Verify the error state of an 'Options' input field.
+     * @param {number} inputFieldIndex - The index of the 'Options' input field to verify.
+     * @throws {Error} Throws an error if the expected error message is not displayed.
+     */
+    verifyOptionInputFieldErrorState: (inputFieldIndex) => {
+        it('When user focus in and out of any of the \'Options\' input field without typing anything, an error message should be thrown', () => {
+            matchingPage.optionInputField()
+                .eq(inputFieldIndex)
+                .click()
+                .blur();
+            utilities.verifyInnerText(commonComponents.errorMessage().eq(1), 'Error: Option is required.');
+        });
+
+        it('User should be able to enter text in options input field and \'Error: Option is required.\' error message should disappear', () => {
+            matchingPage.optionInputField()
+                .eq(inputFieldIndex)
+                .type('option 1')
+                .blur();
+            matchingPage.optionWrapper()
+                .eq(inputFieldIndex)
+                .within(() => {
+                    utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
+                });
+        });
+    },
+
+    //Need to remove when https://redmine.zeuslearning.com/issues/566720 is resolved
+    verifyDraggableOptionsForStandardLayoutInSpecifyCorrectAnswerSection: () => {
+        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 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', () => {
+            matchingPage.steps.enterTextInOptionInputField(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', 'option 3', '']);
+            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')
+            matchingPage.steps.enterTextInOneOptionInputField(3, 'option 4');
+            draggableOptionContainer.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(fourOptions);
+        });
+
+        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')
+            steps.editOptionInputField(2, 'option 2');
+            draggableOptionContainer.steps.verifyCountOfDraggableOptionsInSpecifyCorrectAnswerSection(4);
+            draggableOptionContainer.steps.verifyDraggableOptionInOptionsContainerSpecifyCorrectAnswerSection(['option 1', 'option 2', 'option 2', 'option 4']);
+
+            cy.log('Post step: Editing the the identical option back to option 3')
+            steps.editOptionInputField(2, 'option 3');
+        });
+    },
+
+    //Need to remove when https://redmine.zeuslearning.com/issues/566720 is resolved
+    verifyDraggableOptionsForStandardLayoutInPreviewTab: () => {
+        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 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();
+            matchingPage.steps.enterTextInOptionInputField(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', 'option 3', '']);
+            cy.log('Checking that input text to the newly added option is displayed in the options container of the preview tab')
+            createQuestionBasePage.steps.switchToEditTab();
+            matchingPage.steps.enterTextInOneOptionInputField(3, 'option 4');
+            createQuestionBasePage.steps.switchToPreviewTab();
+            draggableOptionContainer.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(fourOptions);
+        });
+
+        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();
+            matchingPage.steps.editOptionInputField(2, 'option 2');
+            createQuestionBasePage.steps.switchToPreviewTab();
+            draggableOptionContainer.steps.verifyDraggableOptionsInOptionsContainerPreviewTab(['option 1', 'option 2', 'option 2', 'option 4'])
+            cy.log('Post step: Editing the the identical option back to option 3')
+            createQuestionBasePage.steps.switchToEditTab();
+            matchingPage.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 = fourOptions.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);
+        });
+    },
+
+    //Need to remove when https://redmine.zeuslearning.com/issues/566720 is resolved
+    addGroupFunctionality: () => {
+        it('When the user clicks on the \'Add Group\' button, a new group should get added with tab \'Group 2\'', () => {
+            draggableOptionsSectionComponent.steps.addGroup();
+            utilities.verifyElementCount(draggableOptionsSectionComponent.groupTab(), 2);
+            utilities.verifyInnerText(utilities.getNthElement(draggableOptionsSectionComponent.groupTab(), 1), 'Group 2');
+        });
+
+        it('By default, the newly added group should have a \'Close\' button next to the group tab, \'Close\' icon should not be displayed next to \'Group 1\' tab, \'Group title\' label and input field, \'Options\' label and 2 option input fields with drag handles and disabled delete buttons', () => {
+            draggableOptionsSectionComponent.steps.verifyGroupTabCloseIconVisible(1);
+            draggableOptionsSectionComponent.steps.verifyGroupedOptionsSectionTitleAndInputField();
+            utilities.verifyElementCount(matchingPage.optionWrapper(), 2);
+            matchingPage.steps.verifyOptionsContents(0);
+            matchingPage.steps.verifyOptionsContents(1);
+        });
+    },
+
+    //Need to remove when https://redmine.zeuslearning.com/issues/566720 is resolved
+    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 three 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', () => {
+            matchingPage.steps.enterTextInOptionInputField(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', 'option 3', '']);
+            cy.log('Checking that input text to the newly added option is displayed in the options container of the specify correct answer section')
+            steps.enterTextInOneOptionInputField(3, `${fourOptions[3]}`);
+        });
+
+        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')
+            steps.editOptionInputField(2, `${fourOptions[1]}`);
+            draggableOptionContainer.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(0, ['option 1', 'option 2', 'option 3', 'option 4']);
+            cy.log('Post step: Editing the the identical option back to option 3')
+            steps.editOptionInputField(2, `${fourOptions[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(3);
+            cy.log('verifying the text of draggable options after deleting an option')
+            draggableOptionContainer.steps.verifyGroupedContainerContentsInSpecifyCorrectAnswerSection(0, ['option 1', 'option 2', 'option 3']);
+        });
+
+        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, ['', '']);
+        });
+    },
+
+    //Need to remove when https://redmine.zeuslearning.com/issues/566720 is resolved
+    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 three 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();
+            steps.enterTextInOptionInputField(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', 'option 3', '']);
+            cy.log('Checking that input text to the newly added option is displayed in the options container of the preview tab')
+            createQuestionBasePage.steps.switchToEditTab();
+            steps.enterTextInOneOptionInputField(3, `${fourOptions[3]}`);
+            createQuestionBasePage.steps.switchToPreviewTab();
+            draggableOptionContainer.steps.verifyGroupedContainerContentsInPreviewTab(0, fourOptions);
+        });
+
+        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();
+            steps.editOptionInputField(2, `${fourOptions[1]}`);
+            createQuestionBasePage.steps.switchToPreviewTab();
+            draggableOptionContainer.steps.verifyGroupedContainerContentsInPreviewTab(0, ['option 1', 'option 2', 'option 2', 'option 4']);
+            cy.log('Post step: Editing the the identical option back to option 3')
+            createQuestionBasePage.steps.switchToEditTab();
+            steps.editOptionInputField(2, `${fourOptions[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(3);
+            createQuestionBasePage.steps.switchToPreviewTab();
+            draggableOptionContainer.steps.verifyGroupedContainerContentsInPreviewTab(0, ['option 1', 'option 2', 'option 3']);
+        });
+
+        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')
+            steps.enterTextInOptionInputField(['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');
+        })
+    },
+
     verifyContentsOfSpecifyCorrectAnswerSection: () => {
         it('When user selects a scoring type then in the \'Correct\' accordion, all the contents should be displayed', () => {
             const promptTextArray = ['Wild', 'Aquatic', 'Pet'];

package/cypress/pages/shortTextResponsePage.js

@@ -14,6 +14,7 @@ const selectors = {
     ...autoScoredSpecifyCorrectAnswerSection,
     ...commonComponents,
     ...additionalSettingsPanel,
+    ...createQuestionBasePage,
 
     answerLabelSpecifyCorrectAnswerSection: () => cy.get('.answer-label'),
     displayCharacterCountLabel: () => cy.get('[data-ngie-testid="display-character-count-checkbox"] .MuiFormControlLabel-label'),

package/cypress/pages/textEntryMathPage.js

@@ -88,7 +88,7 @@ const selectors = {
     },
 
     //Preview tab
-    responseFieldPreviewTab: () => cy.get('.preview-question-text-wrapper .equation-input-without-andornment'),
+    responseFieldPreviewTab: () => cy.get('.preview-question-text-wrapper .equation-input-without-andornment .mq-root-block'),
     responseFieldWrapperPreviewTab: () => cy.get('.cloze-response-wrapper'),
     responseFieldNumerationPreviewTab: () => cy.get('.preview-question-text-wrapper .response-input-adornment'),
     questionContainerPreviewTab: () => cy.get('[class*="ClozeWithTextPreviewstyle__QuestionPreviewWrapper"]'),

package/cypress/pages/textEntryMathWithImagePage.js

@@ -11,7 +11,7 @@ const selectors = {
     ...dialogBoxBase,
 
     addBackgroundButton: () => cy.get('[data-ngie-testid="add-background-tab"]'),
-    responseFieldPreviewTab: () => cy.get('.cloze-math-background-preview .equation-input-without-andornment'),
+    responseFieldPreviewTab: () => cy.get('.cloze-math-background-preview .equation-input-without-andornment .mq-root-block'),
     canvasInPreviewTab: () => cy.get('[class*="PreviewTabstyles__ContentWrapper"] .image-container'),
     textAreaPreviewTab: () => cy.get('.label-image-with-text-preview [class*="TextBoxContainer"]'),
     tickIcon: () => cy.get('.add-background-tick-icon-wrapper [data-name*="Rectangle"]'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "itemengine-cypress-automation",
-  "version": "1.0.151-28MarchRepoUpdate-20de036.0",
+  "version": "1.0.152-28th-March-fixes-6236e0e.0",
   "description": "",
   "main": "index.js",
   "scripts": {