verifies icons & its responsive text

Alokih · Nov 12, 2024 · afa760c · afa760c
1 parent 287e353
commit afa760c
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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"