From 205f1ce7ccd3155a37bed3d5117c5a7d094a97a4 Mon Sep 17 00:00:00 2001 From: JavidSumra Date: Fri, 27 Dec 2024 13:34:59 +0530 Subject: [PATCH 1/4] Add Test Suit for Sidebar Icon and Text Visibility --- .../e2e/facility_spec/FacilityHomepage.cy.ts | 30 +++++++++++++++++++ cypress/pageobject/Facility/FacilityHome.ts | 25 ++++++++++++++++ src/components/Common/Sidebar/Sidebar.tsx | 1 + src/components/Common/Sidebar/SidebarItem.tsx | 1 + 4 files changed, 57 insertions(+) diff --git a/cypress/e2e/facility_spec/FacilityHomepage.cy.ts b/cypress/e2e/facility_spec/FacilityHomepage.cy.ts index c43106ba869..fab329d93db 100644 --- a/cypress/e2e/facility_spec/FacilityHomepage.cy.ts +++ b/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); diff --git a/cypress/pageobject/Facility/FacilityHome.ts b/cypress/pageobject/Facility/FacilityHome.ts index 24f7d321628..d85aa5f5c9a 100644 --- a/cypress/pageobject/Facility/FacilityHome.ts +++ b/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(); diff --git a/src/components/Common/Sidebar/Sidebar.tsx b/src/components/Common/Sidebar/Sidebar.tsx index e6d9edbc2dd..70ed3b00764 100644 --- a/src/components/Common/Sidebar/Sidebar.tsx +++ b/src/components/Common/Sidebar/Sidebar.tsx @@ -242,6 +242,7 @@ const ToggleShrink = ({ shrinked, toggle }: ToggleShrinkProps) => { content={shrinked ? t("expand_sidebar") : t("collapse_sidebar")} > - - - ); -}; diff --git a/src/components/Common/Sidebar/SidebarItem.tsx b/src/components/Common/Sidebar/SidebarItem.tsx deleted file mode 100644 index 068f5cf63fd..00000000000 --- a/src/components/Common/Sidebar/SidebarItem.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import { Link } from "raviger"; -import React, { Ref, forwardRef } from "react"; -import { useTranslation } from "react-i18next"; - -import CareIcon from "@/CAREUI/icons/CareIcon"; - -import useAppHistory from "@/hooks/useAppHistory"; - -export type SidebarIcon = React.ReactNode; - -type SidebarItemProps = { - id?: string; - ref?: React.Ref; - text: string; - icon: SidebarIcon; - onItemClick?: () => void; - external?: true | undefined; - badgeCount?: number | undefined; - selected?: boolean | undefined; - handleOverflow?: any; -} & ({ to?: string; do?: undefined } | { to?: string; do: () => void }); - -type SidebarItemBaseProps = SidebarItemProps & { - shrinked?: boolean; -}; - -const SidebarItemBase = forwardRef( - ({ shrinked, external, ...props }, ref) => { - const { t } = useTranslation(); - const { resetHistory } = useAppHistory(); - - return ( - { - // On Review: Check if resetHistory is working as intended. - props.do?.(); - props.onItemClick?.(); - resetHistory(); - }} - onMouseEnter={() => { - props.handleOverflow(true); - }} - onMouseLeave={() => { - props.handleOverflow(false); - }} - > - - {t(props.text)} - -
-
{props.icon}
- - {t(props.text)} - - {external && !shrinked && ( - - )} -
- - {!!props.badgeCount && ( - - {props.badgeCount > 9 ? "9+" : props.badgeCount} - - )} - - ); - }, -); - -export const SidebarItem = forwardRef( - (props: SidebarItemProps, ref: Ref) => ( - - ), -); - -export const ShrinkedSidebarItem = forwardRef( - (props: SidebarItemProps, ref: Ref) => ( - - ), -); From a76f5eb85a78da6c4f54c762ff89746f7f3a66a4 Mon Sep 17 00:00:00 2001 From: JavidSumra Date: Fri, 3 Jan 2025 16:58:09 +0530 Subject: [PATCH 4/4] Re-run Test Suit