Fleshing out Form tests

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

@@ -44,3 +44,129 @@ exports[`Form rendering 1`] = `
   </form>
 </div>
 `;
+
+exports[`Form rendering with download URLs 1`] = `
+<div
+  className="form"
+>
+  <form
+    onSubmit={[Function]}
+  >
+    <textarea
+      autoFocus={true}
+      onKeyPress={[Function]}
+      placeholder="translate(Enter regular expression to display)"
+    />
+    <button
+      type="submit"
+    >
+      <Trans>
+        Display
+      </Trans>
+    </button>
+    <div
+      className="select"
+    >
+      <select>
+        <option
+          key="js"
+          value="js"
+        >
+          Javascript
+        </option>
+        <option
+          key="pcre"
+          value="pcre"
+        >
+          PCRE
+        </option>
+      </select>
+      <SvgMock />
+    </div>
+    <ul
+      className="actions"
+    >
+      <li
+        key="0"
+      >
+        <a
+          download="image.svg"
+          href="#svg"
+          type="image/svg+xml"
+        >
+          <SvgMock />
+          Download SVG
+        </a>
+      </li>
+      <li
+        key="1"
+      >
+        <a
+          download="image.png"
+          href="#png"
+          type="image/png"
+        >
+          <SvgMock />
+          Download PNG
+        </a>
+      </li>
+    </ul>
+  </form>
+</div>
+`;
+
+exports[`Form rendering with permalink URL 1`] = `
+<div
+  className="form"
+>
+  <form
+    onSubmit={[Function]}
+  >
+    <textarea
+      autoFocus={true}
+      onKeyPress={[Function]}
+      placeholder="translate(Enter regular expression to display)"
+    />
+    <button
+      type="submit"
+    >
+      <Trans>
+        Display
+      </Trans>
+    </button>
+    <div
+      className="select"
+    >
+      <select>
+        <option
+          key="js"
+          value="js"
+        >
+          Javascript
+        </option>
+        <option
+          key="pcre"
+          value="pcre"
+        >
+          PCRE
+        </option>
+      </select>
+      <SvgMock />
+    </div>
+    <ul
+      className="actions"
+    >
+      <li>
+        <a
+          href="#permalink"
+        >
+          <SvgMock />
+          <Trans>
+            Permalink
+          </Trans>
+        </a>
+      </li>
+    </ul>
+  </form>
+</div>
+`;

src/components/Form/test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 
 import { Form } from 'components/Form';
 import { translate, I18nWrapper } from '__mocks__/i18n';
@@ -17,11 +17,67 @@ describe('Form', () => {
     expect(component).toMatchSnapshot();
   });
 
-  test('rendering with download URLs');
+  test('rendering with download URLs', () => {
-
+    const downloadUrls = [
-  test('rendering with permalink URL');
+      { url: '#svg', filename: 'image.svg', type: 'image/svg+xml', label: 'Download SVG' },
-
+      { url: '#png', filename: 'image.png', type: 'image/png', label: 'Download PNG' }
-  test('submitting form');
+    ];
-
+    const component = shallow(
-  test('submitting form with Shift+Enter');
+      <Form t={ translate } syntaxes={ syntaxes } downloadUrls={ downloadUrls }/>
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  test('rendering with permalink URL', () => {
+    const permalinkUrl = '#permalink';
+    const component = shallow(
+      <Form t={ translate } syntaxes={ syntaxes } permalinkUrl={ permalinkUrl }/>
+    );
+    expect(component).toMatchSnapshot();
+  });
+
+  describe('submitting expression', () => {
+    const build = (props = {}) => {
+      const component = mount(
+        <I18nWrapper>
+          <Form syntaxes={ syntaxes } { ...props }/>
+        </I18nWrapper>
+      );
+      return component;
+    };
+
+    test('submitting form', () => {
+      const onSubmit = jest.fn();
+      const component = build({ onSubmit });
+      const eventObj = { preventDefault: jest.fn() };
+      component.find(Form).instance().textarea.value = 'Test textarea value';
+      component.find('form').simulate('submit', eventObj);
+
+      expect(eventObj.preventDefault).toHaveBeenCalled();
+      expect(onSubmit).toHaveBeenCalledWith({
+        expr: 'Test textarea value',
+        syntax: 'js'
+      });
+    });
+
+    test('submitting form with Shift+Enter', () => {
+      const component = build({ onSubmit: Function.prototype });
+      const form = component.find(Form).instance();
+      const eventObj = { charCode: 13, shiftKey: true };
+      jest.spyOn(form, 'handleSubmit');
+      component.find('textarea').simulate('keypress', eventObj);
+
+      expect(form.handleSubmit).toHaveBeenCalled();
+    });
+
+    test('not submitting with just Enter', () => {
+      const component = build({ onSubmit: Function.prototype });
+      const form = component.find(Form).instance();
+      const eventObj = { charCode: 13, shiftKey: false };
+      jest.spyOn(form, 'handleSubmit');
+      component.find('textarea').simulate('keypress', eventObj);
+
+      expect(form.handleSubmit).not.toHaveBeenCalled();
+    });
+  });
 });