Refactor Facility Export & Add New Sidebar collapse & expand Test

cypress/e2e/facility_spec/FacilityHomepage.cy.ts

@@ -18,6 +18,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";
@@ -108,11 +109,12 @@ 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  ", () => {
@@ -136,6 +138,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();

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,33 @@ 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) => {
+        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);
+      });
+  }
+
+  verifyIconsAndTextVisible() {
+    this.verifySidebarElements("be.visible");
+  }
+
+  verifyIconsVisibleAndTextHidden() {
+    this.verifySidebarElements("not.be.visible");
+  }
 }
 
 export default FacilityHome;

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`}

src/components/Common/Sidebar/SidebarItem.tsx

@@ -33,6 +33,7 @@ const SidebarItemBase = forwardRef<HTMLAnchorElement, SidebarItemBaseProps>(
       <Link
         ref={ref}
         id={props?.id}
+        data-testid="sidebar-item"
         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 +63,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`}