@openmrs/esm-form-builder-app 2.0.2-pre.574 → 2.0.2-pre.586

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

@@ -1,43 +1,43 @@
-import React from "react";
-import { screen, waitFor } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { navigate, openmrsFetch, usePagination } from "@openmrs/esm-framework";
-import { renderWithSwr, waitForLoadingToFinish } from "../../test-helpers";
-import { deleteForm } from "../../forms.resource";
-import Dashboard from "./dashboard.component";
+import React from 'react';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { navigate, openmrsFetch, usePagination } from '@openmrs/esm-framework';
+import { renderWithSwr, waitForLoadingToFinish } from '../../test-helpers';
+import { deleteForm } from '../../forms.resource';
+import Dashboard from './dashboard.component';
 
 const mockedOpenmrsFetch = openmrsFetch as jest.Mock;
 const mockedDeleteForm = deleteForm as jest.Mock;
 
-jest.mock("../../forms.resource", () => ({
+jest.mock('../../forms.resource', () => ({
   deleteForm: jest.fn(),
 }));
 const mockUsePagination = usePagination as jest.Mock;
 
 const formsResponse = [
   {
-    uuid: "2ddde996-b1c3-37f1-a53e-378dd1a4f6b5",
-    name: "Test Form 1",
+    uuid: '2ddde996-b1c3-37f1-a53e-378dd1a4f6b5',
+    name: 'Test Form 1',
     encounterType: {
-      uuid: "dd528487-82a5-4082-9c72-ed246bd49591",
-      name: "Consultation",
+      uuid: 'dd528487-82a5-4082-9c72-ed246bd49591',
+      name: 'Consultation',
     },
-    version: "1",
+    version: '1',
     published: true,
     retired: false,
     resources: [
       {
-        dataType: "AmpathJsonSchema",
-        name: "JSON schema",
-        uuid: "26e45c1a-a46d-4f69-af0a-c29baaed5b3e",
-        valueReference: "9c35c3d7-1366-45ef-b4d7-ae635b22b6a7",
+        dataType: 'AmpathJsonSchema',
+        name: 'JSON schema',
+        uuid: '26e45c1a-a46d-4f69-af0a-c29baaed5b3e',
+        valueReference: '9c35c3d7-1366-45ef-b4d7-ae635b22b6a7',
       },
     ],
   },
 ];
 
-jest.mock("@openmrs/esm-framework", () => {
-  const originalModule = jest.requireActual("@openmrs/esm-framework");
+jest.mock('@openmrs/esm-framework', () => {
+  const originalModule = jest.requireActual('@openmrs/esm-framework');
 
   return {
     ...originalModule,
@@ -50,26 +50,22 @@ jest.mock("@openmrs/esm-framework", () => {
   };
 });
 
-describe("Dashboard", () => {
-  it("renders an empty state view if no forms are available", async () => {
+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.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(/there are no forms to display/i)).toBeInTheDocument();
     expect(screen.getByText(/create a new form/i)).toBeInTheDocument();
   });
 
-  it("searches for a form by name and filters the list of forms", async () => {
+  it('searches for a form by name and filters the list of forms', async () => {
     const user = userEvent.setup();
 
     mockedOpenmrsFetch.mockReturnValueOnce({
@@ -82,11 +78,11 @@ describe("Dashboard", () => {
 
     await waitForLoadingToFinish();
 
-    const searchbox = screen.getByRole("searchbox") as HTMLInputElement;
+    const searchbox = screen.getByRole('searchbox') as HTMLInputElement;
 
-    await waitFor(() => user.type(searchbox, "COVID"));
+    await waitFor(() => user.type(searchbox, 'COVID'));
 
-    expect(searchbox.value).toBe("COVID");
+    expect(searchbox.value).toBe('COVID');
 
     mockUsePagination.mockImplementation(() => ({
       currentPage: 1,
@@ -94,12 +90,8 @@ describe("Dashboard", () => {
       results: formsResponse.filter((form) => form.name === searchbox.value),
     }));
 
-    await waitFor(() =>
-      expect(screen.queryByText(/Test Form 1/i)).not.toBeInTheDocument()
-    );
-    expect(
-      screen.getByText(/no matching forms to display/i)
-    ).toBeInTheDocument();
+    await waitFor(() => 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 () => {
@@ -115,14 +107,12 @@ describe("Dashboard", () => {
 
     await waitForLoadingToFinish();
 
-    const publishStatusFilter = screen.getByRole("combobox", {
+    const publishStatusFilter = screen.getByRole('combobox', {
       name: /filter by publish status/i,
     });
 
     await waitFor(() => user.click(publishStatusFilter));
-    await waitFor(() =>
-      user.click(screen.getByRole("option", { name: /unpublished/i }))
-    );
+    await waitFor(() => user.click(screen.getByRole('option', { name: /unpublished/i })));
 
     mockUsePagination.mockImplementation(() => ({
       currentPage: 1,
@@ -131,12 +121,10 @@ describe("Dashboard", () => {
     }));
 
     expect(screen.queryByText(/Test Form 1/i)).not.toBeInTheDocument();
-    expect(
-      screen.getByText(/no matching forms to display/i)
-    ).toBeInTheDocument();
+    expect(screen.getByText(/no matching forms to display/i)).toBeInTheDocument();
   });
 
-  it("renders a list of forms fetched from the server", async () => {
+  it('renders a list of forms fetched from the server', async () => {
     mockedOpenmrsFetch.mockReturnValueOnce({
       data: {
         results: formsResponse,
@@ -153,25 +141,13 @@ describe("Dashboard", () => {
 
     await waitForLoadingToFinish();
 
-    expect(
-      screen.getByRole("heading", { name: /form builder/i })
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole("combobox", { 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("searchbox", { name: /filter table/i })
-    ).toBeInTheDocument();
-    expect(screen.queryByRole("table")).toBeInTheDocument();
+    expect(screen.getByRole('heading', { name: /form builder/i })).toBeInTheDocument();
+    expect(screen.getByRole('combobox', { 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('searchbox', { name: /filter table/i })).toBeInTheDocument();
+    expect(screen.queryByRole('table')).toBeInTheDocument();
     expect(screen.getByText(/Test Form 1/i)).toBeInTheDocument();
   });
 
@@ -194,7 +170,7 @@ describe("Dashboard", () => {
 
     await waitForLoadingToFinish();
 
-    const createFormButton = screen.getByRole("button", {
+    const createFormButton = screen.getByRole('button', {
       name: /create a new form/i,
     });
 
@@ -224,7 +200,7 @@ describe("Dashboard", () => {
 
     await waitForLoadingToFinish();
 
-    const editSchemaButton = screen.getByRole("button", {
+    const editSchemaButton = screen.getByRole('button', {
       name: /edit schema/i,
     });
 
@@ -253,7 +229,7 @@ describe("Dashboard", () => {
 
     await waitForLoadingToFinish();
 
-    const downloadSchemaButton = screen.getByRole("button", {
+    const downloadSchemaButton = screen.getByRole('button', {
       name: /download schema/i,
     });
 
@@ -282,25 +258,19 @@ describe("Dashboard", () => {
 
     await waitForLoadingToFinish();
 
-    const deleteButton = screen.getByRole("button", { name: /delete schema/i });
+    const deleteButton = screen.getByRole('button', { name: /delete schema/i });
     expect(deleteButton).toBeInTheDocument();
 
     await waitFor(() => user.click(deleteButton));
 
-    const modal = screen.getByRole("presentation");
+    const modal = screen.getByRole('presentation');
     expect(modal).toBeInTheDocument();
     expect(modal).toHaveTextContent(/delete form/i);
-    expect(modal).toHaveTextContent(
-      /are you sure you want to delete this form?/i
-    );
-    expect(screen.getByRole("button", { name: /cancel/i })).toBeInTheDocument();
-    expect(
-      screen.getByRole("button", { name: /danger delete/i })
-    ).toBeInTheDocument();
-
-    await waitFor(() =>
-      user.click(screen.getByRole("button", { name: /danger delete/i }))
-    );
+    expect(modal).toHaveTextContent(/are you sure you want to delete this form?/i);
+    expect(screen.getByRole('button', { name: /cancel/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /danger delete/i })).toBeInTheDocument();
+
+    await waitFor(() => user.click(screen.getByRole('button', { name: /danger delete/i })));
   });
 });
 

package/src/components/empty-state/empty-data-illustration.component.tsx

@@ -1,6 +1,6 @@
-import React from "react";
+import React from 'react';
 
-export const EmptyDataIllustration = ({ width = "64", height = "64" }) => {
+export const EmptyDataIllustration = ({ width = '64', height = '64' }) => {
   return (
     <svg width={width} height={height} viewBox="0 0 64 64">
       <title>Empty data illustration</title>
@@ -18,13 +18,7 @@ export const EmptyDataIllustration = ({ width = "64", height = "64" }) => {
           fill="#C6C6C6"
         />
         <circle fill="#C6C6C6" cx={17.636} cy={2.314} r={1.855} />
-        <circle
-          fill="#FFF"
-          fillRule="nonzero"
-          cx={17.636}
-          cy={2.314}
-          r={1.175}
-        />
+        <circle fill="#FFF" fillRule="nonzero" cx={17.636} cy={2.314} r={1.175} />
         <path
           d="M55.893 53.995H24.544a.79.79 0 01-.788-.789V15.644a.79.79 0 01.788-.788h31.349a.79.79 0 01.788.788v37.562a.79.79 0 01-.788.789z"
           fill="#F4F4F4"
@@ -38,13 +32,7 @@ export const EmptyDataIllustration = ({ width = "64", height = "64" }) => {
           fill="#C6C6C6"
         />
         <circle fill="#C6C6C6" cx={40.218} cy={9.755} r={1.855} />
-        <circle
-          fill="#FFF"
-          fillRule="nonzero"
-          cx={40.218}
-          cy={9.755}
-          r={1.13}
-        />
+        <circle fill="#FFF" fillRule="nonzero" cx={40.218} cy={9.755} r={1.13} />
       </g>
     </svg>
   );

package/src/components/empty-state/empty-state.component.tsx

@@ -1,27 +1,23 @@
-import React from "react";
-import { Layer, Link, Tile } from "@carbon/react";
-import { useTranslation } from "react-i18next";
-import { navigate, useLayoutType } from "@openmrs/esm-framework";
+import React from 'react';
+import { Layer, Link, Tile } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { navigate, useLayoutType } from '@openmrs/esm-framework';
 
-import { EmptyDataIllustration } from "./empty-data-illustration.component";
-import styles from "./empty-state.scss";
+import { EmptyDataIllustration } from './empty-data-illustration.component';
+import styles from './empty-state.scss';
 
 function EmptyState() {
   const { t } = useTranslation();
-  const isTablet = useLayoutType() === "tablet";
+  const isTablet = useLayoutType() === 'tablet';
 
   return (
     <Layer>
       <Tile className={styles.tile}>
-        <div
-          className={isTablet ? styles.tabletHeading : styles.desktopHeading}
-        >
-          <h4>{t("forms", "Forms")}</h4>
+        <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
+          <h4>{t('forms', 'Forms')}</h4>
         </div>
         <EmptyDataIllustration />
-        <p className={styles.content}>
-          {t("noFormsToDisplay", "There are no forms to display.")}
-        </p>
+        <p className={styles.content}>{t('noFormsToDisplay', 'There are no forms to display.')}</p>
         <p className={styles.action}>
           <Link
             onClick={() =>
@@ -30,7 +26,7 @@ function EmptyState() {
               })
             }
           >
-            {t("createNewForm", "Create a new form")}
+            {t('createNewForm', 'Create a new form')}
           </Link>
         </p>
       </Tile>

package/src/components/error-state/error-state.component.tsx

@@ -1,8 +1,8 @@
-import React from "react";
-import { Layer, Tile } from "@carbon/react";
-import { useTranslation } from "react-i18next";
-import { useLayoutType } from "@openmrs/esm-framework";
-import styles from "./error-state.scss";
+import React from 'react';
+import { Layer, Tile } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
+import { useLayoutType } from '@openmrs/esm-framework';
+import styles from './error-state.scss';
 
 interface ErrorStateProps {
   error: Error;
@@ -10,23 +10,21 @@ interface ErrorStateProps {
 
 const ErrorState: React.FC<ErrorStateProps> = ({ error }) => {
   const { t } = useTranslation();
-  const isTablet = useLayoutType() === "tablet";
+  const isTablet = useLayoutType() === 'tablet';
 
   return (
     <Layer>
       <Tile className={styles.tile}>
-        <div
-          className={isTablet ? styles.tabletHeading : styles.desktopHeading}
-        >
-          <h4>{t("forms", "Forms")}</h4>
+        <div className={isTablet ? styles.tabletHeading : styles.desktopHeading}>
+          <h4>{t('forms', 'Forms')}</h4>
         </div>
         <p className={styles.errorMessage}>
-          {t("error", "Error")}: {error?.message}
+          {t('error', 'Error')}: {error?.message}
         </p>
         <p className={styles.errorCopy}>
           {t(
-            "errorCopy",
-            "Sorry, there was a problem displaying this information. You can try to reload this page, or contact the site administrator and quote the error code above."
+            'errorCopy',
+            'Sorry, there was a problem displaying this information. You can try to reload this page, or contact the site administrator and quote the error code above.',
           )}
         </p>
       </Tile>