itemengine-cypress-automation 1.0.128 → 1.0.130

package/cypress/e2e/ILC/FillInTheGapsDropdownNew/dropdownOptionsSection.js

@@ -0,0 +1,328 @@
+import { fillInTheGapsDropdownPage } from "../../../pages";
+import { commonComponents, optionsWrapperComponent } from "../../../pages/components";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+const optionsForDropdown = ['Flower', 'Petal', 'Stem', 'Branch'];
+
+describe('Create item page - Fill in the gaps with dropdown: Dropdown options section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Dropdown options section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+        });
+
+        it('By default, \'Dropdown options\' section with two tabs, "Dropdown 1" and "Dropdown 2" should be displayed. "Dropdown 1" tab in selected state', () => {
+            utilities.verifyInnerText(fillInTheGapsDropdownPage.dropdownOptionsLabel(), 'Dropdown options');
+            utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsDropdownPage.dropdownOptionsTab(), 0), 'Dropdown 1');
+            fillInTheGapsDropdownPage.steps.verifyDropdownOptionsTabIsSelected(0);
+        });
+
+        it('By default 4 option input fields with placeholder text, drag handle and delete option icon buttons should be displayed', () => {
+            for (let index = 0; index < 4; index++) {
+                fillInTheGapsDropdownPage.steps.verifyOptionsInputFieldContents(index);
+            };
+        });
+
+        it('\'Add Option\' button should be present', () => {
+            utilities.verifyInnerText(fillInTheGapsDropdownPage.addOptionButton(), 'Add option');
+            utilities.verifyElementVisibilityState(fillInTheGapsDropdownPage.addOptionButton(), 'visible');
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyDragHandleTooltip();
+
+        it('When user clicks on the \'Delete\' option button then the respective options input field should get deleted and option numeration should change accordingly', () => {
+            cy.log('Pre step: Adding text in all option input fields')
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown);
+            const optionsAfterDeleting = optionsForDropdown.filter((el) => el !== optionsForDropdown[1]);
+            fillInTheGapsDropdownPage.steps.deleteOption(1);
+            utilities.verifyElementCount(optionsWrapperComponent.optionWrapper(), 3);
+            cy.log('Verifying the input text given to input fields after deletion of 2nd option')
+            optionsAfterDeleting.forEach((inputFieldText, optionIndex) => {
+                utilities.verifyInputFieldValue(utilities.getNthElement(fillInTheGapsDropdownPage.dropdownOptionsInputField(), optionIndex), inputFieldText);
+            });
+        });
+
+        it('When only two options are present, the delete buttons should be in disabled state', () => {
+            cy.log('Deleting one more option')
+            fillInTheGapsDropdownPage.steps.deleteOption(2);
+            fillInTheGapsDropdownPage.steps.verifyDeleteOptionButtonDisabledState();
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyDisabledDeleteButtonTooltip();
+
+        fillInTheGapsDropdownPage.tests.verifyAddOptionFunctionalityForDropdownOptions();
+
+        it('When user focus in and out of any of the \'Options\' input field without typing anything, an error message should be thrown', () => {
+            fillInTheGapsDropdownPage.steps.focusInAndFocusOutOfDropdownOptionInputField(0);
+            utilities.verifyInnerText(commonComponents.errorMessage(), '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', () => {
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionInputField(2, 'option 1');
+            commonComponents.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyEnabledDeleteButtonAndTooltip();
+
+        it('When user add another response area, another dropdown options tab \'Dropdown 3\' should be added and it should not be in selected state', () => {
+            utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsDropdownPage.dropdownOptionsTab(), 0), 'Dropdown 1');
+            fillInTheGapsDropdownPage.steps.verifyDropdownOptionsTabIsSelected(0);
+            fillInTheGapsDropdownPage.steps.verifyDropdownOptionsTabIsNotSelected(1);
+            fillInTheGapsDropdownPage.steps.verifyDropdownOptionsTabIsNotSelected(2);
+        });
+
+        it('When user clicks on \'Dropdown 2\' tab, then user should be navigated to \'Dropdown 2\' options tab and it should have the default 4 empty option input fields', () => {
+            fillInTheGapsDropdownPage.steps.navigateToDropdownOptionsTab(1);
+            fillInTheGapsDropdownPage.steps.verifyDropdownOptionsTabIsSelected(1);
+            fillInTheGapsDropdownPage.steps.verifyDropdownOptionsTabIsNotSelected(0);
+            for (let index = 0; index < optionFieldsCount; index++) {
+                fillInTheGapsDropdownPage.steps.verifyOptionsInputFieldContents(index);
+            };
+        });
+
+        it('User should be able to give input to the option input fields in \'Dropdown 2\' tab', () => {
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionInputField(0, 'Dropdown 2 option 1');
+        });
+
+        it('When all option input fields in \'Dropdown 2\' are not filled, then user should be able to navigate to a different \'Dropdown options\' tab', () => {
+            fillInTheGapsDropdownPage.steps.navigateToDropdownOptionsTab(0);
+            fillInTheGapsDropdownPage.steps.verifyDropdownOptionsTabIsSelected(0);
+            fillInTheGapsDropdownPage.steps.verifyDropdownOptionsTabIsNotSelected(1);
+        });
+
+        it('CSS of Options section', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsDropdownPage.dropdownOptionsLabel(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(utilities.getNthElement(fillInTheGapsDropdownPage.dropdownOptionsTab(), 0), {
+                'color': css.color.activeButtons,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(utilities.getNthElement(fillInTheGapsDropdownPage.dropdownOptionsTab(), 0), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(commonComponents.dragHandleButton().find('svg'), {
+                'fill': css.color.secondaryBtnActive
+            });
+            commonComponents.deleteButton()
+                .verifyPseudoClassBeforeProperty('color', css.color.deleteIcon);
+            utilities.verifyCSS(fillInTheGapsDropdownPage.dropdownOptionsInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsDropdownPage.addOptionButton(), {
+                'color': css.color.secondaryBtnActive,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.medium
+            });
+        });
+
+        it('Accessibility of dropdown options section', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDropdownPage.dropdownOptionsLabel().parents('[class*="LabelImageWithDropDownstyles__ResponseOptionWrapper"]'));
+        });
+    });
+
+    describe('Dropdown options in Specify correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When user has not entered text in the options input field then the dropdown should be disabled and the user should not be able to expand the dropdown in the \'Specify correct answer\'', () => {
+            fillInTheGapsDropdownPage.steps.verifyDisabledDropdownInSpecifyCorrectAnswerSection(0);
+        });
+
+        it('When the user has not added any options, on hovering over the dropdown, a tooltip \'Please add options\' should be displayed and on focusing away from the dropdown, the tooltip should disappear', () => {
+            utilities.getNthElement(fillInTheGapsDropdownPage.dropdownSpecifyCorrectAnswerSection(), 0)
+                .verifyTooltip('Please add options');
+        });
+
+        it('CSS of specify correct answer section disabled dropdown', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsDropdownPage.dropdownSpecifyCorrectAnswerSection(), {
+                'opacity': '1',
+                'background': css.color.defaultBackground
+            });
+        });
+
+        it('Accessibility of specify correct answer section disabled dropdown', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDropdownPage.dropdownSpecifyCorrectAnswerSection());
+        });
+
+        it('When user enters a text in at least 1 option input field then the dropdown should be enabled', () => {
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionInputField(0, optionsForDropdown[0]);
+            utilities.verifyElementNotDisabled(utilities.getNthElement(fillInTheGapsDropdownPage.dropdownSpecifyCorrectAnswerSection(), 0));
+        });
+
+        it('Added text in option input field should be displayed in dropdown of \'Specify correct answer\' section', () => {
+            cy.log('Add input to all options input field for dropdown 1');
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown);
+            fillInTheGapsDropdownPage.steps.expandDropdownInSpecifyCorrectAnswerSection(0);
+            fillInTheGapsDropdownPage.steps.verifyDropdownOptionsSpecifyCorrectAnswer(optionsForDropdown);
+        });
+
+        it('When user deletes an option then the deleted option should not be displayed in dropdown in \'Specify correct answer\' section', () => {
+            fillInTheGapsDropdownPage.steps.deleteOption(3);
+            cy.log('Checking the deleted option should not exist in the dropdown')
+            fillInTheGapsDropdownPage.steps.expandDropdownInSpecifyCorrectAnswerSection(0);
+            let optionsForDropdown1 = optionsForDropdown.slice(0, 3);
+            fillInTheGapsDropdownPage.steps.verifyDropdownOptionsSpecifyCorrectAnswer(optionsForDropdown1);
+        });
+
+        it('When user adds an option using \'Add Option\' button then the added option should be displayed in dropdown in \'Specify correct answer\' section', () => {
+            fillInTheGapsDropdownPage.steps.addOption();
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionInputField(3, `${optionsForDropdown[3]}`);
+            fillInTheGapsDropdownPage.steps.expandDropdownInSpecifyCorrectAnswerSection(0);
+            fillInTheGapsDropdownPage.steps.verifyDropdownOptionsSpecifyCorrectAnswer(optionsForDropdown);
+        });
+
+        it('When the user has added two same options in the options section, only one occurrence of that option should be listed in the dropdown', () => {
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionInputField(0, `${optionsForDropdown[1]}`);
+            let optionsForDropdown1 = optionsForDropdown.slice(1, 4);
+            fillInTheGapsDropdownPage.steps.expandDropdownInSpecifyCorrectAnswerSection(0);
+            fillInTheGapsDropdownPage.steps.verifyDropdownOptionsSpecifyCorrectAnswer(optionsForDropdown1);
+        });
+
+        it('When user has adds another response area, then the newly added dropdown should be in disabled state in specify correct answer section', () => {
+            fillInTheGapsDropdownPage.steps.addResponseArea();
+            fillInTheGapsDropdownPage.steps.verifyDisabledDropdownInSpecifyCorrectAnswerSection(1);
+        });
+
+        it('CSS of specify correct answer section dropdown in active state', { tags: 'css' }, () => {
+            cy.log('Expand dropdown');
+            fillInTheGapsDropdownPage.steps.selectResponseFromDropdownSpecifyCorrectAnswerSection(0, `${optionsForDropdown[3]}`);
+            fillInTheGapsDropdownPage.steps.expandDropdownInSpecifyCorrectAnswerSection(0);
+            //Selected option
+            utilities.verifyCSS(fillInTheGapsDropdownPage.dropdownListOptions(optionsForDropdown[3]), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg
+            });
+            //Unselected option
+            utilities.verifyCSS(fillInTheGapsDropdownPage.dropdownListOptions(optionsForDropdown[2]), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.transparent
+            });
+            utilities.verifyCSS(fillInTheGapsDropdownPage.dropdownSpecifyCorrectAnswerSection(), {
+                'border': `1px solid ${css.color.activeComponentBorder}`,
+            });
+        });
+
+        it('Accessibility of specify correct answer section dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsDropdownPage.dropdownList());
+        });
+    });
+
+    describe('Dropdown options in preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+        });
+
+        it('When user has not entered text in the options input field then the dropdown should be disabled and the user should not be able to expand the dropdown in the \'preview tab\'', () => {
+            fillInTheGapsDropdownPage.steps.verifyDisabledDropdownInPreviewTab(0);
+        });
+
+        it('When user enters a text in at least 1 option input field then the preview tab dropdown should be enabled', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionInputField(0, optionsForDropdown[0]);
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            utilities.verifyElementNotDisabled(utilities.getNthElement(fillInTheGapsDropdownPage.dropdownPreviewTab(), 0));
+        });
+
+        it('The added text in dropdown options input fields should be displayed in dropdown of \'preview tab\'', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionFields(0, optionsForDropdown);
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.steps.expandDropdownInPreviewTab(0)
+            fillInTheGapsDropdownPage.steps.verifyDropdownOptionsPreviewTab(optionsForDropdown);
+            cy.log('Selecting an option to close the dropdown')
+            fillInTheGapsDropdownPage.steps.selectOptionFromDropdownList(`${optionsForDropdown[3]}`);
+        });
+
+        it('When user deletes an option then the deleted option should not be displayed in dropdown in \'preview tab\'', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.deleteOption(3);
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            cy.log('Checking the deleted option should not exist in the dropdown')
+            fillInTheGapsDropdownPage.steps.expandDropdownInPreviewTab(0);
+            let optionsForDropdown1 = optionsForDropdown.slice(0, 3);
+            fillInTheGapsDropdownPage.steps.verifyDropdownOptionsPreviewTab(optionsForDropdown1);
+            cy.log('Selecting an option to close the dropdown')
+            fillInTheGapsDropdownPage.steps.selectOptionFromDropdownList(`${optionsForDropdown[1]}`);
+        });
+
+        it('When user adds an option using \'Add Option\' button then the added option should be displayed in dropdown in \'preview tab\'', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.addOption();
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionInputField(3, `${optionsForDropdown[3]}`);
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.steps.expandDropdownInPreviewTab(0);
+            fillInTheGapsDropdownPage.steps.verifyDropdownOptionsPreviewTab(optionsForDropdown);
+            cy.log('Selecting an option to close the dropdown')
+            fillInTheGapsDropdownPage.steps.selectOptionFromDropdownList(`${optionsForDropdown[1]}`);
+        });
+
+        it('When the user has added two same options in the options, only one occurrence of that option should be listed in the dropdown', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.addInputToDropdownOptionInputField(0, `${optionsForDropdown[1]}`);
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.steps.expandDropdownInPreviewTab(0);
+            let optionsForDropdown1 = optionsForDropdown.slice(1, 4);
+            fillInTheGapsDropdownPage.steps.verifyDropdownOptionsPreviewTab(optionsForDropdown1);
+            cy.log('Selecting an option to close the dropdown')
+            fillInTheGapsDropdownPage.steps.selectOptionFromDropdownList(`${optionsForDropdown[1]}`);
+        });
+
+        it('When user has adds another response area, then the newly added dropdown should be in disabled state in preview tab', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.addResponseArea();
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            fillInTheGapsDropdownPage.steps.verifyDisabledDropdownInPreviewTab(2);
+        });
+
+        it('CSS of preview tab dropdown', { tags: 'css' }, () => {
+            cy.log('Expand dropdown');
+            fillInTheGapsDropdownPage.steps.expandDropdownInPreviewTab(0);
+            //Selected option
+            utilities.verifyCSS(fillInTheGapsDropdownPage.dropdownListOptions(optionsForDropdown[3]), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.liTextSelectedBg
+            });
+            //Unselected option
+            utilities.verifyCSS(fillInTheGapsDropdownPage.dropdownListOptions(optionsForDropdown[2]), {
+                'color': css.color.liText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.transparent
+            });
+            utilities.verifyCSS(fillInTheGapsDropdownPage.dropdownSpecifyCorrectAnswerSection(), {
+                'border': `1px solid ${css.color.activeComponentBorder}`,
+            });
+        });
+
+        it('Accessibility of preview tab dropdown in active state', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(commonComponents.dropdownList());
+        });
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsDropdownNew/editTabBasicSection.js

@@ -0,0 +1,144 @@
+import { dialogBoxBase, fillInTheGapsDropdownPage } from "../../../pages";
+import utilities from "../../../support/helpers/utilities";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+
+const dropdownPointerStyles = ['none', 'bottom', 'bottom right', 'right', 'top right', 'top', 'top left', 'left', 'bottom left'];
+
+describe('Create item page - Fill in the gaps: Question instructions, Options section', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question instructions input field - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyQuestionInstructionsInputFieldEditTab();
+    });
+
+    describe('Question instructions input field - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
+    });
+
+
+    describe('Question input field - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Question\' label and input field should be displayed and by default in the question input field, sample \'Lorem Ipsum\' text along with two dropdowns should be present', () => {
+            utilities.verifyInnerText(fillInTheGapsDropdownPage.questionLabel(), 'Question');
+            utilities.verifyInnerText(fillInTheGapsDropdownPage.questionInputField(), 'Lorem ipsum dolor sit amet, \n1\nclose\nonsectetur adipiscing elit. Ut pellentesque tinciduntornare. Integer porttitor est quis urna porttitor, eget tempus tellus dapibus \n2\nclose');
+            utilities.verifyElementCount(fillInTheGapsDropdownPage.responseArea(), 2);
+        });
+
+        it('The dropdown should be displayed with a settings button, numeric count and a close button in the question input field', () => {
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDropdownPage.steps.verifyResponseAreaContents(index)
+            };
+        });
+
+        it('CSS of Question input field contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsDropdownPage.questionInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsDropdownPage.responseArea().find('.add_response_element'), {
+                'background-color': css.color.figActiveComponentBg,
+                'border': `1px solid ${css.color.activeButtons}`
+            });
+            utilities.verifyCSS(fillInTheGapsDropdownPage.responseAreaNumeration(), {
+                'color': css.color.liText,
+                'font-size': '32px',
+                'font-weight': css.fontWeight.regular
+            });
+            fillInTheGapsDropdownPage.responseAreaCloseButton()
+                .verifyPseudoClassBeforeProperty('color', css.color.activeButtons)
+        });
+
+        it('When the user has not focused inside the question input field, the \'add dropdown\' button should be in disabled state', () => {
+            fillInTheGapsDropdownPage.steps.verifyResponseAreaButtonDisabled();
+        });
+
+        it('When the user focuses in the question input field, the \'+add dropdown\' button should get enabled, and when the user clicks on the \'+add dropdown\' button, a dropdown in the question input field, a new dropdown tab with \'Dropdown #\' label in the \'Dropdown options\' section, a new dropdown in the \'Specify correct answer\' section and a new \'ARIA label for dropdowns\' input field in the additional settings should get added', () => {
+            fillInTheGapsDropdownPage.steps.focusInQuestionInputField();
+            fillInTheGapsDropdownPage.steps.verifyResponseAreaButtonEnabled();
+            fillInTheGapsDropdownPage.steps.clickOnAddResponseAreaButton();
+            utilities.verifyElementCount(fillInTheGapsDropdownPage.responseArea(), 3);
+            fillInTheGapsDropdownPage.steps.verifyResponseAreaContents(2);
+            utilities.verifyElementCount(fillInTheGapsDropdownPage.dropdownOptionsTab(), 3);
+            utilities.verifyElementCount(fillInTheGapsDropdownPage.dropdownSpecifyCorrectAnswerSection(), 3);
+            fillInTheGapsDropdownPage.steps.expandAdditonalSettings();
+            utilities.verifyElementCount(fillInTheGapsDropdownPage.enterAriaLabelInputField(), 3);
+        });
+
+        it('When the user clicks on the \'close\' button present on a dropdown, the dropdown in the question input field should get removed and the count of the dropdowns present in the question input field should get updated accordingly, the dropdown tab count, dropdown count in the \'specify correct answer\' section and \'ARIA label for dropdowns\' input field in the additional settings should also get removed', () => {
+            cy.log('Switching to edit tab')
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.deleteAResponseArea(1);
+            cy.log('Checking if 3rd dropdown gets removed from the question input field and the numeric counts get updated')
+            utilities.verifyElementCount(fillInTheGapsDropdownPage.responseArea(), 2);
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDropdownPage.steps.verifyResponseAreaContents(index)
+            };
+            utilities.verifyElementCount(fillInTheGapsDropdownPage.dropdownOptionsTab(), 2);
+            utilities.verifyElementCount(fillInTheGapsDropdownPage.dropdownSpecifyCorrectAnswerSection(), 2);
+            utilities.verifyElementCount(fillInTheGapsDropdownPage.enterAriaLabelInputField(), 2);
+        });
+
+        it('When the user removes all dropdowns from the question input field, an error message \'Error: Minimum one response token is required.\' should be displayed', () => {
+            cy.log('Switching to edit tab')
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.deleteAResponseArea(0);
+            fillInTheGapsDropdownPage.steps.deleteAResponseArea(0);
+            utilities.verifyInnerText(fillInTheGapsDropdownPage.errorMessage(), 'Error: Minimum one response token is required.')
+        });
+
+        fillInTheGapsDropdownPage.tests.verifyErrorMessageCSSAndA11y();
+
+        fillInTheGapsDropdownPage.tests.addResponseAreaAndVerifyMinimumOneAreaRequiredErrorMessageNotExist();
+
+        fillInTheGapsDropdownPage.tests.verifyQuestionInputFieldPlaceholderText();
+    });
+
+    describe('Question input field - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDropdownPage.steps.navigateToCreateQuestion('fill in the gaps with dropdown');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When the user adds a new dropdown in the question input field, the added dropdown should be displayed in the preview tab', () => {
+            fillInTheGapsDropdownPage.steps.addResponseArea();
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            utilities.verifyElementCount(fillInTheGapsDropdownPage.dropdownPreviewTab(), 3);
+        });
+
+        it('When the user edits the question input field text, the modified text should be visible in the preview tab', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.addInputToQuestionInputField('Lorem ipsum');
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(fillInTheGapsDropdownPage.questionContainerPreviewTab(), 'Lorem ipsum dolor sit amet, \n​\n​\nonsectetur adipiscing elit. Ut pellentesque tinciduntornare. Integer porttitor est quis urna porttitor, eget tempus tellus dapibus \n​\n​\n​\n​\nLorem ipsum');
+        });
+
+        it('When the user deletes a dropdown, it should get deleted from the question preview', () => {
+            fillInTheGapsDropdownPage.steps.switchToEditTab();
+            fillInTheGapsDropdownPage.steps.deleteAResponseArea(2);
+            fillInTheGapsDropdownPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(fillInTheGapsDropdownPage.questionContainerPreviewTab(), 'Lorem ipsum dolor sit amet, \n​\n​\nonsectetur adipiscing elit. Ut pellentesque tinciduntornare. Integer porttitor est quis urna porttitor, eget tempus tellus dapibus \n​\n​\nLorem ipsum');
+        });
+    });
+});