Add tests

VolkovLabs · Dec 29, 2023 · 4d2013e · 4d2013e
1 parent 6c7ef64
commit 4d2013e
Show file tree

Hide file tree

Showing 3 changed files with 208 additions and 3 deletions.
diff --git a/src/components/FormPanel/FormPanel.test.tsx b/src/components/FormPanel/FormPanel.test.tsx
@@ -14,10 +14,11 @@ import {
   PayloadMode,
   RequestMethod,
   ResetActionMode,
+  TEST_IDS,
 } from '../../constants';
 import { useDatasourceRequest } from '../../hooks';
 import { ButtonOrientation, ButtonVariant, FormElement, LocalFormElement } from '../../types';
-import { getPanelSelectors, toLocalFormElement } from '../../utils';
+import { getFormElementsSelectors, getPanelSelectors, toLocalFormElement } from '../../utils';
 import { FormElements } from '../FormElements';
 import { FormPanel } from './FormPanel';
 
@@ -55,6 +56,11 @@ describe('Panel', () => {
    */
   const selectors = getPanelSelectors(screen);
 
+  /**
+   * Elements Selectors
+   */
+  const elementsSelectors = getFormElementsSelectors(screen);
+
   /**
    * Replace variables
    */
@@ -2071,4 +2077,202 @@ describe('Panel', () => {
       expect(selectors.buttonSaveDefault(true)).not.toBeInTheDocument();
     });
   });
+
+  describe('Value Changed Code', () => {
+    const element = {
+      ...FORM_ELEMENT_DEFAULT,
+      id: 'value',
+    };
+
+    beforeEach(() => {
+      jest.mocked(FormElements).mockImplementation(({ onChangeElement, elements }) => {
+        return (
+          <input
+            data-testid={TEST_IDS.formElements.fieldString}
+            value={elements[0].value as string}
+            onChange={(event) => {
+              onChangeElement({
+                ...elements[0],
+                value: event.currentTarget.value,
+              } as any);
+            }}
+          />
+        );
+      });
+    });
+
+    it('Should trigger if value changed', async () => {
+      await act(async () =>
+        render(
+          getComponent({
+            options: {
+              elements: [
+                {
+                  ...element,
+                  value: '1',
+                },
+              ],
+              elementValueChanged: `
+                context.panel.disableSubmit();
+              `,
+            },
+          })
+        )
+      );
+
+      expect(selectors.buttonSubmit()).toBeInTheDocument();
+      expect(selectors.buttonSubmit()).not.toBeDisabled();
+
+      /**
+       * Change to same value
+       */
+      await act(async () => fireEvent.change(elementsSelectors.fieldString(), { target: { value: '1' } }));
+
+      /**
+       * Value changed should not be called
+       */
+      expect(selectors.buttonSubmit()).not.toBeDisabled();
+
+      /**
+       * Change to new value
+       */
+      await act(async () => fireEvent.change(elementsSelectors.fieldString(), { target: { value: '11' } }));
+
+      /**
+       * Should be enabled
+       */
+      expect(selectors.buttonSubmit()).toBeDisabled();
+    });
+
+    it('Should allow to manage submit button', async () => {
+      await act(async () =>
+        render(
+          getComponent({
+            options: {
+              elements: [element],
+              elementValueChanged: `
+                if (context.element.value === '11') {
+                  context.panel.enableSubmit();
+                } else {
+                  context.panel.disableSubmit();
+                }
+              `,
+            },
+          })
+        )
+      );
+
+      expect(selectors.buttonSubmit()).toBeInTheDocument();
+      expect(selectors.buttonSubmit()).not.toBeDisabled();
+
+      /**
+       * Change to invalid value
+       */
+      await act(async () => fireEvent.change(elementsSelectors.fieldString(), { target: { value: '1' } }));
+
+      /**
+       * Still should be disabled due to invalid value
+       */
+      expect(selectors.buttonSubmit()).toBeDisabled();
+
+      /**
+       * Change to valid value
+       */
+      await act(async () => fireEvent.change(elementsSelectors.fieldString(), { target: { value: '11' } }));
+
+      /**
+       * Should be enabled
+       */
+      expect(selectors.buttonSubmit()).not.toBeDisabled();
+    });
+
+    it('Should allow to manage reset button', async () => {
+      await act(async () =>
+        render(
+          getComponent({
+            options: {
+              elements: [element],
+              elementValueChanged: `
+                if (context.element.value === '11') {
+                  context.panel.enableReset();
+                } else {
+                  context.panel.disableReset();
+                }
+              `,
+            },
+          })
+        )
+      );
+
+      expect(selectors.buttonReset()).toBeInTheDocument();
+      expect(selectors.buttonReset()).not.toBeDisabled();
+
+      /**
+       * Change to invalid value
+       */
+      await act(async () => fireEvent.change(elementsSelectors.fieldString(), { target: { value: '1' } }));
+
+      /**
+       * Still should be disabled due to invalid value
+       */
+      expect(selectors.buttonReset()).toBeDisabled();
+
+      /**
+       * Change to valid value
+       */
+      await act(async () => fireEvent.change(elementsSelectors.fieldString(), { target: { value: '11' } }));
+
+      /**
+       * Should be enabled
+       */
+      expect(selectors.buttonReset()).not.toBeDisabled();
+    });
+
+    it('Should allow to manage save default button', async () => {
+      await act(async () =>
+        render(
+          <PanelContextProvider value={{ canAddAnnotations: () => true } as any}>
+            {getComponent({
+              options: {
+                elements: [element],
+                saveDefault: {
+                  variant: ButtonVariant.SECONDARY,
+                },
+                elementValueChanged: `
+                if (context.element.value === '11') {
+                  context.panel.enableSaveDefault();
+                } else {
+                  context.panel.disableSaveDefault();
+                }
+              `,
+              },
+            })}
+          </PanelContextProvider>
+        )
+      );
+
+      expect(selectors.buttonSaveDefault()).toBeInTheDocument();
+      expect(selectors.buttonSaveDefault()).not.toBeDisabled();
+
+      /**
+       * Change to invalid value
+       */
+      await act(async () => fireEvent.change(elementsSelectors.fieldString(), { target: { value: '1' } }));
+
+      /**
+       * Still should be disabled due to invalid value
+       */
+      expect(selectors.buttonSaveDefault()).toBeDisabled();
+
+      /**
+       * Change to valid value
+       */
+      await act(async () => fireEvent.change(elementsSelectors.fieldString(), { target: { value: '11' } }));
+
+      /**
+       * Should be enabled
+       */
+      expect(selectors.buttonSaveDefault()).not.toBeDisabled();
+    });
+  });
 });
diff --git a/src/components/FormPanel/FormPanel.tsx b/src/components/FormPanel/FormPanel.tsx
@@ -749,7 +749,7 @@ export const FormPanel: React.FC<Props> = ({
    */
   const onElementValueChanged = useCallback(
     ({ elements, element }: { elements: LocalFormElement[]; element: LocalFormElement }) => {
-      const fn = new Function('context', options.elementValueChanged);
+      const fn = new Function('context', replaceVariables(options.elementValueChanged));
 
       fn({
         element,
@@ -794,6 +794,7 @@ export const FormPanel: React.FC<Props> = ({
       onChangeElements,
       onOptionsChange,
       options,
+      replaceVariables,
       templateSrv,
     ]
   );

diff --git a/src/hooks/useFormElements.ts b/src/hooks/useFormElements.ts
@@ -83,7 +83,7 @@ export const useFormElements = ({
         );
       }
     },
-    [elements, eventBus, onChangeElements]
+    [elements, onChangeElements]
   );
 
   /**
-Original file line number
+Diff line change
@@ Expand Up / @@ -83,7 +83,7 @@ export const useFormElements = ({ @@
             );
           }
         },
-        [elements, eventBus, onChangeElements]
+        [elements, onChangeElements]
       );
       /**
@@ Expand Down @@