itemengine-cypress-automation 1.0.2

package/cypress/pages/components/dragAndDropResponseOptions.js

@@ -0,0 +1,738 @@
+import { commonComponents } from "./commonComponents";
+import { optionsWrapperComponent } from "./optionsWrapperComponent";
+const optionsForResponses = ['Response 1', 'Response 2'];
+const optionsForThreeResponses = ['Response 1', 'Response 2', 'Response 3'];
+const responseForGroup2 = ['Response 3', 'Response 4'];
+const css = Cypress.env('css');
+
+const selectors = {
+    optionsInputField: () => cy.get('[data-rbd-droppable-id="assessment-option-item-options"] .option-component [title*="Enter"][title*="ption"]'),
+    responseOptionsLabel: () => cy.get('.response-option-label'),
+    responseOptionsLayoutLabel: () => cy.get('#Response-options-layout-dropdown-label'),
+    responseOptionsLayoutDropdown: () => cy.get('#Response-options-layout-select'),
+    responseOptionsLayoutDropdownOptions: (ariaLabel) => cy.get(`[role="listbox"] .response-options-menu-item[aria-label*="${ariaLabel}"]`),
+    responseOptionsLayoutDropdownOptions: (ariaLabel = null) => {
+        if (ariaLabel) {
+            return cy.get(`[role="listbox"] .response-options-menu-item[aria-label*="${ariaLabel}"]`)
+        } else {
+            return cy.get('[role="listbox"] .response-options-menu-item')
+        }
+    },
+    optionNumeration: () => cy.get('[class*="AdornmentDiv"]'),
+    optionsForDragAndDropLabel: () => cy.get('.cloze-with-drag-and-drop-options-label'),
+    groupResponseContainer: () => cy.get('.group-container-box'),
+    groupResponseTitle: () => cy.get('.group-label-wrapper'),
+    groupResponseTitleWrapper: () => cy.get('.group-title-wrapper'),
+    deleteGroupButton: () => cy.get('.group-title-wrapper .ngie-button'),
+    groupTitleLabel: () => cy.get('.group-title'),
+    groupTitleInputField: () => cy.get('.group-title-input [aria-label="Group title"]'),
+    addGroupButton: () => cy.get('.add-group-wrapper .ngie-button'),
+}
+
+//TODO: will need to remove questionType parameter from all steps once, common selectors are made available and then add description for all functions
+const steps = {
+    verifyOptionsForDragAndDropSectionOptionFieldContents: () => {
+        optionsWrapperComponent.optionWrapper()
+            .each(($el, index) => {
+                cy.wrap($el)
+                    .within(() => {
+                        optionsWrapperComponent.optionsInputField()
+                            .verifyPseudoClassBeforeProperty('content', '"Enter option"');
+                        commonComponents.dragHandleButton()
+                            .should('be.visible');
+                        optionsWrapperComponent.deleteOptionButton()
+                            .should('be.visible');
+                        dragAndDropResponseOptions.optionNumeration()
+                            .should('have.text', index + 1)
+                    });
+            });
+    },
+
+    addInputToOptionsForDragAndDropFields: (responseTextArray) => {
+        optionsWrapperComponent.optionsSectionWrapper()
+            .within(() => {
+                responseTextArray.forEach((responseFieldText, optionIndex) => {
+                    optionsWrapperComponent.optionsInputField()
+                        .eq(optionIndex)
+                        .type(responseFieldText, { delay: 0 })
+                        .blur()
+                        .focus()
+                        .should('have.text', responseFieldText);
+                });
+            });
+    },
+
+    addInputToOptionsForGroupedResponseLayout: (groupIndex, responseTextArray) => {
+        dragAndDropResponseOptions.groupResponseContainer()
+            .eq(groupIndex)
+            .within(() => {
+                dragAndDropResponseOptions.steps.addInputToOptionsForDragAndDropFields(responseTextArray);
+            });
+    },
+
+    selectResponseOptionsLayout: (layoutOption) => {
+        dragAndDropResponseOptions.responseOptionsLayoutDropdown()
+            .should('be.visible');
+        dragAndDropResponseOptions.responseOptionsLayoutDropdown()
+            .click();
+        dragAndDropResponseOptions.responseOptionsLayoutDropdownOptions(layoutOption)
+            .click();
+        dragAndDropResponseOptions.responseOptionsLayoutDropdown()
+            .verifyInnerText(layoutOption);
+    },
+
+    addGroupTitle: (groupIndex, groupTitle) => {
+        dragAndDropResponseOptions.groupTitleInputField()
+            .eq(groupIndex)
+            .type(groupTitle, { delay: 0 })
+            .should('have.value', groupTitle);
+    },
+
+    addGroup: () => {
+        dragAndDropResponseOptions.addGroupButton()
+            .click();
+    },
+
+    deleteGroup: (groupIndex) => {
+        dragAndDropResponseOptions.deleteGroupButton()
+            .eq(groupIndex)
+            .click();
+    },
+
+    /**
+     * @param {number} groupIndex index of the group
+     * @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 
+     */
+    addGroupWithTitleAndOptionsInResponseOptionsSection: (groupIndex, groupTitle, optionArray) => {
+        const numOptionsToAdd = Math.max(0, optionArray.length - 2);
+        dragAndDropResponseOptions.addGroupButton()
+            .click();
+        dragAndDropResponseOptions.steps.addGroupTitle(groupIndex, groupTitle);
+        for (let i = 0; i < numOptionsToAdd; i++) {
+            dragAndDropResponseOptions.groupResponseContainer()
+                .eq(groupIndex)
+                .within(() => {
+                    optionsWrapperComponent.steps.addOption();
+                });
+        }
+        dragAndDropResponseOptions.groupResponseContainer()
+            .eq(groupIndex)
+            .within(() => {
+                dragAndDropResponseOptions.steps.addInputToOptionsForDragAndDropFields(optionArray);
+            });
+    },
+
+    /**
+     * @param {string[]} responseTextArray array of options in options input fields
+     * @description verify the text content present in the option input fields
+     */
+    verifyOptionFieldContentsInOptionsSection: (responseTextArray) => {
+        optionsWrapperComponent.optionsSectionWrapper()
+            .within(() => {
+                responseTextArray.forEach((responseFieldText, optionIndex) => {
+                    optionsWrapperComponent.optionsInputField()
+                        .should('have.length', responseTextArray.length);
+                    optionsWrapperComponent.optionsInputField()
+                        .eq(optionIndex)
+                        .should('have.text', responseFieldText);
+                    optionsWrapperComponent.optionNumeration()
+                        .eq(optionIndex)
+                        .should('have.text', optionIndex + 1);
+                });
+            });
+    },
+
+    /**
+     * @param {number} groupIndex index of group
+     * @description verify if a group does not exist in the response options section
+     */
+    verifyGroupInResponseOptionSectionNotExists: (groupIndex) => {
+        dragAndDropResponseOptions.groupResponseContainer()
+            .eq(groupIndex)
+            .should('not.exist');
+
+    },
+
+    /**
+     * @param {number} countOfOptions count of options input fields
+     * @description this function verifies the number of options input fields
+     */
+    verifyCountOfOptionsForDragAndDropInputFields: (countOfOptions) => {
+        dragAndDropResponseOptions.optionsInputField()
+            .should('have.length', countOfOptions);
+    },
+}
+
+const tests = {
+    verifyResponseOptionsLayoutDropdownSection: () => {
+        it('\'Response options\' label should be displayed', () => {
+            dragAndDropResponseOptions.responseOptionsLabel()
+                .verifyInnerText('Response options');
+        });
+
+        it('\'Response options layout\' label and dropdown should be displayed and option \'Standard\' should be selected by default', () => {
+            dragAndDropResponseOptions.responseOptionsLayoutLabel()
+                .verifyInnerText('Response options layout');
+            dragAndDropResponseOptions.responseOptionsLayoutDropdown()
+                .verifyInnerText('Standard')
+                .and('be.visible');
+        });
+
+        it('CSS of \'Response options\',\'Response options layout\' labels and \'Response options layout\' dropdown in default state', { tags: 'css' }, () => {
+            dragAndDropResponseOptions.responseOptionsLabel()
+                .verifyCSS(css.color.labels, css.fontSize.default, css.fontWeight.semibold);
+            dragAndDropResponseOptions.responseOptionsLayoutLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            dragAndDropResponseOptions.responseOptionsLayoutDropdown()
+                .should('have.css', 'background-color', css.color.secondaryBtnBg)
+                .and('have.css', 'border', `1px solid ${css.color.defaultDropdownBorder}`)
+                .find('.dropdown-label-text')
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
+                .verifyPseudoClassBeforeProperty('color', css.color.secondaryBtn);
+        });
+
+        it('Accessibility of \'Response options\', \'Response options layout\' labels and \'Response options layout\' dropdown in default state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropResponseOptions.responseOptionsLabel())
+            cy.checkAccessibility(dragAndDropResponseOptions.responseOptionsLayoutLabel().parents('.response-options-dropdown'));
+        });
+
+        it('When the user clicks on \'Response options layout\' dropdown, a list of 2 options should open - Standard and Grouped', () => {
+            dragAndDropResponseOptions.responseOptionsLayoutDropdown()
+                .click();
+            let dropdownOptions = ['Standard', 'Grouped'];
+            dropdownOptions.forEach((option, count) => {
+                dragAndDropResponseOptions.responseOptionsLayoutDropdownOptions()
+                    .eq(count)
+                    .verifyInnerText(option);
+            });
+        });
+
+        it('CSS of \'Response options layout\' dropdown and dropdown content in active state', { tags: 'css' }, () => {
+            dragAndDropResponseOptions.responseOptionsLayoutDropdown()
+                .should('have.css', 'background-color', css.color.secondaryBtnBg)
+                .and('have.css', 'border', `1px solid ${css.color.activeComponentBorder}`);
+            dragAndDropResponseOptions.responseOptionsLayoutDropdownOptions()
+                .eq(1)
+                .should('have.css', 'background-color', css.color.transparent);
+            dragAndDropResponseOptions.responseOptionsLayoutDropdownOptions()
+                .eq(0)
+                .verifyCSS(css.color.liText, css.fontSize.default, css.fontWeight.regular)
+                .should('have.css', 'background-color', css.color.liTextSelectedBg);
+        });
+
+        it('Accessibility of \'Response options layout\' dropdown and dropdown content in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropResponseOptions.responseOptionsLayoutDropdown());
+            cy.checkAccessibility(dragAndDropResponseOptions.responseOptionsLayoutDropdownOptions().parents('.dropdown-list-ul'));
+        });
+    },
+
+    verifyOptionsSectionContentAndFunctionality: () => {
+        it('\'Options for drag & drop\' label should be displayed', () => {
+            dragAndDropResponseOptions.optionsForDragAndDropLabel()
+                .verifyInnerText('Options for drag & drop')
+                .and('be.visible');
+        });
+
+        it('By default, 2 \'Options\' input fields with numeric counts should be displayed with placeholder text and drag handle and delete option icon buttons should be displayed besides each input field', () => {
+            dragAndDropResponseOptions.steps.verifyOptionsForDragAndDropSectionOptionFieldContents();
+            optionsWrapperComponent.optionWrapper()
+                .each(($el) => {
+                    cy.wrap($el)
+                        .within(() => {
+                            optionsWrapperComponent.deleteOptionButton()
+                                .should('be.visible');
+                        });
+                });
+        });
+
+        tests.verifyDisabledStateOfOptionDeleteButton();
+
+        it('CSS of disabled delete option buttons', { tags: 'css' }, () => {
+            optionsWrapperComponent.optionsSectionWrapper()
+                .within(() => {
+                    optionsWrapperComponent.deleteOptionButton()
+                        .should('have.css', 'opacity', '0.5')
+                        .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
+                });
+        });
+
+        it('When the user hovers over the drag handle of the options then \'Drag to reorder\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the drag handle', () => {
+            optionsWrapperComponent.optionWrapper()
+                .eq(0)
+                .within(() => {
+                    commonComponents.dragHandleButton()
+                        .trigger('mouseover');
+                });
+            commonComponents.tooltipText()
+                .should('be.visible')
+                .verifyInnerText('Drag to reorder');
+            optionsWrapperComponent.optionWrapper()
+                .eq(0)
+                .within(() => {
+                    commonComponents.dragHandleButton()
+                        .trigger('mouseout');
+                });
+            commonComponents.tooltipText()
+                .should('not.exist');
+        });
+
+        it('CSS of drag handle tooltip', { tags: 'css' }, () => {
+            optionsWrapperComponent.optionWrapper()
+                .eq(0)
+                .within(() => {
+                    commonComponents.dragHandleButton()
+                        .trigger('mouseover');
+                });
+            commonComponents.tooltipText()
+                .should('be.visible')
+                .verifyCSS(css.color.whiteText, css.fontSize.small, css.fontWeight.regular);
+            optionsWrapperComponent.optionWrapper()
+                .eq(0)
+                .within(() => {
+                    commonComponents.dragHandleButton()
+                        .trigger('mouseout');
+                });
+            commonComponents.tooltipText()
+                .should('not.exist');
+        });
+
+        it('Accessibility of drag handle tooltip', { tags: 'a11y' }, () => {
+            optionsWrapperComponent.optionWrapper()
+                .eq(0)
+                .within(() => {
+                    commonComponents.dragHandleButton()
+                        .trigger('mouseover');
+                });
+            commonComponents.tooltipText()
+                .should('be.visible');
+            cy.checkAccessibility(commonComponents.tooltipText());
+            optionsWrapperComponent.optionWrapper()
+                .eq(0)
+                .within(() => {
+                    commonComponents.dragHandleButton()
+                        .trigger('mouseout');
+                });
+            commonComponents.tooltipText()
+                .should('not.exist');
+        });
+
+        it('When the user hovers over the disabled delete buttons of the options then \'Minimum two options are required\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the delete button', () => {
+            optionsWrapperComponent.deleteOptionButton()
+                .eq(0)
+                .trigger('mouseover', { force: true });
+            commonComponents.tooltipText()
+                .verifyInnerText('Minimum two options are required');
+            optionsWrapperComponent.deleteOptionButton()
+                .eq(0)
+                .trigger('mouseout', { force: true });
+            commonComponents.tooltipText()
+                .should('not.exist');
+        });
+
+        it('CSS of disabled delete button tooltip', { tags: 'css' }, () => {
+            optionsWrapperComponent.deleteOptionButton()
+                .eq(0)
+                .trigger('mouseover', { force: true });
+            commonComponents.tooltipText()
+                .should('be.visible')
+                .verifyCSS(css.color.whiteText, css.fontSize.small, css.fontWeight.regular);
+            optionsWrapperComponent.deleteOptionButton()
+                .eq(0)
+                .trigger('mouseout', { force: true });
+            commonComponents.tooltipText()
+                .should('not.exist');
+        });
+
+        it('Accessibility of disabled delete button tooltip', { tags: 'a11y' }, () => {
+            optionsWrapperComponent.deleteOptionButton()
+                .eq(0)
+                .trigger('mouseover', { force: true });
+            commonComponents.tooltipText()
+                .should('be.visible');
+            cy.checkAccessibility(commonComponents.tooltipText());
+            optionsWrapperComponent.deleteOptionButton()
+                .eq(0)
+                .trigger('mouseout', { force: true });
+            commonComponents.tooltipText()
+                .should('not.exist');
+        });
+
+        it('\'Add Option\' button should be present', () => {
+            optionsWrapperComponent.addOptionButton()
+                .verifyInnerText('Add option')
+                .and('be.visible');
+        });
+
+        it('CSS of Options section', { tags: 'css' }, () => {
+            dragAndDropResponseOptions.optionsForDragAndDropLabel()
+                .verifyCSS(css.color.sectionHeading, css.fontSize.normal, css.fontWeight.semibold);
+            optionsWrapperComponent.optionWrapper()
+                .eq(0)
+                .within(() => {
+                    commonComponents.dragHandleButton()
+                        .verifyCSS(css.color.secondaryBtnActive, css.fontSize.normal, css.fontWeight.regular);
+                    optionsWrapperComponent.deleteOptionButton()
+                        .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
+                });
+            dragAndDropResponseOptions.optionsInputField()
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+            optionsWrapperComponent.addOptionButton()
+                .verifyCSS(css.color.secondaryBtnActive, css.fontSize.normal, css.fontWeight.medium);
+        });
+
+        it('Accessibility of Options section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(optionsWrapperComponent.optionsSectionWrapper());
+        });
+
+        it('When user adds an option using \'Add Option\' button then the added option input field should be displayed and option numeration should increment', () => {
+            optionsWrapperComponent.addOptionButton()
+                .click();
+            dragAndDropResponseOptions.steps.verifyOptionsForDragAndDropSectionOptionFieldContents();
+        });
+
+        it('When user focus in and out of any of the \'Options\' input field without typing anything, an error message should be thrown', () => {
+            dragAndDropResponseOptions.optionsInputField()
+                .eq(2)
+                .click()
+                .blur();
+            optionsWrapperComponent.optionWrapper()
+                .eq(2)
+                .within(() => {
+                    commonComponents.errorMessage()
+                        .verifyInnerText('Error: Option is required.');
+                });
+        });
+
+        commonComponents.tests.verifyCSSAnda11yOfErrorMessage();
+
+        it('When user enters text in options input field then the error message \'Error: Option is required.\' should disappear', () => {
+            dragAndDropResponseOptions.steps.addInputToOptionsForDragAndDropFields(['Response 1', 'Response 2', 'Response 3']);
+            commonComponents.errorMessage()
+                .should('not.exist');
+        });
+
+        it('When the number of options are greater than 2 then the \'Delete\' icon buttons should get enabled', () => {
+            optionsWrapperComponent.deleteOptionButton()
+                .should('be.enabled');
+        });
+
+        it('CSS of enabled \'Delete\' option button', { tags: 'css' }, () => {
+            optionsWrapperComponent.deleteOptionButton()
+                .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon)
+                .should('have.css', 'opacity', '1');
+        })
+
+        it('Accessibility of enabled \'Delete\' option button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(optionsWrapperComponent.deleteOptionButton().parents('.cloze-with-drag-and-drop-delete'))
+        });
+
+        it('when the user hovers over the enabled \'Delete\' icon buttons, then \'Delete option\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the \'Delete\' icon button', () => {
+            cy.log('Pre step: Focusing out of the newly added option input field')
+            dragAndDropResponseOptions.optionsInputField()
+                .eq(2)
+                .blur();
+            optionsWrapperComponent.deleteOptionButton()
+                .eq(0)
+                .trigger('mouseover');
+            commonComponents.tooltipText()
+                .verifyInnerText('Delete option');
+            optionsWrapperComponent.deleteOptionButton()
+                .eq(0)
+                .trigger('mouseout');
+            commonComponents.tooltipText()
+                .should('not.exist');
+        });
+
+        it('CSS of enabled delete button tooltip', { tags: 'css' }, () => {
+            optionsWrapperComponent.deleteOptionButton()
+                .eq(0)
+                .trigger('mouseover');
+            commonComponents.tooltipText()
+                .should('be.visible')
+                .verifyCSS(css.color.whiteText, css.fontSize.small, css.fontWeight.regular);
+            optionsWrapperComponent.deleteOptionButton()
+                .eq(0)
+                .trigger('mouseout');
+            commonComponents.tooltipText()
+                .should('not.exist');
+        });
+
+        it('Accessibility of enabled delete button tooltip', { tags: 'a11y' }, () => {
+            optionsWrapperComponent.deleteOptionButton()
+                .eq(0)
+                .trigger('mouseover');
+            commonComponents.tooltipText()
+                .should('be.visible');
+            cy.checkAccessibility(commonComponents.tooltipText());
+            optionsWrapperComponent.deleteOptionButton()
+                .eq(0)
+                .trigger('mouseout');
+            commonComponents.tooltipText()
+                .should('not.exist');
+        });
+
+        it('When user clicks on the \'Delete\' option button then the respective options input field should get deleted and option numeration should change accordingly', () => {
+            const optionsAfterDeleting = optionsForThreeResponses.filter((el) => el !== 'Response 2')
+            cy.log('Clicking the \'Delete\' icon button for the 2nd option input field')
+            optionsWrapperComponent.deleteOptionButton()
+                .eq(1)
+                .click();
+            cy.log('Checking that the 3rd option input field should be deleted and option numeration should update accordingly')
+            optionsWrapperComponent.optionWrapper()
+                .should('have.length', 2);
+            optionsWrapperComponent.optionWrapper()
+                .eq(1)
+                .within(() => {
+                    dragAndDropResponseOptions.optionNumeration()
+                        .should('have.text', 2)
+                })
+            cy.log('Verifying the input text given to input fields after deletion of 2nd option')
+            optionsAfterDeleting.forEach((inputFieldText, optionIndex) => {
+                dragAndDropResponseOptions.optionsInputField()
+                    .eq(optionIndex)
+                    .should('have.text', inputFieldText);
+            });
+        });
+
+        tests.verifyDisabledStateOfOptionDeleteButton();
+    },
+
+    verifyGroupedOptionsContentAndFunctionality: () => {
+        it('When the user selects the \'Grouped\' option from the \'Response options layout\' dropdown, a section of options with label \'Group A\' should be displayed with a delete button', () => {
+            dragAndDropResponseOptions.steps.selectResponseOptionsLayout('Grouped');
+            dragAndDropResponseOptions.groupResponseContainer()
+                .should('be.visible')
+                .and('have.length', 1);
+            dragAndDropResponseOptions.groupResponseTitle()
+                .verifyInnerText('Group A')
+                .and('be.visible');
+            dragAndDropResponseOptions.deleteGroupButton()
+                .should('be.visible');
+        });
+
+        dragAndDropResponseOptions.tests.verifyDisabledStateOfGroupDeleteButton();
+
+        it('CSS of disabled delete group button', { tags: 'css' }, () => {
+            dragAndDropResponseOptions.deleteGroupButton()
+                .should('have.css', 'opacity', '0.5')
+                .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
+        });
+
+        it('When the user hovers over the disabled delete button of the group then \'Minimum one group is required\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the delete button', () => {
+            dragAndDropResponseOptions.deleteGroupButton()
+                .trigger('mouseover', { force: true });
+            commonComponents.tooltipText()
+                .verifyInnerText('Minimum one group is required');
+            dragAndDropResponseOptions.deleteGroupButton()
+                .trigger('mouseout', { force: true });
+            commonComponents.tooltipText()
+                .should('not.exist');
+        });
+
+        it('CSS of disabled delete button tooltip', { tags: 'css' }, () => {
+            dragAndDropResponseOptions.deleteGroupButton()
+                .trigger('mouseover', { force: true });
+            commonComponents.tooltipText()
+                .should('be.visible')
+                .verifyCSS(css.color.whiteText, css.fontSize.small, css.fontWeight.regular);
+            dragAndDropResponseOptions.deleteGroupButton()
+                .trigger('mouseout', { force: true });
+            commonComponents.tooltipText()
+                .should('not.exist');
+        });
+
+        it('Accessibility of disabled delete button tooltip', { tags: 'a11y' }, () => {
+            dragAndDropResponseOptions.deleteGroupButton()
+                .trigger('mouseover', { force: true });
+            commonComponents.tooltipText()
+                .should('be.visible');
+            cy.checkAccessibility(commonComponents.tooltipText());
+            dragAndDropResponseOptions.deleteGroupButton()
+                .trigger('mouseout', { force: true });
+            commonComponents.tooltipText()
+                .should('not.exist');
+        });
+
+        it('\'Group title\' label and input field should be displayed and by default, the input field should be empty', () => {
+            dragAndDropResponseOptions.groupTitleLabel()
+                .verifyInnerText('Group title')
+                .and('be.visible');
+            dragAndDropResponseOptions.groupTitleInputField()
+                .should('have.value', '')
+                .and('be.visible');
+        });
+
+        it('\'Enter group title\' placeholder should be displayed inside the group title input field, when the user enters text in the input field, the placeholder should disappear and when the user clears the input field, the placeholder text should appear again', () => {
+            dragAndDropResponseOptions.groupTitleInputField()
+                .should('have.attr', 'placeholder', 'Enter group title');
+            dragAndDropResponseOptions.steps.addGroupTitle(0, 'Group title A')
+            dragAndDropResponseOptions.groupTitleInputField()
+                .should('not.have.attr', 'placeholder');
+            dragAndDropResponseOptions.groupTitleInputField()
+                .clear();
+            dragAndDropResponseOptions.groupTitleInputField()
+                .should('have.attr', 'placeholder', 'Enter group title');
+            cy.log('Post step: adding the group title again')
+            dragAndDropResponseOptions.steps.addGroupTitle(0, 'Group title A')
+        });
+
+        it('CSS of Grouped section contents', { tags: 'css' }, () => {
+            dragAndDropResponseOptions.groupResponseTitle()
+                .verifyCSS(css.color.sectionHeading, css.fontSize.default, css.fontWeight.semibold);
+            dragAndDropResponseOptions.groupTitleLabel()
+                .verifyCSS(css.color.labels, css.fontSize.normal, css.fontWeight.semibold);
+            dragAndDropResponseOptions.groupTitleInputField()
+                .verifyCSS(css.color.text, css.fontSize.default, css.fontWeight.regular);
+        });
+
+        dragAndDropResponseOptions.tests.verifyOptionsSectionContentAndFunctionality();
+
+        it('\'Add Group\' button should be present', () => {
+            dragAndDropResponseOptions.addGroupButton()
+                .verifyInnerText('Add group')
+                .and('be.visible');
+        });
+
+        it('When the user clicks on the \'Add Group\' button, a new group should get added with label \'Group B\'', () => {
+            dragAndDropResponseOptions.addGroupButton()
+                .click();
+            dragAndDropResponseOptions.groupResponseContainer()
+                .should('have.length', 2);
+            dragAndDropResponseOptions.groupResponseContainer()
+                .eq(1)
+                .should('be.visible');
+            dragAndDropResponseOptions.groupResponseTitle()
+                .eq(1)
+                .verifyInnerText('Group B');
+        });
+
+        it('By default, the newly added group should have a delete button next to the group title, \'Group title\' label and input field, \'Options\' label and 2 option input fields with drag handles and disabled delete buttons and the user should be able to add input to the text fields', () => {
+            dragAndDropResponseOptions.deleteGroupButton()
+                .eq(1)
+                .should('be.visible');
+            dragAndDropResponseOptions.groupResponseContainer()
+                .eq(1)
+                .within(() => {
+                    dragAndDropResponseOptions.groupTitleLabel()
+                        .verifyInnerText('Group title')
+                        .and('be.visible');
+                    dragAndDropResponseOptions.groupTitleInputField()
+                        .should('have.value', '')
+                        .and('be.visible');
+                    dragAndDropResponseOptions.steps.verifyOptionsForDragAndDropSectionOptionFieldContents();
+                });
+            cy.log('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');
+        });
+
+        it('When the number of groups are more than 1 then the \'Delete\' icon buttons should get enabled', () => {
+            dragAndDropResponseOptions.deleteGroupButton()
+                .should('be.enabled');
+        });
+
+        it('CSS of enabled delete group button', { tags: 'css' }, () => {
+            dragAndDropResponseOptions.deleteGroupButton()
+                .should('have.css', 'opacity', '1')
+                .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
+        });
+
+        it('Accessibility of enabled delete group button', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dragAndDropResponseOptions.groupResponseTitleWrapper());
+        });
+
+        it('when the user hovers over the enabled \'Delete\' icon button, then \'Delete group\' message should be displayed on a tooltip and the tooltip should disappear if focus is removed from the \'Delete\' icon button', () => {
+            dragAndDropResponseOptions.deleteGroupButton()
+                .eq(0)
+                .trigger('mouseover');
+            commonComponents.tooltipText()
+                .should('be.visible')
+                .verifyInnerText('Delete group');
+            dragAndDropResponseOptions.deleteGroupButton()
+                .eq(0)
+                .trigger('mouseout');
+            commonComponents.tooltipText()
+                .should('not.exist');
+        });
+
+        it('CSS of enabled delete button tooltip', { tags: 'css' }, () => {
+            dragAndDropResponseOptions.deleteGroupButton()
+                .eq(0)
+                .trigger('mouseover');
+            commonComponents.tooltipText()
+                .should('be.visible')
+                .verifyCSS(css.color.whiteText, css.fontSize.small, css.fontWeight.regular);
+            dragAndDropResponseOptions.deleteGroupButton()
+                .eq(0)
+                .trigger('mouseout');
+            commonComponents.tooltipText()
+                .should('not.exist');
+        });
+
+        it('Accessibility of enabled delete button tooltip', { tags: 'a11y' }, () => {
+            dragAndDropResponseOptions.deleteGroupButton()
+                .eq(0)
+                .trigger('mouseover', { force: true });
+            cy.checkAccessibility(commonComponents.tooltipText());
+            dragAndDropResponseOptions.deleteGroupButton()
+                .eq(0)
+                .trigger('mouseout', { force: true });
+            commonComponents.tooltipText()
+                .should('not.exist');
+        });
+
+        it('When the user deletes a group the response options section should get updated accordingly', () => {
+            dragAndDropResponseOptions.deleteGroupButton()
+                .eq(0)
+                .click();
+            dragAndDropResponseOptions.groupResponseContainer()
+                .should('have.length', 1);
+            dragAndDropResponseOptions.groupResponseTitle()
+                .verifyInnerText('Group A');
+            cy.log('Verifying the text content of the 2nd group after deletion of 1st group')
+            dragAndDropResponseOptions.groupResponseContainer()
+                .within(() => {
+                    responseForGroup2.forEach((inputFieldText, optionIndex) => {
+                        dragAndDropResponseOptions.optionsInputField()
+                            .eq(optionIndex)
+                            .should('have.text', inputFieldText);
+                    });
+                    dragAndDropResponseOptions.groupTitleInputField()
+                        .should('have.value', 'Group title B');
+                });
+        });
+
+        dragAndDropResponseOptions.tests.verifyDisabledStateOfGroupDeleteButton();
+    },
+
+    verifyDisabledStateOfGroupDeleteButton: () => {
+        it('When only one group is present, the delete button should be in disabled state', () => {
+            dragAndDropResponseOptions.deleteGroupButton()
+                .should('be.disabled');
+        });
+    },
+
+    verifyDisabledStateOfOptionDeleteButton: () => {
+        it('When only two options are present, the delete buttons should be in disabled state', () => {
+            optionsWrapperComponent.optionsSectionWrapper()
+                .within(() => {
+                    optionsWrapperComponent.deleteOptionButton()
+                        .each(($element) => {
+                            cy.wrap($element)
+                                .should('be.disabled');
+                        });
+                });
+        });
+    },
+}
+export const dragAndDropResponseOptions = {
+    ...selectors,
+    steps,
+    tests
+}