@olaboot/esm-patient-registration-app 9.2.0 → 10.0.2

package/src/patient-registration/field/person-attributes/coded-person-attribute-field.test.tsx

@@ -1,141 +1,205 @@
 import React from 'react';
+import { vi, describe, it, expect, beforeEach } from 'vitest';
+import userEvent from '@testing-library/user-event';
 import { Form, Formik } from 'formik';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import { useConceptAnswers } from '../field.resource';
 import { CodedPersonAttributeField } from './coded-person-attribute-field.component';
+import { initialFormValues } from '../../patient-registration.component';
+import { type FormValues } from '../../patient-registration.types';
 
-const mockUseConceptAnswers = jest.mocked(useConceptAnswers);
+const mockUseConceptAnswers = vi.mocked(useConceptAnswers);
 
-jest.mock('../field.resource', () => ({
-  ...jest.requireActual('../field.resource'),
-  useConceptAnswers: jest.fn(),
+vi.mock('../field.resource', async () => ({
+  ...((await vi.importActual('../field.resource')) as object),
+  useConceptAnswers: vi.fn(),
 }));
 
+const personAttributeType = {
+  format: 'org.openmrs.Concept',
+  display: 'Referred by',
+  uuid: '4dd56a75-14ab-4148-8700-1f4f704dc5b0',
+  name: '',
+  description: '',
+};
+
+const answerConceptSetUuid = '6682d17f-0777-45e4-a39b-93f77eb3531c';
+
+/**
+ * Helper to render CodedPersonAttributeField with Formik render props for state-dependent tests.
+ */
+const renderCodedPersonAttributeFieldWithFormik = (
+  props: {
+    answerConceptSetUuid?: string | null;
+    customConceptAnswers?: Array<{ uuid: string; label?: string }>;
+    required?: boolean;
+  } = {},
+  initialValues: Partial<FormValues> = {},
+  options?: { enableReinitialize?: boolean },
+) => {
+  const defaultValues = {
+    attributes: {},
+    ...initialValues,
+  };
+
+  let formValuesRef: FormValues = { ...initialFormValues, ...defaultValues } as FormValues;
+
+  const utils = render(
+    <Formik initialValues={defaultValues} onSubmit={() => {}} enableReinitialize={options?.enableReinitialize}>
+      {({ setFieldValue, values, setFieldTouched }) => {
+        formValuesRef = { ...initialFormValues, ...values } as FormValues;
+        return (
+          <Form>
+            <CodedPersonAttributeField
+              id="attributeId"
+              personAttributeType={personAttributeType}
+              answerConceptSetUuid={props.answerConceptSetUuid ?? answerConceptSetUuid}
+              label={personAttributeType.display}
+              customConceptAnswers={props.customConceptAnswers ?? []}
+              required={props.required ?? false}
+            />
+          </Form>
+        );
+      }}
+    </Formik>,
+  );
+
+  return {
+    ...utils,
+    getFormValues: () => formValuesRef,
+  };
+};
+
 describe('CodedPersonAttributeField', () => {
   const conceptAnswers = [
     { uuid: '1', display: 'Option 1' },
     { uuid: '2', display: 'Option 2' },
   ];
 
-  const personAttributeType = {
-    format: 'org.openmrs.Concept',
-    display: 'Referred by',
-    uuid: '4dd56a75-14ab-4148-8700-1f4f704dc5b0',
-    name: '',
-    description: '',
-  };
-
-  const answerConceptSetUuid = '6682d17f-0777-45e4-a39b-93f77eb3531c';
-  let consoleSpy: jest.SpyInstance;
-
   beforeEach(() => {
     mockUseConceptAnswers.mockReturnValue({
       data: conceptAnswers,
       isLoading: false,
       error: null,
     });
-
-    consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
   });
 
-  afterEach(() => {
-    consoleSpy.mockRestore();
-  });
+  describe('Rendering', () => {
+    it('renders the conceptAnswers as select options', () => {
+      renderCodedPersonAttributeFieldWithFormik();
 
-  it('renders an error if there is no concept answer set provided', () => {
-    expect(() => {
-      render(
-        <Formik initialValues={{}} onSubmit={() => {}}>
-          <Form>
-            <CodedPersonAttributeField
-              answerConceptSetUuid={null}
-              customConceptAnswers={[]}
-              id="attributeId"
-              label={personAttributeType.display}
-              personAttributeType={personAttributeType}
-              required={false}
-            />
-          </Form>
-        </Formik>,
-      );
-    }).toThrow(expect.stringMatching(/has been defined without an answer concept set UUID/i));
+      expect(screen.getByLabelText(/Referred by/i)).toBeInTheDocument();
+      expect(screen.getByText(/Option 1/i)).toBeInTheDocument();
+      expect(screen.getByText(/Option 2/i)).toBeInTheDocument();
+    });
+
+    it('renders customConceptAnswers as select options when they are provided', () => {
+      renderCodedPersonAttributeFieldWithFormik({
+        customConceptAnswers: [
+          {
+            uuid: 'A',
+            label: 'Special Option A',
+          },
+          {
+            uuid: 'B',
+            label: 'Special Option B',
+          },
+        ],
+      });
+
+      expect(screen.getByLabelText(/Referred by/i)).toBeInTheDocument();
+      expect(screen.getByText(/Special Option A/i)).toBeInTheDocument();
+      expect(screen.getByText(/Special Option B/i)).toBeInTheDocument();
+      expect(screen.queryByText(/Option 1/i)).not.toBeInTheDocument();
+      expect(screen.queryByText(/Option 2/i)).not.toBeInTheDocument();
+    });
   });
 
-  it('renders an error if the concept answer set does not have any concept answers', () => {
-    mockUseConceptAnswers.mockReturnValue({
-      data: [],
-      isLoading: false,
-      error: null,
+  describe('User interaction', () => {
+    it('allows user to select an option', async () => {
+      const user = userEvent.setup();
+      const { getFormValues } = renderCodedPersonAttributeFieldWithFormik();
+
+      const select = screen.getByRole('combobox', { name: /Referred by/i }) as HTMLSelectElement;
+      await user.selectOptions(select, '1');
+
+      await waitFor(() => {
+        expect(getFormValues().attributes[personAttributeType.uuid]).toBe('1');
+      });
+      expect(select.value).toBe('1');
     });
 
-    expect(() => {
-      render(
-        <Formik initialValues={{}} onSubmit={() => {}}>
-          <Form>
-            <CodedPersonAttributeField
-              id="attributeId"
-              personAttributeType={personAttributeType}
-              answerConceptSetUuid={answerConceptSetUuid}
-              label={personAttributeType.display}
-              customConceptAnswers={[]}
-              required={false}
-            />
-          </Form>
-        </Formik>,
-      );
-    }).toThrow(expect.stringMatching(/does not have any concept answers/i));
+    it('allows user to switch between options', async () => {
+      const user = userEvent.setup();
+      const { getFormValues } = renderCodedPersonAttributeFieldWithFormik();
+
+      const select = screen.getByRole('combobox', { name: /Referred by/i }) as HTMLSelectElement;
+
+      // Select first option
+      await user.selectOptions(select, '1');
+      await waitFor(() => {
+        expect(getFormValues().attributes[personAttributeType.uuid]).toBe('1');
+      });
+
+      // Switch to second option
+      await user.selectOptions(select, '2');
+      await waitFor(() => {
+        expect(getFormValues().attributes[personAttributeType.uuid]).toBe('2');
+      });
+    });
+
+    it('allows user to select custom concept answers', async () => {
+      const user = userEvent.setup();
+      const { getFormValues } = renderCodedPersonAttributeFieldWithFormik({
+        customConceptAnswers: [
+          {
+            uuid: 'A',
+            label: 'Special Option A',
+          },
+          {
+            uuid: 'B',
+            label: 'Special Option B',
+          },
+        ],
+      });
+
+      const select = screen.getByRole('combobox', { name: /Referred by/i }) as HTMLSelectElement;
+      await user.selectOptions(select, 'A');
+
+      await waitFor(() => {
+        expect(getFormValues().attributes[personAttributeType.uuid]).toBe('A');
+      });
+    });
   });
 
-  it('renders the conceptAnswers as select options', () => {
-    render(
-      <Formik initialValues={{}} onSubmit={() => {}}>
-        <Form>
-          <CodedPersonAttributeField
-            id="attributeId"
-            personAttributeType={personAttributeType}
-            answerConceptSetUuid={answerConceptSetUuid}
-            label={personAttributeType.display}
-            customConceptAnswers={[]}
-            required={false}
-          />
-        </Form>
-      </Formik>,
-    );
-
-    expect(screen.getByLabelText(/Referred by/i)).toBeInTheDocument();
-    expect(screen.getByText(/Option 1/i)).toBeInTheDocument();
-    expect(screen.getByText(/Option 2/i)).toBeInTheDocument();
+  describe('Required field', () => {
+    it('renders as required when required prop is true', () => {
+      renderCodedPersonAttributeFieldWithFormik({ required: true });
+
+      const select = screen.getByRole('combobox', { name: /Referred by/i });
+      expect(select).toBeRequired();
+    });
+
+    it('renders as optional when required prop is false', () => {
+      renderCodedPersonAttributeFieldWithFormik({ required: false });
+
+      const select = screen.getByRole('combobox', { name: /Referred by/i });
+      expect(select).not.toBeRequired();
+    });
   });
 
-  it('renders customConceptAnswers as select options when they are provided', () => {
-    render(
-      <Formik initialValues={{}} onSubmit={() => {}}>
-        <Form>
-          <CodedPersonAttributeField
-            id="attributeId"
-            personAttributeType={personAttributeType}
-            answerConceptSetUuid={answerConceptSetUuid}
-            label={personAttributeType.display}
-            customConceptAnswers={[
-              {
-                uuid: 'A',
-                label: 'Special Option A',
-              },
-              {
-                uuid: 'B',
-                label: 'Special Option B',
-              },
-            ]}
-            required={false}
-          />
-        </Form>
-      </Formik>,
-    );
-
-    expect(screen.getByLabelText(/Referred by/i)).toBeInTheDocument();
-    expect(screen.getByText(/Special Option A/i)).toBeInTheDocument();
-    expect(screen.getByText(/Special Option B/i)).toBeInTheDocument();
-    expect(screen.queryByText(/Option 1/i)).not.toBeInTheDocument();
-    expect(screen.queryByText(/Option 2/i)).not.toBeInTheDocument();
+  describe('Loading state', () => {
+    it('does not render select while concept answers are loading', () => {
+      mockUseConceptAnswers.mockReturnValue({
+        data: null,
+        isLoading: true,
+        error: null,
+      });
+
+      renderCodedPersonAttributeFieldWithFormik();
+
+      // Component returns null while loading, so select should not be in document
+      expect(screen.queryByRole('combobox', { name: /Referred by/i })).not.toBeInTheDocument();
+    });
   });
 });

package/src/patient-registration/field/person-attributes/location-person-attribute-field.component.tsx

@@ -1,11 +1,11 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import classNames from 'classnames';
+import { ComboBox, InlineLoading, Layer } from '@carbon/react';
+import { useTranslation } from 'react-i18next';
 import { Field, useField } from 'formik';
 import { type PersonAttributeTypeResponse } from '../../patient-registration.types';
-import styles from './../field.scss';
 import { useLocations } from './location-person-attribute-field.resource';
-import { ComboBox, InlineLoading, Layer } from '@carbon/react';
-import { useTranslation } from 'react-i18next';
+import styles from './../field.scss';
 
 export interface LocationPersonAttributeFieldProps {
   id: string;

package/src/patient-registration/field/person-attributes/location-person-attribute-field.resource.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
+import useSWR from 'swr';
 import { type FetchResponse, fhirBaseUrl, openmrsFetch, useDebounce } from '@openmrs/esm-framework';
 import { type LocationEntry, type LocationResponse } from '@openmrs/esm-service-queues-app/src/types';
-import useSWR from 'swr';
 
 interface UseLocationsResult {
   locations: Array<LocationEntry>;
@@ -32,10 +32,7 @@ export function useLocations(locationTag: string | null, searchQuery: string = '
     return url + urlSearchParameters.toString();
   }, [locationTag, debouncedSearchQuery]);
 
-  const { data, error, isLoading, isValidating } = useSWR<FetchResponse<LocationResponse>, Error>(
-    constructUrl,
-    openmrsFetch,
-  );
+  const { data, isLoading, isValidating } = useSWR<FetchResponse<LocationResponse>, Error>(constructUrl, openmrsFetch);
 
   return useMemo(
     () => ({

package/src/patient-registration/field/person-attributes/person-attribute-field.component.tsx

@@ -1,12 +1,12 @@
 import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { InlineNotification, TextInputSkeleton } from '@carbon/react';
 import { type FieldDefinition } from '../../../config-schema';
 import { CodedPersonAttributeField } from './coded-person-attribute-field.component';
 import { usePersonAttributeType } from './person-attributes.resource';
 import { TextPersonAttributeField } from './text-person-attribute-field.component';
-import { useTranslation } from 'react-i18next';
-import styles from '../field.scss';
 import { LocationPersonAttributeField } from './location-person-attribute-field.component';
+import styles from '../field.scss';
 
 export interface PersonAttributeFieldProps {
   fieldDefinition: FieldDefinition;