itemengine-cypress-automation 1.0.86 → 1.0.87

package/cypress/e2e/ILC/FillInTheGapsOverImageDragAndDrop/backgroundImageAndCanvasProperties.js

@@ -4,6 +4,9 @@ import abortEarlySetup from "../../../support/helpers/abortEarly";
 const css = Cypress.env('css');
 
 const alignmentOptions = ['Top left', 'Center', 'Top right'];
+const dropzonePointerStyles = ['none', 'bottom', 'bottom right', 'right', 'top right', 'top', 'top left', 'left', 'bottom left'];
+const labels = [fillInTheGapsOverImageDragAndDropPage.selectedColorLabel, fillInTheGapsOverImageDragAndDropPage.hexLabel]
+const inputFields = [fillInTheGapsOverImageDragAndDropPage.hexInputField];
 
 describe('Create item page - Fill in the gaps: Question instructions, Options section', () => {
     before(() => {
@@ -13,7 +16,7 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
     describe('Question instructions input field - Edit tab', () => {
         abortEarlySetup();
         before(() => {
-            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image - drag and drop');
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
             cy.barsPreLoaderWait();
         });
 
@@ -89,6 +92,7 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
             fillInTheGapsOverImageDragAndDropPage.steps.verifyFileNameLabel('highlightImage.jpg');
             utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.canvasImage(), 'visible');
             utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.uploadImageProgressBar(), 'notExist');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
         });
 
         it('Delete button should appear beside uploaded file\'s name', () => {
@@ -175,6 +179,499 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
         });
     });
 
+    describe('Canvas section - Edit tab', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+        });
+
+        it('\'Canvas\' label and canvas should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.canvasLabel(), 'Canvas');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.canvasLabel(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.canvas(), 'visible');
+        });
+
+        it('When user uploads background image for canvas, then it should be displayed', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+        });
+
+        it('Select dropzone, Insert dropzone and Insert text buttons should be displayed.', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.selectDropzoneButton(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.insertDropzoneButton(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.insertTextButton(), 'visible');
+        });
+
+        it('When \'Insert dropzone\' button is selected, then \'Insert dropzone\' label should be displayed inside canvas', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasMenuButtonSelected();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasSelectedMenuText('Insert dropzone');
+        });
+
+        it('When user hovers over select dropzone button, then \'Select dropzone\' tooltip should be displayed', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyTooltipInnerText(fillInTheGapsOverImageDragAndDropPage.selectDropzoneButton, 'Select dropzone');
+        });
+
+        it('When user hovers over insert dropzone button, then \'Insert dropzone\' tooltip should be displayed', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyTooltipInnerText(fillInTheGapsOverImageDragAndDropPage.insertDropzoneButton, 'Insert dropzone');
+        });
+
+        it('When user hovers over insert text button, then \'Insert text\' tooltip should be displayed', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyTooltipInnerText(fillInTheGapsOverImageDragAndDropPage.insertTextButton, 'Insert text');
+        });
+
+        it('Undo, redo and clear all buttons should be displayed', () => {
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.undoButton(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.redoButton(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.clearAllButton(), 'visible');
+        });
+
+        it('When user hovers over undo button, then \'Undo\' tooltip should be displayed', () => {
+            utilities.hoverAwayFromElement(fillInTheGapsOverImageDragAndDropPage.canvasSelectedMenuText());
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyTooltipInnerText(fillInTheGapsOverImageDragAndDropPage.undoButton, 'Undo');
+        });
+
+        it('When user hovers over clear all button, then \'Clear all\' tooltip should be displayed', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyTooltipInnerText(fillInTheGapsOverImageDragAndDropPage.clearAllButton, 'Clear all');
+        });
+
+        it('When user hovers over redo button, then \'Redo\' tooltip should be displayed', () => {
+            utilities.hoverAwayFromElement(fillInTheGapsOverImageDragAndDropPage.undoButton());
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyTooltipInnerText(fillInTheGapsOverImageDragAndDropPage.redoButton, 'Redo');
+        });
+    });
+
+    describe('Canvas : Insert dropzone, Delete, Undo, Redo - Specify correct answer section', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+        });
+
+        it('When user inserts dropzones in canvas, then dropzones should be added in specify correct answer section', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(60);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzoneCountInSpecifyCorrectAnswerSection(3);
+        });
+
+        it('When user deletes a dropzone in canvas, then dropzone should be removed from specify correct answer section and remaining dropzones should be numbered appropriately', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.removeDropzone(1);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzoneCountInSpecifyCorrectAnswerSection(2);
+            for (let i = 0; i < 2; i++) {
+                utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.dropzoneLabelSpecifyCorrectAnswerSection(), i), `Dropzone ${i + 1}`);
+            }
+        });
+
+        it('When user clicks on undo button in canvas section, then previous action should reversed and previously deleted dropzone should be added in specify correct answer section', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.undoAction();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzoneCountInSpecifyCorrectAnswerSection(3);
+        });
+
+        it('When the user clicks on the redo button after performing an undo action in canvas section, then the previously added dropzone should be deleted again in specify correct answer section', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.redoAction();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzoneCountInSpecifyCorrectAnswerSection(2);
+        });
+
+        it('When the user reaches the initial state by performing undo actions in canvas section, then specify correct answer section should not have dropzone', () => {
+            for (var i = 0; i < 4; i++) {
+                fillInTheGapsOverImageDragAndDropPage.steps.undoAction();
+            };
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.dropzoneWrapperSpecifyCorrectAnswerSection(), 'notExist');
+        });
+
+        it('When the user reaches the latest state by performing redo actions in canvas section, then 3 dropzones should be visible in specify correct answer section', () => {
+            for (var i = 0; i < 4; i++) {
+                fillInTheGapsOverImageDragAndDropPage.steps.redoAction();
+            };
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzoneCountInSpecifyCorrectAnswerSection(2);
+        });
+
+        it('When user clicks on clear all in canvas, then dropzones in specify correct answer should disappear', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clearAll();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.dropzoneWrapperSpecifyCorrectAnswerSection(), 'notExist');
+        });
+    });
+
+    describe('Canvas : Select dropzone -  Edit tab canvas section functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(20);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(30);
+        });
+
+        it('When user clicks on \'Select dropzone\' button is selected, then \'Select\' label should be displayed inside canvas', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.selectCanvasMenuButton('Select dropzone');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasSelectedMenuText('Select');
+        });
+
+        it(`When user selects dropzone, then 9 options ${dropzonePointerStyles} should be displayed and by default ${dropzonePointerStyles[7]} should be selected`, () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.selectDropzone(1);
+            utilities.verifyElementCount(fillInTheGapsOverImageDragAndDropPage.dropzoneStyle(), 9);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzonePointerStyle(dropzonePointerStyles[7], 1);
+        });
+
+        it('CSS of dropzones', { tags: 'css' }, () => {
+            utilities.verifyCSS(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.dropzone(), 1), {
+                'border': `2px solid ${css.color.activeComponentBorder}`
+            });
+            utilities.verifyCSS(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.dropzone(), 0), {
+                'border': `2px dashed ${css.color.activeComponentBorder}`
+            });
+        });
+
+        it(`When user hovers over the pointer styles, then ${dropzonePointerStyles} tooltip should be displayed`, () => {
+            dropzonePointerStyles.forEach((dropzonePointer, index) => {
+                cy.log('Clicking on canvas Selected Menu Text to hover away from select dropzone button');
+                fillInTheGapsOverImageDragAndDropPage.steps.clickOnCanvasSelectedMenuText();
+                fillInTheGapsOverImageDragAndDropPage.dropzoneStyle()
+                    .eq(index)
+                    .verifyTooltip(dropzonePointer);
+            });
+        });
+
+        it(`When the user has selected a dropzone and chooses  ${dropzonePointerStyles[0]}, then selected drop zone should have the specified effect applied, and the other drop zones should remain unaffected.`, () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.selectDropzonePointerStyle(dropzonePointerStyles[0]);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzonePointerStyle(dropzonePointerStyles[0], 1);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzonePointerStyle(dropzonePointerStyles[7], 0);
+        });
+
+        it(`When the user chooses  ${dropzonePointerStyles[1]}, then selected drop zone should have the specified effect applied, and the other drop zones should remain unaffected.`, () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.selectDropzonePointerStyle(dropzonePointerStyles[1]);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzonePointerStyle(dropzonePointerStyles[1], 1);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzonePointerStyle(dropzonePointerStyles[7], 0);
+        });
+    });
+
+    describe('Canvas : Insert and delete dropzone -  Edit tab canvas section functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+        });
+
+        it('When user clicks inside canvas, then one dropzone should be added with pointer, close button and numeration.', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(80);
+            utilities.verifyElementCount(fillInTheGapsOverImageDragAndDropPage.dropzoneWrapper(), 1);
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.dropzone(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.dropzonePointer(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.removeDropzoneButton(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.dropzoneNumerationText(), '1');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.dropzoneNumerationText(), 'visible');
+        });
+
+        it('When user clicks on close button for dropzone, then dropzone should be removed from canvas and error message \'Error: Please insert a dropzone.\' should be displayed', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.removeDropzone(0);
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.dropzoneWrapper(), 'notExist');
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.errorMessage(), 'Error: Please insert a dropzone.');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.errorMessage(), 'visible');
+        });
+
+        it('When user adds dropzone, then error message should disappear', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(80);
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.errorMessage(), 'notExist');
+        });
+
+        it('User should be able to add maximum 20 multiple dropzones inside canvas', () => {
+            for (let i = 0; i < 21; i++) {
+                fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(i * 2);
+            }
+            utilities.verifyElementCount(fillInTheGapsOverImageDragAndDropPage.dropzoneWrapper(), 20);
+        });
+
+        it('When user clicks on close button for a dropzone, then dropzone should disappear and numeration for existing dropzones should be changed appropriately', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.removeDropzone(0);
+            utilities.verifyElementCount(fillInTheGapsOverImageDragAndDropPage.dropzoneWrapper(), 19);
+            for (let i = 0; i < 19; i++) {
+                utilities.verifyInnerText(utilities.getNthElement(fillInTheGapsOverImageDragAndDropPage.dropzoneNumerationText(), i), `${i + 1}`);
+            }
+        });
+    });
+
+    describe('Canvas : Undo, Redo, Clear all -  Edit tab canvas section functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+        });
+
+        it('When the user has not made any changes in the canvas, the \'Undo\' and \'Redo\' button should be in disabled state', () => {
+           fillInTheGapsOverImageDragAndDropPage.steps.verifyUndoButtonDisabled();
+           fillInTheGapsOverImageDragAndDropPage.steps.verifyRedoButtonDisabled();
+        });
+
+        it('When user adds dropzone inside canvas, the \'Undo\' button should get enabled but the \'Redo\' button should continue to stay in disabled state', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(80);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(20);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(30);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(40);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyUndoButtonEnabled();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyRedoButtonDisabled();
+        });
+
+        it('When the user clicks on the \'Undo\' button, then previous action should be reversed and redo button should be in enabled state', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.undoAction();
+            utilities.verifyElementCount(fillInTheGapsOverImageDragAndDropPage.dropzone(), 3);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyRedoButtonEnabled();
+        });
+
+        it('When the user clicks on the redo button, then previous action should be reinstated and redo button should be disabled', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.redoAction()
+            utilities.verifyElementCount(fillInTheGapsOverImageDragAndDropPage.dropzone(), 4);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyRedoButtonDisabled();
+        });
+
+        it('When the user reaches the initial state by performing undo actions, the \'Undo\' button should get disabled and error message \'Error: Please insert a dropzone.\' should be displayed', () => {
+            for (var i = 0; i < 4; i++) {
+                fillInTheGapsOverImageDragAndDropPage.steps.undoAction();
+            }
+            utilities.verifyElementCount(fillInTheGapsOverImageDragAndDropPage.dropzone(), 0);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyUndoButtonDisabled();
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.errorMessage(), 'Error: Please insert a dropzone.');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.errorMessage(), 'visible');
+        });
+
+        it('When the user reaches the latest state by performing redo actions, the \'Redo\' button should get disabled and error message should disappear', () => {
+            for (var i = 0; i < 4; i++) {
+                fillInTheGapsOverImageDragAndDropPage.steps.redoAction();
+            }
+            utilities.verifyElementCount(fillInTheGapsOverImageDragAndDropPage.dropzone(), 4);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyRedoButtonDisabled();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.errorMessage(), 'notExist');
+        });
+
+        it('When user clicks on \'Clear all\' button, then all dropzones should be deleted and error message \'Error: Please insert a dropzone.\' should be displayed', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clearAll();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.dropzoneWrapper(), 'notExist');
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.errorMessage(), 'Error: Please insert a dropzone.');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.errorMessage(), 'visible');
+        });
+
+        it('When user clicks on undo button, then previously added dropzones should be restored and error message should disappear', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.undoAction();
+            utilities.verifyElementCount(fillInTheGapsOverImageDragAndDropPage.dropzone(), 4);
+        });
+    });
+
+    describe('Canvas : Insert text -  Edit tab canvas section functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+        });
+
+        it('When user clicks on \'Insert text\' button, then \'Text\' menu label and \'Text color\' icon should be displayed.', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.selectCanvasMenuButton('Insert text');
+            cy.log('Clicking on canvas Selected Menu Text to hover away from select dropzone button');
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnCanvasSelectedMenuText();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyCanvasSelectedMenuText('Text');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.dropzoneStyle(), 'visible');
+        });
+
+        it('\'Text color\' button should be in disabled state.', () => {
+            utilities.verifyElementDisabled(fillInTheGapsOverImageDragAndDropPage.dropzoneStyle());
+        });
+
+        it('When user hovers over \'Text color\' button, then \'Text color\' tooltip should be displayed.', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyTooltipInnerText(fillInTheGapsOverImageDragAndDropPage.dropzoneStyle, 'Text color');
+        });
+
+        it('When user clicks inside the canvas, then text box should be displayed and \'Text color\' button should be enabled', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.insertTextArea(80, 'Inserted text');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyTextOfTextBox('Inserted text');
+            utilities.verifyElementNotDisabled(fillInTheGapsOverImageDragAndDropPage.dropzoneStyle());
+        });
+
+        it('Text color of text inside text box should be black by default', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyTextColorOfTextBox('rgb(0, 0, 46)');
+        });
+
+        it('When user clicks on \'Text color\' button, \'Text color\' popup should be displayed.', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnTextColorButton();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.textColorPopupWrapper(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.textColorLabelInTextColorPopup(), 'Text color');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.textColorLabelInTextColorPopup(), 'visible');
+        });
+
+        it('\'Edit color\' label and Black color block should be displayed in selected state in the popup', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.editColorLabel(), 'Edit color');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.editColorLabel(), 'visible');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.selectedColorBlockInTextColorPopup(), 'visible');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyColorBlock('rgb(0, 0, 46)');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyColorBlockSelectedState();
+        });
+
+        it('When the user clicks on the \'Edit color\' present in an \'Text color\' popup, then a select color popup should be displayed', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnEditColorButton();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyColorPopupIsDisplayed();
+        });
+
+        it('A title \'Select color\' should be displayed on the color popup', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyColorPopupSelectColorTitle();
+        });
+
+        it('A \'Color saturation palette\' should be displayed on the color popup along with a color picker and the color picker should be set on the selected color', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyColorSaturationPaletteAndPicker();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifySaturationPaletteColor('rgb(0, 0, 46)');
+        });
+
+        it('A \'Color hue palette\' should be displayed on the color popup along with a color picker and the color picker should be set on the selected color', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyColorHuePaletteAndPicker();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyHuePaletteColor('rgb(0, 0, 255)');
+        });
+
+        it('A \'Opacity gradient hue palette\' should be displayed on the color popup along with a Opacity gradient picker and the color picker should be set on the selected color', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyOpacityGradientHuePaletteAndPicker();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyOpacityGradientPaletteColor('rgb(0, 0, 46)');
+        });
+
+        it('A \'Selected color\' label and color block displaying the selected color should be displayed', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifySelectedColorLabelAndSelectedColorBlock();
+        });
+
+        it('A \'Hex\' label and input field with pre-filled hex code value of the selected color should be displayed', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyHexLabelAndInputField();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyHexValue('#00002E');
+        });
+
+        it('\'Cancel\' and \'Ok\' buttons should be displayed', () => {
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.cancelButton(), 'Cancel');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.cancelButton(), 'visible');
+            utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.okButton(), 'OK');
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.okButton(), 'visible');
+        });
+
+        it('CSS of color popup contents', { tags: 'css' }, () => {
+            labels.forEach(label => {
+                utilities.verifyCSS(label(), {
+                    'color': css.color.labels,
+                    'font-size': css.fontSize.normal,
+                    'font-weight': css.fontWeight.semibold
+                });
+            });
+            inputFields.forEach(inputField => {
+                utilities.verifyCSS(inputField(), {
+                    'color': css.color.text,
+                    'font-size': css.fontSize.default,
+                    'font-weight': css.fontWeight.regular
+                });
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.okButton(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.activeButtons
+            });
+            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.cancelButton(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.transparent
+            });
+        });
+
+        //Failing due to https://redmine.zeuslearning.com/issues/539391
+        it('Accessibility of color popup contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(fillInTheGapsOverImageDragAndDropPage.dialogBox());
+        });
+
+        it('When the user changes the color using hex code, the color in color saturation palette and color hue palette should change', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToHexInputField('#ff0000');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyHexValue('#ff0000');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifySaturationPaletteColor('rgb(255, 0, 0)');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+        });
+
+        it('When the user changes the color opacity using opacity gradient hue, then opacity of color should change in selected color block and hex color code should remain unchanged', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnOpacityGradientHuePalette();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyOpacityGradientPaletteColor('rgba(255, 0, 0, 0.5)');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifySelectedColorBlock('rgba(255, 0, 0, 0.5)');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyHexValue('#ff0000');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifySaturationPaletteColor('rgb(255, 0, 0)');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyHuePaletteColor('rgb(255, 0, 0)');
+        });
+
+        it('When the user has modified the selected color in the color popup and clicks on \'Ok\' button, then the popup should close, the color block should change to the new selected color and the modifications in the color popup should persist', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnOkButton();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.dialogBox(), 'notExist');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyTextColorOfTextBox('rgba(255, 0, 0, 0.5)');
+        });
+
+        it('When the user modifies the selected color in the color popup and clicks on \'Cancel\' button, then the popup should close, the color block should not change and the modifications in the color popup should not persist', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnEditColorButton()
+            fillInTheGapsOverImageDragAndDropPage.steps.addInputToHexInputField('#00002E');
+            fillInTheGapsOverImageDragAndDropPage.steps.clickOnCancelButton();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.dialogBox(), 'notExist');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyTextColorOfTextBox('rgba(255, 0, 0, 0.5)');
+        });
+    });
+
+    describe('Canvas : Select dropzone, Insert dropzone, Insert text, Undo, Redo and Clear all - Preview tab functionality', () => {
+        abortEarlySetup();
+        before(() => {
+            fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
+            cy.barsPreLoaderWait();
+            fillInTheGapsOverImageDragAndDropPage.steps.uploadFile('highlightImage.jpg');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyImageIsUploaded();
+        });
+
+        it('When user insert dropzone in edit tab, then dropzone should be visible in preview tab', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(20);
+            fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(90);
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.dropzoneInPreviewTab(), 'visible');
+        });
+
+        it('When user selects a dropzone and changes dropzone pointer style in edit tab, then changes in dropzone pointer should be reflected in preview tab', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.selectDropzone(0);
+            fillInTheGapsOverImageDragAndDropPage.steps.selectDropzonePointerStyle(dropzonePointerStyles[1]);
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzonePointerStyleInPreviewTab(dropzonePointerStyles[1], 0);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzonePointerStyleInPreviewTab(dropzonePointerStyles[8], 1);
+        });
+
+        it('When user insert text and changes color for text in edit tab, then inserted text should be displayed in canvas in preview tab', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.insertTextArea(60, 'Inserted text');
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyTextBoxExistInPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyTextColorOfTextBoxInPreviewTab('rgb(0, 0, 46)');
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyTextOfTextBoxInPreviewTab('Inserted text');
+        });
+
+        it('When the user clicks on the undo button in edit tab, then previous action should be reversed and same should reflect in preview tab', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.undoAction();
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyTextOfTextBoxInPreviewTab('');
+        });
+
+        it('When the user clicks on the redo button in edit tab, then previous action should be reinstated and same should reflect in preview tab', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.redoAction();
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyTextBoxExistInPreviewTab();
+        });
+
+        it('When user clicks on \'Clear all\' button, then all dropzones should be deleted in preview tab', () => {
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.clearAll();
+            fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyTextBoxNotExistInPreviewTab();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyDropzoneNotExistInPreviewTab();
+        });
+    });
+
     describe('Image properties section - Edit tab', () => {
         abortEarlySetup();
         before(() => {
@@ -217,7 +714,7 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
 
         it('\'Opacity\' label, slider and input field should be displayed. \'Opacity\' slider and input field should be set to 100 percent by default', () => {
             fillInTheGapsOverImageDragAndDropPage.steps.verifyDefaultOpacityLabelSliderAndInputField();
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyOpacitySliderValue(100);
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyValueOfOpacitySlider(100);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyOpacityInputFieldValue(100);
         });
 
@@ -226,37 +723,18 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
         });
 
         it('When the user changes the opacity slider value, value in the opacity input field should also change', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.clickOnOpacitySlider();
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyOpacitySliderValue(50);
+            fillInTheGapsOverImageDragAndDropPage.steps.clickActionOnOpacitySlider();
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyValueOfOpacitySlider(50);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyOpacityInputFieldValue(50);
         });
 
         it('When the user changes value in the opacity input field, the slider value should also change accordingly', () => {
             fillInTheGapsOverImageDragAndDropPage.steps.enterInputToOpacityInputField(85);
             fillInTheGapsOverImageDragAndDropPage.steps.verifyOpacityInputFieldValue(85);
-            fillInTheGapsOverImageDragAndDropPage.steps.verifyOpacitySliderValue(85);
-        });
-
-        it('CSS of \'Opacity\' Section in Edit tab', { tags: 'css' }, () => {
-            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.opacityLabel(), {
-                'color': css.color.labels,
-                'font-size': css.fontSize.normal,
-                'font-weight': css.fontWeight.semibold
-            });
-            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.opacityInputField(), {
-                'color': css.color.labels,
-                'font-size': css.fontSize.default,
-                'font-weight': css.fontWeight.regular
-            });
-            utilities.verifyCSS(fillInTheGapsOverImageDragAndDropPage.opacitySlider(), {
-                'color': css.color.activeButtons,
-                'font-weight': css.fontWeight.regular
-            });
+            fillInTheGapsOverImageDragAndDropPage.steps.verifyValueOfOpacitySlider(85);
         });
 
-        it('Accessibility of opacity section', { tags: 'a11y' }, () => {
-            cy.checkAccessibility(fillInTheGapsOverImageDragAndDropPage.opacityLabel().parents('.MuiGrid-root'));
-        });
+        fillInTheGapsOverImageDragAndDropPage.tests.verifyOpacityCSSAndA11y()
 
         it('\'Image alternative text\' label and input field should be displayed. By default input field should be empty', () => {
             utilities.verifyInnerText(fillInTheGapsOverImageDragAndDropPage.imageAlternativeTextLabel(), 'Image alternative text');
@@ -275,7 +753,7 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
         });
     });
 
-    describe('Image properties section - Edit tab functionality', () => {
+    describe('Image properties section -  Edit tab canvas section functionality', () => {
         abortEarlySetup();
         before(() => {
             fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
@@ -309,7 +787,7 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
         });
 
         it('When user changes opacity slider value , then opacity for image should be updated accordingly', () => {
-            fillInTheGapsOverImageDragAndDropPage.steps.clickOnOpacitySlider();
+            fillInTheGapsOverImageDragAndDropPage.steps.clickActionOnOpacitySlider();
             fillInTheGapsOverImageDragAndDropPage.steps.verifyOpacityValueForCanvasImage(50);
         });
 
@@ -331,7 +809,7 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
         });
     });
 
-    describe('Canvas width, Canvas height, Image alternative text - Edit tab functionality', () => {
+    describe('Canvas width, Canvas height, Image alternative text -  Edit tab canvas section functionality', () => {
         abortEarlySetup();
         before(() => {
             fillInTheGapsOverImageDragAndDropPage.steps.navigateToCreateQuestion('fill in the gaps over image with drag and drop');
@@ -420,7 +898,7 @@ describe('Create item page - Fill in the gaps: Question instructions, Options se
 
         it('When user changes opacity slider value in edit tab, then opacity for canvas image should change accordingly in preview tab ', () => {
             fillInTheGapsOverImageDragAndDropPage.steps.switchToEditTab();
-            fillInTheGapsOverImageDragAndDropPage.steps.clickOnOpacitySlider();
+            fillInTheGapsOverImageDragAndDropPage.steps.clickActionOnOpacitySlider();
             fillInTheGapsOverImageDragAndDropPage.steps.switchToPreviewTab();
             fillInTheGapsOverImageDragAndDropPage.steps.verifyOpacityValueForCanvasImageInPreviewTab(50);
         });

package/cypress/e2e/ILC/FillInTheGapsOverImageDragAndDrop/previewContentsForAllViews.smoke.js

@@ -27,6 +27,8 @@ describe('Preview tab contents for all views', () => {
                         fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(10);
                         fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(40);
                         fillInTheGapsOverImageDragAndDropPage.steps.insertResponseArea(80);
+                        fillInTheGapsOverImageDragAndDropPage.steps.insertTextArea(20);
+                        fillInTheGapsOverImageDragAndDropPage.steps.enterTextInTextArea('This is a text area');
                         cy.log('Add image to option input field')
                         fillInTheGapsOverImageDragAndDropPage.steps.focusInOptionsInputField(0);
                         fillInTheGapsOverImageDragAndDropPage.steps.selectImageOptionFromCKEditorToolbar();
@@ -83,6 +85,10 @@ describe('Preview tab contents for all views', () => {
                 utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.questionInstructionsText(), 'visible');
             });
 
+            it('The text area should be displayed on the image canvas', () => {
+                fillInTheGapsOverImageDragAndDropPage.steps.verifyTextInTextAreaPreviewTab('This is a text area');
+            });
+
             it('The image uploaded in the \'Background image\' section should be displayed', () => {
                 utilities.verifyElementVisibilityState(fillInTheGapsOverImageDragAndDropPage.canvasImage(), 'visible');
             });