itemengine-cypress-automation 1.0.131 → 1.0.133-7thMarchFixes-0e78080.0

package/cypress/e2e/ILC/FillInTheGapsDragAndDropNew/dropzoneSettings.js

@@ -0,0 +1,335 @@
+import { dialogBoxBase, fillInTheGapsDragAndDropPage } from "../../../pages";
+import utilities from "../../../support/helpers/utilities";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+const css = Cypress.env('css');
+
+describe('Create item page - Fill in the gaps with drag and drop: Dropzone settings', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Dropzone settings - Contents', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When the user clicks on a dropzone settings button, then dropzone settings popup should be displayed with the title \'Dropzone settings\'', () => {
+            fillInTheGapsDragAndDropPage.steps.clickOnResponseAreaSettingsButton(0);
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBoxTitle(), 'visible');
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxTitle(), 'Dropzone settings');
+        });
+
+        it('\'Width (px)\', \'Height (px)\' labels and input fields with default values should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.responseAreaSettingsWidthLabel(), 'Width (px)');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.responseAreaSettingsWidthLabel(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.responseAreaSettingsWidthInputField(), 'visible');
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaSettingsWidthInputFieldValue(160);
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.responseAreaSettingsHeightLabel(), 'Height (px)');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.responseAreaSettingsHeightLabel(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.responseAreaSettingsHeightInputField(), 'visible');
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaSettingsHeightInputFieldValue(54);
+        });
+
+        it('The minimum allowed value for \'Width (px)\' and \'Height (px)\' input fields should be \'80\' and \'32\' respectively', () => {
+            fillInTheGapsDragAndDropPage.steps.verifyMinimumValueOfWidthAndHeightInputFields();
+        });
+
+        it('When user gives an input lower than \'80\' in \'Width (px)\' input field, then the input field value should be automatically set to 80', () => {
+            fillInTheGapsDragAndDropPage.steps.addInputToWidthInputField(50);
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaSettingsWidthInputFieldValue(80);
+        });
+
+        it('When user gives an input lower than \'32\' in \'Height (px)\' input field, then the input field value should be automatically set to 32', () => {
+            fillInTheGapsDragAndDropPage.steps.addInputToHeightInputField(30);
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaSettingsHeightInputFieldValue(32);
+        });
+
+        it('\'Word wrap\' and \'Set for all dropzones\' labels and checkboxes should be displayed and \'Set for all dropzones\' checkbox should be checked', () => {
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.dropzoneSettingsWordWrapLabel(), 'Word wrap');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.dropzoneSettingsWordWrapLabel(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.dropzoneSettingsWordWrapCheckbox(), 'exist');
+            fillInTheGapsDragAndDropPage.steps.verifyWordWrapCheckboxUnchecked();
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.dropzoneSettingsSetForAllDropzoneLabel(), 'Set for all dropzones');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.dropzoneSettingsSetForAllDropzoneLabel(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.dropzoneSettingsSetForAllDropzoneCheckbox(), 'exist');
+            fillInTheGapsDragAndDropPage.steps.verifySetForAllDropzoneCheckboxChecked();
+        });
+
+        it('\'OK\' and \'Cancel\' button should be displayed in the popup', () => {
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.responseAreaSettingsCancelButton(), 'Cancel');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.responseAreaSettingsCancelButton(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.responseAreaSettingsOkButton(), 'OK');
+            utilities.verifyElementVisibilityState(fillInTheGapsDragAndDropPage.responseAreaSettingsOkButton(), 'visible');
+        });
+
+        it('When user updates any value and clicks on \'Cancel\' button, then the dropzone settings popup should close and the updated values should not be saved', () => {
+            fillInTheGapsDragAndDropPage.steps.addInputToWidthInputField(150);
+            fillInTheGapsDragAndDropPage.steps.addInputToHeightInputField(120);
+            fillInTheGapsDragAndDropPage.steps.checkWordWrappedCheckbox();
+            fillInTheGapsDragAndDropPage.steps.uncheckSetForAllDropzoneCheckbox();
+            fillInTheGapsDragAndDropPage.steps.clickOnResponseAreaSettingsCancelButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            cy.log('Reopening dropzone settings popup and verifying changes not retained');
+            fillInTheGapsDragAndDropPage.steps.clickOnResponseAreaSettingsButton(0);
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaSettingsWidthInputFieldValue(160);
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaSettingsHeightInputFieldValue(54);
+            fillInTheGapsDragAndDropPage.steps.verifyWordWrapCheckboxUnchecked();
+            fillInTheGapsDragAndDropPage.steps.verifySetForAllDropzoneCheckboxChecked();
+        });
+
+        it('When user updates any value and clicks on \'OK\' button, then the dropzone settings popup should close and the updated values should not be saved', () => {
+            fillInTheGapsDragAndDropPage.steps.addInputToWidthInputField(150);
+            fillInTheGapsDragAndDropPage.steps.addInputToHeightInputField(120);
+            fillInTheGapsDragAndDropPage.steps.checkWordWrappedCheckbox();
+            fillInTheGapsDragAndDropPage.steps.uncheckSetForAllDropzoneCheckbox();
+            fillInTheGapsDragAndDropPage.steps.clickOnResponseAreaSettingsOkButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'notExist');
+            cy.log('Reopening dropzone settings popup and verifying changes are retained');
+            fillInTheGapsDragAndDropPage.steps.clickOnResponseAreaSettingsButton(0);
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaSettingsWidthInputFieldValue(150);
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaSettingsHeightInputFieldValue(120);
+            fillInTheGapsDragAndDropPage.steps.verifyWordWrapCheckboxChecked();
+            fillInTheGapsDragAndDropPage.steps.verifySetForAllDropzoneCheckboxUnchecked();
+        });
+
+        it('CSS of dropzone level alternate answer popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(dialogBoxBase.dialogBoxTitle(), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.responseAreaSettingsWidthLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.responseAreaSettingsHeightLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.responseAreaSettingsWidthInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.responseAreaSettingsHeightInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.dropzoneSettingsWordWrapLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.dropzoneSettingsWordWrapCheckbox().parent().find('.checkbox-icon-border-rect'), {
+                'fill': css.color.activeButtons
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.dropzoneSettingsSetForAllDropzoneLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.responseAreaSettingsCancelButton(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.primaryBtnBg
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.responseAreaSettingsOkButton(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.transparent
+            });
+        });
+
+        it('Accessibility of dropzone level alternate answer popup', { tags: 'css' }, () => {
+            cy.checkAccessibility(fillInTheGapsDragAndDropPage.alternateAnswerPopup());
+        });
+    });
+
+    describe('Dropzone settings - Width and Height input field functionality in Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.clickOnResponseAreaSettingsButton(0);
+        });
+
+        it('When \'Set for all dropzones\' checkbox is checked, user updates the width input field value and clicks on OK, then width of all response areas in question input field should be updated', () => {
+            fillInTheGapsDragAndDropPage.steps.addInputToWidthInputField(120);
+            fillInTheGapsDragAndDropPage.steps.clickOnResponseAreaSettingsOkButton();
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaWidth(0, '120px');
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaWidth(1, '120px');
+        });
+
+        it('When \'Set for all dropzones\' checkbox is checked, user updates the width input field value, then width of dropzones in specify correct answer section should be updated', () => {
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneWidthSpecifyCorrectAnswerSection(0, '120px');
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneWidthSpecifyCorrectAnswerSection(1, '120px');
+        });
+
+        it('When \'Set for all dropzones\' checkbox is unchecked, user updates the width input field value and clicks on OK, then width of that particular response area in question input field should be updated', () => {
+            cy.log('Pre-step: Uncheck \'Set for all dropzones\' checkbox')
+            fillInTheGapsDragAndDropPage.steps.clickOnResponseAreaSettingsButton(0);
+            fillInTheGapsDragAndDropPage.steps.uncheckSetForAllDropzoneCheckbox();
+            fillInTheGapsDragAndDropPage.steps.addInputToWidthInputField(180);
+            fillInTheGapsDragAndDropPage.steps.clickOnResponseAreaSettingsOkButton();
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaWidth(0, '180px');
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaWidth(1, '120px');
+        });
+
+        it('When \'Set for all dropzones\' checkbox is checked, user updates the width input field value, then width of that particular dropzone in specify correct answer section should be updated', () => {
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneWidthSpecifyCorrectAnswerSection(0, '180px');
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneWidthSpecifyCorrectAnswerSection(1, '120px');
+        });
+
+        it('When \'Set for all dropzones\' checkbox is checked, user updates the height input field value and clicks on OK, then height of all response areas in question input field should be updated', () => {
+            cy.log('Pre-step: Check \'Set for all dropzones\' checkbox')
+            fillInTheGapsDragAndDropPage.steps.clickOnResponseAreaSettingsButton(0);
+            fillInTheGapsDragAndDropPage.steps.checkSetForAllDropzoneCheckbox();
+            fillInTheGapsDragAndDropPage.steps.addInputToHeightInputField(100);
+            fillInTheGapsDragAndDropPage.steps.clickOnResponseAreaSettingsOkButton();
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaHeight(0, '100px');
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaHeight(1, '100px');
+        });
+
+        it('When \'Set for all dropzones\' checkbox is checked, user updates the height input field value, then height of dropzones in specify correct answer section should be updated', () => {
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneHeightSpecifyCorrectAnswerSection(0, '100px');
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneHeightSpecifyCorrectAnswerSection(1, '100px');
+        });
+
+        it('When \'Set for all dropzones\' checkbox is unchecked, user updates the height input field value and clicks on OK, then height of that particular response area in question input field should be updated', () => {
+            cy.log('Pre-step: Uncheck \'Set for all dropzones\' checkbox')
+            fillInTheGapsDragAndDropPage.steps.clickOnResponseAreaSettingsButton(0);
+            fillInTheGapsDragAndDropPage.steps.uncheckSetForAllDropzoneCheckbox();
+            fillInTheGapsDragAndDropPage.steps.addInputToHeightInputField(125);
+            fillInTheGapsDragAndDropPage.steps.clickOnResponseAreaSettingsOkButton();
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaHeight(0, '125px');
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaHeight(1, '100px');
+        });
+
+        it('When \'Set for all dropzones\' checkbox is checked, user updates the height input field value, then height of that particular dropzone in specify correct answer section should be updated', () => {
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneHeightSpecifyCorrectAnswerSection(0, '125px');
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneHeightSpecifyCorrectAnswerSection(1, '100px');
+        });
+    });
+
+    describe('Dropzone settings - Width and Height input field functionality in Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.clickOnResponseAreaSettingsButton(0);
+        });
+
+        it('When \'Set for all dropzones\' checkbox is checked, user updates the width and height input field value and clicks on OK, then dimensions of all dropzones in preview tab should be updated', () => {
+            fillInTheGapsDragAndDropPage.steps.addInputToWidthInputField(120);
+            fillInTheGapsDragAndDropPage.steps.addInputToHeightInputField(150);
+            fillInTheGapsDragAndDropPage.steps.clickOnResponseAreaSettingsOkButton();
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneWidthPreviewTab(0, '120px');
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneHeightPreviewTab(0, '150px');
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneWidthPreviewTab(1, '120px');
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneHeightPreviewTab(1, '150px');
+        });
+
+        it('When \'Set for all dropzones\' checkbox is unchecked, user updates the width and height input field value and clicks on OK, then dimensions of that particular dropzone in in preview tab should be updated', () => {
+            cy.log('Pre-step: Uncheck \'Set for all dropzones\' checkbox')
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.clickOnResponseAreaSettingsButton(0);
+            fillInTheGapsDragAndDropPage.steps.uncheckSetForAllDropzoneCheckbox();
+            fillInTheGapsDragAndDropPage.steps.addInputToWidthInputField(180);
+            fillInTheGapsDragAndDropPage.steps.addInputToHeightInputField(130);
+            fillInTheGapsDragAndDropPage.steps.clickOnResponseAreaSettingsOkButton();
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneWidthPreviewTab(0, '180px');
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneHeightPreviewTab(0, '130px');
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneWidthPreviewTab(1, '120px');
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneHeightPreviewTab(1, '150px');
+        });
+    });
+
+    describe('Dropzone settings - Word wrap edit tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.addInputToOptionsInputField(['Branches of a plant have flowers which in turn have petals', 'Leaves grow on the branches of a plant which in turn grow on the stem']);
+        });
+
+        it('When \'Word wrap\' checkbox is unchecked and user drops a long text option in specify correct answer dropzone, then the dropped long text option should be incompletely displayed in the dropzone with an ellipses at the end and a tooltip which displays the entire option', () => {
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Branches of a plant have flowers which in turn have petals': 0 });
+            fillInTheGapsDragAndDropPage.steps.verifyOptionTextNotWordWrappedInDropzoneSpecifyCorrectAnswerSection(0);
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneOptionTooltipSpecifyCorrectAnswerSection(0, 'Branches of a plant have flowers which in turn have petals');
+        });
+
+        it('When \'Set for all dropzones\' checkbox is checked and user checks the \'Word wrap\' checkbox, then the wordwrap should be applied to all dropzones in specify correct answer section', () => {
+            fillInTheGapsDragAndDropPage.steps.clickOnResponseAreaSettingsButton(0);
+            fillInTheGapsDragAndDropPage.steps.checkWordWrappedCheckbox();
+            fillInTheGapsDragAndDropPage.steps.clickOnResponseAreaSettingsOkButton();
+            fillInTheGapsDragAndDropPage.steps.verifyOptionTextIsWordWrappedInDropzoneSpecifyCorrectAnswerSection(0);
+        });
+
+        it('When the \'Word wrap\' checkbox is checked and user drops a long text option in specify correct answer dropzone, then the dropped long text option should be word wrapped and the height of the dropzone should increase to accommodate the long text option', () => {
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneHeightWhenLongTextIsDroppedInSpecifyCorrectAnswerSection();
+            fillInTheGapsDragAndDropPage.steps.verifyOptionTextIsWordWrappedInDropzoneSpecifyCorrectAnswerSection(1);
+        });
+
+        it('When \'Set for all dropzones\' checkbox is unchecked and user unchecks the \'Word wrap\' checkbox, then the wordwrap property should only be removed from that particular dropzone and its height should return to its original value', () => {
+            fillInTheGapsDragAndDropPage.steps.clickOnResponseAreaSettingsButton(0);
+            fillInTheGapsDragAndDropPage.steps.uncheckSetForAllDropzoneCheckbox();
+            fillInTheGapsDragAndDropPage.steps.uncheckWordWrappedCheckbox();
+            fillInTheGapsDragAndDropPage.steps.clickOnResponseAreaSettingsOkButton();
+            fillInTheGapsDragAndDropPage.steps.verifyOptionTextNotWordWrappedInDropzoneSpecifyCorrectAnswerSection(0);
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneHeightSpecifyCorrectAnswerSection(0, '54px');
+        });
+    });
+
+    describe('Dropzone settings - Word wrap preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsDragAndDropPage.steps.addInputToOptionsInputField(['Branches of a plant have flowers which in turn have petals', 'Leaves grow on the branches of a plant which in turn grow on the stem']);
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+        });
+
+        it('When \'Word wrap\' checkbox is unchecked and user drops a long text option in specify correct answer dropzone, then the dropped long text option should be incompletely displayed in the dropzone with an ellipses at the end and a tooltip which displays the entire option', () => {
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Branches of a plant have flowers which in turn have petals': 0 });
+            fillInTheGapsDragAndDropPage.steps.verifyOptionTextNotWordWrappedInDropzonePreviewTab(0);
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneOptionTooltipPreviewTab(0, 'Branches of a plant have flowers which in turn have petals');
+        });
+
+        it('When \'Set for all dropzones\' checkbox is checked and user checks the \'Word wrap\' checkbox, then wordwrap should be applied to all dropzones in specify correct answer section', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.clickOnResponseAreaSettingsButton(0);
+            fillInTheGapsDragAndDropPage.steps.checkWordWrappedCheckbox();
+            fillInTheGapsDragAndDropPage.steps.clickOnResponseAreaSettingsOkButton();
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Branches of a plant have flowers which in turn have petals': 0 });
+            fillInTheGapsDragAndDropPage.steps.verifyOptionTextIsWordWrappedInDropzonePreviewTab(0);
+        });
+
+        it('When the \'Word wrap\' checkbox is checked and user drops a long text option in specify correct answer dropzone, then the dropped long text option should be word wrapped and the height of the dropzone should increase to accommodate the long text option', () => {
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneHeightWhenLongTextIsDroppedInPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.verifyOptionTextIsWordWrappedInDropzonePreviewTab(1);
+        });
+
+        it('When \'Set for all dropzones\' checkbox is unchecked and user unchecks the \'Word wrap\' checkbox, then the wordwrap property should only be removed from that particular dropzone and its height should return to its original value', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.clickOnResponseAreaSettingsButton(0);
+            fillInTheGapsDragAndDropPage.steps.uncheckSetForAllDropzoneCheckbox();
+            fillInTheGapsDragAndDropPage.steps.uncheckWordWrappedCheckbox();
+            fillInTheGapsDragAndDropPage.steps.clickOnResponseAreaSettingsOkButton();
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzonePreviewTab({ 'Branches of a plant have flowers which in turn have petals': 0 });
+            fillInTheGapsDragAndDropPage.steps.verifyOptionTextNotWordWrappedInDropzoneSpecifyCorrectAnswerSection(0);
+            fillInTheGapsDragAndDropPage.steps.verifyDropzoneHeightPreviewTab(0, '54px');
+        });
+    });
+});

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

@@ -0,0 +1,142 @@
+import { fillInTheGapsDragAndDropPage } from "../../../pages";
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import utilities from "../../../support/helpers/utilities";
+const css = Cypress.env('css');
+
+describe('Create item page - Fill in the gaps with text: Question instructions, question input field', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Question instructions input field - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyQuestionInstructionsInputFieldEditTab();
+    });
+
+    describe('Question instructions input field - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyQuestionInstructionsInputFieldPreviewTab();
+    });
+
+    describe('Question input field - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            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 response areas should be present', () => {
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.questionLabel(), 'Question');
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.questionInputField(), 'Lorem ipsum dolor sit amet, \n1\nclose\n onsectetur adipiscing elit. Ut pellentesque tincidunt ornare. Integer porttitor est quis urna porttitor,eget \n2\nclose\n tempus tellus dapibus.');
+            utilities.verifyElementCount(fillInTheGapsDragAndDropPage.responseArea(), 2);
+        });
+
+        it('The response area 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++) {
+                fillInTheGapsDragAndDropPage.steps.verifyResponseAreaContents(index)
+            };
+        });
+
+        it('CSS of Question input field contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.questionInputField(), {
+                'color': css.color.text,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.responseArea().find('.add_response_element'), {
+                'background-color': css.color.figActiveComponentBg,
+                'border': `1px solid ${css.color.activeButtons}`
+            });
+            utilities.verifyCSS(fillInTheGapsDragAndDropPage.responseAreaNumeration(), {
+                'color': css.color.liText,
+                'font-size': '32px',
+                'font-weight': css.fontWeight.regular
+            });
+            fillInTheGapsDragAndDropPage.responseAreaCloseButton()
+                .verifyPseudoClassBeforeProperty('color', css.color.activeButtons)
+        });
+
+        it('When the user has not focused inside the question input field, the \'add text container\' button should be in disabled state', () => {
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaButtonDisabled();
+        });
+
+        it('When the user focuses in the question input field, the \'+add text container\' button should get enabled, and when the user clicks on the \'+add text container\' button, a response area in the question input field, a dropzone along with \'Dropzone #\' label in the \'Specify correct answer\' section, a new \'aria label for dropzones\' input field in the additional settings should get added', () => {
+            fillInTheGapsDragAndDropPage.steps.focusInQuestionInputField();
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaButtonEnabled();
+            fillInTheGapsDragAndDropPage.steps.clickOnAddResponseAreaButton();
+            utilities.verifyElementCount(fillInTheGapsDragAndDropPage.responseArea(), 3);
+            fillInTheGapsDragAndDropPage.steps.verifyResponseAreaContents(2);
+            utilities.verifyElementCount(fillInTheGapsDragAndDropPage.dropzoneSpecifyCorrectAnswerSection(), 3);
+            utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsDragAndDropPage.dropzoneLabelSpecifyCorrectAnswerSection(), 2), 'Dropzone 3');
+            fillInTheGapsDragAndDropPage.steps.expandAdditonalSettings();
+            utilities.verifyElementCount(fillInTheGapsDragAndDropPage.enterAriaLabelInputField(), 3);
+        });
+
+        it('When the user clicks on the \'close\' button present on a response area, the response area in the question input field should get removed and the count of the response areas present in the question input field should get updated accordingly, response field along with \'Response #\' label in the \'specify correct answer\' section, \'Response #\' accordion in the additional settings accordion and the respective response field in the \'Preview tab\' should also get removed', () => {
+            cy.log('Switching to edit tab')
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.deleteAResponseArea(1);
+            cy.log('Checking if 3rd response area gets removed from the question input field and the numeric counts get updated')
+            utilities.verifyElementCount(fillInTheGapsDragAndDropPage.responseArea(), 2);
+            for (let index = 0; index < 2; index++) {
+                fillInTheGapsDragAndDropPage.steps.verifyResponseAreaContents(index)
+            };
+            utilities.verifyElementCount(fillInTheGapsDragAndDropPage.dropzoneSpecifyCorrectAnswerSection(), 2);
+            for (let index = 0; index < 2; index++) {
+                utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsDragAndDropPage.dropzoneLabelSpecifyCorrectAnswerSection(), index), `Dropzone ${index + 1}`);
+            };
+        });
+
+        it('When the user removes all response areas from the question input field, an error message \'Error: Minimum one response token is required.\' should be displayed', () => {
+            cy.log('Switching to edit tab')
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.deleteAResponseArea(0);
+            fillInTheGapsDragAndDropPage.steps.deleteAResponseArea(0);
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.errorMessage(), 'Error: Minimum one response token is required.')
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyErrorMessageCSSAndA11y();
+
+        fillInTheGapsDragAndDropPage.tests.addResponseAreaAndVerifyMinimumOneAreaRequiredErrorMessageNotExist();
+
+        fillInTheGapsDragAndDropPage.tests.verifyQuestionInputFieldPlaceholderText();
+    });
+
+    describe('Question input field - Preview tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When the user adds a new response area in the question input field, the added response area should be displayed in the preview tab', () => {
+            fillInTheGapsDragAndDropPage.steps.addResponseArea();
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            utilities.verifyElementCount(fillInTheGapsDragAndDropPage.dropzonePreviewTab(), 3);
+        });
+
+        it('When the user edits the question input field text, the modified text should be visible in the preview tab', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.addInputToQuestionInputField('Lorem ipsum');
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.questionContainerPreviewTab(), 'Lorem ipsum dolor sit amet, \n onsectetur adipiscing elit. Ut pellentesque tincidunt ornare. Integer porttitor est quis urna porttitor,eget \n tempus tellus dapibus.\nLorem ipsum');
+        });
+
+        it('When the user deletes a response area, it should get deleted from the question preview', () => {
+            fillInTheGapsDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsDragAndDropPage.steps.deleteAResponseArea(2);
+            fillInTheGapsDragAndDropPage.steps.switchToPreviewTab();
+            utilities.verifyInnerText(fillInTheGapsDragAndDropPage.questionContainerPreviewTab(), 'Lorem ipsum dolor sit amet, \n onsectetur adipiscing elit. Ut pellentesque tincidunt ornare. Integer porttitor est quis urna porttitor,eget \n tempus tellus dapibus.Lorem ipsum');
+        });
+    });
+});

package/cypress/e2e/ILC/FillInTheGapsDragAndDropNew/headerSection.js

@@ -0,0 +1,76 @@
+import abortEarlySetup from "../../../support/helpers/abortEarly";
+import { dialogBoxBase, fillInTheGapsDragAndDropPage } from "../../../pages";
+import utilities from "../../../support/helpers/utilities";
+const options = ['Flower', 'Leaves'];
+
+describe('Create item page - Fill in the gaps drag and drop: Header section and Saving question', () => {
+    before(() => {
+        cy.loginAs('admin');
+    });
+
+    describe('Header section contents', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyCreateQuestionPageQuestionTypeHeader('Fill in the gaps with drag and drop');
+    });
+
+    describe('Tabs section', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyTabsSection();
+    });
+
+    describe('Cancel button', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+        });
+
+        fillInTheGapsDragAndDropPage.tests.verifyCancelButton('fill in the gaps with drag and drop')
+    });
+
+    describe('Save Question button', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps with drag and drop');
+            cy.barsPreLoaderWait();
+        });
+
+        describe('Validation error messages', () => {
+            dialogBoxBase.tests.verifyRequiredFieldsWarningPopupOnClickingSaveButton();
+
+            it('Validation error messages should be displayed below required input fields', () => {
+                fillInTheGapsDragAndDropPage.steps.verifyQuestionInstructionsErrorMessage();
+                fillInTheGapsDragAndDropPage.steps.verifyOptionsInputFieldErrorMessage(0);
+                fillInTheGapsDragAndDropPage.steps.verifyOptionsInputFieldErrorMessage(1);
+                fillInTheGapsDragAndDropPage.steps.verifyPointsFieldErrorMessage();
+                fillInTheGapsDragAndDropPage.steps.verifySpecifyCorrectAnswerErrorIconIsVisible();
+                fillInTheGapsDragAndDropPage.steps.verifySpecifyCorrectAnswerErrorMessage();
+            });
+
+            it('Validation error messages should disappear when required input fields are filled', () => {
+                fillInTheGapsDragAndDropPage.steps.addTextInQuestionInstructionsInputField('Drag and drop options in the correct dropzone');
+                fillInTheGapsDragAndDropPage.steps.addInputToOptionsInputField(options);
+                fillInTheGapsDragAndDropPage.steps.clickAndDropOptionInDropzoneSpecifyCorrectAnswerSection({ 'Flower': 0, 'Leaves': 1 });
+                fillInTheGapsDragAndDropPage.steps.allotPoints(10);
+                fillInTheGapsDragAndDropPage.steps.verifyErrorMessageIsNotDisplayed();
+                fillInTheGapsDragAndDropPage.steps.verifySpecifyCorrectAnswerErrorIconNotExists();
+            });
+
+            fillInTheGapsDragAndDropPage.tests.verifyCreateItemWrapperContentsA11y();
+        });
+
+        describe('Saving a question', () => {
+            it('Clicking on Save Question button the question should get saved and a snackbar with text \'Saved successfully!\' should be displayed', () => {
+                fillInTheGapsDragAndDropPage.steps.saveAQuestionAndVerifySnackbar();
+            });
+            fillInTheGapsDragAndDropPage.tests.verifySavedSuccessfullySnackbarCSSAndA11y();
+        });
+    });
+});