Merge pull request #77 from gosh-dre/feature/parse-bundle-and-add-err…

…ors-to-modal Feature/parse bundle and add errors to modal
gosh-dre · Nov 9, 2022 · 132decd · 132decd
2 parents ff3a0d1 + 8adbca3
commit 132decd
Show file tree

Hide file tree

Showing 12 changed files with 267 additions and 138 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -2,9 +2,9 @@ name: Tests
 
 on:
   push:
-    branches: [ main ]
+    branches: [main]
   pull_request:
-    branches: [ main ]
+    branches: [main]
 
 jobs:
   test_fsh:
@@ -16,7 +16,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 17
-          cache: 'npm'
+          cache: "npm"
       - name: Install sushi
         run: npm install -g fsh-sushi
       - name: Run sushi
@@ -27,20 +27,20 @@ jobs:
     steps:
       - name: Checkout Repo
         uses: actions/checkout@v3
+      - name: Run fake FHIR in docker
+        run: docker-compose -f docker-compose.dev.yml up -d
       - name: Use Node and enable cache
         uses: actions/setup-node@v3
         with:
           node-version: 17
-          cache: 'npm'
+          cache: "npm"
       - name: Install dependencies
         run: |
           npm ci
       - name: Run linting
         run: npm run lint
       - name: Setup .env file
         run: cp env/dev.env .env
-      - name: Run fake FHIR in docker
-        run: docker-compose -f docker-compose.dev.yml up -d
       - name: npm build
         run: npm run build --if-present
       - name: npm test

diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml
@@ -1,29 +1,12 @@
 version: "3.7"
 services:
   fhir:
-    image: "hapiproject/hapi:v5.6.0"
+    image: "hapiproject/hapi:v6.1.0"
     ports:
       - "8090:8080"
     environment:
-      spring.datasource.url: "jdbc:postgresql://fhir-db:5432/hapi_r4"
-      spring.datasource.username: admin
-      spring.datasource.password: admin
-      spring.datasource.driverClassName: org.postgresql.Driver
-      hapi.fhir.subscription.resthook_enabled: "true"
-      hapi.fhir.subscription.websocket_enabled: "true"
       hapi.fhir.client_id_strategy: ANY
       hapi.fhir.cors.allowed_origin: "*"
       hapi.fhir.fhir_version: R4
       hapi.fhir.allow_cascading_deletes: "true"
       hapi.fhir.reuse_cached_search_results_millis: -1
-  fhir-db:
-    image: postgres:latest
-    volumes:
-      - fhir-db-data:/var/lib/postgresql/data
-    environment:
-      POSTGRES_PASSWORD: admin
-      POSTGRES_USER: admin
-      POSTGRES_DB: hapi_r4
-
-volumes:
-  fhir-db-data:
diff --git a/package.json b/package.json
@@ -28,7 +28,7 @@
     "build": "react-scripts build",
     "predeploy": "react-scripts build && cp build/index.html build/404.html",
     "deploy": "COMMIT_MSG=$(git log -1 --pretty=%B | sed  's/ /_/g'); gh-pages -d build --message ${COMMIT_MSG}",
-    "test": "react-scripts test",
+    "test": "react-scripts test --verbose --runInBand",
     "eject": "react-scripts eject",
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },

diff --git a/src/code_systems/types.ts b/src/code_systems/types.ts
@@ -18,10 +18,18 @@ export type BundleResponse = {
           ];
         };
       };
+      count?: number;
     },
   ];
 };
 
+export type ErrorDetails = {
+  errorCode: string;
+  resourceType: string;
+  diagnostics: string;
+};
+export type RetrievableResource = "Practitioner" | "Patient" | "Observation";
+
 /**
  * FHIR reference with reference and type required.
  */

diff --git a/src/components/UI/ModalWrapper.tsx b/src/components/UI/ModalWrapper.tsx
@@ -4,14 +4,14 @@ import Modal from "./Modal";
 import classes from "./Modal.module.css";
 
 export interface ModalState {
-  message: string | null | undefined;
+  message: string | JSX.Element | null | undefined;
   isError: boolean | null | undefined;
 }
 
 export interface Props {
   onClear: () => void;
   isError: boolean | null | undefined;
-  modalMessage: string | null | undefined;
+  modalMessage: string | JSX.Element | null | undefined;
 }
 
 const ModalWrapper: FC<Props> = (props: Props) => {
@@ -31,7 +31,7 @@ const ModalWrapper: FC<Props> = (props: Props) => {
         </button>
       }
     >
-      <p>{modalMessage}</p>
+      <div>{modalMessage}</div>
     </Modal>
   );
 };

diff --git a/src/components/reports/ReportForm.module.css b/src/components/reports/ReportForm.module.css
@@ -43,3 +43,8 @@
   text-align: center;
   text-decoration: underline;
 }
+
+.errors-table {
+  font: inherit;
+  font-size: 86%;
+}
diff --git a/src/components/reports/ReportForm.test.tsx b/src/components/reports/ReportForm.test.tsx
@@ -1,9 +1,10 @@
-import ReportForm from "./ReportForm";
-import { render, screen, within } from "@testing-library/react";
+import { render, screen, waitFor, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { Patient } from "@smile-cdr/fhirts/dist/FHIR-R4/classes/patient";
-import { noValues } from "./FormDefaults";
 import { act } from "react-dom/test-utils";
+import { createPractitioner, deleteFhirData, getResources, TestReportForm } from "../../fhir/testUtilities";
+import { Practitioner } from "@smile-cdr/fhirts/dist/FHIR-R4/classes/practitioner";
+import { createIdentifier } from "../../fhir/resource_helpers";
 
 const clearAndType = (element: Element, value: string) => {
   userEvent.clear(element);
@@ -16,7 +17,7 @@ type DropDown = {
 };
 
 const setDummyValues = (withDates: boolean, dropDowns?: DropDown[]) => {
-  const dummyValue = "Always the same";
+  const dummyValue = "Always_the_same";
   const form = screen.getByRole("form");
   const textInputs = within(form).getAllByLabelText(
     /^((?!resultOutput|date|address|gender|specimen type|search|gene symbol|follow up).)*$/i,
@@ -137,14 +138,46 @@ const setReportFields = async () => {
 jest.setTimeout(20000);
 
 describe("Report form", () => {
+  beforeEach(() => {
+    return deleteFhirData();
+  });
+
+  test("Error modal exists", async () => {
+    // Arrange
+    const practitioner = new Practitioner();
+    practitioner.resourceType = "Practitioner";
+    const identifier = createIdentifier("always_the_same_report");
+    practitioner.identifier = [identifier];
+
+    await createPractitioner(practitioner);
+    await createPractitioner(practitioner);
+
+    // Act
+    render(<TestReportForm />);
+    await setLabAndPatient();
+    await setSample();
+    await setVariantFields();
+    await setReportFields();
+
+    await act(async () => {
+      userEvent.click(screen.getByText(/submit/i));
+    });
+
+    // Assert
+    await waitFor(() => {
+      expect(screen.getByText(/error/i, { selector: "h2" })).toBeInTheDocument();
+    });
+    // const errorModal = await screen.findByText(/error/i, { selector: "h2" });
+    // expect(errorModal).toBeInTheDocument();
+  });
   /**
    * Given the report form
    * When all data filled in
    * Then the rendered result should be rendered in an alert box
    */
   test("Report with variant", async () => {
     // Arrange
-    render(<ReportForm initialValues={noValues} />);
+    render(<TestReportForm />);
 
     // Act
     await setLabAndPatient();
@@ -167,7 +200,7 @@ describe("Report form", () => {
    */
   test("Report without variant", async () => {
     // Arrange
-    render(<ReportForm initialValues={noValues} />);
+    render(<TestReportForm />);
 
     // Act
     await setLabAndPatient();

diff --git a/src/components/reports/ReportForm.tsx b/src/components/reports/ReportForm.tsx
@@ -6,7 +6,7 @@ import { FhirContext } from "../fhir/FhirContext";
 import Card from "../UI/Card";
 import classes from "./ReportForm.module.css";
 import { addressSchema, patientSchema, reportDetailSchema, sampleSchema, variantsSchema } from "./formDataValidation";
-import { bundleRequest } from "../../fhir/api";
+import { bundleRequest, getErrors } from "../../fhir/api";
 import Patient from "./formSteps/Patient";
 import Sample from "./formSteps/Sample";
 import Variant from "./formSteps/Variant";
@@ -63,10 +63,38 @@ const ReportForm: FC<Props> = (props: Props) => {
     const bundle = bundleRequest(values, reportedGenes);
 
     setResult(JSON.stringify(JSON.parse(bundle.body), null, 2));
+    const resourceList = JSON.parse(bundle.body).entry.map((entry: any) => entry.resource.resourceType);
 
     ctx.client
       ?.request(bundle)
-      .then((response) => console.debug("Bundle submitted", bundle, response))
+      .then((response) => {
+        const errors = getErrors(response, resourceList);
+        if (errors.length > 0) {
+          const errorsTable = (
+            <>
+              <table className={classes["errors-table"]}>
+                <thead>
+                  <tr>
+                    <th>Code</th>
+                    <th>Resource</th>
+                    <th>Information</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {errors.map((error, i) => (
+                    <tr key={i}>
+                      <td>{error.errorCode}</td>
+                      <td>{error.resourceType}</td>
+                      <td>{error.diagnostics}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </>
+          );
+          setModal({ message: errorsTable, isError: true });
+        }
+      })
       .catch((error) => {
         console.error(error);
         setModal({