itemengine-cypress-automation 1.0.105 → 1.0.106

package/cypress/pages/components/figOverImageCanvasComponent.js

@@ -2,30 +2,34 @@ import utilities from "../../support/helpers/utilities";
 import { backgroundImageUploadComponent } from "./backgroundImageUploadComponent";
 import { commonComponents } from "./commonComponents";
 import { createQuestionBasePage } from "./createQuestionBasePage";
+import { opacityComponent } from "./opacityComponent";
+import { imageActionsComponent } from "./imageActionsComponent";
+import { colorPopupComponent } from "./colorPopupComponent";
+import { dialogBoxBase } from "../dialogBoxBase";
+const css = Cypress.env('css');
+
+const labels = [colorPopupComponent.selectedColorLabel, colorPopupComponent.hexLabel]
+const inputFields = [colorPopupComponent.hexInputField];
+const alignmentOptions = ['Top left', 'Center', 'Top right'];
+const responseAreaPointerStyles = ['None', 'Bottom', 'Bottom right', 'Right', 'Top right', 'Top', 'Top left', 'Left', 'Bottom left'];
 
 const selectors = {
     insertResponseAreaButton: () => cy.get('[class*="ControlsBtnWrapper"] button').eq(1),
     selectResponseAreaButton: () => cy.get('button[aria-label*="select"]').eq(0),
-    insertTextAreaButton: () => cy.get('button[aria-label*="insert text"]').eq(0),
+    insertTextAreaButton: () => cy.get('button[aria-label*="insert text"]'),
     canvas: () => cy.get('[class*="Canvasstyle__DragAndDropCanvas"]'),
-    canvasInPreviewTab: () => cy.get('[class*="PreviewTabstyles__ContentWrapper"] [class*="Canvasstyle__DragAndDropCanvas"]'),
     canvasLabel: () => cy.get('[class*="Canvasstyle__CanvasTxt"]'),
-    selectDropzoneButton: () => cy.get('[aria-label="select dropzone"]'),
-    insertDropzoneButton: () => cy.get('[aria-label="insert dropzone"]'),
-    insertTextButton: () => cy.get('[aria-label="insert text"]'),
     undoButton: () => cy.get('[aria-label="undo"]'),
     redoButton: () => cy.get('[aria-label="redo"]'),
     clearAllButton: () => cy.get('[aria-label="clear all"]'),
     canvasSelectedMenuText: () => cy.get('[class*="Canvasstyle__CanvasSelectedMenuTxt"]'),
-    dropzoneWrapper: () => cy.get('[class*="Canvasstyle__ResponseDiv"]'),
-    dropzonePointer: () => cy.get('[class*="Canvasstyle__PointerWrapper"]'),
-    dropzone: () => cy.get('[class*="Canvasstyle__DropZone"]'),
-    dropzonePointerInPreviewTab: () => cy.get('.preview-content-wrapper [class*="Canvasstyle__PointerWrapper"]'),
-    dropzoneInPreviewTab: () => cy.get('.preview-content-wrapper [class*="Canvasstyle__DropzoneWrapper"]'),
+    responseAreaWrapper: () => cy.get('[class*="Canvasstyle__ResponseDiv"]'),
+    responseAreaPointer: () => cy.get('[class*="Canvasstyle__PointerWrapper"]'),
+    responseArea: () => cy.get('[class*="Canvasstyle__DropZone"]'),
     textBoxInPreviewTab: () => cy.get('.preview-content-wrapper [class*="Canvasstyle__TextBoxContainer"] textarea'),
-    removeDropzoneButton: () => cy.get('.remove-button'),
-    dropzoneNumerationText: () => cy.get('[class*="Canvasstyle__DropzoneContent"]'),
-    dropzoneStyle: (ariaLabel = null) => {
+    removeResponseAreaButton: () => cy.get('.remove-button'),
+    responseAreaNumerationText: () => cy.get('[class*="Canvasstyle__DropzoneContent"]'),
+    responseAreaStyle: (ariaLabel = null) => {
         if (ariaLabel) {
             return cy.get(`.canvas-secondary-control[aria-label="${ariaLabel}"]`)
         } else {
@@ -34,7 +38,7 @@ const selectors = {
     },
     textResponse: () => cy.get('[class*="Canvasstyle__TextBoxContainer"] textarea'),
     canvasImage: () => cy.get('.canvas-image'),
-    canvasImageInPreviewTab: () => cy.get('[class*="PreviewTabstyles__ContentWrapper"] .canvas-image'),
+    canvasImageInPreviewTab: () => cy.get('[class*="PreviewTabstyles"] [class*="ImageWrapper"] img'),
     imagePropertiesLabel: () => cy.get('[class*="ImagePropertiesstyles__SectionLabel"]'),
     fillImageToCanvasLabel: () => cy.get('[data-ngie-testid="fill-image-to-canvas-checkbox"] .MuiFormControlLabel-label'),
     fillImageToCanvasCheckbox: () => cy.get('[data-ngie-testid="fill-image-to-canvas-checkbox"] input'),
@@ -55,6 +59,11 @@ const selectors = {
 }
 
 const steps = {
+    ...createQuestionBasePage.steps,
+    ...opacityComponent.steps,
+    ...imageActionsComponent.steps,
+    ...colorPopupComponent.steps,
+
     /**
      * @param {number} xCoordinateInPercentage - The x co-ordinate for position of the response area
      * @description Adds response area to the canvas.
@@ -75,10 +84,11 @@ const steps = {
     },
 
     /**
-    * @param {number} xCoordinateInPercentage - The x co-ordinate for position of the response area
-    * @description Adds response area to the canvas.
+    * @param {number} yCoordinateInPercentage - The y co-ordinate for position of the response area
+    * @param {string} text to be added in text area
+    * @description Adds text area to the canvas.
     */
-    insertTextArea: (yCoordinateInPercentage) => {
+    insertTextArea: (yCoordinateInPercentage, text) => {
         figOverImageCanvasComponent.insertTextAreaButton()
             .click();
         figOverImageCanvasComponent.canvasImage()
@@ -324,59 +334,43 @@ const steps = {
     },
 
     /**
-     * @param {*} width width of canvas
-     * @description this function verifies width of canvas
-     */
-    verifyCanvasWidthInPreviewTab: (width) => {
-        figOverImageCanvasComponent.canvasInPreviewTab()
-            .should('have.attr', 'width', width);
-    },
-
-    /**
-     * @param {*} height height of canvas
-     * @description this function verifies height of canvas
-     */
-    verifyCanvasHeightInPreviewTab: (height) => {
-        figOverImageCanvasComponent.canvasInPreviewTab()
-            .should('have.css', 'height', `${height}px`);
-    },
-
-    /**
-     * @param {"Insert dropzone"|"Insert text"|"Select dropzone"} {String} button denotes selected button name
+     * @param {"Insert dropzone"|"Insert text"|"Select dropzone"|"Insert text container"|"Select text container"} button denotes selected button name
      *@description function verifies button active state
      */
     verifyCanvasMenuButtonSelected: (button) => {
-        switch (button) {
-            case 'Insert dropzone': figOverImageCanvasComponent.insertDropzoneButton()
+        if (button == 'Insert dropzone' || button == 'Insert text container') {
+            figOverImageCanvasComponent.insertResponseAreaButton()
                 .should('have.class', 'active');
-                break;
-            case 'Insert text': figOverImageCanvasComponent.insertTextButton()
+        }
+        else if (button == 'Select dropzone' || button == 'Select text container') {
+            figOverImageCanvasComponent.selectResponseAreaButton()
                 .should('have.class', 'active');
-                break;
-            case 'Select dropzone': figOverImageCanvasComponent.selectDropzoneButton()
+        }
+        else {
+            figOverImageCanvasComponent.insertTextAreaButton()
                 .should('have.class', 'active');
-                break;
         }
     },
 
     /**
-         * @param {"Insert dropzone"|"Insert text"|"Select dropzone"} {String} button denotes selected button name
+         * @param {"Insert dropzone"|"Insert text"|"Select dropzone"|"Insert text container"|"Select text container"} {String} button denotes selected button name
          *@description function selects button
          */
     selectCanvasMenuButton: (button) => {
-        switch (button) {
-            case 'Insert dropzone': figOverImageCanvasComponent.insertDropzoneButton()
+        if (button == 'Insert dropzone' || button == 'Insert text container') {
+            figOverImageCanvasComponent.insertResponseAreaButton()
                 .click()
                 .should('have.class', 'active');
-                break;
-            case 'Insert text': figOverImageCanvasComponent.insertTextButton()
+        }
+        else if (button == 'Select dropzone' || button == 'Select text container') {
+            figOverImageCanvasComponent.selectResponseAreaButton()
                 .click()
                 .should('have.class', 'active');
-                break;
-            case 'Select dropzone': figOverImageCanvasComponent.selectDropzoneButton()
+        }
+        else {
+            figOverImageCanvasComponent.insertTextAreaButton()
                 .click()
                 .should('have.class', 'active');
-                break;
         }
     },
 
@@ -412,21 +406,21 @@ const steps = {
     },
 
     /**
-     * @param {number} dropzoneIndex dropzone number
-     * @description function selects dropzone of a particular index
+     * @param {number}  responseAreaIndex  response area number
+     * @description function selects  response container of a particular index
      */
-    selectDropzone: (dropzoneIndex) => {
-        figOverImageCanvasComponent.dropzone()
-            .eq(dropzoneIndex)
+    selectResponseArea: (responseAreaIndex) => {
+        figOverImageCanvasComponent.responseArea()
+            .eq(responseAreaIndex)
             .click();
     },
 
     /**
-     * @param {string} style dropzone pointer orientation
-     * @description function selects dropzone pointer style
+     * @param {string} style  response container pointer orientation
+     * @description function selects  response container pointer style
      */
-    selectDropzonePointerStyle: (style) => {
-        figOverImageCanvasComponent.dropzoneStyle(style)
+    selectResponseAreaPointerStyle: (style) => {
+        figOverImageCanvasComponent.responseAreaStyle(style)
             .click();
     },
 
@@ -435,102 +429,51 @@ const steps = {
             .click();
     },
 
-    verifyDropzonePointerStyle: (style, dropzoneIndex) => {
+    verifyResponseAreaPointerStyle: (style, responseAreaIndex) => {
         const getPosition = (option) => {
             switch (option) {
-                case 'bottom':
+                case 'Bottom':
                     return { top: '-31.5px', left: '-37.5px' };
-                case 'bottom right':
+                case 'Bottom right':
                     return { top: '-25px', left: '-40px' };
-                case 'right':
+                case 'Right':
                     return { top: '-21px', left: '-36.5px' };
-                case 'top right':
+                case 'Top right':
                     return { top: '-19px', left: '-31px' };
-                case 'top':
+                case 'Top':
                     return { top: '-22.5px', left: '-25.5px' };
-                case 'top left':
+                case 'Top left':
                     return { top: '-27px', left: '-24px' };
-                case 'left':
+                case 'Left':
                     return { bottom: '-20px', left: '-27px' };
-                case 'bottom left':
+                case 'Bottom left':
                     return { bottom: '-18px', left: '-32px' };
             }
         }
         const expectedPosition = getPosition(style);
-        if (style == 'left' || style == 'bottom left') {
-            figOverImageCanvasComponent.dropzonePointer()
-                .eq(dropzoneIndex)
+        if (style == 'Left' || style == 'Bottom left') {
+            figOverImageCanvasComponent.responseAreaPointer()
+                .eq(responseAreaIndex)
                 .should('have.css', 'bottom', expectedPosition.bottom)
                 .and('have.css', 'left', expectedPosition.left);
         }
-        else if (style == 'none') {
-            figOverImageCanvasComponent.dropzone()
+        else if (style == 'None') {
+            figOverImageCanvasComponent.responseArea()
                 .parent()
                 .should('not.contain', '[class*="Canvasstyle__PointerWrapper"]');
         }
         else {
-            figOverImageCanvasComponent.dropzonePointer()
-                .eq(dropzoneIndex)
-                .should('have.css', 'top', expectedPosition.top)
-                .and('have.css', 'left', expectedPosition.left);
-        }
-    },
-
-    verifyDropzonePointerStyleInPreviewTab: (style, dropzoneIndex) => {
-        const getPosition = (option) => {
-            switch (option) {
-                case 'bottom':
-                    return { top: '-31.5px', left: '-37.5px' };
-                case 'bottom right':
-                    return { top: '-25px', left: '-40px' };
-                case 'right':
-                    return { top: '-21px', left: '-36.5px' };
-                case 'top right':
-                    return { top: '-19px', left: '-31px' };
-                case 'top':
-                    return { top: '-22.5px', left: '-25.5px' };
-                case 'top left':
-                    return { top: '-27px', left: '-24px' };
-                case 'left':
-                    return { bottom: '-20px', left: '-27px' };
-                case 'bottom left':
-                    return { bottom: '-18px', left: '-32px' };
-            }
-        }
-        const expectedPosition = getPosition(style);
-        if (style == 'left' || style == 'bottom left') {
-            figOverImageCanvasComponent.dropzonePointerInPreviewTab()
-                .eq(dropzoneIndex)
-                .should('have.css', 'bottom', expectedPosition.bottom)
-                .and('have.css', 'left', expectedPosition.left);
-        }
-        else if (style == 'none') {
-            figOverImageCanvasComponent.dropzonePointerInPreviewTab()
-                .eq(dropzoneIndex)
-                .should('not.have.css', 'bottom')
-                .and('not.have.css', 'left');
-        }
-        else {
-            figOverImageCanvasComponent.dropzonePointerInPreviewTab()
-                .eq(dropzoneIndex)
+            figOverImageCanvasComponent.responseAreaPointer()
+                .eq(responseAreaIndex)
                 .should('have.css', 'top', expectedPosition.top)
                 .and('have.css', 'left', expectedPosition.left);
         }
     },
 
-    verifyDropzoneNotExistInPreviewTab: () => {
-        utilities.verifyElementVisibilityState(figOverImageCanvasComponent.dropzoneInPreviewTab(), 'notExist');
-    },
-
     verifyTextBoxNotExistInPreviewTab: () => {
         utilities.verifyElementVisibilityState(figOverImageCanvasComponent.textBoxInPreviewTab(), 'notExist');
     },
 
-    verifyDropzoneExistInPreviewTab: () => {
-        figOverImageCanvasComponent.dropzoneInPreviewTab()
-            .should('be.visible');
-    },
-
     verifyTextBoxExistInPreviewTab: () => {
         figOverImageCanvasComponent.textBoxInPreviewTab()
             .should('be.visible');
@@ -559,7 +502,7 @@ const steps = {
     },
 
     clickOnTextColorButton: () => {
-        figOverImageCanvasComponent.dropzoneStyle()
+        figOverImageCanvasComponent.responseAreaStyle()
             .click();
         utilities.verifyElementVisibilityState(figOverImageCanvasComponent.textColorPopupWrapper(), 'visible');
     },
@@ -581,11 +524,11 @@ const steps = {
     },
 
     /**
-     * @description this function removes a dropzone from the canvas
-     * @param {number} index of the dropzone to be removed
+     * @description this function removes a response container from the canvas
+     * @param {number} index of the response container to be removed
      */
-    removeDropzone: (index) => {
-        figOverImageCanvasComponent.removeDropzoneButton()
+    removeResponseArea: (index) => {
+        figOverImageCanvasComponent.removeResponseAreaButton()
             .eq(index)
             .click({ force: true });
     },
@@ -604,16 +547,526 @@ const steps = {
      * @param {string} text denotes tooltip text
      * @description function is used to hover over element and verify innertext of its tooltip
      */
-    verifyTooltipInnerText: (element, text) => {
+    verifyTooltipInnerText: (element, text, index=null) => {
         element()
+            .eq(index)
             .trigger('mouseover', { force: true });
         utilities.verifyInnerText(commonComponents.tooltipText(), text);
         element()
+            .eq(index)
             .trigger('mouseout', { force: true });
+    },
+
+    verifyPointerStyleTooltip: () => {
+        responseAreaPointerStyles.forEach((dropzonePointer, index) => {
+            cy.log('Clicking on canvas Selected Menu Text to hover away from select dropzone button');
+            steps.clickOnCanvasSelectedMenuText();
+            figOverImageCanvasComponent.responseAreaStyle()
+                .eq(index)
+                .trigger('mouseover', { force: true });
+            utilities.verifyInnerText(commonComponents.tooltipText(), dropzonePointer);
+            figOverImageCanvasComponent.responseAreaStyle()
+                .eq(index)
+                .trigger('mouseout', { force: true });
+        });
     }
 }
 
+const tests = {
+    ...colorPopupComponent.tests,
+
+    verifyCanvasLabelAndCanvas: () => {
+        it('\'Canvas\' label and canvas should be displayed', () => {
+            utilities.verifyInnerText(figOverImageCanvasComponent.canvasLabel(), 'Canvas');
+            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.canvasLabel(), 'visible');
+            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.canvas(), 'visible');
+        });
+
+        it('When user uploads background image for canvas, then it should be displayed', () => {
+            backgroundImageUploadComponent.steps.uploadFile('highlightImage.jpg');
+            figOverImageCanvasComponent.steps.verifyImageIsUploaded();
+        });
+    },
+
+    verifyInsertTextTooltip: () => {
+        it('When user hovers over insert text button, then \'Insert text\' tooltip should be displayed', () => {
+            figOverImageCanvasComponent.steps.verifyTooltipInnerText(figOverImageCanvasComponent.insertTextAreaButton, 'Insert text');
+        });
+    },
+
+    verifyUndoRedoClearAllButtons: () => {
+        it('Undo, redo and clear all buttons should be displayed', () => {
+            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.undoButton(), 'visible');
+            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.redoButton(), 'visible');
+            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.clearAllButton(), 'visible');
+        });
+
+        it('When user hovers over undo button, then \'Undo\' tooltip should be displayed', () => {
+            utilities.hoverAwayFromElement(figOverImageCanvasComponent.canvasSelectedMenuText());
+            figOverImageCanvasComponent.steps.verifyTooltipInnerText(figOverImageCanvasComponent.undoButton, 'Undo');
+        });
+
+        it('When user hovers over clear all button, then \'Clear all\' tooltip should be displayed', () => {
+            figOverImageCanvasComponent.steps.verifyTooltipInnerText(figOverImageCanvasComponent.clearAllButton, 'Clear all');
+        });
+
+        it('When user hovers over redo button, then \'Redo\' tooltip should be displayed', () => {
+            utilities.hoverAwayFromElement(figOverImageCanvasComponent.undoButton());
+            figOverImageCanvasComponent.steps.verifyTooltipInnerText(figOverImageCanvasComponent.redoButton, 'Redo');
+        });
+    },
+
+    verifyCanvasResponseAreaContents: () => {
+        it('When user clicks inside canvas, then one response container should be added with pointer, close button and numeration.', () => {
+            figOverImageCanvasComponent.steps.insertResponseArea(80);
+            utilities.verifyElementCount(figOverImageCanvasComponent.responseAreaWrapper(), 1);
+            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.responseArea(), 'visible');
+            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.responseAreaPointer(), 'visible');
+            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.removeResponseAreaButton(), 'visible');
+            utilities.verifyInnerText(figOverImageCanvasComponent.responseAreaNumerationText(), '1');
+            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.responseAreaNumerationText(), 'visible');
+        });
+    },
+
+    /**
+     * @param {"text container"|"dropzone"} response value for the error message
+     */
+    verifyInsertAndDeleteResponseAreaFunctionality: (response) => {
+        it(`When user clicks on close button for response container, then response container should be removed from canvas and error message 'Error: Please insert a ${response}.' should be displayed`, () => {
+            figOverImageCanvasComponent.steps.removeResponseArea(0);
+            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.responseAreaWrapper(), 'notExist');
+            utilities.verifyInnerText(commonComponents.errorMessage(), `Error: Please insert a ${response}.`);
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
+        });
+
+        it('When user adds response container, then error message should disappear', () => {
+            figOverImageCanvasComponent.steps.insertResponseArea(80);
+            commonComponents.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it('User should be able to add maximum 20 multiple response containers inside canvas', () => {
+            for (let i = 0; i < 21; i++) {
+                figOverImageCanvasComponent.steps.insertResponseArea(i * 2);
+            }
+            utilities.verifyElementCount(figOverImageCanvasComponent.responseAreaWrapper(), 20);
+        });
+
+        it('When user clicks on close button for a response container, then response container should disappear and numeration for existing response containers should be changed appropriately', () => {
+            figOverImageCanvasComponent.steps.removeResponseArea(0);
+            utilities.verifyElementCount(figOverImageCanvasComponent.responseAreaWrapper(), 19);
+            for (let i = 0; i < 19; i++) {
+                utilities.verifyInnerText(utilities.getNthElement(figOverImageCanvasComponent.responseAreaNumerationText(), i), `${i + 1}`);
+            }
+        });
+    },
+
+    /**
+     * @param {"text container"|"dropzone"} response value for the error message
+     */
+    verifyUndoRedoClearAllButtonFunctionality: (response) => {
+        it('When the user has not made any changes in the canvas, the \'Undo\' and \'Redo\' button should be in disabled state', () => {
+            figOverImageCanvasComponent.steps.verifyUndoButtonDisabled();
+            figOverImageCanvasComponent.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', () => {
+            figOverImageCanvasComponent.steps.insertResponseArea(80);
+            figOverImageCanvasComponent.steps.insertResponseArea(20);
+            figOverImageCanvasComponent.steps.insertResponseArea(30);
+            figOverImageCanvasComponent.steps.insertResponseArea(40);
+            figOverImageCanvasComponent.steps.verifyUndoButtonEnabled();
+            figOverImageCanvasComponent.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', () => {
+            figOverImageCanvasComponent.steps.undoAction();
+            utilities.verifyElementCount(figOverImageCanvasComponent.responseArea(), 3);
+            utilities.verifyElementNotDisabled(figOverImageCanvasComponent.redoButton());
+        });
+
+        it('When the user clicks on the redo button, then previous action should be reinstated and redo button should be disabled', () => {
+            figOverImageCanvasComponent.steps.redoAction()
+            utilities.verifyElementCount(figOverImageCanvasComponent.responseArea(), 4);
+            figOverImageCanvasComponent.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 ${response}.\' should be displayed`, () => {
+            for (var i = 0; i < 4; i++) {
+                figOverImageCanvasComponent.steps.undoAction();
+            }
+            utilities.verifyElementCount(figOverImageCanvasComponent.responseArea(), 0);
+            figOverImageCanvasComponent.steps.verifyUndoButtonDisabled();
+            utilities.verifyInnerText(commonComponents.errorMessage(), `Error: Please insert a ${response}.`);
+            utilities.verifyElementVisibilityState(commonComponents.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++) {
+                figOverImageCanvasComponent.steps.redoAction();
+            }
+            utilities.verifyElementCount(figOverImageCanvasComponent.responseArea(), 4);
+            figOverImageCanvasComponent.steps.verifyRedoButtonDisabled();
+            commonComponents.steps.verifyErrorMessageIsNotDisplayed();
+        });
+
+        it(`When user clicks on \'Clear all\' button, then all response container should be deleted and error message 'Error: Please insert a ${response}.' should be displayed`, () => {
+            figOverImageCanvasComponent.steps.clearAll();
+            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.responseAreaWrapper(), 'notExist');
+            utilities.verifyInnerText(commonComponents.errorMessage(), `Error: Please insert a ${response}.`);
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
+        });
+    },
+
+    verifyInsertTextAndTextColorButton: () => {
+        it('When user clicks on \'Insert text\' button, then \'Text\' menu label and \'Text color\' icon should be displayed.', () => {
+            figOverImageCanvasComponent.steps.selectCanvasMenuButton('Insert text');
+            cy.log('Clicking on canvas Selected Menu Text to hover away from select dropzone button');
+            figOverImageCanvasComponent.steps.clickOnCanvasSelectedMenuText();
+            figOverImageCanvasComponent.steps.verifyCanvasSelectedMenuText('Text');
+            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.responseAreaStyle(), 'visible');
+        });
+
+        it('\'Text color\' button should be in disabled state.', () => {
+            utilities.verifyElementDisabled(figOverImageCanvasComponent.responseAreaStyle());
+        });
+
+        it('When user hovers over \'Text color\' button, then \'Text color\' tooltip should be displayed.', () => {
+            figOverImageCanvasComponent.steps.verifyTooltipInnerText(figOverImageCanvasComponent.responseAreaStyle, 'Text color');
+        });
+    },
+
+    verifyTextColorPopupFunctionality: () => {
+        it('When user clicks inside the canvas, then text box should be displayed and \'Text color\' button should be enabled', () => {
+            figOverImageCanvasComponent.steps.insertTextArea(80, 'Inserted text');
+            figOverImageCanvasComponent.steps.verifyTextOfTextBox('Inserted text');
+            utilities.verifyElementNotDisabled(figOverImageCanvasComponent.responseAreaStyle());
+        });
+
+        it('Text color of text inside text box should be black by default', () => {
+            figOverImageCanvasComponent.steps.verifyTextColorOfTextBox('rgb(0, 0, 46)');
+        });
+
+        it('When user clicks on \'Text color\' button, \'Text color\' popup should be displayed.', () => {
+            figOverImageCanvasComponent.steps.clickOnTextColorButton();
+            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.textColorPopupWrapper(), 'visible');
+            utilities.verifyInnerText(figOverImageCanvasComponent.textColorLabelInTextColorPopup(), 'Text color');
+            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.textColorLabelInTextColorPopup(), 'visible');
+        });
+
+        it('\'Edit color\' label and Black color block should be displayed in selected state in the popup', () => {
+            utilities.verifyInnerText(figOverImageCanvasComponent.editColorLabel(), 'Edit color');
+            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.editColorLabel(), 'visible');
+            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.selectedColorBlockInTextColorPopup(), 'visible');
+            figOverImageCanvasComponent.steps.verifyColorBlock('rgb(0, 0, 46)');
+            figOverImageCanvasComponent.steps.verifyColorBlockSelectedState();
+        });
+    },
+
+    verifySelectColorPopupContentAndFunctionality: () => {
+
+        it('When the user clicks on the \'Edit color\' present in an \'Text color\' popup, then a select color popup should be displayed', () => {
+            figOverImageCanvasComponent.steps.clickOnEditColorButton();
+            colorPopupComponent.steps.verifyColorPopupIsDisplayed();
+        });
+
+        it('A title \'Select color\' should be displayed on the color popup', () => {
+            colorPopupComponent.steps.verifyColorPopupSelectColorTitle();
+        });
+
+
+
+        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', () => {
+            colorPopupComponent.steps.verifyColorHuePaletteAndPicker();
+            colorPopupComponent.steps.verifyHuePaletteColor('rgb(0, 0, 255)');
+        });
+
+
+
+        it('A \'Selected color\' label and color block displaying the selected color should be displayed', () => {
+            colorPopupComponent.steps.verifySelectedColorLabelAndSelectedColorBlock();
+        });
+
+        it('A \'Hex\' label and input field with pre-filled hex code value of the selected color should be displayed', () => {
+            colorPopupComponent.steps.verifyHexLabelAndInputField();
+            colorPopupComponent.steps.verifyHexValue('#00002E');
+        });
+
+        it('\'Cancel\' and \'Ok\' buttons should be displayed', () => {
+            utilities.verifyInnerText(colorPopupComponent.cancelButton(), 'Cancel');
+            utilities.verifyElementVisibilityState(colorPopupComponent.cancelButton(), 'visible');
+            utilities.verifyInnerText(colorPopupComponent.okButton(), 'OK');
+            utilities.verifyElementVisibilityState(colorPopupComponent.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(colorPopupComponent.okButton(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular,
+                'background-color': css.color.activeButtons
+            });
+            utilities.verifyCSS(colorPopupComponent.cancelButton(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.transparent
+            });
+        });
+
+        it('Accessibility of color popup contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dialogBoxBase.dialogBox());
+        });
+
+
+    },
+
+    verifyImagePropertiesSectionContent: () => {
+        it('\'Image properties\' label should be displayed.', () => {
+            utilities.verifyInnerText(figOverImageCanvasComponent.imagePropertiesLabel(), 'Image properties');
+            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.imagePropertiesLabel(), 'visible');
+        });
+
+        it('\'Fill image to canvas\' label and checkbox should be displayed and checkbox should be unchecked by default', () => {
+            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.fillImageToCanvasLabel(), 'visible');
+            utilities.verifyInnerText(figOverImageCanvasComponent.fillImageToCanvasLabel(), 'Fill image to canvas');
+            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.fillImageToCanvasCheckbox(), 'exist');
+            figOverImageCanvasComponent.steps.verifyFillImageToCanvasCheckboxUnchecked();
+        });
+
+        it('User should be able to check \'Fill image to canvas\' checkbox', () => {
+            figOverImageCanvasComponent.steps.checkFillImageToCanvasCheckbox();
+        });
+
+        it('\'Lock aspect ratio\' and \'Reset dimensions\' buttons should be displayed and by default \'Lock aspect ratio\' button should be locked', () => {
+            utilities.verifyElementVisibilityState(imageActionsComponent.lockAspectRatioButton(), 'visible');
+            utilities.verifyElementVisibilityState(imageActionsComponent.resetDimensionsButton(), 'visible');
+        });
+
+        it('\'Image alignment\' label should be displayed. ', () => {
+            utilities.verifyInnerText(figOverImageCanvasComponent.imageAlignmentLabel(), 'Image alignment');
+            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.imageAlignmentLabel(), 'visible');
+        });
+
+        it(`\'Image alignment\' section should have three options ${alignmentOptions} and ${alignmentOptions[0]} should be active selection by default`, () => {
+            utilities.verifyInnerText(figOverImageCanvasComponent.topLeftAlignmentButton(), 'Top left');
+            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.topLeftAlignmentButton(), 'visible');
+            utilities.verifyInnerText(figOverImageCanvasComponent.centerAlignmentButton(), 'Center');
+            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.centerAlignmentButton(), 'visible');
+            utilities.verifyInnerText(figOverImageCanvasComponent.topRightAlignmentButton(), 'Top right');
+            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.topRightAlignmentButton(), 'visible');
+            figOverImageCanvasComponent.steps.verifyCanvasImageTopLeftAligned();
+        });
+
+        it('\'Image alternative text\' label and input field should be displayed. By default input field should be empty', () => {
+            utilities.verifyInnerText(figOverImageCanvasComponent.imageAlternativeTextLabel(), 'Image alternative text');
+            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.imageAlternativeTextLabel(), 'visible');
+            utilities.verifyInnerText(figOverImageCanvasComponent.imageAlternativeTextInputField(), '');
+            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.imageAlternativeTextInputField(), 'exist');
+        });
+
+        it('User should be able to enter text in \'Image alternative text\' input field', () => {
+            figOverImageCanvasComponent.steps.enterAndVerifyImageAlternativeTextInInputField('Image description');
+        });
+    },
+
+    verifyImageAlignmentEditTabFunctionality: () => {
+        it('When \'Top left\' image alignment is selected by default, then image should be aligned to top left inside the canvas', () => {
+            figOverImageCanvasComponent.steps.verifyCanvasImageTopLeftAligned();
+        });
+
+        it('When user selects \'Center\' image alignment, then image should be aligned to center inside the canvas', () => {
+            figOverImageCanvasComponent.steps.selectCenterImageAlignment();
+            figOverImageCanvasComponent.steps.verifyCanvasImageCenterAligned();
+        });
+
+        it('When user selects \'Top right\' image alignment, then image should be aligned to top right inside the canvas', () => {
+            figOverImageCanvasComponent.steps.selectTopRightImageAlignment();
+            figOverImageCanvasComponent.steps.verifyCanvasImageTopRightAligned();
+        });
+
+        it('When user selects \'Top left\' image alignment again, then image should be aligned to top left inside the canvas', () => {
+            figOverImageCanvasComponent.steps.selectTopLeftImageAlignment();
+            figOverImageCanvasComponent.steps.verifyCanvasImageTopLeftAligned();
+        });
+    },
+
+    verifyFillImageToCanvasEditTabFunctionality: () => {
+        it('When user checks \'Fill image to canvas\' checkbox, then image should be adjusted to fit inside the canvas', () => {
+            figOverImageCanvasComponent.steps.checkFillImageToCanvasCheckbox();
+            figOverImageCanvasComponent.steps.verifyImageFitsToCanvas();
+        });
+
+        it('When user unchecks \'Fill image to canvas\' checkbox, then image dimensions should set to default state', () => {
+            figOverImageCanvasComponent.steps.uncheckFillImageToCanvasCheckbox();
+            figOverImageCanvasComponent.steps.verifyImageDoesNotFitToCanvas();
+        });
+    },
+
+    verifyAspectRatioAndResetDimensionsButtonFunctionality: () => {
+        it('When aspect ratio is unlocked and user changes the value in width input field, the height input field should remain unchanged and the dimensions should be updated in the image popup preview section', () => {
+            figOverImageCanvasComponent.steps.unlockAspectRatio();
+            figOverImageCanvasComponent.steps.updateCanvasWidth(500);
+            figOverImageCanvasComponent.steps.verifyCanvasWidth(500);
+            figOverImageCanvasComponent.steps.verifyCanvasHeight(432);
+        });
+
+        it('When aspect ratio is unlocked and user changes the value in height input field, then width input field should remain unchanged and the dimensions should be updated in the image popup preview section', () => {
+            figOverImageCanvasComponent.steps.updateCanvasHeight(500);
+            figOverImageCanvasComponent.steps.verifyCanvasHeight(500);
+            figOverImageCanvasComponent.steps.verifyCanvasWidth(500);
+        });
+
+        it('When user locks the aspect ratio button and changes the value in the width input field, the height input field should be updated accordingly to maintain the updated aspect ratio', () => {
+            figOverImageCanvasComponent.steps.lockAspectRatio();
+            figOverImageCanvasComponent.steps.updateCanvasWidth(800);
+            figOverImageCanvasComponent.steps.verifyCanvasHeight(450);
+        });
+
+        it('When user selects the \'Reset dimensions\' button the height and width should reset to the original values', () => {
+            figOverImageCanvasComponent.steps.resetDimensions();
+            figOverImageCanvasComponent.steps.verifyCanvasWidth(768);
+            figOverImageCanvasComponent.steps.verifyCanvasHeight(432);
+        });
+    },
+
+    verifyImageAlternativeTextEditTabFunctionality: () => {
+        it('When user enters text in the \'Alternative text\' input field, then alternative text should be displayed for canvas image', () => {
+            figOverImageCanvasComponent.steps.enterAndVerifyImageAlternativeTextInInputField('This is Alternative text for image');
+            figOverImageCanvasComponent.steps.verifyImageAlternativeTextPresentInEditTab('This is Alternative text for image');
+        });
+
+        it('When user clears text in the \'Alternative text\' input field, then alternative text should not be displayed for canvas image', () => {
+            figOverImageCanvasComponent.steps.clearImageAlternativeTextInputFieldText();
+            figOverImageCanvasComponent.steps.verifyNoImageAlternativeTextPresentInEditTab();
+        });
+    },
+
+    verifyImageAlignmentPreviewTabFunctionality: () => {
+        it('When \'Top left\' image alignment is selected by default, then in preview tab canvas image should be aligned to top left', () => {
+            figOverImageCanvasComponent.steps.switchToPreviewTab();
+            figOverImageCanvasComponent.steps.verifyImageIsUploadedInPreviewTab();
+            figOverImageCanvasComponent.steps.verifyCanvasImageTopLeftAlignedInPreviewTab();
+        });
+
+        it('When user selects \'Center\' image alignment in edit tab, then canvas image should be aligned to center in preview tab ', () => {
+            figOverImageCanvasComponent.steps.switchToEditTab();
+            figOverImageCanvasComponent.steps.selectCenterImageAlignment();
+            figOverImageCanvasComponent.steps.switchToPreviewTab();
+            figOverImageCanvasComponent.steps.verifyCanvasImageCenterAlignedInPreviewTab();
+        });
+
+        it('When user selects \'Top right\' image alignment, then canvas image should be aligned to top right in preview tab', () => {
+            figOverImageCanvasComponent.steps.switchToEditTab();
+            figOverImageCanvasComponent.steps.selectTopRightImageAlignment();
+            figOverImageCanvasComponent.steps.switchToPreviewTab();
+            figOverImageCanvasComponent.steps.verifyCanvasImageTopRightAlignedInPreviewTab();
+        });
+
+        it('When user selects \'Top left\' image alignment again, then image should be aligned to top left inside the canvas in preview tab', () => {
+            figOverImageCanvasComponent.steps.switchToEditTab();
+            figOverImageCanvasComponent.steps.selectTopLeftImageAlignment();
+            figOverImageCanvasComponent.steps.switchToPreviewTab();
+            figOverImageCanvasComponent.steps.verifyCanvasImageTopLeftAlignedInPreviewTab();
+        });
+    },
+
+    verifyFillImageToCanvasPreviewTabFunctionality: () => {
+        it('When user checks \'Fill image to canvas\' checkbox in edit tab, then image should be adjusted to fit inside the canvas in preview tab', () => {
+            figOverImageCanvasComponent.steps.switchToEditTab();
+            figOverImageCanvasComponent.steps.checkFillImageToCanvasCheckbox(); figOverImageCanvasComponent.steps.switchToPreviewTab();
+            figOverImageCanvasComponent.steps.verifyImageFitsToCanvasInPreviewTab();
+        });
+
+        // Failed due to https://redmine.zeuslearning.com/issues/556897
+        it('When user unchecks \'Fill image to canvas\' checkbox, then image dimensions should set to default state in preview tab', () => {
+            figOverImageCanvasComponent.steps.switchToEditTab();
+            figOverImageCanvasComponent.steps.uncheckFillImageToCanvasCheckbox();
+            figOverImageCanvasComponent.steps.switchToPreviewTab();
+            figOverImageCanvasComponent.steps.verifyImageDoesNotFitToCanvas();
+        });
+    },
+
+    verifyImageAlternativeTextPreviewTabFunctionality: () => {
+        it('When user enters text in the \'Alternative text\' input field, then alternative text should be displayed in the \'Preview tab\'', () => {
+            figOverImageCanvasComponent.steps.switchToEditTab();
+            figOverImageCanvasComponent.steps.enterAndVerifyImageAlternativeTextInInputField('This is Alternative text for image');
+            cy.log('Switching to Preview Tab');
+            figOverImageCanvasComponent.steps.switchToPreviewTab();
+            figOverImageCanvasComponent.steps.verifyImageAlternativeTextInPreviewTab('This is Alternative text for image');
+        });
+
+        it('When user clears text in the \'Alternative text\' input field, then alternative text should not be displayed in the \'Preview tab\'', () => {
+            figOverImageCanvasComponent.steps.switchToEditTab();
+            figOverImageCanvasComponent.steps.clearImageAlternativeTextInputFieldText();
+            figOverImageCanvasComponent.steps.switchToPreviewTab();
+            figOverImageCanvasComponent.steps.verifyNoImageAlternativeTextPresentInPreviewTab();
+        });
+    },
+
+    verifyImageOpacityPreviewTabFunctionality: () => {
+        it('When opacity is 100 percent by default, then canvas image should have 100 percent opacity in preview tab ', () => {
+            figOverImageCanvasComponent.steps.verifyOpacityValueForCanvasImageInPreviewTab(100);
+        });
+
+        it('When user changes opacity slider value in edit tab, then opacity for canvas image should change accordingly in preview tab ', () => {
+            figOverImageCanvasComponent.steps.switchToEditTab();
+            figOverImageCanvasComponent.steps.clickActionOnOpacitySlider();
+            figOverImageCanvasComponent.steps.switchToPreviewTab();
+            figOverImageCanvasComponent.steps.verifyOpacityValueForCanvasImageInPreviewTab(50);
+        });
+
+        it('When user changes opacity input field value in edit tab, then opacity for canvas image should change accordingly in preview tab ', () => {
+            figOverImageCanvasComponent.steps.switchToEditTab();
+            figOverImageCanvasComponent.steps.enterInputToOpacityInputField(40);
+            figOverImageCanvasComponent.steps.switchToPreviewTab();
+            figOverImageCanvasComponent.steps.verifyOpacityValueForCanvasImageInPreviewTab(40);
+        });
+    },
+
+    verifyImageOpacityEditTabFunctionality: () => {
+        it('When opacity value is set to 100 percent by default, then opacity for image should be100 percent inside canvas', () => {
+            figOverImageCanvasComponent.steps.verifyOpacityValueForCanvasImage(100);
+        });
+
+        it('When user changes opacity slider value , then opacity for image should be updated accordingly', () => {
+            figOverImageCanvasComponent.steps.clickActionOnOpacitySlider();
+            figOverImageCanvasComponent.steps.verifyOpacityValueForCanvasImage(50);
+        });
+
+        it('When user changes opacity value in input field, then opacity for image should be updated accordingly', () => {
+            figOverImageCanvasComponent.steps.enterInputToOpacityInputField(40);
+            figOverImageCanvasComponent.steps.verifyOpacityInputFieldValue(40);
+            figOverImageCanvasComponent.steps.verifyOpacityValueForCanvasImage(40);
+        });
+    },
+
+    verifyImageNotExistPreviewTab: () => {
+        it('When user deletes the uploaded image file in edit tab, then canvas image should not appear in preview tab', () => {
+            figOverImageCanvasComponent.steps.switchToEditTab();
+            backgroundImageUploadComponent.steps.deleteImage();
+            backgroundImageUploadComponent.steps.clickOnDeleteButtonInDeleteImagePopup();
+            figOverImageCanvasComponent.steps.switchToPreviewTab();
+            utilities.verifyElementVisibilityState(figOverImageCanvasComponent.canvasImageInPreviewTab(), 'notExist');
+        });
+    },
+}
+
 export const figOverImageCanvasComponent = {
     ...selectors,
-    steps
+    steps,
+    tests
 }