Refactor Facility Export & Add New Sidebar collapse & expand Test

cypress/e2e/facility_spec/FacilityHomepage.cy.ts

@@ -1,11 +1,10 @@
 // FacilityCreation
-
-import LoginPage from "../../pageobject/Login/LoginPage";
+import { AssetPagination } from "../../pageobject/Asset/AssetPagination";
+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 FacilityPage from "../../pageobject/Facility/FacilityCreation";
 import { UserPage } from "../../pageobject/Users/UserSearch";
-import { AssetPagination } from "../../pageobject/Asset/AssetPagination";
 
 describe("Facility Homepage Function", () => {
   const loginPage = new LoginPage();
@@ -17,6 +16,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";
@@ -107,11 +107,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  ", () => {
@@ -135,7 +136,23 @@ describe("Facility Homepage Function", () => {
     facilityHome.verifyLiveMonitorUrl();
   });
 
-  afterEach(() => {
-    cy.saveLocalStorage();
+  it("Verify sidebar collapse and expand functionality", () => {
+    facilityHome.toggleSidebar();
+    facilityHome.verifyIconsVisible();
+    facilityHome.verifyTextVisible();
+
+    // Click toggle button to collapse sidebar, verify icons visible and text hidden
+    facilityHome.toggleSidebar();
+    facilityHome.verifyIconsVisible();
+    facilityHome.verifyTextHidden();
+
+    // Click toggle button again to expand sidebar, verify icons and text are visible again
+    facilityHome.toggleSidebar();
+    facilityHome.verifyIconsVisible();
+    facilityHome.verifyTextVisible();
   });
 });
+
+afterEach(() => {
+  cy.saveLocalStorage();
+});

cypress/pageobject/Facility/FacilityHome.ts

@@ -4,6 +4,10 @@ class FacilityHome {
   searchButton = "#search";
   menuItem = "[role='menuitem']";
 
+  sidebarToggle = () => cy.get('[data-testid="sidebar-toggle"]');
+  sidebarIcon = () => cy.get('[data-testid="sidebar-icon"]');
+  sidebarText = () => cy.get('[data-testid="sidebar-text"]');
+
   // Operations
   clickExportButton() {
     cy.get(this.exportButton).scrollIntoView();
@@ -103,6 +107,26 @@ class FacilityHome {
     const encodedText = encodeURIComponent(searchText).replace(/%20/g, "+");
     this.getURL().should("include", `search=${encodedText}`);
   }
+
+  toggleSidebar() {
+    this.sidebarToggle().click();
+  }
+
+  verifyIconsVisible() {
+    this.sidebarIcon().each(($el) => {
+      cy.wrap($el).should("be.visible");
+    });
+  }
+
+  verifyTextVisible() {
+    this.sidebarText().each(($el) => {
+      cy.wrap($el).should("be.visible");
+    });
+  }
+
+  verifyTextHidden() {
+    this.sidebarText().should("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

@@ -60,8 +60,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`}