Add tests

VolkovLabs · Nov 20, 2023 · fbcb679 · fbcb679
1 parent 9b2642a
commit fbcb679
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 35 deletions.
diff --git a/src/components/FormElement/FormElement.tsx b/src/components/FormElement/FormElement.tsx
@@ -98,7 +98,9 @@ export const FormElement: React.FC<Props> = ({ element, onChange, highlightClass
           labelWidth={ApplyWidth(element.labelWidth)}
           tooltip={element.tooltip}
           transparent={!element.title}
-          className={cx(element.hidden && styles.hidden)}
+          className={cx({
+            [styles.hidden]: element.hidden,
+          })}
         >
           <Input
             value={element.value || ''}
@@ -171,7 +173,7 @@ export const FormElement: React.FC<Props> = ({ element, onChange, highlightClass
           transparent={!element.title}
         >
           <TextArea
-            value={element.value || ''}
+            value={element.value}
             onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {
               onChange<typeof element>({
                 ...element,
@@ -196,17 +198,11 @@ export const FormElement: React.FC<Props> = ({ element, onChange, highlightClass
           disabled={element.type === FormElementType.DISABLED_TEXTAREA}
         >
           <TextArea
-            value={element.value || ''}
-            onChange={(event: ChangeEvent<HTMLTextAreaElement>) => {
-              onChange<typeof element>({
-                ...element,
-                value: event.target.value,
-              });
-            }}
+            value={element.value}
             className={highlightClass(element)}
             cols={ApplyWidth(element.width)}
             rows={element.rows}
-            data-testid={TestIds.formElements.fieldTextarea}
+            data-testid={TestIds.formElements.fieldDisabledTextarea}
           />
         </InlineField>
       )}

diff --git a/src/components/FormElements/FormElements.test.tsx b/src/components/FormElements/FormElements.test.tsx
@@ -85,6 +85,7 @@ describe('Form Elements', () => {
         },
         { id: 'file', type: FormElementType.FILE },
         { id: 'highlighted', type: FormElementType.STRING, value: 'hello' },
+        { id: 'disabledTextarea', type: FormElementType.DISABLED_TEXTAREA, value: 'hello' },
       ],
     };
 
@@ -122,6 +123,10 @@ describe('Form Elements', () => {
       expect(selectors.fieldTextarea()).toBeInTheDocument();
     });
 
+    it('Should render disabled textarea field', () => {
+      expect(selectors.fieldDisabledTextarea()).toBeInTheDocument();
+    });
+
     it('Should render code field', () => {
       expect(selectors.fieldCode()).toBeInTheDocument();
     });

diff --git a/src/components/FormElementsEditor/FormElementsEditor.test.tsx b/src/components/FormElementsEditor/FormElementsEditor.test.tsx
@@ -798,6 +798,25 @@ describe('Form Elements Editor', () => {
         expect(elementSelectors.fieldType()).toHaveValue(FormElementType.DATETIME);
       });
 
+      it('Should update type to boolean', async () => {
+        const element = { ...FormElementDefault, id: 'id', type: FormElementType.STRING };
+        const elements = [element];
+
+        render(getComponent({ value: elements, onChange }));
+
+        /**
+         * Open id element
+         */
+        const elementSelectors = openElement(element.id, element.type);
+
+        /**
+         * Change type
+         */
+        await act(() => fireEvent.change(elementSelectors.fieldType(), { target: { value: FormElementType.BOOLEAN } }));
+
+        expect(elementSelectors.fieldType()).toHaveValue(FormElementType.BOOLEAN);
+      });
+
       it('Should not update Type if element with the same id and type exists', async () => {
         const elementOne = { ...FormElementDefault, id: 'id', type: FormElementType.STRING };
         const elementTwo = { ...FormElementDefault, id: 'id', type: FormElementType.NUMBER };
@@ -1939,7 +1958,7 @@ describe('Form Elements Editor', () => {
     describe('Option order', () => {
       it('Should reorder items', async () => {
         let onDragEndHandler: (result: DropResult) => void = () => {};
-        jest.mocked(DragDropContext).mockImplementation(({ children, onDragEnd, key }: any) => {
+        jest.mocked(DragDropContext).mockImplementation(({ children, onDragEnd }: any) => {
           if (children.props.droppableId === 'options') {
             onDragEndHandler = onDragEnd;
           }
@@ -1992,7 +2011,7 @@ describe('Form Elements Editor', () => {
 
       it('Should not reorder items if drop outside the list', async () => {
         let onDragEndHandler: (result: DropResult) => void = () => {};
-        jest.mocked(DragDropContext).mockImplementation(({ children, onDragEnd, key }: any) => {
+        jest.mocked(DragDropContext).mockImplementation(({ children, onDragEnd }: any) => {
           if (children.props.droppableId === 'options') {
             onDragEndHandler = onDragEnd;
           }

diff --git a/src/constants/default.ts b/src/constants/default.ts
@@ -121,6 +121,7 @@ export const SliderDefault: SliderOptions = {
 export const CodeDefault: CodeOptions = {
   height: CodeEditorHeight,
   language: CodeLanguage.JAVASCRIPT,
+  value: '',
 };
 
 /**

diff --git a/src/constants/tests.ts b/src/constants/tests.ts
@@ -38,6 +38,7 @@ export const TestIds = {
     fieldPassword: 'data-testid form-elements field-password',
     fieldDisabled: 'data-testid form-elements field-disabled',
     fieldTextarea: 'data-testid form-elements field-textarea',
+    fieldDisabledTextarea: 'data-testid form-elements field-disabled-textarea',
     /**
      * Default Code Editor aria label selector
      * https://github.com/grafana/grafana/blob/6a12673f8b0e07bc2aeeed70defc461fdf93bca8/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx#L148

diff --git a/src/types/form-element.ts b/src/types/form-element.ts
@@ -144,7 +144,7 @@ export interface CodeOptions {
    *
    * @type {string}
    */
-  value?: string;
+  value: string;
 }
 
 /**
@@ -296,7 +296,7 @@ export interface DateTimeOptions {
    *
    * @type {string}
    */
-  value: string;
+  value?: string;
 }
 
 /**

diff --git a/src/utils/form-element.test.ts b/src/utils/form-element.test.ts
@@ -1,5 +1,6 @@
-import { Reorder, ConvertToElementValue } from './form-element';
+import { ConvertToElementValue, GetButtonVariant, Reorder } from './form-element';
 import { FormElementType } from '../constants';
+import { ButtonVariant } from '../types';
 
 describe('Utils', () => {
   describe('Reorder', () => {
@@ -121,6 +122,22 @@ describe('Utils', () => {
           },
         ],
       },
+      {
+        name: 'Should convert value for datetime element',
+        element: {
+          type: FormElementType.DATETIME,
+        },
+        testCases: [
+          {
+            original: 'abc',
+            expected: 'abc',
+          },
+          {
+            original: 123,
+            expected: undefined,
+          },
+        ],
+      },
     ])('$name', ({ element, testCases }) => {
       testCases.forEach(({ original, expected }) => {
         expect(ConvertToElementValue(element as never, original)).toEqual({
@@ -130,4 +147,17 @@ describe('Utils', () => {
       });
     });
   });
+
+  describe('GetButtonVariant', () => {
+    it('Should return allowed variants', () => {
+      expect(GetButtonVariant(ButtonVariant.DESTRUCTIVE)).toEqual(ButtonVariant.DESTRUCTIVE);
+      expect(GetButtonVariant(ButtonVariant.PRIMARY)).toEqual(ButtonVariant.PRIMARY);
+      expect(GetButtonVariant(ButtonVariant.SECONDARY)).toEqual(ButtonVariant.SECONDARY);
+    });
+
+    it('Should filter not allowed variant', () => {
+      expect(GetButtonVariant(ButtonVariant.CUSTOM)).toBeUndefined();
+      expect(GetButtonVariant(ButtonVariant.HIDDEN)).toBeUndefined();
+    });
+  });
 });
diff --git a/src/utils/form-element.ts b/src/utils/form-element.ts
@@ -1,4 +1,5 @@
 import { InterpolateFunction, SelectableValue } from '@grafana/data';
+import { ButtonVariant as GrafanaButtonVariant } from '@grafana/ui';
 import { v4 as uuidv4 } from 'uuid';
 
 import {
@@ -85,7 +86,6 @@ export const GetElementWithNewType = (
       return {
         ...baseValues,
         ...CodeDefault,
-        value: typeof baseValues.value === 'string' ? baseValues.value : '',
         type: newType,
       };
     }
@@ -115,22 +115,17 @@ export const GetElementWithNewType = (
     case FormElementType.FILE: {
       return {
         ...baseValues,
-        value: baseValues.value as File[] | null,
+        value: [],
         accept: '',
         type: newType,
       };
     }
-    case FormElementType.DATETIME: {
-      return {
-        ...baseValues,
-        value: typeof baseValues.value === 'string' ? baseValues.value : '',
-        type: newType,
-      };
-    }
-    case FormElementType.PASSWORD: {
+    case FormElementType.DATETIME:
+    case FormElementType.PASSWORD:
+    case FormElementType.SECRET: {
       return {
         ...baseValues,
-        value: typeof baseValues.value === 'string' ? baseValues.value : '',
+        value: '',
         type: newType,
       };
     }
@@ -141,13 +136,6 @@ export const GetElementWithNewType = (
         type: newType,
       };
     }
-    case FormElementType.SECRET: {
-      return {
-        ...baseValues,
-        value: typeof baseValues.value === 'string' ? baseValues.value : '',
-        type: newType,
-      };
-    }
   }
 };
 
@@ -324,7 +312,7 @@ export const GetInitialValuesMap = (elements: LocalFormElement[]): Record<string
 /**
  * Get Button Variant
  */
-export const GetButtonVariant = (variant: ButtonVariant) => {
+export const GetButtonVariant = (variant: ButtonVariant): GrafanaButtonVariant | undefined => {
   switch (variant) {
     case ButtonVariant.DESTRUCTIVE:
     case ButtonVariant.PRIMARY:
@@ -358,7 +346,6 @@ export const ConvertToElementValue = (
   switch (element.type) {
     case FormElementType.STRING:
     case FormElementType.DISABLED_TEXTAREA:
-    case FormElementType.DATETIME:
     case FormElementType.CODE:
     case FormElementType.PASSWORD:
     case FormElementType.SECRET:
@@ -396,6 +383,12 @@ export const ConvertToElementValue = (
         value: !!value,
       };
     }
+    case FormElementType.DATETIME: {
+      return {
+        ...element,
+        value: typeof value === 'string' ? value : undefined,
+      };
+    }
     default: {
       return {
         ...element,