test: tests for modal behaviour

bcgov · Jan 3, 2025 · aae7ffd · aae7ffd
1 parent bf4f3c5
commit aae7ffd
Show file tree

Hide file tree

Showing 4 changed files with 109 additions and 10 deletions.
diff --git a/bciers/apps/reporting/src/app/components/operations/OperationReview.tsx b/bciers/apps/reporting/src/app/components/operations/OperationReview.tsx
@@ -212,8 +212,10 @@ export default function OperationReview({
         onConfirm={confirmReportTypeChange}
         confirmText="Change report type"
       >
-        Are you sure you want to change your report type? If you proceed, all of
-        the form data you have entered will be lost upon saving.
+        <p>
+          Are you sure you want to change your report type? If you proceed, all
+          of the form data you have entered will be lost upon saving.
+        </p>
       </SimpleModal>
       <MultiStepFormWithTaskList
         initialStep={0}

diff --git a/bciers/apps/reporting/src/app/components/taskList/1_operationInformation.ts b/bciers/apps/reporting/src/app/components/taskList/1_operationInformation.ts
@@ -26,13 +26,13 @@ export const getOperationInformationTaskList: (
         {
           type: "Page",
           title: "Review Operation information",
-          link: `/reporting/reports/${versionId}/review-operator-data`,
+          link: `/reports/${versionId}/review-operator-data`,
           isActive: activeIndex === ActivePage.ReviewOperatorInfo,
         },
         {
           type: "Page",
           title: "Person responsible",
-          link: `/reporting/reports/${versionId}/person-responsible`,
+          link: `/reports/${versionId}/person-responsible`,
           isActive: activeIndex === ActivePage.PersonResponsible,
         },
         {

diff --git a/bciers/apps/reporting/src/tests/components/operations/OperationReview.test.tsx b/bciers/apps/reporting/src/tests/components/operations/OperationReview.test.tsx
@@ -45,7 +45,7 @@ describe("OperationReview Component", () => {
         allRegulatedProducts={[{ id: 1, name: "Product 1" }]}
         registrationPurpose="Test Purpose"
         facilityReport={{
-          facility_id: 2344,
+          facility_id: "fake-guid",
           operation_type: "Single Facility Operation",
         }}
       />,
@@ -90,7 +90,7 @@ describe("OperationReview Component", () => {
           allRegulatedProducts={[{ id: 1, name: "Product 1" }]}
           registrationPurpose="Test Purpose"
           facilityReport={{
-            facility_id: 2344,
+            facility_id: "fake-guid",
             operation_type: "Single Facility Operation",
           }}
         />,
@@ -134,7 +134,7 @@ describe("OperationReview Component", () => {
         allRegulatedProducts={[{ id: 1, name: "Product 1" }]}
         registrationPurpose="Test Purpose"
         facilityReport={{
-          facility_id: 2344,
+          facility_id: "fake-guid",
           operation_type: "Single Facility Operation",
         }}
       />,
@@ -148,4 +148,103 @@ describe("OperationReview Component", () => {
       ).toBeInTheDocument();
     });
   });
+
+  it("shows modal when switching report type and switches report type when accepting", async () => {
+    render(
+      <OperationReview
+        formData={{
+          activities: [1],
+          regulated_products: [1],
+          operation_report_type: "Annual Report",
+        }}
+        version_id={1}
+        reportType={{ report_type: "Annual Report" }}
+        reportingYear={{
+          reporting_year: 2024,
+          report_due_date: "2024-12-31",
+          reporting_window_end: "2024-12-31",
+        }}
+        allActivities={[{ id: 1, name: "Activity 1" }]}
+        allRegulatedProducts={[{ id: 1, name: "Product 1" }]}
+        registrationPurpose="Test Purpose"
+        facilityReport={{
+          facility_id: "fake-guid",
+          operation_type: "Single Facility Operation",
+        }}
+      />,
+    );
+
+    const reportTypeSelect = screen.getByLabelText(
+      /Select what type of report you are filling/i,
+    );
+
+    await waitFor(() => {
+      fireEvent.change(reportTypeSelect, {
+        target: { value: "Simple Report" },
+      });
+    });
+
+    expect(
+      screen.getByText(/Are you sure you want to change your report type/i),
+    ).toBeVisible();
+    expect(screen.getByText(/Change Report Type/i)).toBeVisible();
+
+    await waitFor(() => {
+      fireEvent.click(
+        screen.getByRole("button", { name: "Change report type" }),
+      );
+    });
+
+    expect(
+      screen.queryByText(/Are you sure you want to change your report type/i),
+    ).not.toBeVisible();
+    expect(screen.getByText(/Simple Report/i)).toBeVisible();
+    expect(screen.queryByText(/Annual Report/i)).not.toBeInTheDocument();
+  });
+
+  it("shows modal when switching report type and reverts report type when clicking cancel", async () => {
+    render(
+      <OperationReview
+        formData={{
+          activities: [1],
+          regulated_products: [1],
+          operation_report_type: "Annual Report",
+        }}
+        version_id={1}
+        reportType={{ report_type: "Annual Report" }}
+        reportingYear={{
+          reporting_year: 2024,
+          report_due_date: "2024-12-31",
+          reporting_window_end: "2024-12-31",
+        }}
+        allActivities={[{ id: 1, name: "Activity 1" }]}
+        allRegulatedProducts={[{ id: 1, name: "Product 1" }]}
+        registrationPurpose="Test Purpose"
+        facilityReport={{
+          facility_id: "fake-guid",
+          operation_type: "Single Facility Operation",
+        }}
+      />,
+    );
+
+    const reportTypeSelect = screen.getByLabelText(
+      /Select what type of report you are filling/i,
+    );
+
+    await waitFor(() => {
+      fireEvent.change(reportTypeSelect, {
+        target: { value: "Simple Report" },
+      });
+    });
+
+    await waitFor(() => {
+      fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
+    });
+
+    expect(
+      screen.queryByText(/Are you sure you want to change your report type/i),
+    ).not.toBeVisible();
+    expect(screen.queryByText(/Simple Report/i)).not.toBeInTheDocument();
+    expect(screen.getByText(/Annual Report/i)).toBeVisible();
+  });
 });
diff --git a/bciers/libs/components/src/modal/SimpleModal.tsx b/bciers/libs/components/src/modal/SimpleModal.tsx
@@ -21,9 +21,7 @@ const SimpleModal: React.FC<Props> = ({
 }) => {
   return (
     <Modal open={open} title={title}>
-      <DialogContentText>
-        <p>{children}</p>
-      </DialogContentText>
+      <DialogContentText>{children}</DialogContentText>
       <DialogActions>
         <Button variant="outlined" color="primary" onClick={onCancel}>
           {cancelText}