@openmrs/esm-form-engine-lib 2.1.0-pre.1413 → 2.1.0-pre.1418

package/__mocks__/forms/rfe-forms/radio-button-form.json

@@ -0,0 +1,198 @@
+{
+  "name": "A Radio Button Test",
+  "pages": [
+    {
+      "label": "Page 1",
+      "sections": [
+        {
+          "label": "1",
+          "isExpanded": "true",
+          "questions": [
+            {
+              "label": "Visit type",
+              "type": "obs",
+              "required": "false",
+              "id": "visitType",
+              "questionOptions": {
+                "rendering": "radio",
+                "concept": "164181AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+                "conceptMappings": [
+                  {
+                    "relationship": "SAME-AS",
+                    "type": "CIEL",
+                    "value": "164181"
+                  }
+                ],
+                "answers": [
+                  {
+                    "concept": "164180AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+                    "label": "New visit"
+                  },
+                  {
+                    "concept": "160530AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+                    "label": "Return visit type"
+                  },
+                  {
+                    "concept": "5622AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+                    "label": "Other"
+                  }
+                ]
+              },
+              "validators": [
+                {
+                  "type": "form_field"
+                },
+                {
+                  "type": "default_value"
+                }
+              ],
+              "meta": {
+                "submission": null,
+                "concept": {
+                  "uuid": "164181AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+                  "display": "Visit type",
+                  "conceptClass": {
+                    "uuid": "8d491e50-c2cc-11de-8d13-0010c6dffd0f",
+                    "display": "Question"
+                  },
+                  "answers": [
+                    {
+                      "uuid": "164180AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+                      "display": "New visit"
+                    },
+                    {
+                      "uuid": "160530AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+                      "display": "Return visit type"
+                    },
+                    {
+                      "uuid": "5622AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+                      "display": "Other"
+                    }
+                  ],
+                  "conceptMappings": [
+                    {
+                      "conceptReferenceTerm": {
+                        "conceptSource": {
+                          "name": "CIEL"
+                        },
+                        "code": "164181"
+                      }
+                    }
+                  ]
+                }
+              },
+              "isHidden": false,
+              "isRequired": false,
+              "isDisabled": false
+            },
+            {
+              "label": "Visit punctuality",
+              "type": "obs",
+              "required": false,
+              "id": "visitPunctuality",
+              "questionOptions": {
+                "rendering": "radio",
+                "concept": "d81d4698-e78c-420d-aac5-cb1f606fb32e",
+                "answers": [
+                  {
+                    "concept": "5c3ce9c9-75bd-4730-8878-08c03ec02e9d",
+                    "label": "Early"
+                  },
+                  {
+                    "concept": "90af4b72-442a-4fcc-84c2-2bb1c0361737",
+                    "label": "Late"
+                  },
+                  {
+                    "concept": "66cdc0a1-aa19-4676-af51-80f66d78d9eb",
+                    "label": "On time"
+                  }
+                ]
+              },
+              "validators": [
+                {
+                  "type": "form_field"
+                },
+                {
+                  "type": "default_value"
+                }
+              ],
+              "meta": {
+                "submission": null,
+                "concept": {
+                  "uuid": "d81d4698-e78c-420d-aac5-cb1f606fb32e",
+                  "display": "Visit Punctuality",
+                  "conceptClass": {
+                    "uuid": "8d491e50-c2cc-11de-8d13-0010c6dffd0f",
+                    "display": "Question"
+                  },
+                  "answers": [
+                    {
+                      "uuid": "66cdc0a1-aa19-4676-af51-80f66d78d9eb",
+                      "display": "On time"
+                    },
+                    {
+                      "uuid": "90af4b72-442a-4fcc-84c2-2bb1c0361737",
+                      "display": "Late"
+                    },
+                    {
+                      "uuid": "5c3ce9c9-75bd-4730-8878-08c03ec02e9d",
+                      "display": "Early"
+                    }
+                  ],
+                  "conceptMappings": []
+                }
+              },
+              "isHidden": false,
+              "isRequired": false,
+              "isDisabled": false
+            }
+          ],
+          "isHidden": false
+        }
+      ],
+      "isHidden": false
+    }
+  ],
+  "processor": "EncounterFormProcessor",
+  "encounterType": "0e8230ce-bd1d-43f5-a863-cf44344fa4b0",
+  "referencedForms": [],
+  "uuid": "fd067f44-99fd-4b07-b238-cea7b278c2b2",
+  "description": "A Radio Button Test",
+  "version": "1.0",
+  "translations": {},
+  "conceptReferences": {
+    "164181AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA": {
+      "uuid": "164181AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+      "display": "Visit type"
+    },
+    "164180AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA": {
+      "uuid": "164180AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+      "display": "New visit"
+    },
+    "160530AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA": {
+      "uuid": "160530AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+      "display": "Return visit type"
+    },
+    "5622AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA": {
+      "uuid": "5622AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+      "display": "Other"
+    },
+    "d81d4698-e78c-420d-aac5-cb1f606fb32e": {
+      "uuid": "d81d4698-e78c-420d-aac5-cb1f606fb32e",
+      "display": "Visit Punctuality"
+    },
+    "5c3ce9c9-75bd-4730-8878-08c03ec02e9d": {
+      "uuid": "5c3ce9c9-75bd-4730-8878-08c03ec02e9d",
+      "display": "Early"
+    },
+    "90af4b72-442a-4fcc-84c2-2bb1c0361737": {
+      "uuid": "90af4b72-442a-4fcc-84c2-2bb1c0361737",
+      "display": "Late"
+    },
+    "66cdc0a1-aa19-4676-af51-80f66d78d9eb": {
+      "uuid": "66cdc0a1-aa19-4676-af51-80f66d78d9eb",
+      "display": "On time"
+    }
+  },
+  "encounter": ""
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-form-engine-lib",
-  "version": "2.1.0-pre.1413",
+  "version": "2.1.0-pre.1418",
   "description": "React Form Engine for O3",
   "browser": "dist/openmrs-esm-form-engine-lib.js",
   "main": "src/index.ts",

package/src/components/inputs/multi-select/multi-select.component.tsx

@@ -117,7 +117,7 @@ const MultiSelect: React.FC<FormFieldInputProps> = ({ field, value, errors, warn
                 items={selectOptions}
                 initialSelectedItems={initiallySelectedQuestionItems}
                 label={''}
-                titleText={label}
+                titleText={<FieldLabel field={field} />}
                 key={counter}
                 itemToString={(item) => (item ? item.label : ' ')}
                 disabled={field.isDisabled}

package/src/components/inputs/radio/radio.component.tsx

@@ -37,7 +37,7 @@ const Radio: React.FC<FormFieldInputProps> = ({ field, value, errors, warnings,
         legendText={<FieldLabel field={field} />}
         className={styles.boldedLegend}
         disabled={field.isDisabled}
-        invalid={errors.length > 0}>
+        invalid={errors?.length > 0}>
         <RadioButtonGroup
           name={field.id}
           valueSelected={value}

package/src/components/inputs/radio/radio.test.tsx

@@ -0,0 +1,198 @@
+import React from 'react';
+import { act, render, screen } from '@testing-library/react';
+import { type FetchResponse, openmrsFetch, usePatient, useSession } from '@openmrs/esm-framework';
+import { mockPatient } from '__mocks__/patient.mock';
+import { mockSessionDataResponse } from '__mocks__/session.mock';
+import { mockVisit } from '__mocks__/visit.mock';
+import radioButtonFormSchema from '__mocks__/forms/rfe-forms/radio-button-form.json';
+import Radio from './radio.component';
+import { useFormProviderContext } from 'src/provider/form-provider';
+
+const mockOpenmrsFetch = jest.mocked(openmrsFetch);
+const mockUseSession = jest.mocked(useSession);
+const mockUsePatient = jest.mocked(usePatient);
+
+jest.mock('../../../api', () => {
+  const originalModule = jest.requireActual('../../../api');
+
+  return {
+    ...originalModule,
+    getPreviousEncounter: jest.fn().mockImplementation(() => Promise.resolve(null)),
+  };
+});
+
+jest.mock('src/provider/form-provider', () => ({
+  useFormProviderContext: jest.fn(),
+}));
+
+const mockUseFormProviderContext = useFormProviderContext as jest.Mock;
+
+const addTestValues = {
+  field: {
+    label: 'Visit type',
+    type: 'obs',
+    required: false,
+    id: 'visitType',
+    questionOptions: {
+      rendering: 'radio',
+      concept: '164181AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+      conceptMappings: [
+        {
+          relationship: 'SAME-AS',
+          type: 'CIEL',
+          value: '164181',
+        },
+      ],
+      answers: [
+        {
+          concept: '164180AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+          label: 'New visit',
+        },
+        {
+          concept: '160530AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+          label: 'Return visit type',
+        },
+        {
+          concept: '5622AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+          label: 'Other',
+        },
+      ],
+    },
+    validators: [
+      {
+        type: 'form_field',
+      },
+      {
+        type: 'default_value',
+      },
+    ],
+    meta: {
+      submission: null,
+      concept: {
+        uuid: '164181AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+        display: 'Visit type',
+        conceptClass: {
+          uuid: '8d491e50-c2cc-11de-8d13-0010c6dffd0f',
+          display: 'Question',
+        },
+        answers: [
+          {
+            uuid: '164180AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+            display: 'New visit',
+          },
+          {
+            uuid: '160530AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+            display: 'Return visit type',
+          },
+          {
+            uuid: '5622AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA',
+            display: 'Other',
+          },
+        ],
+        conceptMappings: [
+          {
+            conceptReferenceTerm: {
+              conceptSource: {
+                name: 'CIEL',
+              },
+              code: '164181',
+            },
+          },
+        ],
+      },
+    },
+    isHidden: false,
+    isRequired: false,
+    isDisabled: false,
+  },
+  value: null,
+  errors: null,
+  warnings: undefined,
+  setFieldValue: null,
+};
+
+const renderForm = async (props) => {
+  await act(() => render(<Radio {...props} />));
+};
+
+let formProcessor;
+
+const mockProviderValues = {
+  layoutType: 'small-desktop',
+  sessionMode: 'enter',
+  workspaceLayout: 'minimized',
+  formFieldAdapters: {},
+  patient: mockPatient,
+  methods: undefined,
+  formJson: radioButtonFormSchema as any,
+  visit: mockVisit,
+  sessionDate: new Date(),
+  location: mockVisit.location,
+  currentProvider: mockVisit.encounters[0]?.encounterProvider,
+  processor: formProcessor,
+};
+
+describe('Radio Component', () => {
+  beforeEach(() => {
+    formProcessor = {
+      getInitialValues: jest.fn(),
+    };
+    mockOpenmrsFetch.mockResolvedValue({
+      data: { results: [{ ...radioButtonFormSchema }] },
+    } as unknown as FetchResponse);
+
+    mockUseSession.mockReturnValue(mockSessionDataResponse.data);
+
+    mockUsePatient.mockReturnValue({
+      isLoading: false,
+      patient: mockPatient,
+      patientUuid: mockPatient.id,
+      error: null,
+    });
+  });
+
+  it('renders correctly', async () => {
+    mockUseFormProviderContext.mockReturnValue({
+      ...mockProviderValues,
+    });
+
+    await renderForm(addTestValues);
+    expect(screen.getByText('Visit type')).toBeInTheDocument();
+    expect(screen.getByLabelText('New visit')).toBeInTheDocument();
+    expect(screen.getByLabelText('Return visit type')).toBeInTheDocument();
+    expect(screen.getByLabelText('Other')).toBeInTheDocument();
+
+    const radioButtons = screen.getAllByRole('radio');
+    expect(radioButtons).toHaveLength(3);
+  });
+
+  it('renders correctly on view mode', async () => {
+    mockUseFormProviderContext.mockReturnValue({
+      ...mockProviderValues,
+      sessionMode: 'view',
+    });
+
+    await renderForm(addTestValues);
+    expect(screen.getByRole('button', { name: /visit type/i })).toBeInTheDocument();
+    const visitTypeElements = screen.getAllByText('Visit type');
+    expect(visitTypeElements.length).toBeGreaterThan(0);
+  });
+
+  it('renders radio buttons as disabled when the field is disabled', async () => {
+    mockUseFormProviderContext.mockReturnValue({
+      ...mockProviderValues,
+    });
+
+    await renderForm({ ...addTestValues, field: { ...addTestValues.field, isDisabled: true } });
+    expect(screen.getByText('Visit type')).toBeInTheDocument();
+
+    const radioButtons = screen.getAllByRole('radio');
+    expect(radioButtons).toHaveLength(3);
+    radioButtons.forEach((radio) => {
+      expect(radio).toBeDisabled();
+    });
+    expect(screen.getByLabelText('New visit')).toBeDisabled();
+    expect(screen.getByLabelText('Return visit type')).toBeDisabled();
+    expect(screen.getByLabelText('Other')).toBeDisabled();
+  });
+});

package/src/components/label/label.component.tsx

@@ -10,7 +10,7 @@ type LabelProps = {
 const LabelField: React.FC<LabelProps> = ({ value, tooltipText }) => {
   return (
     <div className={styles.label}>
-      <DefinitionTooltip direction="bottom" tabIndex={0} tooltipText={tooltipText}>
+      <DefinitionTooltip direction="bottom" tabIndex={0} definition={tooltipText}>
         <span className="cds--label">{`${value}:`}</span>
       </DefinitionTooltip>
     </div>