@openmrs/esm-form-builder-app 3.0.2-pre.1670 → 3.0.2-pre.1673

package/dist/openmrs-esm-form-builder-app.js.buildmanifest.json

@@ -1866,7 +1866,7 @@
       "auxiliaryFiles": [
         "9976.js.map"
       ],
-      "hash": "bbd69ee1f05b2b14",
+      "hash": "d89941876ef5950e",
       "childrenByOrder": {}
     }
   ]

package/dist/routes.json

@@ -1 +1 @@
-{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.2.0"},"pages":[{"component":"root","route":"form-builder","online":true,"offline":true,"order":1}],"extensions":[{"name":"system-administration-form-builder-card-link","slot":"system-admin-page-card-link-slot","component":"systemAdministrationFormBuilderCardLink","online":true,"offline":true}],"modals":[{"name":"new-form-modal","component":"newFormModal"},{"name":"new-page-modal","component":"newPageModal"},{"name":"delete-page-modal","component":"deletePageModal"},{"name":"new-section-modal","component":"newSectionModal"},{"name":"delete-section-modal","component":"deleteSectionModal"},{"name":"question-modal","component":"questionModal"},{"name":"delete-question-modal","component":"deleteQuestionModal"},{"name":"edit-question-modal","component":"editQuestionModal"},{"name":"restore-draft-schema-modal","component":"restoreDraftSchemaModal"},{"name":"unpublish-form-modal","component":"unpublishFormModal"},{"name":"delete-form-modal","component":"deleteFormModal"}],"version":"3.0.2-pre.1670"}
+{"$schema":"https://json.openmrs.org/routes.schema.json","backendDependencies":{"fhir2":">=1.2","webservices.rest":"^2.2.0"},"pages":[{"component":"root","route":"form-builder","online":true,"offline":true,"order":1}],"extensions":[{"name":"system-administration-form-builder-card-link","slot":"system-admin-page-card-link-slot","component":"systemAdministrationFormBuilderCardLink","online":true,"offline":true}],"modals":[{"name":"new-form-modal","component":"newFormModal"},{"name":"new-page-modal","component":"newPageModal"},{"name":"delete-page-modal","component":"deletePageModal"},{"name":"new-section-modal","component":"newSectionModal"},{"name":"delete-section-modal","component":"deleteSectionModal"},{"name":"question-modal","component":"questionModal"},{"name":"delete-question-modal","component":"deleteQuestionModal"},{"name":"edit-question-modal","component":"editQuestionModal"},{"name":"restore-draft-schema-modal","component":"restoreDraftSchemaModal"},{"name":"unpublish-form-modal","component":"unpublishFormModal"},{"name":"delete-form-modal","component":"deleteFormModal"}],"version":"3.0.2-pre.1673"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-form-builder-app",
-  "version": "3.0.2-pre.1670",
+  "version": "3.0.2-pre.1673",
   "license": "MPL-2.0",
   "description": "Form Builder for O3",
   "browser": "dist/openmrs-esm-form-builder-app.js",

package/src/components/interactive-builder/modals/question/question-form/question/question.component.tsx

@@ -45,7 +45,7 @@ const Question: React.FC<QuestionProps> = ({ checkIfQuestionIdExists }) => {
     },
     [setFormField],
   );
-  
+
   const handleQuestionTypeChange = useCallback(
     (event: React.ChangeEvent<HTMLSelectElement>) => {
       const newQuestionType = event.target.value;

package/src/components/interactive-builder/modals/question/question-form/question/question.test.tsx

@@ -1,73 +1,338 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import type { FormField } from '@openmrs/esm-form-engine-lib';
-import { FormFieldProvider } from '../../form-field-context';
 import Question from './question.component';
+import { FormFieldProvider } from '../../form-field-context';
+import type { FormField } from '@openmrs/esm-form-engine-lib';
+import { renderingTypes } from '@constants';
 
-const mockSetFormField = jest.fn();
-const checkIfQuestionIdExists = jest.fn();
-
-const formField: FormField = {
+const initialFormField: FormField = {
+  id: 'testId',
+  label: 'Test Label',
   type: 'obs',
-  questionOptions: { rendering: 'text' },
-  id: '1',
+  questionOptions: {
+    rendering: 'text',
+  },
 };
 
-jest.mock('../../form-field-context', () => ({
-  ...jest.requireActual('../../form-field-context'),
-  useFormField: () => ({ formField, setFormField: mockSetFormField }),
-}));
+const checkIfQuestionIdExists = jest.fn(() => false);
+
+const renderWithFormFieldProvider = (
+  component: React.ReactElement,
+  { formField = initialFormField, selectedConcept = null } = {},
+) => {
+  return render(
+    <FormFieldProvider initialFormField={formField} selectedConcept={selectedConcept}>
+      {component}
+    </FormFieldProvider>,
+  );
+};
 
 describe('Question Component', () => {
-  it('should render the toggles for question info', () => {
-    renderQuestionComponent();
+  it('should render all required fields', () => {
+    renderWithFormFieldProvider(<Question checkIfQuestionIdExists={checkIfQuestionIdExists} />);
+
+    expect(screen.getByRole('textbox', { name: /question id/i })).toBeInTheDocument();
+
+    expect(screen.getByLabelText(/question type/i)).toBeInTheDocument();
+
+    expect(screen.getByLabelText(/rendering type/i)).toBeInTheDocument();
+  });
 
-    expect(
-      screen.getByRole('group', { name: /would you like to provide additional details about the question?/i }),
-    ).toBeInTheDocument();
-    expect(screen.getByRole('radio', { name: /Yes/i })).toBeInTheDocument();
-    expect(screen.getByRole('radio', { name: /No/i })).toBeInTheDocument();
+  it('should display the form field id in the question id input', () => {
+    renderWithFormFieldProvider(<Question checkIfQuestionIdExists={checkIfQuestionIdExists} />);
+    const idInput = screen.getByRole('textbox', { name: /question id/i }) as HTMLInputElement;
+    expect(idInput).toHaveValue('testId');
   });
 
-  it('shows TextInput when "Yes" is selected', async () => {
+  it('should update form field when question id changes', async () => {
     const user = userEvent.setup();
-    renderQuestionComponent();
+    renderWithFormFieldProvider(<Question checkIfQuestionIdExists={checkIfQuestionIdExists} />);
+    const idInput = screen.getByRole('textbox', { name: /question id/i });
 
-    const yesRadio = screen.getByRole('radio', { name: /Yes/i });
-    await user.click(yesRadio);
+    await user.clear(idInput);
+    await user.type(idInput, 'newTestId');
 
-    expect(screen.getByLabelText(/additional question info/i)).toBeInTheDocument();
+    expect(idInput).toHaveValue('newTestId');
+  });
+
+  it('should validate duplicate question ids', () => {
+    const duplicateCheckFn = jest.fn().mockReturnValue(true);
+
+    renderWithFormFieldProvider(<Question checkIfQuestionIdExists={duplicateCheckFn} />);
+
+    duplicateCheckFn.mockClear();
+
+    const idInput = screen.getByRole('textbox', { name: /question id/i });
+    idInput.focus();
+    idInput.blur();
+
+    expect(screen.getByText(/this question id already exists/i)).toBeInTheDocument();
+  });
+
+  it('should convert label to camel case when button is clicked', async () => {
+    const user = userEvent.setup();
+    renderWithFormFieldProvider(<Question checkIfQuestionIdExists={checkIfQuestionIdExists} />, {
+      formField: { ...initialFormField, label: 'Test Label For Camel Case' },
+    });
+
+    const convertButton = screen.getByText(/convert label to camel-case/i);
+    await user.click(convertButton);
+
+    const idInput = screen.getByRole('textbox', { name: /question id/i }) as HTMLInputElement;
+    expect(idInput).toHaveValue('testLabelForCamelCase');
   });
 
-  it('hides TextInput when "No" is selected', async () => {
+  it('should toggle question info visibility', async () => {
     const user = userEvent.setup();
-    renderQuestionComponent();
+    renderWithFormFieldProvider(<Question checkIfQuestionIdExists={checkIfQuestionIdExists} />);
 
-    const noRadio = screen.getByRole('radio', { name: /No/i });
+    expect(screen.queryByLabelText(/additional question info/i)).not.toBeInTheDocument();
+
+    const yesRadio = screen.getByLabelText(/Yes/i);
+    await user.click(yesRadio);
+
+    expect(screen.getByLabelText(/additional question info/i)).toBeInTheDocument();
+
+    const noRadio = screen.getByLabelText(/No/i);
     await user.click(noRadio);
 
     expect(screen.queryByLabelText(/additional question info/i)).not.toBeInTheDocument();
   });
 
-  it('updates questionInfo state when user types in TextInput', async () => {
+  it('should update question info when input changes', async () => {
     const user = userEvent.setup();
-    renderQuestionComponent();
+    renderWithFormFieldProvider(<Question checkIfQuestionIdExists={checkIfQuestionIdExists} />, {
+      formField: { ...initialFormField, questionInfo: 'Initial info' },
+    });
 
-    const yesRadio = screen.getByRole('radio', { name: /Yes/i });
-    await user.click(yesRadio);
+    const questionInfoInput = screen.getByLabelText(/additional question info/i);
+    await user.clear(questionInfoInput);
+    await user.type(questionInfoInput, 'New question info');
+
+    expect(questionInfoInput).toHaveValue('New question info');
+  });
+
+  it('should toggle question required status', async () => {
+    const user = userEvent.setup();
+    renderWithFormFieldProvider(<Question checkIfQuestionIdExists={checkIfQuestionIdExists} />);
+
+    const optionalRadio = screen.getByLabelText(/optional/i);
+    const requiredRadio = screen.getByLabelText(/required/i);
+
+    expect(optionalRadio).toBeChecked();
+    expect(requiredRadio).not.toBeChecked();
 
-    const textInput = screen.getByLabelText(/additional question info/i);
-    await user.type(textInput, 'New question info');
+    await user.click(requiredRadio);
 
-    expect(textInput).toHaveValue('New question info');
+    expect(requiredRadio).toBeChecked();
+    expect(optionalRadio).not.toBeChecked();
+
+    await user.click(optionalRadio);
+
+    expect(optionalRadio).toBeChecked();
+    expect(requiredRadio).not.toBeChecked();
   });
-});
 
-function renderQuestionComponent() {
-  render(
-    <FormFieldProvider initialFormField={formField}>
-      <Question checkIfQuestionIdExists={checkIfQuestionIdExists} />
-    </FormFieldProvider>,
-  );
-}
+  it('should show only date and datetime rendering types for encounterDatetime question type', async () => {
+    const user = userEvent.setup();
+    renderWithFormFieldProvider(<Question checkIfQuestionIdExists={checkIfQuestionIdExists} />, {
+      formField: { ...initialFormField, type: 'encounterDatetime' },
+    });
+
+    const renderingTypeSelect = screen.getByLabelText(/rendering type/i);
+    expect(renderingTypeSelect).toBeInTheDocument();
+    expect(screen.getByLabelText(/question type/i)).toHaveValue('encounterDatetime');
+
+    const options = (within(renderingTypeSelect).getAllByRole('option') as HTMLOptionElement[]).filter(
+      (option) => option.value && option.value !== '',
+    );
+
+    expect(options).toHaveLength(2);
+    expect(options[0]).toHaveTextContent('date');
+    expect(options[1]).toHaveTextContent('datetime');
+  });
+
+  it('should show only text and markdown rendering types for control question type', async () => {
+    renderWithFormFieldProvider(<Question checkIfQuestionIdExists={checkIfQuestionIdExists} />, {
+      formField: { ...initialFormField, type: 'control' },
+    });
+
+    const renderingTypeSelect = screen.getByLabelText(/rendering type/i);
+    expect(renderingTypeSelect).toBeInTheDocument();
+    expect(screen.getByLabelText(/question type/i)).toHaveValue('control');
+
+    const options = (within(renderingTypeSelect).getAllByRole('option') as HTMLOptionElement[]).filter(
+      (option) => option.value && option.value !== '',
+    );
+
+    expect(options).toHaveLength(2);
+    expect(options[0]).toHaveTextContent('text');
+    expect(options[1]).toHaveTextContent('markdown');
+  });
+
+  it('should show only ui-select-extended rendering type for encounterLocation question type', async () => {
+    renderWithFormFieldProvider(<Question checkIfQuestionIdExists={checkIfQuestionIdExists} />, {
+      formField: { ...initialFormField, type: 'encounterLocation' },
+    });
+
+    const renderingTypeSelect = screen.getByLabelText(/rendering type/i);
+    expect(renderingTypeSelect).toBeInTheDocument();
+    expect(screen.getByLabelText(/question type/i)).toHaveValue('encounterLocation');
+
+    const options = (within(renderingTypeSelect).getAllByRole('option') as HTMLOptionElement[]).filter(
+      (option) => option.value && option.value !== '',
+    );
+
+    expect(options).toHaveLength(1);
+    expect(options[0]).toHaveTextContent('ui-select-extended');
+  });
+
+  it('should show only ui-select-extended rendering type for encounterProvider question type', async () => {
+    renderWithFormFieldProvider(<Question checkIfQuestionIdExists={checkIfQuestionIdExists} />, {
+      formField: { ...initialFormField, type: 'encounterProvider' },
+    });
+
+    const renderingTypeSelect = screen.getByLabelText(/rendering type/i);
+    expect(renderingTypeSelect).toBeInTheDocument();
+    expect(screen.getByLabelText(/question type/i)).toHaveValue('encounterProvider');
+
+    const options = (within(renderingTypeSelect).getAllByRole('option') as HTMLOptionElement[]).filter(
+      (option) => option.value && option.value !== '',
+    );
+
+    expect(options).toHaveLength(1);
+    expect(options[0]).toHaveTextContent('ui-select-extended');
+  });
+
+  it('should show only ui-select-extended rendering type for encounterRole question type', async () => {
+    renderWithFormFieldProvider(<Question checkIfQuestionIdExists={checkIfQuestionIdExists} />, {
+      formField: { ...initialFormField, type: 'encounterRole' },
+    });
+
+    const renderingTypeSelect = screen.getByLabelText(/rendering type/i);
+    expect(renderingTypeSelect).toBeInTheDocument();
+    expect(screen.getByLabelText(/question type/i)).toHaveValue('encounterRole');
+
+    const options = (within(renderingTypeSelect).getAllByRole('option') as HTMLOptionElement[]).filter(
+      (option) => option.value && option.value !== '',
+    );
+
+    expect(options).toHaveLength(1);
+    expect(options[0]).toHaveTextContent('ui-select-extended');
+  });
+
+  it('should show only group and repeating rendering types for obsGroup question type', async () => {
+    renderWithFormFieldProvider(<Question checkIfQuestionIdExists={checkIfQuestionIdExists} />, {
+      formField: { ...initialFormField, type: 'obsGroup' },
+    });
+
+    const renderingTypeSelect = screen.getByLabelText(/rendering type/i);
+    expect(renderingTypeSelect).toBeInTheDocument();
+    expect(screen.getByLabelText(/question type/i)).toHaveValue('obsGroup');
+
+    const options = (within(renderingTypeSelect).getAllByRole('option') as HTMLOptionElement[]).filter(
+      (option) => option.value && option.value !== '',
+    );
+
+    expect(options).toHaveLength(2);
+    expect(options[0]).toHaveTextContent('group');
+    expect(options[1]).toHaveTextContent('repeating');
+  });
+
+  it('should show only group and repeating rendering types for testOrder question type', async () => {
+    renderWithFormFieldProvider(<Question checkIfQuestionIdExists={checkIfQuestionIdExists} />, {
+      formField: { ...initialFormField, type: 'testOrder' },
+    });
+
+    const renderingTypeSelect = screen.getByLabelText(/rendering type/i);
+    expect(renderingTypeSelect).toBeInTheDocument();
+    expect(screen.getByLabelText(/question type/i)).toHaveValue('testOrder');
+
+    const options = (within(renderingTypeSelect).getAllByRole('option') as HTMLOptionElement[]).filter(
+      (option) => option.value && option.value !== '',
+    );
+
+    expect(options).toHaveLength(2);
+    expect(options[0]).toHaveTextContent('group');
+    expect(options[1]).toHaveTextContent('repeating');
+  });
+
+  it('should show only text rendering type for patientIdentifier question type', async () => {
+    renderWithFormFieldProvider(<Question checkIfQuestionIdExists={checkIfQuestionIdExists} />, {
+      formField: { ...initialFormField, type: 'patientIdentifier' },
+    });
+
+    const renderingTypeSelect = screen.getByLabelText(/rendering type/i);
+    expect(renderingTypeSelect).toBeInTheDocument();
+    expect(screen.getByLabelText(/question type/i)).toHaveValue('patientIdentifier');
+
+    const options = (within(renderingTypeSelect).getAllByRole('option') as HTMLOptionElement[]).filter(
+      (option) => option.value && option.value !== '',
+    );
+
+    expect(options).toHaveLength(1);
+    expect(options[0]).toHaveTextContent('text');
+  });
+
+  it('should show only select rendering type for programState question type', async () => {
+    renderWithFormFieldProvider(<Question checkIfQuestionIdExists={checkIfQuestionIdExists} />, {
+      formField: { ...initialFormField, type: 'programState' },
+    });
+
+    const renderingTypeSelect = screen.getByLabelText(/rendering type/i);
+    expect(renderingTypeSelect).toBeInTheDocument();
+    expect(screen.getByLabelText(/question type/i)).toHaveValue('programState');
+
+    const options = (within(renderingTypeSelect).getAllByRole('option') as HTMLOptionElement[]).filter(
+      (option) => option.value && option.value !== '',
+    );
+
+    expect(options).toHaveLength(1);
+    expect(options[0]).toHaveTextContent('select');
+  });
+
+  it('should show all rendering types for obs question type', async () => {
+    renderWithFormFieldProvider(<Question checkIfQuestionIdExists={checkIfQuestionIdExists} />, {
+      formField: { ...initialFormField, type: 'obs' },
+    });
+
+    const renderingTypeSelect = screen.getByLabelText(/rendering type/i);
+    expect(renderingTypeSelect).toBeInTheDocument();
+    expect(screen.getByLabelText(/question type/i)).toHaveValue('obs');
+
+    const options = (within(renderingTypeSelect).getAllByRole('option') as HTMLOptionElement[]).filter(
+      (option) => option.value && option.value !== '',
+    );
+
+    expect(options).toHaveLength(renderingTypes.length);
+
+    const optionTexts = options.map((option) => option.textContent);
+
+    renderingTypes.forEach((renderType) => {
+      expect(optionTexts).toContain(renderType);
+    });
+  });
+
+  it('should load question info from the form field object', () => {
+    renderWithFormFieldProvider(<Question checkIfQuestionIdExists={checkIfQuestionIdExists} />, {
+      formField: { ...initialFormField, questionInfo: 'Initial question info' },
+    });
+
+    expect(screen.getByLabelText(/additional question info/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/additional question info/i)).toHaveValue('Initial question info');
+  });
+
+  it('should not show label and required inputs when rendering type is markdown', () => {
+    renderWithFormFieldProvider(<Question checkIfQuestionIdExists={checkIfQuestionIdExists} />, {
+      formField: {
+        ...initialFormField,
+        questionOptions: {
+          rendering: 'markdown',
+        },
+      },
+    });
+    expect(screen.queryByLabelText(/^label$/i)).not.toBeInTheDocument();
+    expect(screen.queryByText(/is this question a required or optional field/i)).not.toBeInTheDocument();
+  });
+});