From 3e3604935cb73465df4d5cbf75cf107781b0c363 Mon Sep 17 00:00:00 2001
From: Nethmi Rodrigo <neth23rodrigo@gmail.com>
Date: Fri, 29 Nov 2024 16:52:57 +0530
Subject: [PATCH] (test)  Add unit tests for rendering types

---
 .eslintrc                                     |  8 +-
 .../modals/delete-form}/delete-form.modal.tsx |  0
 .../modals/delete-form}/delete-form.scss      |  0
 .../inputs/date/date.component.tsx            |  1 +
 .../rendering-types/inputs/date/date.test.tsx | 48 ++++++++++
 .../inputs/number/number.component.tsx        |  4 +-
 .../inputs/number/number.test.tsx             | 76 ++++++++++++++++
 .../inputs/text-area/textarea.component.tsx   |  7 +-
 .../inputs/text-area/textarea.test.tsx        | 50 +++++++++++
 .../rendering-types/inputs/text/text.test.tsx | 62 +++++++++++++
 .../inputs/toggle/toggle.test.tsx             | 49 ++++++++++
 .../ui-select-extended.component.tsx          | 12 +--
 .../ui-select-extended.test.tsx               | 49 ++++++++++
 .../rendering-types/rendering-type.test.tsx   | 90 +++++++++++++++++++
 src/index.ts                                  |  5 +-
 translations/en.json                          |  2 +-
 webpack.config.js                             |  1 -
 17 files changed, 448 insertions(+), 16 deletions(-)
 rename src/components/{dashboard => interactive-builder/modals/delete-form}/delete-form.modal.tsx (100%)
 rename src/components/{dashboard => interactive-builder/modals/delete-form}/delete-form.scss (100%)
 create mode 100644 src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/date/date.test.tsx
 create mode 100644 src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/number/number.test.tsx
 create mode 100644 src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/text-area/textarea.test.tsx
 create mode 100644 src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/text/text.test.tsx
 create mode 100644 src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/toggle/toggle.test.tsx
 create mode 100644 src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/ui-select-extended/ui-select-extended.test.tsx
 create mode 100644 src/components/interactive-builder/modals/question/question-form/rendering-types/rendering-type.test.tsx

diff --git a/.eslintrc b/.eslintrc
index eef523ff..7f954dcc 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -4,7 +4,6 @@
   },
   "extends": [
     "eslint:recommended",
-    "plugin:playwright/recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:@typescript-eslint/recommended-requiring-type-checking",
     "plugin:jest-dom/recommended",
@@ -17,6 +16,13 @@
   },
   "plugins": ["@typescript-eslint", "import", "react-hooks", "testing-library"],
   "root": true,
+  "overrides": [
+    {
+      "files": ["e2e/**"],
+      "excludedFiles":["src/**"],
+      "extends": ["plugin:playwright/recommended"]
+    }
+  ],
   "rules": {
     "import/no-duplicates": "error",
     "react-hooks/exhaustive-deps": "warn",
diff --git a/src/components/dashboard/delete-form.modal.tsx b/src/components/interactive-builder/modals/delete-form/delete-form.modal.tsx
similarity index 100%
rename from src/components/dashboard/delete-form.modal.tsx
rename to src/components/interactive-builder/modals/delete-form/delete-form.modal.tsx
diff --git a/src/components/dashboard/delete-form.scss b/src/components/interactive-builder/modals/delete-form/delete-form.scss
similarity index 100%
rename from src/components/dashboard/delete-form.scss
rename to src/components/interactive-builder/modals/delete-form/delete-form.scss
diff --git a/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/date/date.component.tsx b/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/date/date.component.tsx
index 9cc4beda..3daca0c9 100644
--- a/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/date/date.component.tsx
+++ b/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/date/date.component.tsx
@@ -24,6 +24,7 @@ const Date: React.FC<ComponentProps> = ({ formField, setFormField }) => {
         .flat()
         .map((type) => (
           <RadioButton
+            key={`date-picker-type-${type.value}`}
             id={type.value}
             checked={formField.datePickerFormat && formField.datePickerFormat === type.value}
             labelText={type.label}
diff --git a/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/date/date.test.tsx b/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/date/date.test.tsx
new file mode 100644
index 00000000..289123ca
--- /dev/null
+++ b/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/date/date.test.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Date from './date.component';
+import type { FormField } from '@openmrs/esm-form-engine-lib';
+import userEvent from '@testing-library/user-event';
+
+const mockSetFormField = jest.fn();
+const formField: FormField = {
+  datePickerFormat: 'both',
+  type: 'obs',
+  questionOptions: { rendering: 'date' },
+  id: '1',
+};
+
+describe('Date Component', () => {
+  it('renders', () => {
+    renderDateComponent();
+
+    expect(screen.getByText(/the type of date picker to show/i)).toBeInTheDocument();
+  });
+
+  it('checks the default radio button based on date picker format', () => {
+    renderDateComponent();
+
+    const calendarAndTimerRadioButton = screen.getByRole('radio', {
+      name: /calendar and timer/i,
+    });
+
+    expect(calendarAndTimerRadioButton).toBeChecked();
+  });
+
+  it('updates the form field when the date picker type is changed', async () => {
+    renderDateComponent();
+
+    const user = userEvent.setup();
+    const calendarRadioButton = screen.getByRole('radio', { name: /calendar only/i });
+    await user.click(calendarRadioButton);
+
+    expect(mockSetFormField).toHaveBeenCalledWith({
+      ...formField,
+      datePickerFormat: 'calendar',
+    });
+  });
+});
+
+function renderDateComponent() {
+  render(<Date formField={formField} setFormField={mockSetFormField} />);
+}
diff --git a/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/number/number.component.tsx b/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/number/number.component.tsx
index d2fc9ec1..652cff57 100644
--- a/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/number/number.component.tsx
+++ b/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/number/number.component.tsx
@@ -10,7 +10,7 @@ const Number: React.FC<ComponentProps> = ({ formField, setFormField }) => {
     <>
       <TextInput
         id="min"
-        labelText="Min"
+        labelText="Min value that can be entered"
         value={formField.questionOptions?.min ?? ''}
         invalid={parseFloat(formField.questionOptions?.min ?? '') > parseFloat(formField.questionOptions?.max ?? '')}
         invalidText={
@@ -28,7 +28,7 @@ const Number: React.FC<ComponentProps> = ({ formField, setFormField }) => {
       />
       <TextInput
         id="max"
-        labelText="Max"
+        labelText="Max value that can be entered"
         value={formField.questionOptions?.max ?? ''}
         invalid={parseFloat(formField.questionOptions?.min ?? '') > parseFloat(formField.questionOptions?.max ?? '')}
         invalidText={
diff --git a/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/number/number.test.tsx b/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/number/number.test.tsx
new file mode 100644
index 00000000..e93c26a3
--- /dev/null
+++ b/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/number/number.test.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import Number from './number.component';
+import type { FormField } from '@openmrs/esm-form-engine-lib';
+
+const mockSetFormField = jest.fn();
+const formField: FormField = {
+  type: 'obs',
+  questionOptions: { rendering: 'number', min: '1', max: '10' },
+  id: '1',
+};
+
+describe('Number Component', () => {
+  it('renders', () => {
+    renderNumberComponent();
+
+    expect(screen.getByText(/min value that can be entered/i)).toBeInTheDocument();
+    expect(screen.getByText(/max value that can be entered/i)).toBeInTheDocument();
+  });
+
+  it('shows the default min and max values', () => {
+    renderNumberComponent();
+
+    const minInput = screen.getByRole('textbox', {
+      name: /min/i,
+    });
+    const maxInput = screen.getByRole('textbox', {
+      name: /max/i,
+    });
+
+    expect(minInput).toHaveValue('1');
+    expect(maxInput).toHaveValue('10');
+  });
+
+  it('updates the form field when the min or max value is changed', async () => {
+    formField.questionOptions.min = '';
+    formField.questionOptions.max = '';
+    renderNumberComponent();
+    const user = userEvent.setup();
+
+    const minInput = screen.getByRole('textbox', { name: /min value that can be entered/i });
+    await user.type(minInput, '5');
+    expect(mockSetFormField).toHaveBeenCalledWith({
+      ...formField,
+      questionOptions: { ...formField.questionOptions, min: '5' },
+    });
+
+    const maxInput = screen.getByRole('textbox', { name: /max value that can be entered/i });
+    await user.type(maxInput, '6');
+    expect(mockSetFormField).toHaveBeenLastCalledWith({
+      ...formField,
+      questionOptions: { ...formField.questionOptions, max: '6' },
+    });
+  });
+
+  it('shows the invalid min and max values', () => {
+    formField.questionOptions.min = '4';
+    formField.questionOptions.max = '3';
+    renderNumberComponent();
+
+    const minInput = screen.getByRole('textbox', {
+      name: /min value that can be entered/i,
+    });
+    const maxInput = screen.getByRole('textbox', {
+      name: /max value that can be entered/i,
+    });
+
+    expect(minInput).toHaveClass('cds--text-input--invalid');
+    expect(maxInput).toHaveClass('cds--text-input--invalid');
+  });
+});
+
+function renderNumberComponent() {
+  render(<Number formField={formField} setFormField={mockSetFormField} />);
+}
diff --git a/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/text-area/textarea.component.tsx b/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/text-area/textarea.component.tsx
index 60c57e0c..7e0c38c8 100644
--- a/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/text-area/textarea.component.tsx
+++ b/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/text-area/textarea.component.tsx
@@ -1,17 +1,16 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { NumberInput } from '@carbon/react';
+import { TextInput } from '@carbon/react';
 import type { FormField } from '@openmrs/esm-form-engine-lib';
 import type { ComponentProps } from '@types';
 
 const TextArea: React.FC<ComponentProps> = ({ formField, setFormField }) => {
   const { t } = useTranslation();
   return (
-    <NumberInput
+    <TextInput
       id="textAreaRows"
       labelText={t('rows', 'Rows')}
-      value={formField.questionOptions?.rows ?? ''}
-      hideSteppers={true}
+      value={formField.questionOptions?.rows ? formField.questionOptions.rows.toString() : ''}
       onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
         const updatedQuestion: FormField = {
           ...formField,
diff --git a/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/text-area/textarea.test.tsx b/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/text-area/textarea.test.tsx
new file mode 100644
index 00000000..dfb9fee0
--- /dev/null
+++ b/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/text-area/textarea.test.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import TextArea from './textarea.component';
+import type { FormField } from '@openmrs/esm-form-engine-lib';
+import userEvent from '@testing-library/user-event';
+
+const mockSetFormField = jest.fn();
+const formField: FormField = {
+  datePickerFormat: 'both',
+  type: 'obs',
+  questionOptions: { rendering: 'textarea', rows: 5 },
+  id: '1',
+};
+
+describe('Text Component', () => {
+  it('renders', () => {
+    renderTextComponent();
+
+    expect(screen.getByText(/rows/i)).toBeInTheDocument();
+  });
+
+  it('shows the default rows value', () => {
+    renderTextComponent();
+
+    const rowsInput = screen.getByRole('textbox', {
+      name: /rows/i,
+    });
+
+    expect(rowsInput).toHaveValue('5');
+  });
+
+  it('updates the form field when the rows value is changed', async () => {
+    formField.questionOptions.rows = 0;
+    renderTextComponent();
+    const user = userEvent.setup();
+    const rowsInput = screen.getByRole('textbox', {
+      name: /rows/i,
+    });
+    await user.type(rowsInput, '8');
+
+    expect(mockSetFormField).toHaveBeenCalledWith({
+      ...formField,
+      questionOptions: { ...formField.questionOptions, rows: 8 },
+    });
+  });
+});
+
+function renderTextComponent() {
+  render(<TextArea formField={formField} setFormField={mockSetFormField} />);
+}
diff --git a/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/text/text.test.tsx b/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/text/text.test.tsx
new file mode 100644
index 00000000..03985264
--- /dev/null
+++ b/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/text/text.test.tsx
@@ -0,0 +1,62 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Text from './text.component';
+import type { FormField } from '@openmrs/esm-form-engine-lib';
+import userEvent from '@testing-library/user-event';
+
+const mockSetFormField = jest.fn();
+const formField: FormField = {
+  datePickerFormat: 'both',
+  type: 'obs',
+  questionOptions: { rendering: 'text', minLength: '1', maxLength: '10' },
+  id: '1',
+};
+
+describe('Text Component', () => {
+  it('renders', () => {
+    renderTextComponent();
+
+    expect(screen.getByText(/min length of characters/i)).toBeInTheDocument();
+    expect(screen.getByText(/max length of characters/i)).toBeInTheDocument();
+  });
+
+  it('shows the default min and max values', () => {
+    renderTextComponent();
+
+    const minInput = screen.getByRole('textbox', {
+      name: /min length of characters/i,
+    });
+    const maxInput = screen.getByRole('textbox', {
+      name: /max length of characters/i,
+    });
+
+    expect(minInput).toHaveValue('1');
+    expect(maxInput).toHaveValue('10');
+  });
+
+  it('updates the form field when the min or max value is changed', async () => {
+    formField.questionOptions.minLength = '';
+    formField.questionOptions.maxLength = '';
+    const user = userEvent.setup();
+
+    renderTextComponent();
+
+    const minInput = screen.getByRole('textbox', { name: /min length of characters/i });
+    await user.type(minInput, '5');
+    expect(mockSetFormField).toHaveBeenCalledWith({
+      ...formField,
+      questionOptions: { ...formField.questionOptions, minLength: '5' },
+    });
+
+    const maxInput = screen.getByRole('textbox', { name: /max length of characters/i });
+    await user.type(maxInput, '6');
+    expect(mockSetFormField).toHaveBeenLastCalledWith({
+      ...formField,
+      questionOptions: { ...formField.questionOptions, maxLength: '6' },
+    });
+  });
+});
+
+function renderTextComponent() {
+  render(<Text formField={formField} setFormField={mockSetFormField} />);
+}
diff --git a/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/toggle/toggle.test.tsx b/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/toggle/toggle.test.tsx
new file mode 100644
index 00000000..f26d2f5e
--- /dev/null
+++ b/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/toggle/toggle.test.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import Toggle from './toggle.component';
+import type { FormField } from '@openmrs/esm-form-engine-lib';
+
+const mockSetFormField = jest.fn();
+const formField: FormField = {
+  datePickerFormat: 'both',
+  type: 'obs',
+  questionOptions: { rendering: 'toggle', toggleOptions: { labelTrue: 'True', labelFalse: 'False' } },
+  id: '1',
+};
+
+describe('Toggle Component', () => {
+  it('renders', () => {
+    renderToggleComponent();
+
+    expect(screen.getByText(/label true/i)).toBeInTheDocument();
+    expect(screen.getByText(/label false/i)).toBeInTheDocument();
+  });
+
+  it('shows the default labelTrue and labelFalse values', () => {
+    renderToggleComponent();
+
+    const labelTrue = screen.getByRole('textbox', { name: /label true/i });
+    const labelFalse = screen.getByRole('textbox', { name: /label false/i });
+
+    expect(labelTrue).toHaveValue('True');
+    expect(labelFalse).toHaveValue('False');
+  });
+
+  it('updates the form field when the labelTrue value is changed', () => {
+    formField.questionOptions.toggleOptions.labelTrue = '';
+    renderToggleComponent();
+
+    const labelTrueInput = screen.getByRole('textbox', { name: /label true/i });
+
+    fireEvent.input(labelTrueInput, { target: { value: 'Yes' } });
+
+    expect(mockSetFormField).toHaveBeenLastCalledWith({
+      ...formField,
+      questionOptions: { ...formField.questionOptions, toggleOptions: { labelTrue: 'Yes', labelFalse: 'False' } },
+    });
+  });
+});
+
+function renderToggleComponent() {
+  render(<Toggle formField={formField} setFormField={mockSetFormField} />);
+}
diff --git a/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/ui-select-extended/ui-select-extended.component.tsx b/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/ui-select-extended/ui-select-extended.component.tsx
index 029e645a..c58a3593 100644
--- a/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/ui-select-extended/ui-select-extended.component.tsx
+++ b/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/ui-select-extended/ui-select-extended.component.tsx
@@ -9,13 +9,13 @@ const UiSelectExtended: React.FC<ComponentProps> = ({ formField, setFormField })
   return (
     <>
       <RadioButtonGroup
-        defaultSelected="optional"
+        defaultSelected="notSearchable"
         name="isUiSelectSearchable"
-        legendText={t('is', 'Is the ui-select-extended rendering searchable')}
+        legendText={t('isUiSelectSearchable', 'Is the ui-select-extended rendering searchable')}
       >
         <RadioButton
           id="uiSelectNotSearchable"
-          defaultChecked={!formField.questionOptions?.isSearchable}
+          checked={!formField.questionOptions?.isSearchable}
           labelText={t('notSearchable', 'Not Searchable')}
           onClick={() => {
             const updatedQuestion: FormField = {
@@ -24,11 +24,11 @@ const UiSelectExtended: React.FC<ComponentProps> = ({ formField, setFormField })
             };
             setFormField(updatedQuestion);
           }}
-          value="optional"
+          value="notSearchable"
         />
         <RadioButton
           id="uiSelectSearchable"
-          defaultChecked={formField.questionOptions?.isSearchable}
+          checked={formField.questionOptions?.isSearchable}
           labelText={t('searchable', 'Searchable')}
           onClick={() => {
             const updatedQuestion: FormField = {
@@ -37,7 +37,7 @@ const UiSelectExtended: React.FC<ComponentProps> = ({ formField, setFormField })
             };
             setFormField(updatedQuestion);
           }}
-          value="required"
+          value="searchable"
         />
       </RadioButtonGroup>
     </>
diff --git a/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/ui-select-extended/ui-select-extended.test.tsx b/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/ui-select-extended/ui-select-extended.test.tsx
new file mode 100644
index 00000000..406c4063
--- /dev/null
+++ b/src/components/interactive-builder/modals/question/question-form/rendering-types/inputs/ui-select-extended/ui-select-extended.test.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import UiSelectExtended from './ui-select-extended.component';
+import type { FormField } from '@openmrs/esm-form-engine-lib';
+import userEvent from '@testing-library/user-event';
+
+const mockSetFormField = jest.fn();
+const formField: FormField = {
+  datePickerFormat: 'both',
+  type: 'obs',
+  questionOptions: { rendering: 'ui-select-extended', isSearchable: false },
+  id: '1',
+};
+
+describe('UiSelectExtended Component', () => {
+  it('renders', () => {
+    renderUiSelectExtendedComponent();
+
+    expect(screen.getByText(/is the ui-select-extended rendering searchable/i)).toBeInTheDocument();
+  });
+
+  it('shows the default isSearchable value', () => {
+    renderUiSelectExtendedComponent();
+
+    const notSearchableRadioButton = screen.getByRole('radio', { name: /not searchable/i });
+
+    expect(notSearchableRadioButton).toBeChecked();
+  });
+
+  it('updates the form field when the isSearchable value is changed', async () => {
+    formField.questionOptions.isSearchable = true;
+    const user = userEvent.setup();
+    renderUiSelectExtendedComponent();
+
+    const searchableRadioButton = screen.getByRole('radio', {
+      name: /not searchable/i,
+    });
+    await user.click(searchableRadioButton);
+
+    expect(mockSetFormField).toHaveBeenCalledWith({
+      ...formField,
+      questionOptions: { ...formField.questionOptions, isSearchable: false },
+    });
+  });
+});
+
+function renderUiSelectExtendedComponent() {
+  render(<UiSelectExtended formField={formField} setFormField={mockSetFormField} />);
+}
diff --git a/src/components/interactive-builder/modals/question/question-form/rendering-types/rendering-type.test.tsx b/src/components/interactive-builder/modals/question/question-form/rendering-types/rendering-type.test.tsx
new file mode 100644
index 00000000..f2c7d981
--- /dev/null
+++ b/src/components/interactive-builder/modals/question/question-form/rendering-types/rendering-type.test.tsx
@@ -0,0 +1,90 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import RenderingTypeComponent from './rendering-type.component';
+import type { FormField } from '@openmrs/esm-form-engine-lib';
+
+const mockSetFormField = jest.fn();
+const formField: FormField = {
+  datePickerFormat: 'both',
+  type: 'obs',
+  questionOptions: { rendering: 'date' },
+  id: '1',
+};
+
+describe('RenderingType Component', () => {
+  it('renders the date component for rendering type date', () => {
+    renderRenderingTypeComponent();
+
+    const dateComponent = screen.getByText(/the type of date picker to show/i);
+
+    expect(dateComponent).toBeInTheDocument();
+  });
+
+  it('renders the textarea component for rendering type textarea', () => {
+    formField.questionOptions.rendering = 'textarea';
+    renderRenderingTypeComponent();
+
+    const textareaComponent = screen.getByText(/rows/i);
+
+    expect(textareaComponent).toBeInTheDocument();
+  });
+
+  it('renders the toggle component for rendering type toggle', () => {
+    formField.questionOptions.rendering = 'toggle';
+    renderRenderingTypeComponent();
+
+    const toggleComponentLabelTrue = screen.getByText(/label true/i);
+    const toggleComponentLabelFalse = screen.getByText(/label false/i);
+
+    expect(toggleComponentLabelTrue).toBeInTheDocument();
+    expect(toggleComponentLabelFalse).toBeInTheDocument();
+  });
+
+  it('renders the text component for rendering type text', () => {
+    formField.questionOptions.rendering = 'text';
+    renderRenderingTypeComponent();
+
+    const textComponentMinLength = screen.getByText(/min length/i);
+    const textComponentMaxLength = screen.getByText(/max length/i);
+
+    expect(textComponentMinLength).toBeInTheDocument();
+    expect(textComponentMaxLength).toBeInTheDocument();
+  });
+
+  it('renders the ui-select component for rendering type number', () => {
+    formField.questionOptions.rendering = 'number';
+    renderRenderingTypeComponent();
+
+    const numberComponentMin = screen.getByText(/min value that can be entered/i);
+    const numberComponentMax = screen.getByText(/max value that can be entered/i);
+
+    expect(numberComponentMin).toBeInTheDocument();
+    expect(numberComponentMax).toBeInTheDocument();
+  });
+
+  it('renders the ui-select-extended component for rendering type ui-select-extended', () => {
+    formField.questionOptions.rendering = 'ui-select-extended';
+    renderRenderingTypeComponent();
+
+    const uiSelectExtendedComponent = screen.getByText(/is the ui-select-extended rendering searchable/i);
+
+    expect(uiSelectExtendedComponent).toBeInTheDocument();
+  });
+
+  it('renders component only if rendering type is allowed', () => {
+    const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
+    formField.type = 'encounterLocation';
+    formField.questionOptions.rendering = 'date';
+    renderRenderingTypeComponent();
+
+    expect(screen.queryByText(/the type of date picker to show/i)).not.toBeInTheDocument();
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      `No component found for rendering type: ${formField.questionOptions.rendering} or a rendering type is not available for ${formField.type}`,
+    );
+    consoleErrorSpy.mockRestore();
+  });
+});
+
+function renderRenderingTypeComponent() {
+  render(<RenderingTypeComponent formField={formField} setFormField={mockSetFormField} />);
+}
diff --git a/src/index.ts b/src/index.ts
index ee9b4cc7..1da63b73 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -62,7 +62,10 @@ export const unpublishFormModal = getAsyncLifecycle(
   options,
 );
 
-export const deleteFormModal = getAsyncLifecycle(() => import('./components/dashboard/delete-form.modal'), options);
+export const deleteFormModal = getAsyncLifecycle(
+  () => import('./components/interactive-builder/modals/delete-form/delete-form.modal'),
+  options,
+);
 
 export function startupApp() {
   defineConfigSchema(moduleName, configSchema);
diff --git a/translations/en.json b/translations/en.json
index 35b1a7a6..24d859d8 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -109,8 +109,8 @@
   "interactiveBuilderHelperText": "The Interactive Builder lets you build your form schema without writing JSON code. The Preview tab automatically updates as you build your form. When done, click Save Form to save your form.",
   "invalidMinMax": "Min value cannot be greater than max",
   "invalidVersionWarning": "Version can only start with with a number",
-  "is": "Is the ui-select-extended rendering searchable",
   "isQuestionRequiredOrOptional": "Is this question a required or optional field? Required fields must be answered before the form can be submitted.",
+  "isUiSelectSearchable": "Is the ui-select-extended rendering searchable",
   "labelFalse": "Label false",
   "labelPlaceholder": "e.g. Type of Anaesthesia",
   "labelTrue": "Label true",
diff --git a/webpack.config.js b/webpack.config.js
index d16d91c7..998f4863 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,7 +1,6 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const path = require('path');
 const config = (module.exports = require('openmrs/default-webpack-config'));
-config.scriptRuleConfig.exclude = /(node_modules(?![/\\]@(?:openmrs|ohri)))/;
 config.overrides.resolve = {
   extensions: ['.tsx', '.ts', '.jsx', '.js', '.scss', '.json'],
   alias: {