Fix Textarea debounce bug (#858)

* Update textarea tests

* Fix textarea debounce bug

Author: tcbegley

src/components/input/Textarea.js

@@ -57,14 +57,14 @@ const Textarea = props => {
     }
   };
 
-  const onBlur = () => {
+  const onBlur = e => {
     if (setProps) {
       const payload = {
         n_blur: n_blur + 1,
         n_blur_timestamp: Date.now()
       };
       if (debounce) {
-        payload.value = value;
+        payload.value = e.target.value;
       }
       setProps(payload);
     }
@@ -77,7 +77,7 @@ const Textarea = props => {
         n_submit_timestamp: Date.now()
       };
       if (debounce) {
-        payload.value = value;
+        payload.value = e.target.value;
       }
       setProps(payload);
     }

src/components/input/__tests__/Textarea.test.js

@@ -98,14 +98,11 @@ describe('Textarea', () => {
     });
 
     test('tracks changes with "value" prop', () => {
-      fireEvent.change(textarea, {
-        target: {value: 'some-textarea-value'}
-      });
-      expect(mockSetProps.mock.calls).toHaveLength(1);
-      expect(mockSetProps.mock.calls[0][0]).toEqual({
-        value: 'some-textarea-value'
-      });
-      expect(textarea).toHaveValue('some-textarea-value');
+      userEvent.type(textarea, 'some text');
+      // one setProps call for click, and then 9 characters
+      expect(mockSetProps.mock.calls).toHaveLength(10);
+      expect(mockSetProps.mock.calls[9][0]).toEqual({value: 'some text'});
+      expect(textarea).toHaveValue('some text');
     });
 
     test('dispatches update for each typed character', () => {
@@ -160,55 +157,48 @@ describe('Textarea', () => {
       beforeEach(() => {
         mockSetProps = jest.fn();
         const {container} = render(
-          <Textarea
-            setProps={mockSetProps}
-            value="some-textarea-value"
-            debounce
-          />
+          <Textarea setProps={mockSetProps} value="" debounce />
         );
         textarea = container.firstChild;
       });
 
       test("don't call setProps on change if debounce is true", () => {
-        fireEvent.change(textarea, {
-          target: {value: 'some-textarea-value'}
-        });
-        expect(mockSetProps.mock.calls).toHaveLength(0);
-        expect(textarea).toHaveValue('some-textarea-value');
+        userEvent.type(textarea, 'some text');
+        // one call to setProps for clicking on the textarea
+        expect(mockSetProps.mock.calls).toHaveLength(1);
+        expect(textarea).toHaveValue('some text');
       });
 
       test('dispatch value on blur if debounce is true', () => {
+        userEvent.type(textarea, 'some text');
         const before = Date.now();
         fireEvent.blur(textarea);
         const after = Date.now();
 
-        expect(mockSetProps.mock.calls).toHaveLength(1);
+        expect(mockSetProps.mock.calls).toHaveLength(2);
 
-        const [[{n_blur, n_blur_timestamp, value}]] = mockSetProps.mock.calls;
+        const [{n_blur, n_blur_timestamp, value}] = mockSetProps.mock.calls[1];
         expect(n_blur).toEqual(1);
         expect(n_blur_timestamp).toBeGreaterThanOrEqual(before);
         expect(n_blur_timestamp).toBeLessThanOrEqual(after);
-        expect(value).toEqual('some-textarea-value');
+        expect(value).toEqual('some text');
       });
 
       test('dispatch value on submit if debounce is true', () => {
         const before = Date.now();
-        fireEvent.keyPress(textarea, {
-          key: 'Enter',
-          code: 13,
-          charCode: 13
-        });
+        userEvent.type(textarea, 'some text{enter}');
         const after = Date.now();
 
-        expect(mockSetProps.mock.calls).toHaveLength(1);
+        // one click and one submit
+        expect(mockSetProps.mock.calls).toHaveLength(2);
 
         const [
-          [{n_submit, n_submit_timestamp, value}]
-        ] = mockSetProps.mock.calls;
+          {n_submit, n_submit_timestamp, value}
+        ] = mockSetProps.mock.calls[1];
         expect(n_submit).toEqual(1);
         expect(n_submit_timestamp).toBeGreaterThanOrEqual(before);
         expect(n_submit_timestamp).toBeLessThanOrEqual(after);
-        expect(value).toEqual('some-textarea-value');
+        expect(value).toEqual('some text');
       });
     });
   });