Add converting option value to string and number based on type (#233)

* Add converting option value * Formatting and add default type --------- Co-authored-by: Mikhail <mikhail@volkovlabs.io>
VolkovLabs · Aug 21, 2023 · 5d987ad · 5d987ad
1 parent 249e4b0
commit 5d987ad
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -12,6 +12,7 @@
 - Allow empty section name (#228)
 - Add Query Field Picker for Initial Request (#227)
 - Add File element type for File Upload (#229)
+- Add converting option value to string and number based on type (#233)
 
 ## 3.1.0 (2023-08-13)
 

diff --git a/src/components/ElementEditor/ElementEditor.tsx b/src/components/ElementEditor/ElementEditor.tsx
@@ -478,10 +478,19 @@ export const ElementEditor: React.FC<Props> = ({
                 <Select
                   options={SelectElementOptions}
                   onChange={(event: SelectableValue) => {
-                    onChangeOption(element, {
-                      ...option,
-                      type: event?.value,
-                    });
+                    const newValue =
+                      event?.value === FormElementType.NUMBER ? Number(option.value) || 0 : String(option.value);
+
+                    onChangeOption(
+                      element,
+                      {
+                        ...option,
+                        value: newValue,
+                        id: newValue,
+                        type: event?.value,
+                      },
+                      option
+                    );
                   }}
                   width={12}
                   value={SelectElementOptions.find((type) => type.value === option.type)}
@@ -498,6 +507,7 @@ export const ElementEditor: React.FC<Props> = ({
                         {
                           ...option,
                           value: event.target.value,
+                          id: event.target.value,
                         },
                         option,
                         true
@@ -562,11 +572,11 @@ export const ElementEditor: React.FC<Props> = ({
           <Button
             variant="secondary"
             onClick={() => {
+              const newOption = { id: '', value: '', label: '', type: FormElementType.STRING };
+
               onChange({
                 ...element,
-                options: element.options
-                  ? element.options.concat({ id: '', value: '', label: '' })
-                  : [{ id: '', value: '', label: '' }],
+                options: element.options ? element.options.concat(newOption) : [newOption],
               });
             }}
             icon="plus"

diff --git a/src/components/FormElementsEditor/FormElementsEditor.test.tsx b/src/components/FormElementsEditor/FormElementsEditor.test.tsx
@@ -1482,8 +1482,8 @@ describe('Form Elements Editor', () => {
       expect(elementSelectors.fieldOption(false, '')).toBeInTheDocument();
     });
 
-    it('Should update option type', async () => {
-      const originalOption = { label: 'label', type: FormElementType.STRING, value: '111' };
+    it('Should update option type to number and convert value', async () => {
+      const originalOption = { label: 'label', type: FormElementType.STRING, value: '123' };
       const element = { ...FormElementDefault, id: 'select', type: FormElementType.SELECT, options: [originalOption] };
       const elements = [element];
 
@@ -1506,6 +1506,73 @@ describe('Form Elements Editor', () => {
 
       const elementOptionSelectors = getFormElementsEditorSelectors(within(elementOption));
       expect(elementOptionSelectors.fieldOptionType()).toHaveValue(FormElementType.NUMBER);
+
+      /**
+       * Value should be number
+       */
+      expect(elementOptionSelectors.fieldOptionNumberValue()).toHaveValue(123);
+    });
+
+    it('Should update option type to number and use default value if NaN', async () => {
+      const originalOption = { label: 'label', type: FormElementType.STRING, value: 'abc' };
+      const element = { ...FormElementDefault, id: 'select', type: FormElementType.SELECT, options: [originalOption] };
+      const elements = [element];
+
+      render(getComponent({ value: elements, onChange }));
+
+      /**
+       * Open select element
+       */
+      const elementSelectors = openElement(element.id, element.type);
+
+      /**
+       * Change option type
+       */
+      await act(() =>
+        fireEvent.change(elementSelectors.fieldOptionType(), { target: { value: FormElementType.NUMBER } })
+      );
+
+      const elementOption = elementSelectors.fieldOption(false, '0');
+      expect(elementOption).toBeInTheDocument();
+
+      const elementOptionSelectors = getFormElementsEditorSelectors(within(elementOption));
+      expect(elementOptionSelectors.fieldOptionType()).toHaveValue(FormElementType.NUMBER);
+
+      /**
+       * Value should be number
+       */
+      expect(elementOptionSelectors.fieldOptionNumberValue()).toHaveValue(0);
+    });
+
+    it('Should update option type to string and convert value', async () => {
+      const originalOption = { label: 'label', type: FormElementType.NUMBER, value: 123 };
+      const element = { ...FormElementDefault, id: 'select', type: FormElementType.SELECT, options: [originalOption] };
+      const elements = [element];
+
+      render(getComponent({ value: elements, onChange }));
+
+      /**
+       * Open select element
+       */
+      const elementSelectors = openElement(element.id, element.type);
+
+      /**
+       * Change option type
+       */
+      await act(() =>
+        fireEvent.change(elementSelectors.fieldOptionType(), { target: { value: FormElementType.STRING } })
+      );
+
+      const elementOption = elementSelectors.fieldOption(false, originalOption.value.toString());
+      expect(elementOption).toBeInTheDocument();
+
+      const elementOptionSelectors = getFormElementsEditorSelectors(within(elementOption));
+      expect(elementOptionSelectors.fieldOptionType()).toHaveValue(FormElementType.STRING);
+
+      /**
+       * Value should be string
+       */
+      expect(elementOptionSelectors.fieldOptionValue()).toHaveValue('123');
     });
 
     it('Should update option value for STRING option', async () => {