Cypress: User Avatar Modification (#10592)

cypress/e2e/users_spec/user_avatar.cy.ts

@@ -0,0 +1,22 @@
+import { UserAvatar } from "@/pageObject/Users/UserAvatar";
+
+describe("User Profile Avatar Modification", () => {
+  const userAvatar = new UserAvatar("teststaff4");
+  beforeEach(() => {
+    cy.loginByApi("teststaff4");
+    cy.visit("/");
+  });
+  it("should modify an avatar", () => {
+    userAvatar
+      .navigateToProfile()
+      .interceptUploadAvatarRequest()
+      .clickChangeAvatarButton()
+      .uploadAvatar()
+      .clickSaveAvatarButton()
+      .verifyUploadAvatarApiCall()
+      .interceptDeleteAvatarRequest()
+      .clickChangeAvatarButton()
+      .clickDeleteAvatarButton()
+      .verifyDeleteAvatarApiCall();
+  });
+});

cypress/fixtures/users.json

@@ -22,5 +22,9 @@
   "devdoctor": {
     "username": "developdoctor",
     "password": "Test@123"
+  },
+  "teststaff4": {
+    "username": "teststaff4",
+    "password": "Test@123"
   }
 }

cypress/pageObject/Users/UserAvatar.ts

@@ -0,0 +1,59 @@
+export class UserAvatar {
+  username: string;
+  constructor(username: string) {
+    this.username = username;
+  }
+
+  navigateToProfile() {
+    cy.visit(`/users/${this.username}`);
+    return this;
+  }
+
+  interceptUploadAvatarRequest() {
+    cy.intercept("POST", `/api/v1/users/${this.username}/profile_picture/`).as(
+      "uploadAvatar",
+    );
+    return this;
+  }
+
+  clickChangeAvatarButton() {
+    cy.verifyAndClickElement('[data-cy="change-avatar"]', "Change Avatar");
+    return this;
+  }
+
+  uploadAvatar() {
+    cy.get('input[title="changeFile"]').selectFile(
+      "cypress/fixtures/avatar.jpg",
+      { force: true },
+    );
+    return this;
+  }
+
+  clickSaveAvatarButton() {
+    cy.verifyAndClickElement('[data-cy="save-cover-image"]', "Save");
+    return this;
+  }
+
+  verifyUploadAvatarApiCall() {
+    cy.wait("@uploadAvatar").its("response.statusCode").should("eq", 200);
+    return this;
+  }
+
+  interceptDeleteAvatarRequest() {
+    cy.intercept(
+      "DELETE",
+      `/api/v1/users/${this.username}/profile_picture/`,
+    ).as("deleteAvatar");
+    return this;
+  }
+
+  clickDeleteAvatarButton() {
+    cy.verifyAndClickElement('[data-cy="delete-avatar"]', "Delete");
+    return this;
+  }
+
+  verifyDeleteAvatarApiCall() {
+    cy.wait("@deleteAvatar").its("response.statusCode").should("eq", 204);
+    return this;
+  }
+}

src/components/Common/AvatarEditModal.tsx

@@ -349,6 +349,7 @@ const AvatarEditModal = ({
                       variant="destructive"
                       onClick={deleteAvatar}
                       disabled={isProcessing}
+                      data-cy="delete-avatar"
                     >
                       {t("delete")}
                     </Button>
@@ -358,6 +359,7 @@ const AvatarEditModal = ({
                     variant="outline"
                     onClick={uploadAvatar}
                     disabled={isProcessing || !selectedFile}
+                    data-cy="save-cover-image"
                   >
                     {isProcessing ? (
                       <CareIcon

src/components/Users/UserAvatar.tsx

@@ -127,6 +127,7 @@ export default function UserAvatar({ username }: { username: string }) {
                     onClick={() => setEditAvatar(!editAvatar)}
                     type="button"
                     id="change-avatar"
+                    data-cy="change-avatar"
                     disabled
                   >
                     {t("change_avatar")}
@@ -138,6 +139,7 @@ export default function UserAvatar({ username }: { username: string }) {
                   onClick={() => setEditAvatar(!editAvatar)}
                   type="button"
                   id="change-avatar"
+                  data-cy="change-avatar"
                 >
                   {t("change_avatar")}
                 </Button>