Add Cypress Test Suite for Facility Notice Board Functionality Verification

cypress/e2e/facility_spec/FacilityHomepage.cy.ts

@@ -2,13 +2,15 @@
 import { AssetPagination } from "../../pageobject/Asset/AssetPagination";
 import FacilityPage from "../../pageobject/Facility/FacilityCreation";
 import FacilityHome from "../../pageobject/Facility/FacilityHome";
+import FacilityNotify from "../../pageobject/Facility/FacilityNotify";
 import LoginPage from "../../pageobject/Login/LoginPage";
 import ManageUserPage from "../../pageobject/Users/ManageUserPage";
 import { UserPage } from "../../pageobject/Users/UserSearch";
 
 describe("Facility Homepage Function", () => {
   const loginPage = new LoginPage();
   const facilityHome = new FacilityHome();
+  const facilityNotify = new FacilityNotify();
   const facilityPage = new FacilityPage();
   const manageUserPage = new ManageUserPage();
   const userPage = new UserPage();
@@ -22,6 +24,8 @@ describe("Facility Homepage Function", () => {
   const district = "Ernakulam";
   const localBody = "Aikaranad";
   const facilityType = "Private Hospital";
+  const notificationErrorMsg = "Message cannot be empty";
+  const notificationMessage = "Test Notification";
 
   before(() => {
     loginPage.loginAsDistrictAdmin();
@@ -30,6 +34,7 @@ describe("Facility Homepage Function", () => {
 
   beforeEach(() => {
     cy.restoreLocalStorage();
+    cy.clearLocalStorage(/filters--.+/);
     cy.awaitUrl("/facility");
   });
 
@@ -41,9 +46,6 @@ describe("Facility Homepage Function", () => {
     facilityHome.clickViewCnsButton();
     facilityHome.verifyCnsUrl();
     facilityHome.navigateBack();
-    // view notify button
-    facilityHome.clickFacilityNotifyButton();
-    facilityHome.verifyAndCloseNotifyModal();
     // view facility button
     facilityHome.clickViewFacilityDetails();
     facilityPage.getFacilityName().should("be.visible");
@@ -134,6 +136,51 @@ describe("Facility Homepage Function", () => {
     facilityHome.verifyLiveMonitorUrl();
   });
 
+  it("Verify Notice Board Functionality", () => {
+    // search facility and verify it's loaded or not
+    manageUserPage.interceptFacilitySearchReq();
+    manageUserPage.typeFacilitySearch(facilityName);
+    manageUserPage.verifyFacilitySearchReq();
+    // verify facility name and card reflection
+    facilityNotify.verifyUrlContains("Dummy+Facility+40");
+    facilityPage.verifyFacilityBadgeContent(facilityName);
+    manageUserPage.assertFacilityInCard(facilityName);
+    // send notification to a facility
+    facilityHome.clickFacilityNotifyButton();
+    facilityNotify.verifyFacilityName(facilityName);
+    facilityNotify.fillNotifyText(notificationMessage);
+    facilityNotify.interceptPostNotificationReq();
+    cy.submitButton("Notify");
+    facilityNotify.verifyPostNotificationReq();
+    cy.verifyNotification("Facility Notified");
+    cy.closeNotification();
+    cy.wait(2000);
+    // Verify the frontend error on empty message
+    facilityHome.clickFacilityNotifyButton();
+    facilityNotify.verifyFacilityName(facilityName);
+    cy.submitButton("Notify");
+    facilityNotify.verifyErrorMessage(notificationErrorMsg);
+    // close pop-up and verify
+    facilityHome.verifyAndCloseNotifyModal();
+    // signout as district admin and login as a Nurse
+    loginPage.ensureLoggedIn();
+    loginPage.clickSignOutBtn();
+    loginPage.loginManuallyAsNurse();
+    // Verify Notice Board Reflection
+    facilityNotify.interceptGetNotificationReq("MESSAGE");
+    facilityNotify.visitNoticeBoard();
+    facilityNotify.verifyGetNotificationReq();
+    facilityNotify.verifyFacilityNoticeBoardMessage(notificationMessage);
+    facilityNotify.interceptGetNotificationReq();
+    // Verify Sidebar Notification Reflection
+    facilityNotify.openNotificationSlide();
+    facilityNotify.verifyGetNotificationReq();
+    cy.verifyContentPresence("#notification-slide-msg", [notificationMessage]);
+    facilityNotify.closeNotificationSlide();
+    loginPage.ensureLoggedIn();
+    loginPage.clickSignOutBtn();
+  });
+
   afterEach(() => {
     cy.saveLocalStorage();
   });

cypress/pageobject/Facility/FacilityHome.ts

@@ -35,7 +35,8 @@ class FacilityHome {
   }
 
   clickFacilityNotifyButton() {
-    cy.get("#facility-notify").first().click();
+    cy.get("#facility-notify", { timeout: 10000 }).should("be.visible");
+    cy.get("#facility-notify").focus().click();
   }
 
   clickLiveMonitorButton() {

cypress/pageobject/Facility/FacilityNotify.ts

@@ -0,0 +1,58 @@
+export default class FacilityNotify {
+  verifyFacilityName(facilityName: string) {
+    cy.verifyContentPresence("#notify-facility-name", [facilityName]);
+  }
+
+  verifyErrorMessage(errorMessage: string) {
+    cy.verifyContentPresence(".error-text", [errorMessage]);
+  }
+
+  fillNotifyText(message: string) {
+    cy.get("#NotifyModalMessageInput").scrollIntoView();
+    cy.get("#NotifyModalMessageInput").click().type(message);
+  }
+
+  verifyFacilityNoticeBoardMessage(message: string) {
+    cy.get("#notification-message", { timeout: 10000 }).should("be.visible");
+    cy.verifyContentPresence("#notification-message", [message]);
+  }
+
+  openNotificationSlide() {
+    cy.get("#notification-slide-btn").should("be.visible").click();
+  }
+
+  closeNotificationSlide() {
+    cy.get("#close-slide-over").should("be.visible").click();
+  }
+
+  visitNoticeBoard() {
+    cy.get("a[href='/notice_board']").should("be.visible").click();
+  }
+
+  visitNotificationSideBar() {
+    cy.get("#notification-slide-btn").should("be.visible").click();
+  }
+
+  verifyUrlContains(substring: string) {
+    cy.url().should("include", substring);
+  }
+
+  interceptPostNotificationReq() {
+    cy.intercept("POST", "**/api/v1/notification/notify").as("notifyFacility");
+  }
+
+  verifyPostNotificationReq() {
+    cy.wait("@notifyFacility").its("response.statusCode").should("eq", 204);
+  }
+
+  interceptGetNotificationReq(event: string = "") {
+    cy.intercept(
+      "GET",
+      `**/api/v1/notification/?offset=0&event=${event}&*=SYSTEM`,
+    ).as("getNotifications");
+  }
+
+  verifyGetNotificationReq() {
+    cy.wait("@getNotifications").its("response.statusCode").should("eq", 200);
+  }
+}

cypress/pageobject/Login/LoginPage.ts

@@ -34,6 +34,10 @@ class LoginPage {
     cy.get("#sign-out-button").scrollIntoView();
     cy.get("#sign-out-button").contains("Sign Out").should("exist");
   }
+
+  clickSignOutBtn(): void {
+    cy.verifyAndClickElement("#sign-out-button", "Sign Out");
+  }
 }
 
 export default LoginPage;

cypress/pageobject/Users/ManageUserPage.ts

@@ -99,6 +99,14 @@ export class ManageUserPage {
     cy.get("#search").click().type(facilityName);
   }
 
+  interceptFacilitySearchReq() {
+    cy.intercept("GET", "**/api/v1/facility/**").as("searchFacility");
+  }
+
+  verifyFacilitySearchReq() {
+    cy.wait("@searchFacility").its("response.statusCode").should("eq", 200);
+  }
+
   assertFacilityInCard(facilityName: string) {
     cy.get("#facility-name-card").should("contain", facilityName);
   }

src/components/Common/Sidebar/SidebarItem.tsx

@@ -9,6 +9,7 @@ import useAppHistory from "@/hooks/useAppHistory";
 export type SidebarIcon = React.ReactNode;
 
 type SidebarItemProps = {
+  id?: string;
   ref?: React.Ref<HTMLAnchorElement>;
   text: string;
   icon: SidebarIcon;
@@ -31,6 +32,7 @@ const SidebarItemBase = forwardRef<HTMLAnchorElement, SidebarItemBaseProps>(
     return (
       <Link
         ref={ref}
+        id={props?.id}
         className={`tooltip relative ml-1 mr-2 h-12 flex-1 cursor-pointer rounded-md py-1 font-medium text-gray-600 transition md:flex-none ${
           props.selected
             ? "bg-white text-green-800 shadow"

src/components/Facility/FacilityCard.tsx

@@ -185,7 +185,10 @@ export const FacilityCard = (props: {
                     <DialogModal
                       show={notifyModalFor === facility.id}
                       title={
-                        <span className="flex justify-center text-2xl">
+                        <span
+                          className="flex justify-center text-2xl"
+                          id="notify-facility-name"
+                        >
                           Notify: {facility.name}
                         </span>
                       }

src/components/Notifications/NoticeBoard.tsx

@@ -26,7 +26,9 @@ export const NoticeBoard = () => {
             className="overflow-hidden rounded shadow-md"
           >
             <div className="px-6 py-4">
-              <div className="text-justify text-lg">{item.message}</div>
+              <div className="text-justify text-lg" id="notification-message">
+                {item.message}
+              </div>
               <div className="text-md my-2 text-secondary-700">
                 {formatName(item.caused_by)} -{" "}
                 <span className="font-bold text-primary-700">

src/components/Notifications/NotificationsList.tsx

@@ -115,7 +115,9 @@ const NotificationTile = ({
           />
         </div>
       </div>
-      <div className="py-1 text-sm">{result.message}</div>
+      <div className="py-1 text-sm" id="notification-slide-msg">
+        {result.message}
+      </div>
       <div className="flex flex-col justify-end gap-2">
         <div className="py-1 text-right text-xs text-secondary-700">
           {formatDateTime(result.created_date)}
@@ -474,6 +476,7 @@ export default function NotificationsList({
     <>
       <Item
         text={t("Notifications")}
+        id="notification-slide-btn"
         do={() => setOpen(!open)}
         icon={<CareIcon icon="l-bell" className="h-5" />}
         badgeCount={unreadCount}