[Frontend] Data Entry Form Test (#22)

* Resolving TODO 13325 - fix DE test

* remove console statement

Co-authored-by: Mahmoud <mahmoud@Mahmouds-MBP.cable.rcn.com>

publisher/src/components/Reports/DataEntryForm.test.tsx

@@ -15,7 +15,7 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 // =============================================================================
 
-import { render, screen, waitFor } from "@testing-library/react";
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { runInAction } from "mobx";
 import React from "react";
 import { MemoryRouter, Route, Routes } from "react-router-dom";
@@ -109,10 +109,10 @@ describe("test data entry form", () => {
                 display_name:
                   "Does this include programmatic or medical staff?",
                 reporting_note: null,
-                required: false,
+                required: true,
                 type: "MULTIPLE_CHOICE",
                 multiple_choice_options: ["YES", "NO"],
-                value: null,
+                value: "YES",
               },
             ],
             disaggregations: [
@@ -171,58 +171,57 @@ describe("test data entry form", () => {
   });
 });
 
-// TODO(#13325) JSDOM does not recognize `.animate` as a function. Will need to refactor toast or this test.
-
-// test("expect positive number value to not add field error (formErrors should be an empty object)", async () => {
-//   render(
-//     <StoreProvider>
-//       <MemoryRouter initialEntries={["/reports/0"]}>
-//         <Routes>
-//           <Route path="/reports/:id" element={<ReportDataEntry />} />
-//         </Routes>
-//       </MemoryRouter>
-//     </StoreProvider>
-//   );
-
-//   const labels = await screen.findAllByLabelText("Total Staff");
-//   fireEvent.change(labels[0], { target: { value: "100" } });
-//   expect(
-//     rootStore.formStore.metricsValues[0].PROSECUTION_STAFF.error
-//   ).toBeUndefined();
-// });
-
-// test("expect negative number value to add field error (formErrors should contain an error property for the field)", async () => {
-//   render(
-//     <StoreProvider>
-//       <MemoryRouter initialEntries={["/reports/0"]}>
-//         <Routes>
-//           <Route path="/reports/:id" element={<ReportDataEntry />} />
-//         </Routes>
-//       </MemoryRouter>
-//     </StoreProvider>
-//   );
-
-//   const labels = await screen.findAllByLabelText("Total Staff");
-//   fireEvent.change(labels[0], { target: { value: "-100" } });
-//   expect(rootStore.formStore.metricsValues[0].PROSECUTION_STAFF.error).toBe(
-//     "Please enter a valid number."
-//   );
-// });
-
-// test("expect empty value in required field to add field error (formErrors should contain an error property for the field)", async () => {
-//   render(
-//     <StoreProvider>
-//       <MemoryRouter initialEntries={["/reports/0"]}>
-//         <Routes>
-//           <Route path="/reports/:id" element={<ReportDataEntry />} />
-//         </Routes>
-//       </MemoryRouter>
-//     </StoreProvider>
-//   );
-
-//   const labels = await screen.findAllByLabelText("Total Staff");
-//   fireEvent.change(labels[0], { target: { value: "" } });
-//   expect(rootStore.formStore.metricsValues[0].PROSECUTION_STAFF.error).toBe(
-//     "This is a required field."
-//   );
-// });
+test("expect positive number value to not add field error (formErrors should be an empty object)", async () => {
+  render(
+    <StoreProvider>
+      <MemoryRouter initialEntries={["/reports/0"]}>
+        <Routes>
+          <Route path="/reports/:id" element={<ReportDataEntry />} />
+        </Routes>
+      </MemoryRouter>
+    </StoreProvider>
+  );
+
+  const labels = await screen.findAllByLabelText("Total Staff");
+  fireEvent.change(labels[0], { target: { value: "100" } });
+  expect(
+    rootStore.formStore.metricsValues[0].PROSECUTION_STAFF.error
+  ).toBeUndefined();
+});
+
+test("expect negative number value to add field error (formErrors should contain an error property for the field)", async () => {
+  render(
+    <StoreProvider>
+      <MemoryRouter initialEntries={["/reports/0"]}>
+        <Routes>
+          <Route path="/reports/:id" element={<ReportDataEntry />} />
+        </Routes>
+      </MemoryRouter>
+    </StoreProvider>
+  );
+
+  const labels = await screen.findAllByLabelText("Total Staff");
+  fireEvent.change(labels[0], { target: { value: "-100" } });
+  expect(
+    rootStore.formStore.metricsValues[0].PROSECUTION_STAFF.error?.message
+  ).toBe("Please enter a valid number.");
+});
+
+test("expect empty value in metric field to add field error when there is a value in other fields such as contexts", async () => {
+  render(
+    <StoreProvider>
+      <MemoryRouter initialEntries={["/reports/0"]}>
+        <Routes>
+          <Route path="/reports/:id" element={<ReportDataEntry />} />
+        </Routes>
+      </MemoryRouter>
+    </StoreProvider>
+  );
+
+  const labels = await screen.findAllByLabelText("Total Staff");
+  fireEvent.change(labels[0], { target: { value: "" } });
+
+  expect(
+    rootStore.formStore.metricsValues[0].PROSECUTION_STAFF.error?.message
+  ).toBe("You are also required to enter a value for this field.");
+});