New Cypress Test | Facility Configuration | Facility Module

cypress/e2e/facility_spec/facility_manage.cy.ts

@@ -0,0 +1,104 @@
+import { cy, describe, before, beforeEach, it, afterEach } from "local-cypress";
+import LoginPage from "../../pageobject/Login/LoginPage";
+import FacilityManage from "../../pageobject/Facility/FacilityManage";
+import FacilityPage from "../../pageobject/Facility/FacilityCreation";
+import { v4 as uuidv4 } from "uuid";
+
+describe("Facility Manage Functions", () => {
+  const loginPage = new LoginPage();
+  const facilityManage = new FacilityManage();
+  const facilityPage = new FacilityPage();
+  const facilityMiddlewareUpdateButton = "Update";
+  const facilityMiddleware = "dev-middleware.coronasafe.live";
+  const facilityUpdatedMiddleware = "updated.coronasafe.live";
+  const facilityMiddlewareSuccessfullNotification =
+    "Facility updated successfully";
+  const facilityHrfidUpdateButton = "Link Health Facility";
+  const facilityHrfidSuccessfullNotification =
+    "Health Facility config updated successfully";
+  const facilityHrfId = uuidv4();
+  const facilityUpdatedHrfId = uuidv4();
+
+  before(() => {
+    loginPage.loginAsDisctrictAdmin();
+    cy.saveLocalStorage();
+  });
+
+  beforeEach(() => {
+    cy.viewport(1280, 720);
+    cy.restoreLocalStorage();
+    cy.clearLocalStorage(/filters--.+/);
+    cy.awaitUrl("/");
+    facilityPage.visitAlreadyCreatedFacility();
+  });
+
+  it("Facility Cover Image button functionality", () => {
+    // It's only button functionality because we can't access S3 bucket in local
+    facilityManage.clickCoverImage();
+    facilityManage.verifyUploadButtonVisible();
+    facilityManage.uploadCoverImage("facilitycoverimage.jpg");
+    facilityManage.clickSaveCoverImage();
+  });
+
+  it("Configure Facility Middleware", () => {
+    facilityPage.clickManageFacilityDropdown();
+    facilityManage.clickFacilityConfigureButton();
+    facilityManage.verifyMiddlewareAddressVisible();
+    // verify mandatory field error message
+    facilityManage.clickButtonWithText(facilityMiddlewareUpdateButton);
+    facilityManage.checkErrorMessageVisibility(
+      "Middleware Address is required"
+    );
+    // add middleware and verify the notification
+    facilityManage.typeMiddlewareAddress(facilityMiddleware);
+    facilityManage.clickButtonWithText(facilityMiddlewareUpdateButton);
+    facilityManage.verifySuccessMessageVisibilityAndContent(
+      facilityMiddlewareSuccessfullNotification
+    );
+    // update the existing middleware
+    facilityPage.clickManageFacilityDropdown();
+    facilityManage.clickFacilityConfigureButton();
+    facilityManage.verifyMiddlewareAddressVisible();
+    facilityManage.typeMiddlewareAddress(facilityUpdatedMiddleware);
+    facilityManage.clickButtonWithText(facilityMiddlewareUpdateButton);
+    facilityManage.verifySuccessMessageVisibilityAndContent(
+      facilityMiddlewareSuccessfullNotification
+    );
+    // verify the updated middleware
+    facilityPage.clickManageFacilityDropdown();
+    facilityManage.clickFacilityConfigureButton();
+    facilityManage.verifyMiddlewareAddressValue(facilityUpdatedMiddleware);
+  });
+
+  it("Configure Facility Health ID", () => {
+    facilityPage.clickManageFacilityDropdown();
+    facilityManage.clickFacilityConfigureButton();
+    // verify mandatory field error message
+    facilityManage.clickButtonWithText(facilityHrfidUpdateButton);
+    facilityManage.checkErrorMessageVisibility(
+      "Health Facility Id is required"
+    );
+    // add facility health ID and verify notification
+    facilityManage.typeHrfId(facilityHrfId);
+    facilityManage.clickButtonWithText(facilityHrfidUpdateButton);
+    facilityManage.verifySuccessMessageVisibilityAndContent(
+      facilityHrfidSuccessfullNotification
+    );
+    // update the existing middleware
+    facilityPage.clickManageFacilityDropdown();
+    facilityManage.clickFacilityConfigureButton();
+    facilityManage.typeHrfId(facilityUpdatedHrfId);
+    facilityManage.clickButtonWithText(facilityHrfidUpdateButton);
+    facilityManage.verifySuccessMessageVisibilityAndContent(
+      facilityHrfidSuccessfullNotification
+    );
+    // verify its reflection
+    facilityPage.clickManageFacilityDropdown();
+    facilityManage.clickFacilityConfigureButton();
+    facilityManage.verifyHrfIdValue(facilityUpdatedHrfId);
+  });
+
+  afterEach(() => {
+    cy.saveLocalStorage();
+  });
+});

cypress/e2e/facility_spec/locations.cy.ts

@@ -50,13 +50,9 @@ describe("Location Management Section", () => {
     cy.restoreLocalStorage();
     cy.clearLocalStorage(/filters--.+/);
     cy.awaitUrl("/");
-    cy.intercept("GET", "**/api/v1/facility/**").as("getFacilities");
-    cy.get("[id='facility-details']").first().click();
-    cy.wait("@getFacilities").its("response.statusCode").should("eq", 200);
-    cy.get("h1.text-3xl.font-bold", { timeout: 10000 }).should("be.visible");
-    cy.get("#manage-facility-dropdown button").should("be.visible");
-    cy.get("[id='manage-facility-dropdown']").scrollIntoView().click();
-    cy.get("[id=location-management]").click();
+    facilityPage.visitAlreadyCreatedFacility();
+    facilityPage.clickManageFacilityDropdown();
+    facilityLocation.clickFacilityLocationManagement();
   });
 
   it("Add a Bed to facility location along with duplication and deleting a bed", () => {

cypress/pageobject/Facility/FacilityCreation.ts

@@ -321,6 +321,7 @@ class FacilityPage {
     cy.intercept("GET", "**/api/v1/facility/**").as("getFacilities");
     cy.get("[id='facility-details']").first().click();
     cy.wait("@getFacilities").its("response.statusCode").should("eq", 200);
+    cy.get("h1.text-3xl.font-bold", { timeout: 10000 }).should("be.visible");
   }
 
   verifyFacilityBadgeContent(expectedText: string) {

cypress/pageobject/Facility/FacilityLocation.ts

@@ -3,6 +3,10 @@ class FacilityLocation {
     cy.get("#add-new-location").click();
   }
 
+  clickFacilityLocationManagement() {
+    cy.get("[id=location-management]").click();
+  }
+
   clickEditLocationButton() {
     cy.get("#edit-location-button").click();
   }

cypress/pageobject/Facility/FacilityManage.ts

@@ -0,0 +1,58 @@
+class FacilityManage {
+  clickCoverImage() {
+    cy.get("#facility-coverimage").click({ force: true });
+  }
+
+  verifyUploadButtonVisible() {
+    cy.get("#upload-cover-image").should("be.visible");
+  }
+
+  uploadCoverImage(fileName) {
+    cy.get("#upload-cover-image")
+      .selectFile(`cypress/fixtures/${fileName}`, { force: true })
+      .wait(100); // Adjust the wait time as needed
+  }
+
+  clickSaveCoverImage() {
+    cy.get("#save-cover-image").scrollIntoView();
+    cy.get("#save-cover-image").click();
+  }
+
+  clickFacilityConfigureButton() {
+    cy.get("#configure-facility").should("be.visible");
+    cy.get("#configure-facility").click();
+  }
+
+  verifyMiddlewareAddressVisible() {
+    cy.get("#middleware_address").should("be.visible");
+  }
+
+  clickButtonWithText(text) {
+    cy.get("button#submit").contains(text).click();
+  }
+
+  checkErrorMessageVisibility(text) {
+    cy.get(".error-text").contains(text).should("be.visible");
+  }
+
+  typeMiddlewareAddress(address) {
+    cy.get("#middleware_address").click().clear().click().type(address);
+  }
+
+  typeHrfId(address) {
+    cy.get("#hf_id").click().clear().click().type(address);
+  }
+
+  verifySuccessMessageVisibilityAndContent(text) {
+    cy.get(".pnotify-text").should("be.visible").and("contain", text);
+  }
+
+  verifyMiddlewareAddressValue(expectedValue) {
+    cy.get("#middleware_address").should("have.value", expectedValue);
+  }
+
+  verifyHrfIdValue(expectedValue) {
+    cy.get("#hf_id").should("have.value", expectedValue);
+  }
+}
+export default FacilityManage;

src/Components/Facility/CoverImageEditModal.tsx

@@ -248,7 +248,10 @@ const CoverImageEditModal = ({
 
             <div className="flex flex-col gap-2 pt-4 sm:flex-row">
               <div>
-                <label className="flex w-full cursor-pointer items-center justify-center gap-1 rounded-lg border border-primary-500 bg-white px-4 py-2 text-sm font-medium text-primary-500 transition-all hover:border-primary-400 hover:text-primary-400">
+                <label
+                  id="upload-cover-image"
+                  className="flex w-full cursor-pointer items-center justify-center gap-1 rounded-lg border border-primary-500 bg-white px-4 py-2 text-sm font-medium text-primary-500 transition-all hover:border-primary-400 hover:text-primary-400"
+                >
                   <CareIcon className="care-l-cloud-upload text-lg" />
                   {t("upload_an_image")}
                   <input
@@ -285,7 +288,11 @@ const CoverImageEditModal = ({
                   {t("delete")}
                 </ButtonV2>
               )}
-              <ButtonV2 onClick={handleUpload} disabled={isUploading}>
+              <ButtonV2
+                id="save-cover-image"
+                onClick={handleUpload}
+                disabled={isUploading}
+              >
                 {isUploading ? (
                   <CareIcon className="care-l-spinner animate-spin text-lg" />
                 ) : (

src/Components/Facility/FacilityHome.tsx

@@ -104,7 +104,10 @@ export const FacilityHome = (props: any) => {
     authUser.user_type === "StateAdmin";
 
   const editCoverImageTooltip = hasPermissionToEditCoverImage && (
-    <div className="absolute right-0 top-0 z-10 flex h-full w-full flex-col items-center justify-center bg-black text-sm text-gray-300 opacity-0 transition-[opacity] hover:opacity-60 md:h-[88px]">
+    <div
+      id="facility-coverimage"
+      className="absolute right-0 top-0 z-10 flex h-full w-full flex-col items-center justify-center bg-black text-sm text-gray-300 opacity-0 transition-[opacity] hover:opacity-60 md:h-[88px]"
+    >
       <i className="fa-solid fa-pen" />
       <span className="mt-2">{`${hasCoverImage ? "Edit" : "Upload"}`}</span>
     </div>