Add Test Suit for Sidebar Icon and Text Visibility

cypress/e2e/facility_spec/FacilityHomepage.cy.ts

@@ -32,6 +32,16 @@ describe("Facility Homepage Function", () => {
   const facilityWithNoAvailableBeds = "Dummy Facility 12";
   const locationName = "Test-location";
   const locationType = "WARD";
+  const NavItems = [
+    { text: "Facilities", icon: "care-d-hospital" },
+    { text: "Patients", icon: "care-d-patient" },
+    { text: "Assets", icon: "care-d-folder" },
+    { text: "Shifting", icon: "care-d-ambulance" },
+    { text: "Resource", icon: "care-d-book-open" },
+    { text: "Users", icon: "care-d-people" },
+    { text: "Notice Board", icon: "care-d-notice-board" },
+    { text: "Notifications", icon: "care-d-bell" },
+  ];
 
   before(() => {
     loginPage.loginByRole("districtAdmin");
@@ -45,6 +55,26 @@ describe("Facility Homepage Function", () => {
     cy.awaitUrl("/facility");
   });
 
+  it("Verify Sidebar functionality", () => {
+    // Verify Icon and Corresponding Text Should be Visible
+    NavItems.forEach((item) => {
+      facilityHome.verifyIconVisiblity(item.icon);
+      facilityHome.verifyTextVisibility(item.text);
+    });
+    facilityHome.toggleSideBar();
+    // Toggle Sidebar and Just Icon Should be visible
+    NavItems.forEach((item) => {
+      facilityHome.verifyIconVisiblity(item.icon);
+      facilityHome.verifyTextVisibility(item.text, false);
+    });
+    facilityHome.toggleSideBar();
+    // Toggle Sidebar again and Verify Icon and Corresponding Text Should be Visible
+    NavItems.forEach((item) => {
+      facilityHome.verifyIconVisiblity(item.icon);
+      facilityHome.verifyTextVisibility(item.text);
+    });
+  });
+
   it("Verify the Facility card button redirection", () => {
     // view cns button
     facilityHome.typeFacilitySearch(facilityName);

cypress/pageobject/Facility/FacilityHome.ts

@@ -1,8 +1,33 @@
 class FacilityHome {
   // Selectors
   exportButton = "#export-button";
+  sidebar_toggle = "sidebar-toggle";
 
   // Operations
+  verifyIconVisiblity(iconClassName: string) {
+    cy.get(`.${iconClassName}`).should("be.visible").should("exist");
+  }
+
+  verifyTextVisibility(expectedText: string, isVisible: boolean = true) {
+    if (isVisible) {
+      cy.get(`[data-testid="sidebar-text-${expectedText}"]`)
+        .then(($elem) => {
+          expect($elem.text().trim()).to.equal(expectedText);
+        })
+        .should("be.visible");
+    } else {
+      cy.get(`[data-testid="sidebar-text-${expectedText}"]`).should(
+        "not.be.visible",
+      );
+    }
+  }
+
+  toggleSideBar() {
+    cy.get(`[data-testid="${this.sidebar_toggle}"]`)
+      .should("be.visible")
+      .click();
+  }
+
   clickExportButton() {
     cy.get(this.exportButton).scrollIntoView();
     cy.get(this.exportButton).click();

src/components/Common/Sidebar/Sidebar.tsx

@@ -242,6 +242,7 @@ const ToggleShrink = ({ shrinked, toggle }: ToggleShrinkProps) => {
         content={shrinked ? t("expand_sidebar") : t("collapse_sidebar")}
       >
         <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`}
           onClick={toggle}
         >

src/components/Common/Sidebar/SidebarItem.tsx

@@ -67,6 +67,7 @@ const SidebarItemBase = forwardRef<HTMLAnchorElement, SidebarItemBaseProps>(
             className={`${
               shrinked ? "hidden" : "grow"
             } flex w-full items-center text-nowrap pl-4 text-sm tracking-wide`}
+            data-testid={`sidebar-text-${props.text}`}
           >
             {t(props.text)}
           </span>