chore: Add e2e tests

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("[email protected]");
+    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("[email protected]");
+    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");
+  });
+});

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)}
             >

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;

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}

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;
 }

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}
     >

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",

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 />}
           />
         ),