From 58795d9d9d4db33d0cb48336857369c8ef263bc1 Mon Sep 17 00:00:00 2001
From: Silevester Dongmo <58907550+SilverD3@users.noreply.github.com>
Date: Wed, 17 Jul 2024 15:26:21 +0100
Subject: [PATCH] chore:OH2-329 | Tests / Add cypress e2e tests to cover
 admin/vaccines (#626)

---
 .../add_vaccine_activity.cy.ts                | 52 +++++++++++++++++++
 .../edit_vaccine_activity.cy.ts               | 51 ++++++++++++++++++
 .../manage_vaccines_activity.cy.ts            | 19 +++++++
 .../accessories/admin/vaccines/Vaccines.tsx   | 35 +++++++------
 .../vaccines/vaccineForm/VaccineForm.tsx      |  8 ++-
 5 files changed, 148 insertions(+), 17 deletions(-)
 create mode 100644 cypress/integrations/admin_activities/vaccines_activities/add_vaccine_activity.cy.ts
 create mode 100644 cypress/integrations/admin_activities/vaccines_activities/edit_vaccine_activity.cy.ts
 create mode 100644 cypress/integrations/admin_activities/vaccines_activities/manage_vaccines_activity.cy.ts

diff --git a/cypress/integrations/admin_activities/vaccines_activities/add_vaccine_activity.cy.ts b/cypress/integrations/admin_activities/vaccines_activities/add_vaccine_activity.cy.ts
new file mode 100644
index 000000000..26c93519a
--- /dev/null
+++ b/cypress/integrations/admin_activities/vaccines_activities/add_vaccine_activity.cy.ts
@@ -0,0 +1,52 @@
+/// <reference types="cypress" />
+
+const VACCINE_STARTS_PATH = "/admin/vaccines";
+
+describe("Add Vaccine Activity specs", () => {
+  it("should render the ui", () => {
+    cy.authenticate(VACCINE_STARTS_PATH);
+    cy.dataCy("activity-title").contains("Vaccines");
+  });
+
+  it("should show vaccine creation form", () => {
+    cy.dataCy("add-new-vaccine").click();
+    cy.dataCy("activity-title").contains("Add Vaccine");
+  });
+
+  it("should fail to create a new vaccine", () => {
+    cy.byId("code").type("FAIL");
+    cy.byId("vaccineType").click();
+    cy.get('.MuiAutocomplete-popper li[data-option-index="0"]').click();
+    cy.byId("description").type("Children vaccine");
+    cy.dataCy("submit-form").click();
+    cy.dataCy("info-box").contains("Fail");
+  });
+
+  it("should successfully create a new vaccine", () => {
+    cy.byId("code").clear().type("22");
+    cy.dataCy("submit-form").click();
+    cy.dataCy("dialog-info").contains("Vaccine has been created successfully!");
+    cy.dataCy("approve-dialog").click();
+  });
+
+  it("should redirect after vaccine creation", () => {
+    cy.dataCy("activity-title").contains("Vaccines");
+  });
+
+  it("should cancel the cancellation of the vaccine creation", () => {
+    cy.dataCy("add-new-vaccine").click();
+    cy.dataCy("cancel-form").click();
+    cy.dataCy("dialog-info").contains(
+      "Are you sure to cancel the vaccine creation"
+    );
+    cy.dataCy("close-dialog").click();
+    cy.dataCy("dialog-info").should("not.exist");
+  });
+
+  it("should cancel the vaccine creation", () => {
+    cy.dataCy("cancel-form").click();
+    cy.dataCy("approve-dialog").click();
+    cy.dataCy("dialog-info").should("not.exist");
+    cy.dataCy("activity-title").contains("Vaccines");
+  });
+});
diff --git a/cypress/integrations/admin_activities/vaccines_activities/edit_vaccine_activity.cy.ts b/cypress/integrations/admin_activities/vaccines_activities/edit_vaccine_activity.cy.ts
new file mode 100644
index 000000000..2d3a3d611
--- /dev/null
+++ b/cypress/integrations/admin_activities/vaccines_activities/edit_vaccine_activity.cy.ts
@@ -0,0 +1,51 @@
+/// <reference types="cypress" />
+
+const VACCINE_START_PATH = "/admin/vaccines";
+
+describe("Vaccines Edit Activity specs", () => {
+  it("should render the ui", () => {
+    cy.authenticate(VACCINE_START_PATH);
+    cy.dataCy("activity-title").contains("Vaccines");
+  });
+
+  it("should show vaccine edit form", () => {
+    cy.dataCy("table-edit-action").first().click();
+    cy.dataCy("activity-title").contains("Edit Vaccine");
+  });
+
+  it("should fail to edit the vaccine", () => {
+    cy.byId("code").should("be.disabled");
+    cy.byId("vaccineType").clear().blur();
+    cy.dataCy("submit-form").click();
+    cy.dataCy("dialog-info").should("not.exist");
+  });
+
+  it("should successfully save vaccine changes", () => {
+    cy.byId("vaccineType").click();
+    cy.get('.MuiAutocomplete-popper li[data-option-index="0"]').click();
+    cy.dataCy("submit-form").click();
+    cy.dataCy("dialog-info").contains("has been updated successfully!");
+    cy.dataCy("approve-dialog").click();
+  });
+
+  it("should redirect after vaccine update", () => {
+    cy.dataCy("activity-title").contains("Vaccines");
+  });
+
+  it("should cancel the cancellation of the vaccine creation", () => {
+    cy.dataCy("table-edit-action").first().click();
+    cy.dataCy("cancel-form").click();
+    cy.dataCy("dialog-info").contains(
+      "Are you sure to cancel the vaccine update"
+    );
+    cy.dataCy("close-dialog").click();
+    cy.dataCy("dialog-info").should("not.exist");
+  });
+
+  it("should cancel the vaccine update", () => {
+    cy.dataCy("cancel-form").click();
+    cy.dataCy("approve-dialog").click();
+    cy.dataCy("dialog-info").should("not.exist");
+    cy.dataCy("activity-title").contains("Vaccines");
+  });
+});
diff --git a/cypress/integrations/admin_activities/vaccines_activities/manage_vaccines_activity.cy.ts b/cypress/integrations/admin_activities/vaccines_activities/manage_vaccines_activity.cy.ts
new file mode 100644
index 000000000..41b44c343
--- /dev/null
+++ b/cypress/integrations/admin_activities/vaccines_activities/manage_vaccines_activity.cy.ts
@@ -0,0 +1,19 @@
+/// <reference types="cypress" />
+
+const VACCINES_START_PATH = "/admin/vaccines";
+
+describe("Vaccines Activity specs", () => {
+  it("should render the ui", () => {
+    cy.authenticate(VACCINES_START_PATH);
+    cy.dataCy("activity-title").contains("Vaccines");
+  });
+
+  it("should present the table with eight rows", () => {
+    cy.dataCy("vaccines-table")
+      .find("table")
+      .then(($table) => {
+        const rows = $table.find("tbody tr");
+        expect(rows.length).equal(8);
+      });
+  });
+});
diff --git a/src/components/accessories/admin/vaccines/Vaccines.tsx b/src/components/accessories/admin/vaccines/Vaccines.tsx
index 3ef7d570b..8af9e1c66 100644
--- a/src/components/accessories/admin/vaccines/Vaccines.tsx
+++ b/src/components/accessories/admin/vaccines/Vaccines.tsx
@@ -39,21 +39,24 @@ export const Vaccines = () => {
   };
 
   return (
-    <VaccinesTable
-      onEdit={handleEdit}
-      onDelete={handleDelete}
-      headerActions={
-        <Button
-          onClick={() => {
-            navigate(PATHS.admin_vaccines_new);
-          }}
-          type="button"
-          variant="contained"
-          color="primary"
-        >
-          {t("vaccine.addVaccine")}
-        </Button>
-      }
-    />
+    <div data-cy="vaccines-table">
+      <VaccinesTable
+        onEdit={handleEdit}
+        onDelete={handleDelete}
+        headerActions={
+          <Button
+            onClick={() => {
+              navigate(PATHS.admin_vaccines_new);
+            }}
+            type="button"
+            variant="contained"
+            color="primary"
+            dataCy="add-new-vaccine"
+          >
+            {t("vaccine.addVaccine")}
+          </Button>
+        }
+      />
+    </div>
   );
 };
diff --git a/src/components/accessories/admin/vaccines/vaccineForm/VaccineForm.tsx b/src/components/accessories/admin/vaccines/vaccineForm/VaccineForm.tsx
index d16f45354..c427a231f 100644
--- a/src/components/accessories/admin/vaccines/vaccineForm/VaccineForm.tsx
+++ b/src/components/accessories/admin/vaccines/vaccineForm/VaccineForm.tsx
@@ -186,7 +186,12 @@ const VaccineForm: FC<IVaccineFormProps> = ({
 
         <div className="vaccineForm__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>
@@ -194,6 +199,7 @@ const VaccineForm: FC<IVaccineFormProps> = ({
             <Button
               type="reset"
               variant="text"
+              dataCy="cancel-form"
               disabled={isLoading}
               onClick={() => setOpenResetConfirmation(true)}
             >