@openmrs/esm-form-engine-lib 2.1.0-pre.1362

package/src/globals.ts

@@ -0,0 +1 @@
+export const moduleName = '@openmrs/esm-form-engine-lib';

package/src/hooks/useClobData.tsx

@@ -0,0 +1,21 @@
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
+import { type FormSchema, type OpenmrsForm } from '../types';
+import useSWRImmutable from 'swr/immutable';
+
+export function useClobData(form: OpenmrsForm) {
+  const valueReferenceUuid = useMemo(
+    () => form?.resources?.find(({ name }) => name === 'JSON schema').valueReference,
+    [form],
+  );
+  const { data, error } = useSWRImmutable<{ data: FormSchema }, Error>(
+    valueReferenceUuid ? `${restBaseUrl}/clobdata/${valueReferenceUuid}` : null,
+    openmrsFetch,
+  );
+
+  return {
+    clobdata: data?.data,
+    clobdataError: error || null,
+    isLoadingClobData: (!data && !error) || false,
+  };
+}

package/src/hooks/useConcepts.tsx

@@ -0,0 +1,55 @@
+import { useMemo } from 'react';
+import { type FetchResponse, type OpenmrsResource, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWRInfinite from 'swr/infinite';
+
+type ConceptFetchResponse = FetchResponse<{ results: Array<OpenmrsResource> }>;
+
+const conceptRepresentation =
+  'custom:(uuid,display,conceptClass:(uuid,display),answers:(uuid,display),conceptMappings:(conceptReferenceTerm:(conceptSource:(name),code)))';
+
+export function useConcepts(references: Set<string>): {
+  concepts: Array<OpenmrsResource> | undefined;
+  isLoading: boolean;
+  error: Error | undefined;
+} {
+
+  const chunkSize = 100;
+  const totalCount = references.size;
+  const totalPages = Math.ceil(totalCount / chunkSize);
+
+  const getUrl = (index, prevPageData: ConceptFetchResponse) => {
+    if (index >= totalPages) {
+      return null;
+    }
+
+    if (!chunkSize) {
+      return null;
+    }
+
+    const start = index * chunkSize;
+    const end = start + chunkSize;
+    const referenceChunk = Array.from(references).slice(start, end);
+    return `${restBaseUrl}/concept?references=${referenceChunk.join(',')}&v=${conceptRepresentation}`;
+  };
+
+  const { data, error, isLoading } = useSWRInfinite<ConceptFetchResponse, Error>(getUrl, openmrsFetch, {
+    initialSize: totalPages,
+    revalidateIfStale: false,
+    revalidateOnFocus: false,
+    revalidateOnReconnect: false,
+  });
+
+  const results = useMemo(
+    () => ({
+      // data?.[0] check is added for tests, as response is undefined in tests
+      // hence the returned concepts are [undefined], which breaks the form-helper.ts
+      // As it cannot read `uuid` of `undefined`
+      concepts: data && data?.[0] ? [].concat(...data.map((res) => res?.data?.results)) : undefined,
+      error,
+      isLoading,
+    }),
+    [data, error, isLoading],
+  );
+
+  return results;
+}

package/src/hooks/useDatasourceDependentValue.ts

@@ -0,0 +1,16 @@
+import { type FormField } from '../types';
+import { useFormProviderContext } from '../provider/form-provider';
+import { useWatch } from 'react-hook-form';
+
+const useDataSourceDependentValue = (field: FormField) => {
+  const dependentField = field.questionOptions['config']?.referencedField;
+  const {
+    methods: { control },
+  } = useFormProviderContext();
+
+  const dependentValue = useWatch({ control, name: dependentField, exact: true, disabled: !dependentField });
+
+  return dependentValue;
+};
+
+export default useDataSourceDependentValue;

package/src/hooks/useEncounter.tsx

@@ -0,0 +1,32 @@
+import { useEffect, useState } from 'react';
+import { openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import { type FormSchema, type OpenmrsEncounter } from '../types';
+import { encounterRepresentation } from '../constants';
+import { isEmpty } from '../validators/form-validator';
+import isString from 'lodash-es/isString';
+
+export function useEncounter(formJson: FormSchema) {
+  const [encounter, setEncounter] = useState<OpenmrsEncounter>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    if (!isEmpty(formJson.encounter) && isString(formJson.encounter)) {
+      openmrsFetch(`${restBaseUrl}/encounter/${formJson.encounter}?v=${encounterRepresentation}`)
+        .then((response) => {
+          setEncounter(response.data);
+          setIsLoading(false);
+        })
+        .catch((error) => {
+          setError(error);
+        });
+    } else if (!isEmpty(formJson.encounter)) {
+      setEncounter(formJson.encounter as OpenmrsEncounter);
+      setIsLoading(false);
+    } else {
+      setIsLoading(false);
+    }
+  }, [formJson.encounter]);
+
+  return { encounter: encounter, error, isLoading };
+}

package/src/hooks/useEncounterRole.tsx

@@ -0,0 +1,15 @@
+import { type OpenmrsResource, openmrsFetch, restBaseUrl } from '@openmrs/esm-framework';
+import useSWRImmutable from 'swr/immutable';
+
+export function useEncounterRole() {
+  const { data, error, isLoading } = useSWRImmutable<{ data: { results: Array<OpenmrsResource> } }, Error>(
+    `${restBaseUrl}/encounterrole?v=custom:(uuid,display,name)`,
+    openmrsFetch,
+  );
+  const clinicalEncounterRole = data?.data.results.find((encounterRole) => encounterRole.name === 'Clinician');
+
+  if (clinicalEncounterRole) {
+    return { encounterRole: clinicalEncounterRole, error, isLoading };
+  }
+  return { encounterRole: data?.data.results[0], error, isLoading };
+}

package/src/hooks/useEvaluateFormFieldExpressions.ts

@@ -0,0 +1,138 @@
+import { useEffect, useMemo, useState } from 'react';
+import { type FormProcessorContextProps } from '../types';
+import { type FormNode, evaluateExpression } from '../utils/expression-runner';
+import { evalConditionalRequired, evaluateConditionalAnswered, evaluateHide } from '../utils/form-helper';
+import { isTrue } from '../utils/boolean-utils';
+import { isEmpty } from '../validators/form-validator';
+import { type QuestionAnswerOption } from '../types/schema';
+
+export const useEvaluateFormFieldExpressions = (
+  formValues: Record<string, any>,
+  factoryContext: FormProcessorContextProps,
+) => {
+  const { formFields, patient, sessionMode } = factoryContext;
+  const [evaluatedFormJson, setEvaluatedFormJson] = useState(factoryContext.formJson);
+  const evaluatedFields = useMemo(() => {
+    return formFields?.map((field) => {
+      const fieldNode: FormNode = { value: field, type: 'field' };
+      const runnerContext = {
+        patient,
+        mode: sessionMode,
+      };
+      // evaluate hide
+      if (field.hide?.hideWhenExpression) {
+        const isHidden = evaluateExpression(
+          field.hide.hideWhenExpression,
+          fieldNode,
+          formFields,
+          formValues,
+          runnerContext,
+        );
+        field.isHidden = isHidden;
+        if (Array.isArray(field.questions)) {
+          field.questions.forEach((question) => {
+            question.isHidden = isHidden;
+          });
+        }
+      } else {
+        field.isHidden = false;
+      }
+      // evaluate required
+      if (typeof field.required === 'object' && field.required.type === 'conditionalRequired') {
+        field.isRequired = evalConditionalRequired(field, formFields, formValues);
+      } else {
+        field.isRequired = isTrue(field.required as string);
+      }
+      // evaluate disabled
+      if (typeof field.disabled === 'object' && field.disabled.disableWhenExpression) {
+        field.isDisabled = evaluateExpression(
+          field.disabled.disableWhenExpression,
+          fieldNode,
+          formFields,
+          formValues,
+          runnerContext,
+        );
+      } else {
+        field.isDisabled = isTrue(field.disabled as string);
+      }
+      // evaluate conditional answered
+      if (field.validators?.some((validator) => validator.type === 'conditionalAnswered')) {
+        evaluateConditionalAnswered(field, formFields);
+      }
+      // evaluate conditional hide for answers
+      field.questionOptions.answers
+        ?.filter((answer) => !isEmpty(answer.hide?.hideWhenExpression))
+        .forEach((answer) => {
+          answer.isHidden = evaluateExpression(
+            answer.hide.hideWhenExpression,
+            fieldNode,
+            formFields,
+            formValues,
+            runnerContext,
+          );
+        });
+      // evaluate conditional disable for answers
+      field.questionOptions.answers
+        ?.filter((answer: QuestionAnswerOption) => !isEmpty(answer.disable?.disableWhenExpression))
+        .forEach((answer: QuestionAnswerOption) => {
+          answer.disable.isDisabled = evaluateExpression(
+            answer.disable?.disableWhenExpression,
+            fieldNode,
+            formFields,
+            formValues,
+            runnerContext,
+          );
+        });
+      // evaluate readonly
+      if (typeof field.readonly == 'string' && isNotBooleanString(field.readonly)) {
+        field.meta.readonlyExpression = field.readonly;
+        field.readonly = evaluateExpression(field.readonly, fieldNode, formFields, formValues, runnerContext);
+      }
+      // evaluate repeat limit
+      const limitExpression = field.questionOptions.repeatOptions?.limitExpression;
+      if (field.questionOptions.rendering === 'repeating' && !isEmpty(limitExpression)) {
+        field.questionOptions.repeatOptions.limit = evaluateExpression(
+          limitExpression,
+          fieldNode,
+          formFields,
+          formValues,
+          runnerContext,
+        );
+      }
+      return field;
+    });
+  }, [formValues, formFields, patient, sessionMode]);
+
+  useEffect(() => {
+    factoryContext.formJson?.pages?.forEach((page) => {
+      if (page.hide) {
+        evaluateHide({ value: page, type: 'page' }, formFields, formValues, sessionMode, patient, evaluateExpression);
+      } else {
+        page.isHidden = false;
+      }
+      page?.sections?.forEach((section) => {
+        if (section.hide) {
+          evaluateHide(
+            { value: section, type: 'section' },
+            formFields,
+            formValues,
+            sessionMode,
+            patient,
+            evaluateExpression,
+          );
+        } else {
+          section.isHidden = false;
+        }
+      });
+    });
+    setEvaluatedFormJson(factoryContext.formJson);
+  }, [factoryContext.formJson, formFields]);
+
+  return { evaluatedFormJson, evaluatedFields };
+};
+
+// helpers
+
+function isNotBooleanString(str: string) {
+  return str !== 'true' && str !== 'false';
+}

package/src/hooks/useFieldValidationResults.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+import { type FormField } from '../types';
+
+export function useFieldValidationResults(field: FormField) {
+  const [errors, setErrors] = useState([]);
+  const [warnings, setWarnings] = useState([]);
+
+  useEffect(() => {
+    if (field.meta?.submission?.errors) {
+      setErrors(field.meta.submission.errors);
+    }
+    if (field.meta?.submission?.warnings) {
+      setWarnings(field.meta.submission.warnings);
+    }
+  }, [field.meta?.submission]);
+
+  return { errors, warnings, setErrors, setWarnings };
+}

package/src/hooks/useFormCollapse.tsx

@@ -0,0 +1,36 @@
+import type { FormExpanded, SessionMode } from '../types';
+import { useCallback, useEffect, useState } from 'react';
+
+export function useFormCollapse(sessionMode: SessionMode) {
+  const [isFormExpanded, setIsFormExpanded] = useState<FormExpanded>(undefined);
+
+  const hideFormCollapseToggle = useCallback(() => {
+    const HideFormCollapseToggle = new CustomEvent('openmrs:form-view-embedded', { detail: { value: false } });
+    window.dispatchEvent(HideFormCollapseToggle);
+  }, []);
+
+  const handleFormCollapseToggle = useCallback((event) => {
+    setIsFormExpanded(event.detail.value);
+  }, []);
+
+  useEffect(() => {
+    const FormCollapseToggleVisibleEvent = new CustomEvent('openmrs:form-view-embedded', {
+      detail: { value: sessionMode != 'embedded-view' },
+    });
+
+    window.dispatchEvent(FormCollapseToggleVisibleEvent);
+  }, [sessionMode]);
+
+  useEffect(() => {
+    window.addEventListener('openmrs:form-collapse-toggle', handleFormCollapseToggle);
+
+    return () => {
+      window.removeEventListener('openmrs:form-collapse-toggle', handleFormCollapseToggle);
+    };
+  }, []);
+
+  return {
+    isFormExpanded,
+    hideFormCollapseToggle,
+  };
+}

package/src/hooks/useFormFieldValidators.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+import { getRegisteredValidator } from '../registry/registry';
+import { type FormField, type FormFieldValidator } from '../types';
+
+export function useFormFieldValidators(fields: FormField[]) {
+  const [validators, setValidators] = useState<Record<string, FormFieldValidator>>();
+
+  useEffect(() => {
+    const supportedTypes = new Set<string>();
+    fields.forEach((field) => {
+      field.validators?.forEach((validator) => supportedTypes.add(validator.type));
+    });
+    const supportedTypesArray = Array.from(supportedTypes);
+    Promise.all(supportedTypesArray.map((type) => getRegisteredValidator(type))).then((validators) => {
+      setValidators(
+        Object.assign({}, ...validators.map((validator, index) => ({ [supportedTypesArray[index]]: validator }))),
+      );
+    });
+  }, [fields]);
+
+  return validators;
+}

package/src/hooks/useFormFieldValueAdapters.ts

@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+import { type FormField } from '../types';
+import { type FormFieldValueAdapter } from '../types';
+import { getRegisteredFieldValueAdapter } from '../registry/registry';
+
+export const useFormFieldValueAdapters = (fields: FormField[]) => {
+  const [adapters, setAdapters] = useState<Record<string, FormFieldValueAdapter>>({});
+
+  useEffect(() => {
+    const supportedTypes = new Set<string>();
+    fields.forEach((field) => {
+      supportedTypes.add(field.type);
+    });
+    const supportedTypesArray = Array.from(supportedTypes);
+    Promise.all(supportedTypesArray.map((type) => getRegisteredFieldValueAdapter(type))).then((adapters) => {
+      const adaptersByType = supportedTypesArray.map((type, index) => ({
+        [type]: adapters[index],
+      }));
+      setAdapters(Object.assign({}, ...adaptersByType));
+    });
+  }, [fields]);
+
+  return adapters;
+};

package/src/hooks/useFormFields.ts

@@ -0,0 +1,37 @@
+import { useMemo } from 'react';
+import { type FormSchema, type FormField } from '../types';
+
+export function useFormFields(form: FormSchema): { formFields: FormField[]; conceptReferences: Set<string> } {
+  const [flattenedFields, conceptReferences] = useMemo(() => {
+    const flattenedFieldsTemp = [];
+    const conceptReferencesTemp = new Set<string>();
+    form.pages?.forEach((page) =>
+      page.sections?.forEach((section) => {
+        section.questions?.forEach((question) => {
+          flattenedFieldsTemp.push(question);
+          if (question.type == 'obsGroup') {
+            question.questions.forEach((groupedField) => {
+              groupedField.meta.groupId = question.id;
+              flattenedFieldsTemp.push(groupedField);
+            });
+          }
+        });
+      }),
+    );
+    flattenedFieldsTemp.forEach((field) => {
+      if (field.questionOptions?.concept) {
+        conceptReferencesTemp.add(field.questionOptions.concept);
+      }
+      if (field.questionOptions?.answers) {
+        field.questionOptions.answers.forEach((answer) => {
+          if (answer.concept) {
+            conceptReferencesTemp.add(answer.concept);
+          }
+        });
+      }
+    });
+    return [flattenedFieldsTemp, conceptReferencesTemp];
+  }, [form]);
+
+  return { formFields: flattenedFields, conceptReferences };
+}

package/src/hooks/useFormFieldsMeta.ts

@@ -0,0 +1,48 @@
+import { type FormField } from '../types';
+import { useMemo } from 'react';
+import { codedTypes } from '../constants';
+import { findConceptByReference } from '../utils/form-helper';
+import { type OpenmrsResource } from '@openmrs/esm-framework';
+
+export function useFormFieldsMeta(rawFormFields: FormField[], concepts: OpenmrsResource[]) {
+  const formFields = useMemo(() => {
+    if (rawFormFields.length && concepts?.length) {
+      return rawFormFields.map((field) => {
+        const matchingConcept = findConceptByReference(field.questionOptions.concept, concepts);
+        field.questionOptions.concept = matchingConcept ? matchingConcept.uuid : field.questionOptions.concept;
+        field.label = field.label ? field.label : matchingConcept?.display;
+        if (
+          codedTypes.includes(field.questionOptions.rendering) &&
+          !field.questionOptions.answers?.length &&
+          matchingConcept?.conceptClass?.display === 'Question' &&
+          matchingConcept?.answers?.length
+        ) {
+          field.questionOptions.answers = matchingConcept.answers.map((answer) => {
+            return {
+              concept: answer?.uuid,
+              label: answer?.display,
+            };
+          });
+        }
+        field.meta = {
+          ...(field.meta || {}),
+          concept: matchingConcept,
+        };
+        if (field.questionOptions.answers) {
+          field.questionOptions.answers = field.questionOptions.answers.map((answer) => {
+            const matchingAnswerConcept = findConceptByReference(answer.concept, concepts);
+            return {
+              ...answer,
+              concept: matchingAnswerConcept ? matchingAnswerConcept.uuid : answer.concept,
+              label: answer.label ? answer.label : matchingAnswerConcept?.display,
+            };
+          });
+        }
+        return field;
+      });
+    }
+    return [];
+  }, [concepts, rawFormFields]);
+
+  return formFields;
+}

package/src/hooks/useFormJson.test.tsx

@@ -0,0 +1,173 @@
+import { act, renderHook } from '@testing-library/react';
+import { openmrsFetch } from '@openmrs/esm-framework';
+import { when } from 'jest-when';
+import { useFormJson } from './useFormJson';
+import artComponentBody from '__mocks__/forms/rfe-forms/component_art.json';
+import artComponentSkeleton from '__mocks__/forms/afe-forms/component_art.json';
+import formComponentBody from '__mocks__/forms/rfe-forms/form-component.json';
+import formComponentSkeleton from '__mocks__/forms/afe-forms/form-component.json';
+import miniFormBody from '__mocks__/forms/rfe-forms/mini-form.json';
+import miniFormSkeleton from '__mocks__/forms/afe-forms/mini-form.json';
+import nestedForm1Body from '__mocks__/forms/rfe-forms/nested-form1.json';
+import nestedForm1Skeleton from '__mocks__/forms/afe-forms/nested-form1.json';
+import nestedForm2Body from '__mocks__/forms/rfe-forms/nested-form2.json';
+import nestedForm2Skeleton from '__mocks__/forms/afe-forms/nested-form2.json';
+import preclinicReviewComponentBody from '__mocks__/forms/rfe-forms/component_preclinic-review.json';
+import preclinicReviewComponentSkeleton from '__mocks__/forms/afe-forms/component_preclinic-review.json';
+
+const MINI_FORM_NAME = 'Mini Form';
+const MINI_FORM_UUID = '112d73b4-79e5-4be8-b9ae-d0840f00d4cf';
+const MINI_FORM_SCHEMA_VALUE_REF = '6bd7ba90-d2d6-4f81-9f09-7d1f23346a1c';
+
+const PARENT_FORM_NAME = 'Nested Form One';
+const PARENT_FORM_UUID = 'af7c1fe6-d669-414e-b066-e9733f0de7a8';
+const PARENT_FORM_SCHEMA_VALUE_REF = '1ad1fccc-d279-46a0-8980-1d91afd6ba67';
+
+const SUB_FORM_NAME = 'Nested Form Two';
+const SUB_FORM_UUID = '8304e5ff-6324-4863-ac51-8fcbc6812b13';
+const SUB_FORM_SCHEMA_VALUE_REF = 'ca52a95c-8bb4-4a9f-a0cf-f0df437592da';
+
+const COMPONENT_FORM_NAME = 'Form Component';
+const COMPONENT_FORM_UUID = 'af7c1fe6-d669-414e-b066-e9733f0de7b8';
+const COMPONENT_FORM_SCHEMA_VALUE_REF = '74d06044-850f-11ee-b9d1-0242ac120002';
+const COMPONENT_ART = 'component_art';
+const COMPONENT_ART_UUID = '2f063f32-7f8a-11ee-b962-0242ac120002';
+const COMPONENT_ART_SCHEMA_VALUE_REF = '74d06044-850f-11ee-b9d1-0242ac120003';
+const COMPONENT_PRECLINIC_REVIEW = 'component_preclinic-review';
+const COMPONENT_PRECLINIC_REVIEW_UUID = '2f063f32-7f8a-11ee-b962-0242ac120004';
+const COMPONENT_PRECLINIC_REVIEW_SCHEMA_VALUE_REF = '74d06044-850f-11ee-b9d1-0242ac120004';
+
+// Base setup
+const mockOpenmrsFetch = openmrsFetch as jest.Mock;
+mockOpenmrsFetch.mockImplementation(jest.fn());
+
+// parent form
+when(mockOpenmrsFetch)
+  .calledWith(buildPath(PARENT_FORM_NAME))
+  .mockResolvedValue({ data: { results: [nestedForm1Skeleton] } });
+when(mockOpenmrsFetch).calledWith(buildPath(PARENT_FORM_UUID)).mockResolvedValue({ data: nestedForm1Skeleton });
+when(mockOpenmrsFetch).calledWith(buildPath(PARENT_FORM_SCHEMA_VALUE_REF)).mockResolvedValue({ data: nestedForm1Body });
+
+// sub form
+when(mockOpenmrsFetch)
+  .calledWith(buildPath(SUB_FORM_NAME))
+  .mockResolvedValue({ data: { results: [nestedForm2Skeleton] } });
+when(mockOpenmrsFetch).calledWith(buildPath(SUB_FORM_UUID)).mockResolvedValue({ data: nestedForm2Skeleton });
+when(mockOpenmrsFetch).calledWith(buildPath(SUB_FORM_SCHEMA_VALUE_REF)).mockResolvedValue({ data: nestedForm2Body });
+
+// mini form
+when(mockOpenmrsFetch)
+  .calledWith(buildPath(MINI_FORM_NAME))
+  .mockResolvedValue({ data: { results: [miniFormSkeleton] } });
+when(mockOpenmrsFetch).calledWith(buildPath(MINI_FORM_UUID)).mockResolvedValue({ data: miniFormSkeleton });
+when(mockOpenmrsFetch).calledWith(buildPath(MINI_FORM_SCHEMA_VALUE_REF)).mockResolvedValue({ data: miniFormBody });
+
+// form components
+when(mockOpenmrsFetch)
+  .calledWith(buildPath(COMPONENT_FORM_NAME))
+  .mockResolvedValue({ data: { results: [formComponentSkeleton] } });
+when(mockOpenmrsFetch).calledWith(buildPath(COMPONENT_FORM_UUID)).mockResolvedValue({ data: formComponentSkeleton });
+when(mockOpenmrsFetch)
+  .calledWith(buildPath(COMPONENT_FORM_SCHEMA_VALUE_REF))
+  .mockResolvedValue({ data: formComponentBody });
+
+when(mockOpenmrsFetch)
+  .calledWith(buildPath(COMPONENT_ART))
+  .mockResolvedValue({ data: { results: [artComponentSkeleton] } });
+when(mockOpenmrsFetch).calledWith(buildPath(COMPONENT_ART_UUID)).mockResolvedValue({ data: artComponentSkeleton });
+when(mockOpenmrsFetch)
+  .calledWith(buildPath(COMPONENT_ART_SCHEMA_VALUE_REF))
+  .mockResolvedValue({ data: artComponentBody });
+
+when(mockOpenmrsFetch)
+  .calledWith(buildPath(COMPONENT_PRECLINIC_REVIEW))
+  .mockResolvedValue({ data: { results: [preclinicReviewComponentSkeleton] } });
+when(mockOpenmrsFetch)
+  .calledWith(buildPath(COMPONENT_PRECLINIC_REVIEW_UUID))
+  .mockResolvedValue({ data: preclinicReviewComponentSkeleton });
+when(mockOpenmrsFetch)
+  .calledWith(buildPath(COMPONENT_PRECLINIC_REVIEW_SCHEMA_VALUE_REF))
+  .mockResolvedValue({ data: preclinicReviewComponentBody });
+
+describe('useFormJson', () => {
+  it('should fetch basic form by name', async () => {
+    let hook = null;
+    await act(async () => {
+      hook = renderHook(() => useFormJson(MINI_FORM_NAME, null, null, null));
+    });
+
+    expect(hook.result.current.isLoading).toBe(false);
+    expect(hook.result.current.error).toBe(undefined);
+    expect(hook.result.current.formJson.name).toBe(MINI_FORM_NAME);
+  });
+
+  it('should fetch basic form by UUID', async () => {
+    let hook = null;
+    await act(async () => {
+      hook = renderHook(() => useFormJson(MINI_FORM_UUID, null, null, null));
+    });
+
+    expect(hook.result.current.isLoading).toBe(false);
+    expect(hook.result.current.error).toBe(undefined);
+    expect(hook.result.current.formJson.name).toBe(MINI_FORM_NAME);
+  });
+
+  it('should load form with nested subforms', async () => {
+    let hook = null;
+    await act(async () => {
+      hook = renderHook(() => useFormJson(PARENT_FORM_NAME, null, null, null));
+    });
+
+    expect(hook.result.current.isLoading).toBe(false);
+    expect(hook.result.current.error).toBe(undefined);
+    expect(hook.result.current.formJson.name).toBe(PARENT_FORM_NAME);
+
+    // verify subforms
+    verifyEmbeddedForms(hook.result.current.formJson);
+  });
+
+  it('should load subforms for raw form json', async () => {
+    let hook = null;
+    await act(async () => {
+      hook = renderHook(() => useFormJson(null, nestedForm1Body, null, null));
+    });
+
+    expect(hook.result.current.isLoading).toBe(false);
+    expect(hook.result.current.error).toBe(undefined);
+    expect(hook.result.current.formJson.name).toBe(PARENT_FORM_NAME);
+
+    // verify subforms
+    verifyEmbeddedForms(hook.result.current.formJson);
+  });
+
+  it('should load form components in combined raw form json', async () => {
+    let hook = null;
+    await act(async () => {
+      hook = renderHook(() => useFormJson(null, formComponentBody, null, null));
+    });
+    expect(hook.result.current.isLoading).toBe(false);
+    expect(hook.result.current.error).toBe(undefined);
+    expect(hook.result.current.formJson.name).toBe(COMPONENT_FORM_NAME);
+
+    // verify form components have been loaded
+    verifyFormComponents(hook.result.current.formJson);
+  });
+});
+
+function buildPath(path: string) {
+  return when((url: string) => url.includes(path));
+}
+
+function verifyEmbeddedForms(formJson) {
+  // assert that the nestedForm2's (level one subform) pages have been aligned with the parent because they share the same encounterType
+  expect(formJson.pages.length).toBe(3);
+  // the mini form (it's not flattened into the parent form because it has a different encounterType)
+  const nestedSubform = formJson.pages[2].subform.form;
+  expect(nestedSubform.name).toBe(MINI_FORM_NAME);
+  expect(nestedSubform.pages.length).toBe(1);
+}
+
+function verifyFormComponents(formJson) {
+  // assert that alias has been replaced with the actual component
+  expect(formJson.pages.length).toBe(2);
+}