From 4a5831eb7dc4b2d30d9aa9727029212d1eb740a0 Mon Sep 17 00:00:00 2001
From: Alok <alokbits02@gmail.com>
Date: Tue, 3 Dec 2024 20:33:05 +0530
Subject: [PATCH] Refactor facility export & Add sidebar collapse test

---
 .../e2e/facility_spec/FacilityHomepage.cy.ts  | 20 ++++++++--
 cypress/pageobject/Facility/FacilityHome.ts   | 38 +++++++++++++++++++
 src/components/Common/Sidebar/Sidebar.tsx     |  1 +
 src/components/Common/Sidebar/SidebarItem.tsx |  7 +++-
 4 files changed, 62 insertions(+), 4 deletions(-)

diff --git a/cypress/e2e/facility_spec/FacilityHomepage.cy.ts b/cypress/e2e/facility_spec/FacilityHomepage.cy.ts
index f4c7aaa90a0..11c244a34dc 100644
--- a/cypress/e2e/facility_spec/FacilityHomepage.cy.ts
+++ b/cypress/e2e/facility_spec/FacilityHomepage.cy.ts
@@ -19,6 +19,7 @@ describe("Facility Homepage Function", () => {
   const facilitiesAlias = "downloadFacilitiesCSV";
   const doctorsAlias = "downloadDoctorsCSV";
   const triagesAlias = "downloadTriagesCSV";
+  const capacitiesAlias = "downloadCapacitiesCSV";
   const facilityName = "Dummy Facility 40";
   const facilityLocaion = "Dummy Location";
   const stateName = "Kerala";
@@ -110,11 +111,11 @@ describe("Facility Homepage Function", () => {
     facilityHome.clickExportButton();
     facilityHome.clickMenuItem("Triages");
     facilityHome.verifyDownload(triagesAlias);
-  });
-
-  it("Verify Capacity Export Functionality", () => {
+    // Verify Capacity Export
+    facilityHome.csvDownloadIntercept(capacitiesAlias, "&capacity");
     facilityHome.clickExportButton();
     facilityHome.clickMenuItem("Capacities");
+    facilityHome.verifyDownload(capacitiesAlias);
   });
 
   it("Verify Facility Detail page redirection to CNS and Live Minitoring  ", () => {
@@ -138,6 +139,19 @@ describe("Facility Homepage Function", () => {
     facilityHome.verifyLiveMonitorUrl();
   });
 
+  it("Verify sidebar collapse and expand functionality", () => {
+    facilityHome.toggleSidebar();
+    facilityHome.verifyIconsAndTextVisible();
+
+    // Click toggle button to collapse sidebar, verify icons visible and text hidden
+    facilityHome.toggleSidebar();
+    facilityHome.verifyIconsVisibleAndTextHidden();
+
+    // Click toggle button again to expand sidebar, verify icons and text are visible again
+    facilityHome.toggleSidebar();
+    facilityHome.verifyIconsAndTextVisible();
+  });
+
   it("Verify Notice Board Functionality", () => {
     // search facility and verify it's loaded or not
     manageUserPage.interceptFacilitySearchReq();
diff --git a/cypress/pageobject/Facility/FacilityHome.ts b/cypress/pageobject/Facility/FacilityHome.ts
index 30f51052370..6110fc8b237 100644
--- a/cypress/pageobject/Facility/FacilityHome.ts
+++ b/cypress/pageobject/Facility/FacilityHome.ts
@@ -4,6 +4,9 @@ class FacilityHome {
   searchButton = "#search";
   menuItem = "[role='menuitem']";
 
+  sidebarToggle = () => cy.get('[data-testid="sidebar-toggle"]');
+  sidebarItems = () => cy.get('[data-testid="sidebar-item"]');
+
   // Operations
   clickExportButton() {
     cy.get(this.exportButton).scrollIntoView();
@@ -104,6 +107,41 @@ class FacilityHome {
     const encodedText = encodeURIComponent(searchText).replace(/%20/g, "+");
     this.getURL().should("include", `search=${encodedText}`);
   }
+
+  toggleSidebar() {
+    this.sidebarToggle().should("be.visible").click();
+  }
+
+  private verifySidebarElements(
+    textVisibility: "be.visible" | "not.be.visible",
+  ) {
+    this.sidebarItems()
+      .should("have.length.at.least", 1)
+      .each(($item) => {
+        const expectedText = $item.attr("data-text");
+
+        cy.wrap($item, { timeout: 10000 })
+          .find('[data-testid="sidebar-icon"]')
+          .should("be.visible");
+        cy.wrap($item, { timeout: 10000 })
+          .find('[data-testid="sidebar-text"]')
+          .should(textVisibility)
+          .then(($text) => {
+            if (textVisibility === "be.visible") {
+              const actualText = $text.text().trim();
+              expect(actualText).to.eq(expectedText);
+            }
+          });
+      });
+  }
+
+  verifyIconsAndTextVisible() {
+    this.verifySidebarElements("be.visible");
+  }
+
+  verifyIconsVisibleAndTextHidden() {
+    this.verifySidebarElements("not.be.visible");
+  }
 }
 
 export default FacilityHome;
diff --git a/src/components/Common/Sidebar/Sidebar.tsx b/src/components/Common/Sidebar/Sidebar.tsx
index 6612555a908..d82c713e73e 100644
--- a/src/components/Common/Sidebar/Sidebar.tsx
+++ b/src/components/Common/Sidebar/Sidebar.tsx
@@ -247,6 +247,7 @@ const ToggleShrink = ({ shrinked, toggle }: ToggleShrinkProps) => {
       <Tooltip>
         <TooltipTrigger asChild>
           <button
+            data-testid="sidebar-toggle"
             className={`flex h-6 w-6 cursor-pointer items-center justify-center rounded focus:outline-none focus:ring-2 focus:ring-indigo-500 ${shrinked ? "bg-gray-200" : "bg-gray-100"} text-gray-600 hover:bg-primary-200 hover:text-primary-800 ${
               shrinked ? "mx-auto" : "mr-4"
             } transition-all ease-in-out`}
diff --git a/src/components/Common/Sidebar/SidebarItem.tsx b/src/components/Common/Sidebar/SidebarItem.tsx
index 7262c6a103b..d4d3a48c297 100644
--- a/src/components/Common/Sidebar/SidebarItem.tsx
+++ b/src/components/Common/Sidebar/SidebarItem.tsx
@@ -33,6 +33,8 @@ const SidebarItemBase = forwardRef<HTMLAnchorElement, SidebarItemBaseProps>(
       <Link
         ref={ref}
         id={props?.id}
+        data-testid="sidebar-item"
+        data-text={props.text}
         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"
@@ -62,8 +64,11 @@ const SidebarItemBase = forwardRef<HTMLAnchorElement, SidebarItemBaseProps>(
             shrinked ? "justify-center" : "justify-start pl-5 pr-4"
           } transition-all duration-200 ease-in-out`}
         >
-          <div className="flex-none text-lg">{props.icon}</div>
+          <div data-testid="sidebar-icon" className="flex-none text-lg">
+            {props.icon}
+          </div>
           <span
+            data-testid="sidebar-text"
             className={`${
               shrinked ? "hidden" : "grow"
             } flex w-full items-center text-nowrap pl-4 text-sm tracking-wide`}