test(update): adding cropper tool tests for banner and profile

tests/screenobjects/settings/SettingsProfileScreen.ts

@@ -13,7 +13,6 @@ import {
   USER_A_INSTANCE,
 } from "@helpers/constants";
 import SettingsBaseScreen from "@screenobjects/settings/SettingsBaseScreen";
-import { get } from "http";
 
 const currentOS = driver[USER_A_INSTANCE].capabilities.automationName;
 const robot = require("robotjs");
@@ -335,7 +334,7 @@ export default class SettingsProfileScreen extends SettingsBaseScreen {
     );
   }
 
-  async uploadBannerPicture(relativePath: string) {
+  async selectBannerPicture(relativePath: string) {
     // Invoke File Selection method depending on current OS driver
     // If Windows driver is running, first retrieve the current context and pass it to file selection function
     const currentDriver = await this.getCurrentDriver();
@@ -350,10 +349,6 @@ export default class SettingsProfileScreen extends SettingsBaseScreen {
       await profileBannerWindows.click();
       await selectFileOnWindows(relativePath, uplinkContext, executor);
     }
-
-    // Validate that profile banner is displayed on screen
-    const profileBannerImage = await this.profileBanner;
-    await profileBannerImage.waitForExist();
   }
 
   async selectProfilePicture(relativePath: string) {
@@ -373,8 +368,14 @@ export default class SettingsProfileScreen extends SettingsBaseScreen {
     }
   }
 
-  async validateProfilePictureIsShown() {
+  async validateBannerPictureIsShown() {
     // Validate that profile banner is displayed on screen
+    const bannerImage = await this.profileBanner;
+    await bannerImage.waitForExist();
+  }
+
+  async validateProfilePictureIsShown() {
+    // Validate that profile picture is displayed on screen
     const profilePictureImage = await this.profilePicture;
     await profilePictureImage.waitForExist();
   }

tests/specs/05-settings-profile.spec.ts

@@ -72,8 +72,7 @@ export default async function settingsProfile() {
     await expect(statusInput).toHaveTextContaining("");
   });
 
-  // Needs rework for adding the cropping tool on banner pictures
-  xit("Settings Profile - Profile picture - Display Crop Tool Modal", async () => {
+  it("Settings Profile - Profile picture - Display Crop Tool Modal", async () => {
     // Click on profile picture upload button and select the file logo.jpg
     await settingsProfileFirstUser.selectProfilePicture(
       "./tests/fixtures/logo.jpg"
@@ -83,8 +82,7 @@ export default async function settingsProfile() {
     await cropProfileFirstUser.validateCropToolModalIsShown();
   });
 
-  // Needs rework for adding the cropping tool on banner pictures
-  xit("Settings Profile - Profile Picture - Crop Tool Modal elements", async () => {
+  it("Settings Profile - Profile Picture - Crop Tool Modal elements", async () => {
     // Validate Image Preview is displayed on Profile Picture Crop Tool Modal
     await cropProfileFirstUser.cropImagePreview.waitForExist();
 
@@ -107,15 +105,13 @@ export default async function settingsProfile() {
     await expect(rangeValueText).toHaveTextContaining("1");
   });
 
-  // Needs rework for adding the cropping tool on banner pictures
-  xit("Settings Profile - Profile Picture - Close Crop Tool Modal", async () => {
+  it("Settings Profile - Profile Picture - Close Crop Tool Modal", async () => {
     // Click on Cancel button and assert Crop Tool Modal is closed
     await cropProfileFirstUser.clickOnCancelButton();
     await cropProfileFirstUser.cropImageModal.waitForExist({ reverse: true });
   });
 
-  // Needs rework for adding the cropping tool on banner pictures
-  xit("Settings Profile - Profile Picture - Crop Image and add profile picture", async () => {
+  it("Settings Profile - Profile Picture - Crop Image and add profile picture", async () => {
     // Click on profile picture upload button and select the file logo.jpg
     await settingsProfileFirstUser.selectProfilePicture(
       "./tests/fixtures/logo.jpg"
@@ -153,15 +149,24 @@ export default async function settingsProfile() {
   });
 
   // Needs visual validation steps to ensure that picture was actually loaded matches with expected image
-  // Needs rework for adding the cropping tool on banner pictures
-  xit("Settings Profile - Add banner picture", async () => {
-    await settingsProfileFirstUser.uploadBannerPicture(
+  it("Settings Profile - Crop banner and add banner picture", async () => {
+    // Click on banner picture upload button and select the file banner.jpg
+    await settingsProfileFirstUser.selectBannerPicture(
       "./tests/fixtures/banner.jpg"
     );
+
+    // Validate Crop Tool Modal is displayed
+    await cropProfileFirstUser.validateCropToolModalIsShown();
+
+    // Change the size of picture and click on confirm button to save
+    await cropProfileFirstUser.clickOnIncreaseRangeButton();
+    await cropProfileFirstUser.clickOnConfirmButton();
+
+    // Validate new banner picture is displayed
+    await settingsProfileFirstUser.validateBannerPictureIsShown();
   });
 
-  // Needs rework for adding the cropping tool on banner pictures
-  xit("Settings Profile - Change profile picture", async () => {
+  it("Settings Profile - Change profile picture", async () => {
     // Wait for toast notification to be closed before starting test
     await settingsProfileFirstUser.waitUntilNotificationIsClosed();
 
@@ -182,20 +187,32 @@ export default async function settingsProfile() {
   });
 
   // Needs visual validation steps to ensure that picture was actually loaded matches with expected image
-  // Needs rework for adding the cropping tool on banner pictures
-  xit("Settings Profile - Change banner picture", async () => {
+  it("Settings Profile - Change banner picture", async () => {
     // Wait for toast notification to be closed before starting test
     await settingsProfileFirstUser.waitUntilNotificationIsClosed();
 
-    await settingsProfileFirstUser.uploadBannerPicture(
+    await settingsProfileFirstUser.selectBannerPicture(
       "./tests/fixtures/second-banner.jpg"
     );
+
+    // Validate Crop Tool Modal is displayed
+    await cropProfileFirstUser.validateCropToolModalIsShown();
+
+    // Change the size of picture and click on confirm button to save
+    await cropProfileFirstUser.clickOnIncreaseRangeButton();
+    await cropProfileFirstUser.clickOnConfirmButton();
+
+    // Validate new banner picture is displayed
+    await settingsProfileFirstUser.validateBannerPictureIsShown();
   });
 
   it("Settings Profile - Validate Copy ID button tooltip", async () => {
     // Wait for toast notification to be closed before starting test
     await settingsProfileFirstUser.waitUntilNotificationIsClosed();
 
+    // Wait for toast notification to be closed before starting test
+    await settingsProfileFirstUser.waitUntilNotificationIsClosed();
+
     // Validate Copy ID button tooltip
     await settingsProfileFirstUser.hoverOnCopyID();
 

tests/specs/14-create-reusable-accounts.spec.ts

@@ -39,7 +39,7 @@ export default async function createReusableAccounts() {
   });
 
   it("Add banner picture - Chat User A", async () => {
-    await settingsProfileFirstUser.uploadBannerPicture(
+    await settingsProfileFirstUser.selectBannerPicture(
       "./tests/fixtures/banner.jpg"
     );
   });
@@ -91,7 +91,7 @@ export default async function createReusableAccounts() {
 
   it("Add banner picture - Chat User B", async () => {
     it("Settings Profile - Change banner picture", async () => {
-      await settingsProfileFirstUser.uploadBannerPicture(
+      await settingsProfileFirstUser.selectBannerPicture(
         "./tests/fixtures/second-banner.jpg"
       );
     });