Add Test suit for Image Upload Functionality

cypress/e2e/facility_spec/FacilityCoverImage.cy.ts

@@ -0,0 +1,80 @@
+import FacilityPage from "pageobject/Facility/FacilityCreation";
+import FacilityHome from "pageobject/Facility/FacilityHome";
+import FacilityManage from "pageobject/Facility/FacilityManage";
+import LoginPage from "pageobject/Login/LoginPage";
+import { users } from "pageobject/utils/userConfig";
+
+interface IRoleAndFacility {
+  role: keyof typeof users;
+  facilityName: string;
+}
+
+const rolesAndFacility: IRoleAndFacility[] = [
+  {
+    role: "districtAdmin",
+    facilityName: "Dummy Facility 40",
+  },
+  {
+    role: "devDoctor",
+    facilityName: "Dummy Facility 4",
+  },
+];
+
+describe("Facility Cover Image Upload Functionality", () => {
+  const loginPage = new LoginPage();
+  const facilityPage = new FacilityPage();
+  const facilityHome = new FacilityHome();
+  const facilityManage = new FacilityManage();
+  const successUploadNotificationText = "Cover image updated.";
+  const errorMessage =
+    "Image width is greater than the maximum allowed width of 1024 pixels.";
+
+  rolesAndFacility.forEach(({ role, facilityName }) => {
+    before(() => {
+      loginPage.loginByRole(role);
+      cy.saveLocalStorage();
+    });
+
+    beforeEach(() => {
+      cy.viewport(1920, 1080);
+      cy.restoreLocalStorage();
+      cy.clearLocalStorage(/filters--.+/);
+      cy.awaitUrl("/");
+      facilityHome.typeFacilitySearch(facilityName);
+      facilityPage.visitAlreadyCreatedFacility();
+    });
+
+    it(`Upload and Verify Cover Image Upload Functionality Role:${role}`, () => {
+      // Test Visibility of Pop-up
+      facilityManage.clickCoverImage();
+      facilityManage.verifyUploadButtonVisible();
+      facilityManage.clickCancelCoverImage();
+      //Test Error Message on Uploading Invalid Image
+      facilityManage.interceptImageUploadRequest();
+      facilityManage.clickCoverImage();
+      facilityManage.uploadCoverImage("facility-cover-image.jpg");
+      facilityManage.clickSaveCoverImage();
+      facilityManage.verifyImageUploadRequest(400);
+      facilityManage.verifySuccessMessageVisibilityAndContent(errorMessage);
+      facilityManage.clickCancelCoverImage();
+      // Test Functionality of Upload Cover Image
+      facilityManage.interceptImageUploadRequest();
+      facilityManage.clickCoverImage();
+      facilityManage.uploadCoverImage("facility-cover-image-1.jpg");
+      facilityManage.clickSaveCoverImage();
+      facilityManage.verifyImageUploadRequest();
+      facilityManage.verifySuccessMessageVisibilityAndContent(
+        successUploadNotificationText,
+      );
+      // Test Delete Cover Image Functionality
+      facilityManage.clickCoverImage();
+      facilityManage.interceptImageDeleteRequest();
+      facilityManage.clickDeleteCoverImage();
+      facilityManage.verifyImageDeleteRequest();
+    });
+
+    afterEach(() => {
+      cy.saveLocalStorage();
+    });
+  });
+});

cypress/pageobject/Facility/FacilityManage.ts

@@ -10,14 +10,46 @@ class FacilityManage {
   uploadCoverImage(fileName: string) {
     cy.get("#upload-cover-image")
       .selectFile(`cypress/fixtures/${fileName}`, { force: true })
-      .wait(100); // Adjust the wait time as needed
+      .wait(100);
   }
 
   clickSaveCoverImage() {
     cy.get("#save-cover-image").scrollIntoView();
     cy.get("#save-cover-image").click();
   }
 
+  clickCancelCoverImage() {
+    cy.verifyAndClickElement("#cancel", "Cancel");
+  }
+
+  clickDeleteCoverImage() {
+    cy.verifyAndClickElement("#delete-cover-image", "Delete");
+  }
+
+  verifyTotalDoctorCapacity(expectedCapacity: string) {
+    cy.get("#facility-doctor-totalcapacity").contains(expectedCapacity);
+  }
+
+  verifyFacilityBedCapacity(expectedCapacity: string) {
+    cy.get("#facility-bed-capacity-details").contains(expectedCapacity);
+  }
+
+  clickEditFacilityDoctorCapacity() {
+    cy.get("#edit-facility-doctorcapacity").click();
+  }
+
+  clickEditFacilityBedCapacity() {
+    cy.get("#edit-facility-bedcapacity").click();
+  }
+
+  clickDeleteFacilityDoctorCapacity() {
+    cy.get("#delete-facility-doctorcapacity").click();
+  }
+
+  clickDeleteFacilityBedCapacity() {
+    cy.get("#delete-facility-bedcapacity").click();
+  }
+
   clickFacilityConfigureButton() {
     cy.get("#configure-facility").should("be.visible");
     cy.get("#configure-facility").click();
@@ -66,6 +98,38 @@ class FacilityManage {
     cy.get("#hf_id").should("have.value", expectedValue);
   }
 
+  clickFacilityAddDoctorTypeButton() {
+    cy.get("#facility-add-doctortype").scrollIntoView();
+    cy.get("#facility-add-doctortype").click();
+  }
+
+  clickFacilityAddBedTypeButton() {
+    cy.get("#facility-add-bedtype").scrollIntoView();
+    cy.get("#facility-add-bedtype").click();
+  }
+
+  interceptImageUploadRequest() {
+    cy.intercept("POST", "**/api/v1/facility/*/cover_image/").as(
+      "imageUploadReq",
+    );
+  }
+
+  verifyImageUploadRequest(expectedCode: number = 200) {
+    cy.wait("@imageUploadReq")
+      .its("response.statusCode")
+      .should("eq", expectedCode);
+  }
+
+  interceptImageDeleteRequest() {
+    cy.intercept("DELETE", "**/api/v1/facility/*/cover_image/").as(
+      "imageDeleteReq",
+    );
+  }
+
+  verifyImageDeleteRequest() {
+    cy.wait("@imageDeleteReq").its("response.statusCode").should("eq", 204);
+  }
+
   visitViewPatients() {
     cy.intercept("GET", "**/api/v1/facility/**").as("getFacilityPatients");
     cy.get("#view-patient-facility-list").scrollIntoView().click();

src/components/Common/AvatarEditModal.tsx

@@ -287,6 +287,7 @@ const AvatarEditModal = ({
                 />
                 {imageUrl && (
                   <ButtonV2
+                    id="delete-cover-image"
                     variant="danger"
                     onClick={deleteAvatar}
                     disabled={isProcessing}