Merge pull request #497 from Satellite-im/luis/crop-tool-profile

config/wdio.windows.app.conf.ts

@@ -106,13 +106,15 @@ export const config: WebdriverIO.Config = {
     onPrepare: async function() {
       // Declare constants for folder locations
       const cacheFolder = homedir() + "\\.uplink\\.user"
+      const savedFile = join(process.cwd(), "\\tests\\fixtures\\saved.jpg")
       const sourceReusableData = join(process.cwd(), "\\tests\\fixtures\\users\\FriendsTestUser")
       const targetReusableData = join(process.cwd(), "\\tests\\fixtures\\users\\windows\\FriendsTestUser")
       const allureResultsFolder = join(process.cwd(), "\\allure-results");
       const testReportFolder =  join(process.cwd(), "\\test-report");
       const testResultsFolder =  join(process.cwd(), "\\test-results");
       try {
         await rmSync(allureResultsFolder, { recursive: true, force: true });
+        await rmSync(savedFile, { recursive: true, force: true });
         await rmSync(testReportFolder, { recursive: true, force: true });
         await rmSync(testResultsFolder, { recursive: true, force: true });
         console.log("Deleted Artifacts Folders Successfully!");

config/wdio.windows.ci.conf.ts

@@ -106,13 +106,15 @@ export const config: WebdriverIO.Config = {
     onPrepare: async function() {
       // Declare constants for folder locations
       const cacheFolder = homedir() + "\\.uplink\\.user"
+      const savedFile = join(process.cwd(), "\\tests\\fixtures\\saved.jpg")
       const sourceReusableData = join(process.cwd(), "\\tests\\fixtures\\users\\FriendsTestUser")
       const targetReusableData = join(process.cwd(), "\\tests\\fixtures\\users\\windows\\FriendsTestUser")
       const allureResultsFolder = join(process.cwd(), "\\allure-results");
       const testReportFolder =  join(process.cwd(), "\\test-report");
       const testResultsFolder =  join(process.cwd(), "\\test-results");
       try {
         await rmSync(allureResultsFolder, { recursive: true, force: true });
+        await rmSync(savedFile, { recursive: true, force: true });
         await rmSync(testReportFolder, { recursive: true, force: true });
         await rmSync(testResultsFolder, { recursive: true, force: true });
         console.log("Deleted Artifacts Folders Successfully!");

tests/screenobjects/settings/CropToolProfileModal.ts

@@ -59,7 +59,7 @@ export default class CropImageProfileModal extends UplinkMainScreen {
   }
 
   get cropImagePreview() {
-    return this.cropImageTopbar.$(SELECTORS.CROP_IMAGE_PREVIEW);
+    return this.cropImageModal.$(SELECTORS.CROP_IMAGE_PREVIEW);
   }
 
   get cropImageRange() {
@@ -145,4 +145,9 @@ export default class CropImageProfileModal extends UplinkMainScreen {
     const rangeValueText = await rangeValue.getText();
     return rangeValueText;
   }
+
+  async validateCropToolModalIsShown() {
+    const cropImageModal = await this.cropImageModal;
+    await cropImageModal.waitForDisplayed();
+  }
 }

tests/screenobjects/settings/SettingsProfileScreen.ts

@@ -339,7 +339,7 @@ export default class SettingsProfileScreen extends SettingsBaseScreen {
     await profileBannerImage.waitForExist();
   }
 
-  async uploadProfilePicture(relativePath: string) {
+  async selectProfilePicture(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
@@ -354,7 +354,9 @@ export default class SettingsProfileScreen extends SettingsBaseScreen {
       await profilePictureImage.click();
       await selectFileOnWindows(relativePath, uplinkContext, executor);
     }
+  }
 
+  async validateProfilePictureIsShown() {
     // Validate that profile banner is displayed on screen
     const profilePictureImage = await this.profilePicture;
     await profilePictureImage.waitForExist();

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

@@ -1,9 +1,9 @@
 import "module-alias/register";
-import ChatsSidebar from "@screenobjects/chats/ChatsSidebar";
+import CropImageProfileModal from "@screenobjects/settings/CropToolProfileModal";
 import FilesScreen from "@screenobjects/files/FilesScreen";
 import SettingsProfileScreen from "@screenobjects/settings/SettingsProfileScreen";
 import { USER_A_INSTANCE } from "@helpers/constants";
-let chatsSidebarFirstUser = new ChatsSidebar(USER_A_INSTANCE);
+let cropProfileFirstUser = new CropImageProfileModal(USER_A_INSTANCE);
 let filesScreenFirstUser = new FilesScreen(USER_A_INSTANCE);
 let settingsProfileFirstUser = new SettingsProfileScreen(USER_A_INSTANCE);
 
@@ -72,12 +72,67 @@ export default async function settingsProfile() {
     await expect(statusInput).toHaveTextContaining("");
   });
 
-  // Skipping test since it needs implementation of Crop Tool recently merged
-  // Needs visual validation steps to ensure that picture was actually loaded matches with expected image
-  xit("Settings Profile - Add profile picture", async () => {
-    await settingsProfileFirstUser.uploadProfilePicture(
+  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"
+    );
+
+    // Validate Crop Tool Modal is displayed
+    await cropProfileFirstUser.validateCropToolModalIsShown();
+  });
+
+  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();
+
+    // Validate buttons to increase and decrease zoom are displayed on Profile Picture Crop Tool Modal
+    await cropProfileFirstUser.cropImageRangeDecreaseButton.waitForExist();
+    await cropProfileFirstUser.cropImageRangeIncreaseButton.waitForExist();
+
+    // Validate input slider for zoom size is displayed on Profile Picture Crop Tool Modal
+    await cropProfileFirstUser.cropImageRangeInputSlider.waitForExist();
+
+    // Validate buttons to cancel or confirm edition are displayed on Profile Picture Crop Tool Modal
+    await cropProfileFirstUser.cropImageTopbarButtonCancel.waitForExist();
+    await cropProfileFirstUser.cropImageTopbarButtonConfirm.waitForExist();
+
+    // Validate helper text is displayed on top of modal
+    await cropProfileFirstUser.cropImageTopbarLabel.waitForExist();
+
+    // Validate default value shown for zoom slider is 1
+    const rangeValueText = await cropProfileFirstUser.cropImageRangeValueText;
+    await expect(rangeValueText).toHaveTextContaining("1");
+  });
+
+  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 });
+  });
+
+  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"
     );
+
+    // Validate Crop Tool Modal is displayed
+    await cropProfileFirstUser.validateCropToolModalIsShown();
+
+    // Click three times on increase button, then one time on decrease button
+    await cropProfileFirstUser.clickMultipleTimesIncreaseButton(3);
+    await cropProfileFirstUser.clickOnDecreaseRangeButton();
+
+    // Validate final value shown for zoom slider is 1
+    const rangeValueText = await cropProfileFirstUser.cropImageRangeValueText;
+    await expect(rangeValueText).toHaveTextContaining("1.2");
+
+    // Click on confirm button to save
+    await cropProfileFirstUser.clickOnConfirmButton();
+
+    // Validate new profile picture is displayed
+    await settingsProfileFirstUser.validateProfilePictureIsShown();
   });
 
   it("Settings Profile - Validate change banner tooltip", async () => {
@@ -100,15 +155,24 @@ export default async function settingsProfile() {
     );
   });
 
-  // Skipping test since it needs implementation of Crop Tool recently merged
-  // Needs visual validation steps to ensure that picture was actually loaded matches with expected image
-  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();
 
-    await settingsProfileFirstUser.uploadProfilePicture(
+    // Click on profile picture upload button and select the file second-profile.jpg
+    await settingsProfileFirstUser.selectProfilePicture(
       "./tests/fixtures/second-profile.png"
     );
+
+    // 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 profile picture is displayed
+    await settingsProfileFirstUser.validateProfilePictureIsShown();
   });
 
   // Needs visual validation steps to ensure that picture was actually loaded matches with expected image

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

@@ -6,8 +6,10 @@ import {
   saveTestKeys,
 } from "@helpers/commands";
 import { USER_A_INSTANCE } from "@helpers/constants";
+import CropImageProfileModal from "@screenobjects/settings/CropToolProfileModal";
 import SettingsProfileScreen from "@screenobjects/settings/SettingsProfileScreen";
 import WelcomeScreen from "@screenobjects/welcome-screen/WelcomeScreen";
+let cropProfileFirstUser = new CropImageProfileModal(USER_A_INSTANCE);
 let settingsProfileFirstUser = new SettingsProfileScreen(USER_A_INSTANCE);
 let welcomeScreenFirstUser = new WelcomeScreen(USER_A_INSTANCE);
 
@@ -21,13 +23,19 @@ export default async function createReusableAccounts() {
     await settingsProfileFirstUser.waitForIsShown(true);
   });
 
-  // Skipping test since it needs implementation of Crop Tool recently merged
-  xit("Add profile picture - Chat User A", async () => {
-    it("Settings Profile - Add profile picture", async () => {
-      await settingsProfileFirstUser.uploadProfilePicture(
-        "./tests/fixtures/logo.jpg"
-      );
-    });
+  it("Add profile picture - Chat User A", async () => {
+    await settingsProfileFirstUser.selectProfilePicture(
+      "./tests/fixtures/logo.jpg"
+    );
+
+    // Validate Crop Tool Modal is displayed
+    await cropProfileFirstUser.validateCropToolModalIsShown();
+
+    // Do not change the size of picture and just confirm on crop modal
+    await cropProfileFirstUser.clickOnConfirmButton();
+
+    // Validate new profile picture is displayed
+    await settingsProfileFirstUser.validateProfilePictureIsShown();
   });
 
   it("Add banner picture - Chat User A", async () => {
@@ -66,11 +74,19 @@ export default async function createReusableAccounts() {
     await settingsProfileFirstUser.waitForIsShown(true);
   });
 
-  // Skipping test since it needs implementation of Crop Tool recently merged
-  xit("Add profile picture - Chat User B", async () => {
-    await settingsProfileFirstUser.uploadProfilePicture(
+  it("Add profile picture - Chat User B", async () => {
+    await settingsProfileFirstUser.selectProfilePicture(
       "./tests/fixtures/second-profile.png"
     );
+
+    // Validate Crop Tool Modal is displayed
+    await cropProfileFirstUser.validateCropToolModalIsShown();
+
+    // Do not change the size of picture and just confirm on crop modal
+    await cropProfileFirstUser.clickOnConfirmButton();
+
+    // Validate new profile picture is displayed
+    await settingsProfileFirstUser.validateProfilePictureIsShown();
   });
 
   it("Add banner picture - Chat User B", async () => {