From afa760cd2bbf668a8cf50e62b8e1b1f3a865e70a Mon Sep 17 00:00:00 2001
From: Alok <alokbits02@gmail.com>
Date: Tue, 12 Nov 2024 10:21:01 +0530
Subject: [PATCH] verifies icons & its responsive text

---
 .../e2e/facility_spec/FacilityHomepage.cy.ts  | 15 ++++--------
 cypress/pageobject/Facility/FacilityHome.ts   | 23 +++++++++----------
 src/components/Common/Sidebar/SidebarItem.tsx |  1 +
 3 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/cypress/e2e/facility_spec/FacilityHomepage.cy.ts b/cypress/e2e/facility_spec/FacilityHomepage.cy.ts
index 5117bf4d259..3e3feb6d6d9 100644
--- a/cypress/e2e/facility_spec/FacilityHomepage.cy.ts
+++ b/cypress/e2e/facility_spec/FacilityHomepage.cy.ts
@@ -140,20 +140,17 @@ describe("Facility Homepage Function", () => {
 
   it("Verify sidebar collapse and expand functionality", () => {
     facilityHome.toggleSidebar();
-    facilityHome.verifyIconsVisible();
-    facilityHome.verifyTextVisible();
+    facilityHome.verifyIconsAndTextVisible();
 
     // Click toggle button to collapse sidebar, verify icons visible and text hidden
     facilityHome.toggleSidebar();
-    facilityHome.verifyIconsVisible();
-    facilityHome.verifyTextHidden();
+    facilityHome.verifyIconsVisibleAndTextHidden();
 
     // Click toggle button again to expand sidebar, verify icons and text are visible again
     facilityHome.toggleSidebar();
-    facilityHome.verifyIconsVisible();
-    facilityHome.verifyTextVisible();
+    facilityHome.verifyIconsAndTextVisible();
+  });
 
-    
   it("Verify Notice Board Functionality", () => {
     // search facility and verify it's loaded or not
     manageUserPage.interceptFacilitySearchReq();
@@ -203,7 +200,3 @@ describe("Facility Homepage Function", () => {
     cy.saveLocalStorage();
   });
 });
-
-afterEach(() => {
-  cy.saveLocalStorage();
-});
diff --git a/cypress/pageobject/Facility/FacilityHome.ts b/cypress/pageobject/Facility/FacilityHome.ts
index b2cab70f0ef..f58346aa142 100644
--- a/cypress/pageobject/Facility/FacilityHome.ts
+++ b/cypress/pageobject/Facility/FacilityHome.ts
@@ -5,8 +5,7 @@ class FacilityHome {
   menuItem = "[role='menuitem']";
 
   sidebarToggle = () => cy.get('[data-testid="sidebar-toggle"]');
-  sidebarIcon = () => cy.get('[data-testid="sidebar-icon"]');
-  sidebarText = () => cy.get('[data-testid="sidebar-text"]');
+  sidebarItems = () => cy.get('[data-testid="sidebar-item"]');
 
   // Operations
   clickExportButton() {
@@ -113,21 +112,21 @@ class FacilityHome {
     this.sidebarToggle().click();
   }
 
-  verifyIconsVisible() {
-    this.sidebarIcon().each(($el) => {
-      cy.wrap($el).should("be.visible");
+  verifyIconsAndTextVisible() {
+    this.sidebarItems().each(($item) => {
+      cy.wrap($item).find('[data-testid="sidebar-icon"]').should("be.visible");
+      cy.wrap($item).find('[data-testid="sidebar-text"]').should("be.visible");
     });
   }
 
-  verifyTextVisible() {
-    this.sidebarText().each(($el) => {
-      cy.wrap($el).should("be.visible");
+  verifyIconsVisibleAndTextHidden() {
+    this.sidebarItems().each(($item) => {
+      cy.wrap($item).find('[data-testid="sidebar-icon"]').should("be.visible");
+      cy.wrap($item)
+        .find('[data-testid="sidebar-text"]')
+        .should("not.be.visible");
     });
   }
-
-  verifyTextHidden() {
-    this.sidebarText().should("not.be.visible");
-  }
 }
 
 export default FacilityHome;
diff --git a/src/components/Common/Sidebar/SidebarItem.tsx b/src/components/Common/Sidebar/SidebarItem.tsx
index 7cce1b4da6a..4a51d6b8fea 100644
--- a/src/components/Common/Sidebar/SidebarItem.tsx
+++ b/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"