@openmrs/esm-form-builder-app 1.0.1-pre.140 → 1.0.1-pre.143

package/README.md

@@ -2,6 +2,10 @@
 
 OpenMRS esm form builder provides an interactive interface that allows OpenMRS to build schemas effortlessly including all features of Ampath Form Builder. Users can create schemas using the interactive form builder or by writing JSON in the Schema editor.
 
+## Form Builder User Guide
+See the thorough User Guide for the Form Builder here: https://ampath-forms.vercel.app/docs/quickstart
+Prerequisites & dependencies are covered here: https://ampath-forms.vercel.app/docs/developer-guide/run-form-engine-in-openmrs3#prerequisites 
+
 ## Running this code
 
 ```sh

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-form-builder-app",
-  "version": "1.0.1-pre.140",
+  "version": "1.0.1-pre.143",
   "license": "MPL-2.0",
   "description": "OpenMRS ESM Form Builder App",
   "browser": "dist/openmrs-esm-form-builder-app.js",

package/src/components/dashboard/dashboard.test.tsx

@@ -0,0 +1,208 @@
+import React from "react";
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { navigate, openmrsFetch } from "@openmrs/esm-framework";
+import { renderWithSwr, waitForLoadingToFinish } from "../../test-helpers";
+import Dashboard from "./dashboard.component";
+
+const mockedOpenmrsFetch = openmrsFetch as jest.Mock;
+
+const formsResponse = [
+  {
+    uuid: "2ddde996-b1c3-37f1-a53e-378dd1a4f6b5",
+    name: "Test Form 1",
+    encounterType: {
+      uuid: "dd528487-82a5-4082-9c72-ed246bd49591",
+      name: "Consultation",
+    },
+    version: "1",
+    published: true,
+    retired: false,
+    resources: [
+      {
+        uuid: "ea27fd4f-7a4d-4869-8855-5b890c8fed56",
+        name: "JSON schema",
+        dataType: "AmpathJsonSchema",
+        valueReference: "511efba8-f08f-4544-a6da-6a6fa2497b9e",
+      },
+    ],
+  },
+];
+
+describe("Dashboard", () => {
+  it("renders an empty state view if no forms are available", async () => {
+    mockedOpenmrsFetch.mockReturnValueOnce({ data: { results: [] } });
+
+    renderDashboard();
+
+    await waitForLoadingToFinish();
+
+    expect(
+      screen.getByRole("heading", { name: /form builder/i })
+    ).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: /forms/i })).toBeInTheDocument();
+    expect(screen.getByTitle(/empty data illustration/i)).toBeInTheDocument();
+    expect(
+      screen.getByText(/there are no forms to display/i)
+    ).toBeInTheDocument();
+    expect(screen.getByText(/create a new form/i)).toBeInTheDocument();
+  });
+
+  it("renders a list of forms fetched from the server", async () => {
+    mockedOpenmrsFetch.mockReturnValueOnce({
+      data: {
+        results: formsResponse,
+      },
+    });
+
+    renderDashboard();
+
+    await waitForLoadingToFinish();
+
+    expect(
+      screen.getByRole("heading", { name: /form builder/i })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /filter by publish status/i })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /create a new form/i })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /edit schema/i })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("button", { name: /download schema/i })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole("search", { name: /filter table/i })
+    ).toBeInTheDocument();
+    expect(screen.getByRole("table")).toBeInTheDocument();
+    expect(screen.getByText(/Test Form 1/i)).toBeInTheDocument();
+  });
+
+  it("searching for a form by name filters the list of forms", async () => {
+    const user = userEvent.setup();
+
+    mockedOpenmrsFetch.mockReturnValueOnce({
+      data: {
+        results: formsResponse,
+      },
+    });
+
+    renderDashboard();
+
+    await waitForLoadingToFinish();
+
+    expect(screen.getByText(/Test Form 1/i)).toBeInTheDocument();
+
+    const searchbox = screen.getByRole("searchbox");
+
+    await user.type(searchbox, "COVID");
+
+    expect(screen.queryByText(/Test Form 1/i)).not.toBeInTheDocument();
+    expect(
+      screen.getByText(/no matching forms to display/i)
+    ).toBeInTheDocument();
+  });
+
+  it('filters the list of forms by "published" status', async () => {
+    const user = userEvent.setup();
+
+    mockedOpenmrsFetch.mockReturnValueOnce({
+      data: {
+        results: formsResponse,
+      },
+    });
+
+    renderDashboard();
+
+    await waitForLoadingToFinish();
+
+    const publishStatusFilter = screen.getByRole("button", {
+      name: /filter by publish status/i,
+    });
+
+    await user.click(publishStatusFilter);
+    await user.click(screen.getByRole("option", { name: /unpublished/i }));
+
+    expect(screen.queryByText(/Test Form 1/i)).not.toBeInTheDocument();
+    expect(
+      screen.getByText(/no matching forms to display/i)
+    ).toBeInTheDocument();
+  });
+
+  it('clicking on "create a new form" button navigates to the "create form" page', async () => {
+    const user = userEvent.setup();
+
+    mockedOpenmrsFetch.mockReturnValueOnce({
+      data: {
+        results: formsResponse,
+      },
+    });
+
+    renderDashboard();
+
+    await waitForLoadingToFinish();
+
+    const createFormButton = screen.getByRole("button", {
+      name: /create a new form/i,
+    });
+
+    await user.click(createFormButton);
+
+    expect(navigate).toHaveBeenCalledWith({
+      to: expect.stringMatching(/form\-builder\/new/),
+    });
+  });
+
+  it('clicking on "edit schema" button navigates to the "edit schema" page', async () => {
+    const user = userEvent.setup();
+
+    mockedOpenmrsFetch.mockReturnValueOnce({
+      data: {
+        results: formsResponse,
+      },
+    });
+
+    renderDashboard();
+
+    await waitForLoadingToFinish();
+
+    const editSchemaButton = screen.getByRole("button", {
+      name: /edit schema/i,
+    });
+
+    await user.click(editSchemaButton);
+
+    expect(navigate).toHaveBeenCalledWith({
+      to: expect.stringMatching(/form\-builder\/edit/),
+    });
+  });
+
+  it('clicking on "download schema" button downloads the schema', async () => {
+    const user = userEvent.setup();
+
+    mockedOpenmrsFetch.mockReturnValueOnce({
+      data: {
+        results: formsResponse,
+      },
+    });
+
+    renderDashboard();
+
+    await waitForLoadingToFinish();
+
+    const downloadSchemaButton = screen.getByRole("button", {
+      name: /download schema/i,
+    });
+
+    await user.click(downloadSchemaButton);
+
+    expect(window.URL.createObjectURL).toHaveBeenCalled();
+  });
+});
+
+function renderDashboard() {
+  renderWithSwr(<Dashboard />);
+}

package/src/setup-tests.ts

@@ -1 +1,11 @@
 import "@testing-library/jest-dom/extend-expect";
+
+declare global {
+  interface Window {
+    URL: {
+      createObjectURL: (blob: Blob) => string;
+    };
+  }
+}
+
+window.URL.createObjectURL = jest.fn();

package/src/test-helpers.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { SWRConfig } from "swr";
+import {
+  render,
+  screen,
+  waitForElementToBeRemoved,
+} from "@testing-library/react";
+
+// This component wraps whatever component is passed to it with an SWRConfig context which provides a global configuration for all SWR hooks.
+const swrWrapper = ({ children }) => {
+  return (
+    <SWRConfig
+      value={{
+        // Sets the `dedupingInterval` to 0 - we don't need to dedupe requests in our test environment.
+        dedupingInterval: 0,
+        // Returns a new Map object, effectively wrapping our application with an empty cache provider. This is useful for resetting the SWR cache between test cases.
+        provider: () => new Map(),
+      }}
+    >
+      {children}
+    </SWRConfig>
+  );
+};
+
+// Render the provided component within the wrapper we created above
+export const renderWithSwr = (ui, options?) =>
+  render(ui, { wrapper: swrWrapper, ...options });
+
+// Helper function that waits for a loading state to disappear from the screen
+export function waitForLoadingToFinish() {
+  return waitForElementToBeRemoved(
+    () => [...screen.queryAllByRole(/progressbar/i)],
+    {
+      timeout: 4000,
+    }
+  );
+}