itemengine-cypress-automation 1.0.2

package/cypress/pages/components/uploadImageSectionComponent.js

@@ -0,0 +1,594 @@
+import constants from "../../fixtures/constants";
+import utilities from "../../support/helpers/utilities";
+import { dialogBoxBase } from "../dialogBoxBase";
+import { commonComponents } from "./commonComponents";
+const css = Cypress.env('css');
+
+const selector = {
+    uploadCloudIcon: () => cy.get('.upload-question-upload-cloud-icon-wrapper'),
+    dragAndDropFilesHereText: () => cy.get('.drag-and-drop-file-text'),
+    fileUploadOptionsLabel: () => cy.get('.file-input-label'),
+    deviceLink: () => cy.get('.icon-Device'),
+    sourceURLIcon: () => cy.get('[class*="SourceUrlWrapper"]'),
+    supportedFileFormatLabel: () => cy.get('.supported-file-text'),
+    supportedFileFormatInfoIcon: () => cy.get('.supported-file-icon-wrapper'),
+    sourceURLText: () => cy.get('.icon-Link'),
+    editImageButton: () => cy.get('.edit-delete-btn-wrapper button').eq(0),
+    deleteImageButton: () => cy.get('.edit-delete-btn-wrapper button').eq(1),
+    //Upload image popup
+    inputTypeFile: () => cy.get('input[type="file"]'),
+    uploadImagePopup: () => cy.get('[aria-describedby="alert-dialog-description"]'),
+    imagePopupTitle: () => cy.get('#alert-dialog-title'),
+    imagePopupPreviewLabel: () => cy.get('.preview-label-wrapper'),
+    imagePopupWidthLabel: () => cy.get('[aria-describedby="alert-dialog-description"] .highlight-image-property-label.text-label').eq(0),
+    imagePopupWidthInputField: () => cy.get('[aria-describedby="alert-dialog-description"] .highlight-image-input-field input').eq(0),
+    imagePopupHeightLabel: () => cy.get('[aria-describedby="alert-dialog-description"] .highlight-image-property-label.text-label').eq(1),
+    imagePopupHeightInputField: () => cy.get('[aria-describedby="alert-dialog-description"] .highlight-image-input-field input').eq(1),
+    buttonAspectRatio: () => cy.get('[class*="LockIconWrapper"] button'),
+    buttonResetDimensions: () => cy.get('[class*="ResetIconWrapper"] button'),
+    imagePopupButtonCancel: () => cy.get('.compact-popup-action-button-wrapper button').eq(0),
+    imagePopupButtonOk: () => cy.get('.compact-popup-action-button-wrapper button').eq(1),
+    imagePopupButtonReplace: () => cy.get('.preview-replace-button'),
+    imagePopupImagePreview: () => cy.get('[class*="ImagePreviewBox"]'),
+    addSourceURLPopupSourceURLLabel: () => cy.get('.dialog-content .inline-text-property-label'),
+    addSourceURLPopupSourceURLInputField: () => cy.get('.dialog-content .inline-text-question-prefix-wrapper input'),
+    deleteImagePopupButtonCancel: () => cy.get('.delete-action-btn-wrapper button').eq(0),
+    deleteImagePopupButtonDelete: () => cy.get('.delete-action-btn-wrapper button').eq(1)
+}
+
+const steps = {
+    /**
+     * @param {string} file name of the file in fixtures/upload folder
+     * @description this function uploads a file
+     */
+    uploadFile: (file) => {
+        uploadImageSectionComponent.inputTypeFile()
+            .attachFile(`uploads/${file}`);
+        uploadImageSectionComponent.uploadImagePopup()
+            .should('exist');
+    },
+
+    /**
+     * @description this function verifies the reset dimensions button is disabled
+     */
+    verifyButtonResetDimensionsDisabled: () => {
+        uploadImageSectionComponent.buttonResetDimensions()
+            .should('be.disabled');
+    },
+
+    /**
+     * @description this function verifies the reset dimensions button is enabled
+     */
+    verifyButtonResetDimensionsEnabled: () => {
+        uploadImageSectionComponent.buttonResetDimensions()
+            .should('be.enabled');
+    },
+
+    /**
+     * @description this function resets dimensions
+     */
+    resetDimensions: () => {
+        uploadImageSectionComponent.buttonResetDimensions()
+            .click();
+    },
+
+    /**
+     * @description this function locks aspect ratio
+     */
+    lockAspectRatio: () => {
+        uploadImageSectionComponent.buttonAspectRatio()
+            .click();
+        steps.verifyButtonAspectRatioLocked();
+    },
+
+    /**
+     * @description this function unlocks aspect ratio
+     */
+    unlockAspectRatio: () => {
+        uploadImageSectionComponent.buttonAspectRatio()
+            .click();
+        steps.verifyButtonAspectRatioUnlocked();
+    },
+
+    /**
+     * @description this function verifies aspect ratio is locked
+     */
+    verifyButtonAspectRatioLocked: () => {
+        uploadImageSectionComponent.buttonAspectRatio()
+            .should('have.attr', 'aria-label', 'Locked aspect ratio')
+    },
+
+    /**
+    * @description this function verifies aspect ratio is unlocked
+    */
+    verifyButtonAspectRatioUnlocked: () => {
+        uploadImageSectionComponent.buttonAspectRatio()
+            .should('have.attr', 'aria-label', 'Unlocked aspect ratio')
+    },
+
+    /**
+     * @param {number} imageWidth width of the image
+     * @description this function verifies width input field value
+     */
+    verifyWidthInputFieldValueInImagePopup: (imageWidth) => {
+        uploadImageSectionComponent.imagePopupWidthInputField()
+            .should('have.value', imageWidth);
+    },
+
+    /**
+     * @param {number} imageHeight width of the image
+     * @description this function verifies height input field value
+     */
+    verifyHeightInputFieldValueInImagePopup: (imageHeight) => {
+        uploadImageSectionComponent.imagePopupHeightInputField()
+            .should('have.value', imageHeight);
+    },
+
+    /**
+     * @param {number} imageHeight height of image
+     * @description this function updates height input field value
+     */
+    updateImageHeight: (imageHeight) => {
+        uploadImageSectionComponent.imagePopupHeightInputField()
+            .clear()
+            .type(imageHeight);
+        steps.verifyHeightInputFieldValueInImagePopup(imageHeight);
+    },
+
+    /**
+     * @param {number} imageWidth width of image
+     * @description this function updates width input field value
+     */
+    updateImageWidth: (imageWidth) => {
+        uploadImageSectionComponent.imagePopupWidthInputField()
+            .clear()
+            .type(imageWidth);
+        steps.verifyWidthInputFieldValueInImagePopup(imageWidth);
+    },
+
+    /**
+     * @param {*} imageWidth width of image in image popup preview section
+     * @param {*} imageHeight height of image in image popup preview section
+     * @description this function verifies height and width of image in image popup
+     */
+    verifyImagePopupImageHeightWidth: (imageWidth, imageHeight) => {
+        uploadImageSectionComponent.imagePopupImagePreview()
+            .find('img')
+            .should('have.attr', 'width', imageWidth)
+            .and('have.attr', 'height', imageHeight);
+    },
+
+    /**
+     * @description this functions clicks on cancel button of image popup
+     */
+    clickOnImagePopupCancelButton: () => {
+        uploadImageSectionComponent.imagePopupButtonCancel()
+            .click();
+        uploadImageSectionComponent.uploadImagePopup()
+            .should('not.exist');
+    },
+
+    /**
+    * @description this functions clicks on ok button of image popup
+    */
+    clickOnImagePopupOkButton: () => {
+        uploadImageSectionComponent.imagePopupButtonOk()
+            .click();
+        uploadImageSectionComponent.uploadImagePopup()
+            .should('not.exist');
+    },
+
+    /**
+     * @description this function verifies the uploaded image in image popup
+     */
+    verifyUploadedImageInImagePopup: () => {
+        uploadImageSectionComponent.imagePopupImagePreview()
+            .find('img')
+            .should('exist');
+    },
+
+    /**
+     * @param {string} file name of the file in fixtures/upload folder
+     * @description this function replaces the uploaded file in the upload image popup
+     */
+    replaceImage: (file) => {
+        uploadImageSectionComponent.uploadImagePopup()
+            .within(() => {
+                uploadImageSectionComponent.inputTypeFile()
+                    .attachFile(`uploads/${file}`);
+            })
+    },
+
+    /**
+     * @description this function clicks on the source URL text in image section
+     */
+    clickOnSourceURL: () => {
+        uploadImageSectionComponent.sourceURLText()
+            .click();
+        utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadImagePopup(), 'visible');
+    },
+
+    //Failing due to https://redmine.zeuslearning.com/issues/542849
+    /**
+     * @param sourceUrl sourceURL of the image to be uploaded
+     * @description this image uploads an image using the source url
+     */
+    uploadImageUsingSourceURL: (sourceUrl) => {
+        uploadImageSectionComponent.addSourceURLPopupSourceURLInputField()
+            .type(sourceUrl)
+            .blur();
+        uploadImageSectionComponent.addSourceURLPopupSourceURLInputField()
+            .should('have.value', sourceUrl);
+        uploadImageSectionComponent.imagePopupImagePreview()
+            .find('img')
+            .should('have.attr', 'src', sourceUrl);
+    },
+
+    clickOnEditImageButton: () => {
+        uploadImageSectionComponent.editImageButton()
+            .click()
+    },
+
+
+    clickOnDeleteImageButton: () => {
+        uploadImageSectionComponent.deleteImageButton()
+            .click();
+    },
+
+    clickOnCancelButtonInDeleteImagePopup: () => {
+        uploadImageSectionComponent.deleteImagePopupButtonCancel()
+            .click();
+        dialogBoxBase.dialogBox()
+            .should('not.exist');
+    },
+
+    clickOnDeleteButtonInDeleteImagePopup: () => {
+        uploadImageSectionComponent.deleteImagePopupButtonDelete()
+            .click();
+        dialogBoxBase.dialogBox()
+            .should('not.exist');
+    }
+}
+
+const tests = {
+    /**
+     * @description this function verifies upload image popup title
+     */
+    verifyUploadImagePopupImageTitle: () => {
+        it('When user uploads an image using device, a popup should be displayed with title \'Image\'', () => {
+            uploadImageSectionComponent.steps.uploadFile('highlightImage.jpg');
+            utilities.verifyInnerText(uploadImageSectionComponent.imagePopupTitle(), 'Image');
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.imagePopupTitle(), 'visible');
+        });
+    },
+
+    /**
+     * @description this function verifies replace button in upload image popup
+     */
+    verifyButtonReplaceInImagePopup: () => {
+        it('\'Replace\' button should be displayed', () => {
+            utilities.verifyInnerText(uploadImageSectionComponent.imagePopupButtonReplace(), 'Replace');
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.imagePopupButtonReplace(), 'visible');
+        });
+
+        it('CSS of Replace button', { tags: 'css' }, () => {
+            utilities.verifyCSS(uploadImageSectionComponent.imagePopupButtonReplace(), {
+                'color': css.color.successBtn,
+                'font-size': css.fontSize.default,
+                'background-color': css.color.successBtnBg,
+                'font-weight': css.fontWeight.semibold
+            });
+        });
+
+        //Note: a11y covered in uploadImageEditTabContents function
+    },
+
+    /**
+     * @description this function checks edit tab contents in upload image section
+     */
+    uploadImageEditTabContents: () => {
+        it('In the highlight image area should have a cloud icon and text \'Drag & Drop files here or browse files on your device or insert a source URL\' should be displayed', () => {
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.uploadCloudIcon(), 'visible');
+            utilities.verifyInnerText(uploadImageSectionComponent.dragAndDropFilesHereText(), 'Drag & Drop files here');
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.dragAndDropFilesHereText(), 'visible');
+            utilities.verifyInnerText(uploadImageSectionComponent.fileUploadOptionsLabel(), 'or browse files on your device or insert a \nsource URL');
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.fileUploadOptionsLabel(), 'visible');
+        });
+
+        it('Computer and link icons should be displayed before link texts \'device\' and \'source URL\' respectively', () => {
+            uploadImageSectionComponent.deviceLink()
+                .verifyPseudoClassBeforeProperty('content', '""');
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.sourceURLIcon(), 'visible');
+        });
+
+        it('When user hovers over \'device\' then a tooltip text \'Select a file from device\' should be displayed and on removing focus the tooltip should disappear', () => {
+            uploadImageSectionComponent.deviceLink()
+                .trigger('mouseover')
+            commonComponents.tooltipText()
+                .verifyInnerText('Select a file from device');
+            uploadImageSectionComponent.deviceLink()
+                .trigger('mouseout')
+        });
+
+        it('CSS of Edit tab contents', { tags: 'css' }, () => {
+            utilities.verifyCSS((uploadImageSectionComponent.uploadCloudIcon().find('path')), {
+                'fill': css.color.secondaryBtn
+            });
+            utilities.verifyCSS((uploadImageSectionComponent.dragAndDropFilesHereText()), {
+                'color': css.color.text,
+                'font-size': css.fontSize.huge,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS((uploadImageSectionComponent.fileUploadOptionsLabel()), {
+                'color': css.color.text,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.semibold
+            });
+            uploadImageSectionComponent.deviceLink()
+                .verifyPseudoClassBeforeProperty('color', css.color.text);
+            utilities.verifyCSS((uploadImageSectionComponent.sourceURLIcon()), {
+                'color': css.color.text
+            });
+            utilities.verifyCSS((uploadImageSectionComponent.supportedFileFormatLabel()), {
+                'color': css.color.text,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS((uploadImageSectionComponent.supportedFileFormatInfoIcon().find('path')), {
+                'fill': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of edit tab contents', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(uploadImageSectionComponent.uploadCloudIcon().parents('.upload-file-content'));
+        });
+
+        //Failing due to - https://redmine.zeuslearning.com/issues/542758
+        it('\'Supported file formats\' label should be displayed along with an info icon, hovering over the supported file formats info icon a tooltip should be displayed with list of all the supported file types', () => {
+            utilities.verifyInnerText(uploadImageSectionComponent.supportedFileFormatLabel(), 'Supported file formats');
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.supportedFileFormatLabel(), 'visible');
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.supportedFileFormatInfoIcon(), 'visible');
+            uploadImageSectionComponent.supportedFileFormatInfoIcon()
+                .verifyTooltip('Supported file formats: JPG, JPEG, PNG, GIF, HEIC, HEIF and SVG.');
+        });
+
+        it('CSS of Supported file types tooltip', { tags: 'css' }, () => {
+            uploadImageSectionComponent.supportedFileFormatInfoIcon()
+                .trigger('mouseover')
+            utilities.verifyCSS(commonComponents.tooltipText(), {
+                'color': css.color.whiteText,
+                'font-size': css.fontSize.small,
+                'font-weight': css.fontWeight.light
+            });
+            uploadImageSectionComponent.supportedFileFormatInfoIcon()
+                .trigger('mouseout')
+        });
+
+        it('Accessibility of supported file types tooltip', { tags: 'a11y' }, () => {
+            uploadImageSectionComponent.supportedFileFormatInfoIcon()
+                .trigger('mouseover')
+            cy.checkAccessibility(commonComponents.tooltipText());
+            uploadImageSectionComponent.supportedFileFormatInfoIcon()
+                .trigger('mouseout')
+        });
+    },
+
+    /**
+    * @param {*} imageWidth width of image in image popup preview section
+    * @param {*} imageHeight height of image in image popup preview section
+    * @description this function verifies content of upload image popup 
+    */
+    uploadImagePopupContents: (imageWidth, imageHeight) => {
+        it('\'Preview\' title should be displayed with the uploaded image in popup', () => {
+            utilities.verifyInnerText(uploadImageSectionComponent.imagePopupPreviewLabel(), 'Preview');
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.imagePopupPreviewLabel(), 'visible');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+        });
+
+        it('\'Height\' and \'Width\' labels and input fields should be displayed and the input fields should be prefilled with the height and width of the image', () => {
+            utilities.verifyInnerText(uploadImageSectionComponent.imagePopupWidthLabel(), 'Width (px)');
+            uploadImageSectionComponent.steps.verifyWidthInputFieldValueInImagePopup(imageWidth);
+            utilities.verifyInnerText(uploadImageSectionComponent.imagePopupHeightLabel(), 'Height (px)');
+            uploadImageSectionComponent.steps.verifyHeightInputFieldValueInImagePopup(imageHeight);
+        });
+
+        it('\'Aspect ratio\' and \'Reset dimensions\' buttons should be displayed, by default aspect ratio should be locked and reset dimensions should be disabled', () => {
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.buttonAspectRatio(), 'visible');
+            uploadImageSectionComponent.steps.verifyButtonAspectRatioLocked();
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.buttonResetDimensions(), 'visible');
+            uploadImageSectionComponent.steps.verifyButtonResetDimensionsDisabled();
+        });
+
+        it('\'Cancel\' and \'Ok\' buttons should be displayed', () => {
+            utilities.verifyInnerText(uploadImageSectionComponent.imagePopupButtonCancel(), 'Cancel');
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.imagePopupButtonCancel(), 'visible');
+            utilities.verifyInnerText(uploadImageSectionComponent.imagePopupButtonOk(), 'Ok');
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.imagePopupButtonOk(), 'visible');
+        });
+
+        it('CSS of Image popup contents', { tags: 'css' }, () => {
+            utilities.verifyCSS(uploadImageSectionComponent.imagePopupTitle().find('span'), {
+                'color': css.color.flyoutTitle,
+                'font-size': css.fontSize.heading,
+                'font-weight': css.fontWeight.bold
+            });
+            utilities.verifyCSS(uploadImageSectionComponent.imagePopupPreviewLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(uploadImageSectionComponent.imagePopupPreviewLabel(), {
+                'color': css.color.labels,
+                'font-size': css.fontSize.normal,
+                'font-weight': css.fontWeight.semibold
+            });
+            utilities.verifyCSS(uploadImageSectionComponent.imagePopupImagePreview(), {
+                'border': `1px solid ${css.color.secondaryBtnBorder}`,
+            });
+            utilities.verifyCSS(uploadImageSectionComponent.imagePopupButtonOk(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.primaryBtnBg
+            });
+            utilities.verifyCSS(uploadImageSectionComponent.imagePopupButtonCancel(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.transparent
+            });
+        });
+
+        it('Accessibility of Image popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(uploadImageSectionComponent.uploadImagePopup());
+        });
+    },
+
+    /**
+    * @param {*} imageWidth width of image in image popup preview section
+    * @param {*} imageHeight height of image in image popup preview section
+    * @description this function verifies functionality of upload image popup height, width, aspect ratio and reset dimensions 
+    */
+    uploadImageHeightWidthAspectRatioAndResetDimensionsFunctionality: (imageWidth, imageHeight) => {
+        it('When aspect ratio is locked and user changes the value in width input field, the height input field should also be updated accordingly and the dimensions should be updated in the image popup preview section', () => {
+            cy.log('Updating dimensions in the image popup')
+            uploadImageSectionComponent.steps.unlockAspectRatio();
+            uploadImageSectionComponent.steps.updateImageWidth(500);
+            uploadImageSectionComponent.steps.updateImageHeight(500);
+            uploadImageSectionComponent.steps.lockAspectRatio();
+            uploadImageSectionComponent.steps.verifyButtonAspectRatioLocked();
+            uploadImageSectionComponent.steps.updateImageHeight(200);
+            uploadImageSectionComponent.steps.verifyWidthInputFieldValueInImagePopup(200);
+            uploadImageSectionComponent.steps.updateImageWidth(400);
+            uploadImageSectionComponent.steps.verifyHeightInputFieldValueInImagePopup(400);
+            uploadImageSectionComponent.steps.verifyImagePopupImageHeightWidth(400, 400);
+        });
+
+        it('When user unlocks the aspect ratio button and changes the value in the width input field, the height input field should not change', () => {
+            uploadImageSectionComponent.steps.unlockAspectRatio();
+            uploadImageSectionComponent.steps.updateImageHeight(200);
+            uploadImageSectionComponent.steps.verifyWidthInputFieldValueInImagePopup(400);
+        });
+
+        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', () => {
+            uploadImageSectionComponent.steps.lockAspectRatio();
+            uploadImageSectionComponent.steps.updateImageWidth(600);
+            uploadImageSectionComponent.steps.verifyHeightInputFieldValueInImagePopup(300);
+        });
+
+        it('When user edits the height or width of the image the \'Reset dimensions\' button should be enabled', () => {
+            uploadImageSectionComponent.steps.verifyButtonResetDimensionsEnabled();
+        });
+
+        it('When user selects the \'Reset dimensions\' button the height and width should be reset to the original value', () => {
+            uploadImageSectionComponent.steps.resetDimensions();
+            uploadImageSectionComponent.steps.verifyWidthInputFieldValueInImagePopup(imageWidth);
+            uploadImageSectionComponent.steps.verifyHeightInputFieldValueInImagePopup(imageHeight);
+        });
+    },
+
+    /**
+     * @description this function verifies replace button functionality
+     */
+    uploadImageReplaceButtonFunctionality: () => {
+        it('User should be able to \'Replace\' the image in the \'Image\' popup', () => {
+            uploadImageSectionComponent.steps.replaceImage('sample1.jpg');
+            uploadImageSectionComponent.steps.verifyUploadedImageInImagePopup();
+            uploadImageSectionComponent.steps.verifyHeightInputFieldValueInImagePopup(225);
+            uploadImageSectionComponent.steps.verifyWidthInputFieldValueInImagePopup(225);
+        });
+    },
+
+    /**
+     * @description this function verifies the title of Add source URL image popup
+     */
+    verifyUploadImageSourceURLTitle: () => {
+        it('When user selects source URL, a popup should be displayed with title \'Add source URL\'', () => {
+            uploadImageSectionComponent.steps.clickOnSourceURL();
+            utilities.verifyInnerText(uploadImageSectionComponent.imagePopupTitle(), 'Add source URL');
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.imagePopupTitle(), 'visible');
+        });
+    },
+
+    verifyUploadImageSourceURLDefaultLabelAndInputField: () => {
+        it('\'Source url\' label and input field should be displayed and by default it should be empty', () => {
+            utilities.verifyInnerText(uploadImageSectionComponent.addSourceURLPopupSourceURLLabel(), 'Source url');
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.addSourceURLPopupSourceURLLabel(), 'visible');
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.addSourceURLPopupSourceURLInputField(), 'visible');
+            utilities.verifyInnerText(uploadImageSectionComponent.addSourceURLPopupSourceURLInputField(), '');
+        });
+
+        it('When user enters a link that does not support image file then an error message \'Error: The provided URL does not link to a supported image file. Please enter a URL for a JPEG, PNG, GIF, or SVG.\' should be displayed', () => {
+            uploadImageSectionComponent.steps.uploadImageUsingSourceURL(Cypress.config().baseUrl);
+            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: The provided URL does not link to a supported image file. Please enter a URL for a JPEG, PNG, GIF, or SVG.');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
+        });
+
+        it('When user clears the \'Source url\' input field an error message \'Error: Source URL is required.\' is displayed', () => {
+            uploadImageSectionComponent.addSourceURLPopupSourceURLInputField()
+                .clear()
+                .blur();
+            utilities.verifyInnerText(commonComponents.errorMessage(), 'Error: Source URL is required.');
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'visible');
+        });
+
+        it('When user enters supported image link in \'Source url\', an image should be displayed in the image popup preview section', () => {
+            uploadImageSectionComponent.steps.uploadImageUsingSourceURL(constants.flowerImage);
+            utilities.verifyElementVisibilityState(commonComponents.errorMessage(), 'notExist');
+        });
+    },
+
+    verifyUploadImageSourceURLLabelAndInputFieldInEditSourceURLPopup: () => {
+        it('\'Source url\' label and input field containing source url should be displayed', () => {
+            utilities.verifyInnerText(uploadImageSectionComponent.addSourceURLPopupSourceURLLabel(), 'Source url');
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.addSourceURLPopupSourceURLLabel(), 'visible');
+            utilities.verifyElementVisibilityState(uploadImageSectionComponent.addSourceURLPopupSourceURLInputField(), 'visible');
+            uploadImageSectionComponent.addSourceURLPopupSourceURLInputField()
+                .should('have.value', constants.flowerImage);
+        });
+    },
+
+    verifyDeleteImagePopup: () => {
+        it('When user clicks on the Delete image button, a popup should be displayed with message \'Are you sure you want to delete the image?\'', () => {
+            uploadImageSectionComponent.steps.clickOnDeleteImageButton();
+            utilities.verifyElementVisibilityState(dialogBoxBase.dialogBox(), 'visible');
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxTitle(), 'Delete')
+            utilities.verifyInnerText(dialogBoxBase.dialogBoxContent(), 'Are you sure you want to delete the image?')
+            utilities.verifyInnerText(dialogBoxBase.buttonReject(), 'Cancel')
+            utilities.verifyInnerText(dialogBoxBase.buttonAccept(), 'Delete image')
+        });
+
+        it('CSS of popup', { tags: 'css' }, () => {
+            utilities.verifyCSS(dialogBoxBase.dialogBox(), {
+                'background-color': css.color.defaultBackground,
+            });
+            utilities.verifyCSS(dialogBoxBase.dialogBoxContent(), {
+                'color': css.color.sectionHeading,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.regular
+            });
+            utilities.verifyCSS(dialogBoxBase.buttonReject(), {
+                'color': css.color.secondaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.transparent
+            });
+            utilities.verifyCSS(dialogBoxBase.buttonAccept(), {
+                'color': css.color.primaryBtn,
+                'font-size': css.fontSize.default,
+                'font-weight': css.fontWeight.semibold,
+                'background-color': css.color.activeButtons
+            });
+        });
+
+        it('Accessibility of popup', { tags: 'a11y' }, () => {
+            cy.checkAccessibility(dialogBoxBase.dialogBox());
+        });
+    }
+}
+
+export const uploadImageSectionComponent = {
+    ...selector,
+    steps,
+    tests
+}

package/cypress/pages/createItemPage.js

@@ -0,0 +1,28 @@
+const css = Cypress.env('css');
+
+const selectors = {
+    createQuestionPageQuestionTypeHeader: () => cy.get('div[class*="HeaderComponentstyles__BlockLabel"]'),
+    addQuestionButton: () => cy.get('.ngie-btn-contained').contains('add question'),
+    addResourceAndToolsButton: () => cy.get('.ngie-btn-contained').contains('add resource and tool'),
+    previewTab: () => cy.get('[data-ngie-testid="preview-tab"]'),
+    editTab: () => cy.get('[data-ngie-testid="edit-tab"]'),
+    settingsButton: () => cy.get('.settingsBtn '),
+    viewAllQuestionsButton: () => cy.get('.view-question-resource-button-wrapper')
+}
+
+const steps = {
+    clickOnAddQuestion: () => {
+        createItemPage.addQuestionButton()
+            .click();
+    },
+    
+    clickOnAddResource: () => {
+        createItemPage.addResourceAndToolsButton()
+            .click();
+    }
+}
+
+export const createItemPage = {
+    ...selectors,
+    steps
+}