From a9a67037e281d5481b3ea2e4835f7533be18a546 Mon Sep 17 00:00:00 2001
From: Ryland Herrick <ryalnd@gmail.com>
Date: Thu, 10 Sep 2020 14:21:33 -0500
Subject: [PATCH] Add tests around use of custom components with UseField

There was an issue previously where memoized components would not work;
these are primarily regression tests covering that use case.
---
 .../components/use_field.test.tsx             | 62 ++++++++++++++++++-
 1 file changed, 61 insertions(+), 1 deletion(-)

diff --git a/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/use_field.test.tsx b/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/use_field.test.tsx
index c14471991ccd3..dbf53a9f0a359 100644
--- a/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/use_field.test.tsx
+++ b/src/plugins/es_ui_shared/static/forms/hook_form_lib/components/use_field.test.tsx
@@ -16,7 +16,7 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React, { useEffect } from 'react';
+import React, { useEffect, FunctionComponent } from 'react';
 import { act } from 'react-dom/test-utils';
 
 import { registerTestBed, TestBed } from '../shared_imports';
@@ -237,4 +237,64 @@ describe('<UseField />', () => {
       expect(serializer).not.toBeCalled();
     });
   });
+
+  describe('custom components', () => {
+    interface MyForm {
+      name: string;
+    }
+
+    let formHook: FormHook<MyForm> | null = null;
+
+    beforeEach(() => {
+      formHook = null;
+    });
+
+    const onFormHook = (_form: FormHook<MyForm>) => {
+      formHook = _form;
+    };
+
+    const TestComp = ({
+      component,
+      onForm,
+    }: {
+      component: FunctionComponent<any>;
+      onForm: (form: FormHook<MyForm>) => void;
+    }) => {
+      const { form } = useForm<MyForm>();
+
+      useEffect(() => {
+        onForm(form);
+      }, [onForm, form]);
+
+      return (
+        <Form form={form}>
+          <UseField path="name" defaultValue="myName" component={component} />
+        </Form>
+      );
+    };
+
+    it('allows function components', () => {
+      const Component = () => <textarea data-test-subj="function-component" />;
+      const setup = registerTestBed(TestComp, {
+        defaultProps: { onForm: onFormHook, component: Component },
+        memoryRouter: { wrapComponent: false },
+      });
+      const testBed = setup() as TestBed;
+
+      expect(testBed.exists('function-component')).toEqual(true);
+      expect(formHook?.getFormData()).toEqual({ name: 'myName' });
+    });
+
+    it('allows memoized function components', () => {
+      const Component = React.memo(() => <textarea data-test-subj="memoized-component" />);
+      const setup = registerTestBed(TestComp, {
+        defaultProps: { onForm: onFormHook, component: Component },
+        memoryRouter: { wrapComponent: false },
+      });
+      const testBed = setup() as TestBed;
+
+      expect(testBed.exists('memoized-component')).toEqual(true);
+      expect(formHook?.getFormData()).toEqual({ name: 'myName' });
+    });
+  });
 });