Updating Form to use react-testing-library

src/components/Form/__snapshots__/test.js.snap

@@ -1,53 +1,54 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Form rendering 1`] = `
-<div
+<DocumentFragment>
-  className="form"
+  <div
-  data-requires-js={true}
+    class="form"
->
+    data-requires-js="true"
-  <form
-    onSubmit={[Function]}
   >
-    <textarea
+    <form
-      autoFocus={true}
+      data-testid="form"
-      name="expr"
-      onChange={[Function]}
-      onKeyPress={[Function]}
-      placeholder="TRANSLATE(Enter regular expression to display)"
-    />
-    <button
-      type="submit"
     >
-      <Trans>
+      <textarea
-        Display
+        data-testid="expr-input"
-      </Trans>
+        name="expr"
-    </button>
+        placeholder="TRANSLATE(Enter regular expression to display)"
-    <div
-      className="select"
-    >
-      <select
-        name="syntax"
-        onChange={[Function]}
-      >
-        <option
-          key="testJS"
-          value="testJS"
-        >
-          TRANSLATE(Testing JS)
-        </option>
-        <option
-          key="other"
-          value="other"
-        >
-          TRANSLATE(Other)
-        </option>
-      </select>
-      <ChevronsDown
-        color="currentColor"
-        size="24"
       />
-    </div>
+      <button
-    Actions
+        type="submit"
-  </form>
+      >
-</div>
+        <span
+          data-component="Trans"
+          data-props="{}"
+        >
+          Display
+        </span>
+      </button>
+      <div
+        class="select"
+      >
+        <select
+          data-testid="syntax-select"
+          name="syntax"
+        >
+          <option
+            value="testJS"
+          >
+            TRANSLATE(Testing JS)
+          </option>
+          <option
+            value="other"
+          >
+            TRANSLATE(Other)
+          </option>
+        </select>
+        <span
+          data-component="ChevronsDown"
+          data-props="{}"
+        />
+      </div>
+      Actions
+    </form>
+  </div>
+</DocumentFragment>
 `;

src/components/Form/index.js

@@ -54,8 +54,9 @@ class Form extends React.PureComponent {
     const { expr, syntax } = this.state;
 
     return <div className={ style.form } data-requires-js>
-      <form onSubmit={ this.handleSubmit }>
+      <form data-testid="form" onSubmit={ this.handleSubmit }>
         <textarea
+          data-testid="expr-input"
           name="expr"
           value={ expr }
           onKeyPress={ this.handleKeyPress }
@@ -65,6 +66,7 @@ class Form extends React.PureComponent {
         <button type="submit"><Trans>Display</Trans></button>
         <div className={ style.select }>
           <select
+            data-testid="syntax-select"
             name="syntax"
             value={ syntax }
             onChange={ this.handleChange } >

src/components/Form/test.js

@@ -1,5 +1,9 @@
+jest.mock('react-feather/dist/icons/chevrons-down', () =>
+  require('__mocks__/component-mock')(
+    'react-feather/dist/icons/chevrons-down'));
+
 import React from 'react';
-import { render } from 'react-testing-library';
+import { render, fireEvent } from 'react-testing-library';
 
 import { mockT } from 'i18n';
 import { Form } from 'components/Form';
@@ -11,77 +15,67 @@ const syntaxList = [
 const commonProps = { syntaxList, t: mockT };
 
 describe('Form', () => {
-  test.skip('rendering', () => {
+  test('rendering', () => {
-    const component = shallow(
+    const { asFragment } = render(
       <Form onSubmit={ jest.fn() } { ...commonProps }>
         Actions
       </Form>
     );
-    expect(component).toMatchSnapshot();
+    expect(asFragment()).toMatchSnapshot();
   });
 
   describe('submitting expression', () => {
-    test.skip('submitting form', () => {
+    test('submitting form', () => {
       const onSubmit = jest.fn();
-      const component = shallow(
+      const { getByTestId } = render(
         <Form onSubmit={ onSubmit } { ...commonProps } />
       );
 
-      const exprInput = component.find('[name="expr"]');
+      fireEvent.change(getByTestId('expr-input'), {
-      const syntaxInput = component.find('[name="syntax"]');
+        target: { value: 'Test expression' }
-      exprInput.simulate('change', {
-        target: {
-          name: 'expr',
-          value: 'Test expression'
-        }
       });
-      syntaxInput.simulate('change', {
+      fireEvent.change(getByTestId('syntax-select'), {
-        target: {
+        target: { value: 'other' }
-          name: 'syntax',
-          value: 'test'
-        }
       });
 
-      const eventObj = { preventDefault: jest.fn() };
+      const event = new Event('submit');
-      component.find('form').simulate('submit', eventObj);
+      jest.spyOn(event, 'preventDefault');
 
-      expect(eventObj.preventDefault).toHaveBeenCalled();
+      fireEvent(getByTestId('form'), event);
+
+      expect(event.preventDefault).toHaveBeenCalled();
       expect(onSubmit).toHaveBeenCalledWith({
         expr: 'Test expression',
-        syntax: 'test'
+        syntax: 'other'
       });
     });
 
-    test.skip('submitting form with Shift+Enter', () => {
+    test('submitting form with Shift+Enter', () => {
-      const component = shallow(
+      const onSubmit = jest.fn();
-        <Form onSubmit={ jest.fn() } { ...commonProps } />
+      const { getByTestId } = render(
+        <Form onSubmit={ onSubmit } { ...commonProps } />
       );
-      const form = component.instance();
+
-      const eventObj = {
+      fireEvent.keyPress(getByTestId('expr-input'), {
-        preventDefault: Function.prototype,
         charCode: 13,
         shiftKey: true
-      };
+      });
-      jest.spyOn(form, 'handleSubmit');
-      component.find('textarea').simulate('keypress', eventObj);
 
-      expect(form.handleSubmit).toHaveBeenCalled();
+      expect(onSubmit).toHaveBeenCalled();
     });
 
-    test.skip('not submitting with just Enter', () => {
+    test('not submitting with just Enter', () => {
-      const component = shallow(
+      const onSubmit = jest.fn();
-        <Form onSubmit={ jest.fn() } { ...commonProps } />
+      const { getByTestId } = render(
+        <Form onSubmit={ onSubmit } { ...commonProps } />
       );
-      const form = component.instance();
+
-      const eventObj = {
+      fireEvent.keyPress(getByTestId('expr-input'), {
-        preventDefault: Function.prototype,
         charCode: 13,
         shiftKey: false
-      };
+      });
-      jest.spyOn(form, 'handleSubmit');
-      component.find('textarea').simulate('keypress', eventObj);
 
-      expect(form.handleSubmit).not.toHaveBeenCalled();
+      expect(onSubmit).not.toHaveBeenCalled();
     });
   });
 });