From bdd55c3a81de15726002d912c2c27056d1f0ff4b Mon Sep 17 00:00:00 2001
From: SteveGT96 <steve.tsala@intesys.it>
Date: Wed, 9 Oct 2024 15:10:29 +0100
Subject: [PATCH] chore: Add e2e tests

---
 .../hospital/edit_hospital.cy.ts              | 48 +++++++++++++++++++
 .../hospital/hospitalForm/HospitalForm.tsx    | 10 +++-
 .../admin/hospital/hospitalForm/styles.scss   |  2 +-
 src/components/accessories/button/Button.tsx  |  2 +
 src/components/accessories/button/types.ts    |  4 +-
 .../accessories/menuItem/MenuItem.tsx         |  3 ++
 .../adminActivity/SideMenu/SideMenu.tsx       |  4 +-
 src/routes/Admin/AdminRoutes.tsx              |  2 +-
 8 files changed, 69 insertions(+), 6 deletions(-)
 create mode 100644 cypress/integrations/admin_activities/hospital/edit_hospital.cy.ts

diff --git a/cypress/integrations/admin_activities/hospital/edit_hospital.cy.ts b/cypress/integrations/admin_activities/hospital/edit_hospital.cy.ts
new file mode 100644
index 000000000..389641541
--- /dev/null
+++ b/cypress/integrations/admin_activities/hospital/edit_hospital.cy.ts
@@ -0,0 +1,48 @@
+/// <reference types="cypress" />
+
+const STARTS_PATH = "/admin";
+
+describe("Edit Hospital Activity specs", () => {
+  it("should render the ui", () => {
+    cy.authenticate(STARTS_PATH);
+    cy.dataCy("hospital-infos").click();
+    cy.dataCy("edit-hospital").click();
+    cy.dataCy("activity-title").contains("Edit hospital");
+  });
+
+  it("should fail to edit the hospitalInfo", () => {
+    cy.byId("description").clear().type("FAIL");
+    cy.byId("email").clear().type("luke@hospital.com");
+    cy.dataCy("submit-form").click();
+    cy.dataCy("dialog-info").should("not.exist");
+    cy.dataCy("info-box").contains("Invalid payload");
+  });
+
+  it("should successfully save hospital infos changes", () => {
+    cy.byId("description").clear().type("St. LUKE Hospital");
+    cy.byId("email").clear().type("luke@hospital.com");
+    cy.byId("currencyCod").clear().type("FCFA");
+    cy.dataCy("submit-form").click();
+    cy.dataCy("dialog-info").contains("updated successfully");
+    cy.dataCy("approve-dialog").click();
+  });
+
+  it("should redirect after hospital info update", () => {
+    cy.dataCy("activity-title").contains("Wards");
+  });
+
+  it("should cancel the discard of the hospital infos", () => {
+    cy.dataCy("edit-hospital").first().click();
+    cy.dataCy("cancel-form").click();
+    cy.dataCy("dialog-info").contains("lost");
+    cy.dataCy("close-dialog").click().click();
+    cy.dataCy("dialog-info").should("not.be.visible");
+  });
+
+  it("should cancel the update of the hospital infos", () => {
+    cy.dataCy("cancel-form").click();
+    cy.dataCy("dialog-info").contains("lost");
+    cy.dataCy("approve-dialog").click();
+    cy.dataCy("activity-title").contains("Wards");
+  });
+});
diff --git a/src/components/accessories/admin/hospital/hospitalForm/HospitalForm.tsx b/src/components/accessories/admin/hospital/hospitalForm/HospitalForm.tsx
index ab6c204b0..f13e8884e 100644
--- a/src/components/accessories/admin/hospital/hospitalForm/HospitalForm.tsx
+++ b/src/components/accessories/admin/hospital/hospitalForm/HospitalForm.tsx
@@ -177,14 +177,20 @@ const HospitalForm: FC<IHospitalFormProps> = ({
 
         <div className="hospitalForm__buttonSet">
           <div className="submit_button">
-            <Button type="submit" variant="contained" disabled={isLoading}>
+            <Button
+              type="submit"
+              dataCy="submit-form"
+              variant="contained"
+              disabled={isLoading}
+            >
               {submitButtonLabel}
             </Button>
           </div>
-          <div className="reset_button">
+          <div className="discard_button">
             <Button
               type="button"
               variant="text"
+              dataCy="cancel-form"
               disabled={isLoading}
               onClick={() => setOpenDiscardConfirmation(true)}
             >
diff --git a/src/components/accessories/admin/hospital/hospitalForm/styles.scss b/src/components/accessories/admin/hospital/hospitalForm/styles.scss
index 30bbe085e..a0ca81274 100644
--- a/src/components/accessories/admin/hospital/hospitalForm/styles.scss
+++ b/src/components/accessories/admin/hospital/hospitalForm/styles.scss
@@ -68,7 +68,7 @@
     }
 
     .submit_button,
-    .reset_button {
+    .discard_button {
       .MuiButton-label {
         font-size: smaller;
         letter-spacing: 1px;
diff --git a/src/components/accessories/button/Button.tsx b/src/components/accessories/button/Button.tsx
index 964238b57..79cb4fab4 100644
--- a/src/components/accessories/button/Button.tsx
+++ b/src/components/accessories/button/Button.tsx
@@ -11,6 +11,7 @@ const Button: FunctionComponent<IProps> = ({
   disabled,
   dataCy,
   onClick,
+  sx,
 }) => {
   return (
     <MaterialComponent
@@ -21,6 +22,7 @@ const Button: FunctionComponent<IProps> = ({
       disableElevation
       disabled={disabled}
       onClick={onClick}
+      sx={sx}
       data-cy={dataCy}
     >
       {children}
diff --git a/src/components/accessories/button/types.ts b/src/components/accessories/button/types.ts
index 6d82886dc..3fc9f0a1b 100644
--- a/src/components/accessories/button/types.ts
+++ b/src/components/accessories/button/types.ts
@@ -1,4 +1,5 @@
-import { ButtonProps } from "@mui/material";
+import { ButtonProps, SxProps } from "@mui/material";
+import { Theme } from "@mui/system";
 import { PropsWithChildren } from "react";
 
 export interface IProps extends PropsWithChildren {
@@ -7,5 +8,6 @@ export interface IProps extends PropsWithChildren {
   color?: ButtonProps["color"] | undefined;
   disabled?: boolean;
   dataCy?: string;
+  sx?: SxProps<Theme>;
   onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
diff --git a/src/components/accessories/menuItem/MenuItem.tsx b/src/components/accessories/menuItem/MenuItem.tsx
index 3e5177cdd..6347ca63d 100644
--- a/src/components/accessories/menuItem/MenuItem.tsx
+++ b/src/components/accessories/menuItem/MenuItem.tsx
@@ -14,6 +14,7 @@ interface IOwnProps {
   label: string;
   selected?: boolean;
   expandedContent?: ReactNode;
+  dataCy?: string;
   onClick: () => void;
 }
 
@@ -23,11 +24,13 @@ export const MenuItem = ({
   label,
   selected,
   expandedContent,
+  dataCy,
   onClick,
 }: IOwnProps) => {
   const [expanded, setExpanded] = useState(false);
   const menu = (
     <div
+      data-cy={dataCy}
       className={classnames(classes.menuItem, selected ? classes.active : null)}
       onClick={onClick}
     >
diff --git a/src/components/activities/adminActivity/SideMenu/SideMenu.tsx b/src/components/activities/adminActivity/SideMenu/SideMenu.tsx
index 1747aa4c4..de1ff814d 100644
--- a/src/components/activities/adminActivity/SideMenu/SideMenu.tsx
+++ b/src/components/activities/adminActivity/SideMenu/SideMenu.tsx
@@ -10,12 +10,12 @@ import {
   People,
   SupervisedUserCircle,
 } from "@mui/icons-material";
-import { Button } from "@mui/material";
 import { PATHS } from "consts";
 import React, { ReactNode, useCallback } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation, useNavigate } from "react-router";
 import { useAppSelector } from "../../../../libraries/hooks/redux";
+import Button from "../../../accessories/button/Button";
 import { MenuItem } from "../../../accessories/menuItem";
 import { IAdminSection } from "../types";
 import classes from "./SideMenu.module.scss";
@@ -88,6 +88,7 @@ const SideMenu = () => {
       ))}
       <h6 className={classes.label}>{t("nav.hospital")}</h6>
       <MenuItem
+        dataCy="hospital-infos"
         icon={<LocalHospitalSharp fontSize="small" />}
         label={t(`nav.hospitalInfo`)}
         onClick={() => {}}
@@ -107,6 +108,7 @@ const SideMenu = () => {
             <Button
               type="button"
               variant="text"
+              dataCy="edit-hospital"
               sx={{
                 color: "black",
                 backgroundColor: "white",
diff --git a/src/routes/Admin/AdminRoutes.tsx b/src/routes/Admin/AdminRoutes.tsx
index 72eb22f84..ceddc2a48 100644
--- a/src/routes/Admin/AdminRoutes.tsx
+++ b/src/routes/Admin/AdminRoutes.tsx
@@ -226,7 +226,7 @@ export const AdminRoutes = () => {
         path: getPath(PATHS.admin_hospital_edit),
         element: (
           <AdminActivityContent
-            title={t("nav.hospital")}
+            title={t("hospital.editHospital")}
             children={<EditHospital />}
           />
         ),