Refactored Location Management Cypress Test

cypress/e2e/facility_spec/FacilityCreation.cy.ts

@@ -4,7 +4,6 @@ import FacilityPage from "../../pageobject/Facility/FacilityCreation";
 import FacilityHome from "../../pageobject/Facility/FacilityHome";
 import LoginPage from "../../pageobject/Login/LoginPage";
 import ManageUserPage from "../../pageobject/Users/ManageUserPage";
-import { UserCreationPage } from "../../pageobject/Users/UserCreation";
 import { nonAdminRoles } from "../../pageobject/utils/userConfig";
 
 describe("Facility Creation", () => {
@@ -13,7 +12,6 @@ describe("Facility Creation", () => {
   const loginPage = new LoginPage();
   const facilityHome = new FacilityHome();
   const manageUserPage = new ManageUserPage();
-  const userCreationPage = new UserCreationPage();
   const facilityFeature = [
     "CT Scan",
     "X-Ray",
@@ -87,7 +85,7 @@ describe("Facility Creation", () => {
     facilityPage.scrollToFacilityTriage();
     facilityPage.clickAddFacilityTriage();
     manageUserPage.clickSubmit();
-    userCreationPage.verifyErrorMessages(triageErrorMessage);
+    cy.verifyErrorMessages(triageErrorMessage);
     // create a entry and verify reflection
     facilityPage.fillEntryDate(triageDate);
     facilityPage.fillTriageEntryFields(
@@ -123,7 +121,7 @@ describe("Facility Creation", () => {
     // create facility with multiple capacity and verify form error message for facility form
     facilityPage.visitCreateFacilityPage();
     facilityPage.submitForm();
-    userCreationPage.verifyErrorMessages(facilityErrorMessage);
+    cy.verifyErrorMessages(facilityErrorMessage);
     facilityPage.fillFacilityName(facilityName);
     facilityPage.selectFacilityType(facilityType);
     facilityPage.clickfacilityfeatureoption();
@@ -270,12 +268,12 @@ describe("Facility Creation", () => {
     // add no bed capacity and verify form error message
     facilityPage.isVisibleselectBedType();
     facilityPage.saveAndExitBedCapacityForm();
-    userCreationPage.verifyErrorMessages(bedErrorMessage);
+    cy.verifyErrorMessages(bedErrorMessage);
     facilityPage.clickcancelbutton();
     // add no doctor capacity and verify form error message
     facilityPage.isVisibleAreaOfSpecialization();
     facilityPage.clickdoctorcapacityaddmore();
-    userCreationPage.verifyErrorMessages(doctorErrorMessage);
+    cy.verifyErrorMessages(doctorErrorMessage);
     facilityPage.clickcancelbutton();
     cy.url().then((newUrl) => {
       facilityUrl1 = newUrl;

cypress/pageobject/Facility/FacilityHome.ts

@@ -92,11 +92,6 @@ class FacilityHome {
     cy.get('[data-test-id="occupancy-badge"]').should("be.visible");
   }
 
-  verifyAndCloseNotifyModal() {
-    cy.get("#cancel").should("be.visible");
-    cy.get("#cancel").click();
-  }
-
   navigateBack() {
     cy.go(-1);
   }

cypress/pageobject/Facility/FacilityLocation.ts

@@ -1,37 +1,45 @@
-class FacilityLocation {
-  loadLocationManagementPage(name: string) {
-    cy.awaitUrl("/");
-    cy.intercept("GET", "**/api/v1/facility/**").as("getFacilities");
-    cy.get("[id='facility-name-card']").contains(name).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();
-  }
+import FacilityPage from "./FacilityCreation";
+import FacilityHome from "./FacilityHome";
 
-  closeNotification() {
-    cy.get(".pnotify")
-      .should("exist")
-      .each(($div) => {
-        cy.wrap($div).click();
-      });
+const facilityHome = new FacilityHome();
+const facilityPage = new FacilityPage();
+
+class FacilityLocation {
+  navigateToFacilityLocationManagement(facilityName: string) {
+    facilityHome.typeFacilitySearch(facilityName);
+    facilityHome.assertFacilityInCard(facilityName);
+    facilityHome.clickViewFacilityDetails();
+    facilityPage.clickManageFacilityDropdown();
+    this.clickFacilityLocationManagement();
   }
 
   clickAddNewLocationButton() {
     cy.get("#add-new-location").click();
   }
 
+  typeLocationName(locationName: string) {
+    cy.get("#location-name").type(locationName);
+  }
+
   clickFacilityLocationManagement() {
     cy.get("[id=location-management]").click();
   }
 
+  clickAddLocationButton() {
+    cy.clickSubmitButton("Add Location");
+  }
+
   clickEditLocationButton() {
     cy.get("#edit-location-button").click();
   }
 
-  clickEditBedButton() {
-    cy.get("#edit-bed-button").click();
+  clickEditBedButton(cardText: string) {
+    cy.get("#bed-cards")
+      .contains(cardText)
+      .parents("#bed-cards")
+      .within(() => {
+        cy.get("#edit-bed-button").click();
+      });
   }
 
   fillDescription(description: string) {
@@ -63,10 +71,6 @@ class FacilityLocation {
     cy.get("#location-type").contains(type);
   }
 
-  verifyNotification(message: string) {
-    cy.get(".pnotify-container").should("contain", message).and("be.visible");
-  }
-
   verifyLocationDescription(description: string) {
     cy.get("#view-location-description").contains(description);
   }
@@ -75,16 +79,45 @@ class FacilityLocation {
     cy.get("#view-location-middleware").contains(middleware);
   }
 
-  clickManageBedButton() {
-    cy.get("#manage-bed-button").first().click();
+  clickManageBedButton(cardText: string) {
+    cy.get("#location-cards")
+      .contains(cardText)
+      .parents("#location-cards")
+      .within(() => {
+        cy.verifyAndClickElement("#manage-bed-button", "Manage Beds");
+      });
   }
 
   clickAddBedButton() {
-    cy.get("#add-new-bed").click();
+    cy.verifyAndClickElement("#add-new-bed", "Add New Bed(s)");
+  }
+
+  clickSubmitBedsButton() {
+    cy.clickSubmitButton("Add Bed(s)");
+  }
+
+  closeAddLocationForm() {
+    cy.clickCancelButton("Cancel");
+  }
+
+  verifyAddLocationSuccessfulMesssage() {
+    cy.verifyNotification("Location created successfully");
+    cy.closeNotification();
+  }
+
+  verifyEditBedSuccessfulMessage() {
+    cy.verifyNotification("Bed updated successfully");
+    cy.closeNotification();
   }
 
-  clickNotification() {
-    cy.get(".pnotify-container").click();
+  verifyEditLocationSuccessfulMessage() {
+    cy.verifyNotification("Location updated successfully");
+    cy.closeNotification();
+  }
+
+  verifyAddSingleBedSuccessfulMesssage() {
+    cy.verifyNotification("1 Bed created successfully");
+    cy.closeNotification();
   }
 
   enterBedName(name: string) {
@@ -95,6 +128,14 @@ class FacilityLocation {
     cy.get("#bed-description").clear().click().type(description);
   }
 
+  clickUpdateBedButton() {
+    cy.clickSubmitButton("Update Bed");
+  }
+
+  clickUpdateLocationButton() {
+    cy.clickSubmitButton("Update Location");
+  }
+
   selectBedType(type: string) {
     cy.get("#bed-type").click();
     cy.get("li[role=option]").contains(type).click();
@@ -136,16 +177,17 @@ class FacilityLocation {
     cy.get("#manage-assets").click();
   }
 
-  deleteLocation(name: string) {
-    cy.contains("div", name)
-      .should("exist")
-      .then(($div) => {
-        $div.parents("div").eq(2).find("button#delete-location-button").click();
-      });
+  clickDeleteLocation() {
+    cy.verifyAndClickElement("#delete-location-button", "Delete");
   }
 
-  deleteFirstBed() {
-    cy.get("#delete-bed-button").first().click();
+  deleteBedWithName(text: string) {
+    cy.get("#bed-card")
+      .contains(text)
+      .parents("#bed-card")
+      .within(() => {
+        cy.get("#delete-bed-button").click();
+      });
   }
 
   deleteBedRequest() {

cypress/pageobject/Users/UserCreation.ts

@@ -48,15 +48,4 @@ export class UserCreationPage {
   clickSaveUserButton() {
     cy.clickSubmitButton("Save User");
   }
-
-  verifyErrorMessages(errorMessages: string[]) {
-    cy.get(".error-text").then(($errors) => {
-      const displayedErrorMessages = $errors
-        .map((_, el) => Cypress.$(el).text())
-        .get();
-      errorMessages.forEach((errorMessage) => {
-        expect(displayedErrorMessages).to.include(errorMessage);
-      });
-    });
-  }
 }

cypress/support/commands.ts

@@ -229,3 +229,15 @@ Cypress.Commands.add("verifyContentPresence", (selector, texts) => {
     });
   });
 });
+
+Cypress.Commands.add("verifyErrorMessages", (errorMessages: string[]) => {
+  const selector = ".error-text"; // Static selector
+  cy.get(selector).then(($errors) => {
+    const displayedErrorMessages = $errors
+      .map((_, el) => Cypress.$(el).text())
+      .get();
+    errorMessages.forEach((errorMessage) => {
+      expect(displayedErrorMessages).to.include(errorMessage);
+    });
+  });
+});

cypress/support/index.ts

@@ -45,6 +45,7 @@ declare global {
         selector: string,
         texts: string[],
       ): Chainable<Element>;
+      verifyErrorMessages(errorMessages: string[]): Chainable<Subject>;
     }
   }
 }

src/components/Facility/AddLocationForm.tsx

@@ -162,6 +162,7 @@ export const AddLocationForm = ({ facilityId, locationId }: Props) => {
             <div className="mt-2 grid grid-cols-1 gap-4">
               <div>
                 <TextFormField
+                  id="location-name"
                   name="name"
                   type="text"
                   label="Name"

src/components/Facility/BedManagement.tsx

@@ -87,7 +87,10 @@ const BedCard = ({
         handleCancel={handleDeleteCancel}
         handleOk={handleDeleteConfirm}
       />
-      <div className="flex h-full w-full flex-col rounded border border-secondary-300 bg-white p-6 shadow-sm transition-all duration-200 ease-in-out hover:border-primary-400">
+      <div
+        className="flex h-full w-full flex-col rounded border border-secondary-300 bg-white p-6 shadow-sm transition-all duration-200 ease-in-out hover:border-primary-400"
+        id="bed-cards"
+      >
         <div className="flex-1">
           <div className="flex w-full flex-col items-start justify-between gap-2">
             <div>

src/components/Facility/LocationManagement.tsx

@@ -239,7 +239,10 @@ const Location = ({
   const totalBeds = bedsQuery.data?.count;
 
   return (
-    <div className="flex h-full w-full flex-col rounded border border-secondary-300 bg-white p-6 shadow-sm transition-all duration-200 ease-in-out hover:border-primary-400">
+    <div
+      className="flex h-full w-full flex-col rounded border border-secondary-300 bg-white p-6 shadow-sm transition-all duration-200 ease-in-out hover:border-primary-400"
+      id="location-cards"
+    >
       <div className="flex-1">
         <div className="flex w-full items-start justify-between gap-2">
           <div className="flex items-end gap-3">