Test: CaptchaField

app/soapbox/features/auth_login/components/__tests__/__snapshots__/captcha-test.js.snap

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<CaptchaField /> renders null by default 1`] = `null`;
+
+exports[`<NativeCaptchaField /> renders correctly 1`] = `
+<div
+  className="captcha"
+>
+  <img
+    alt="captcha"
+    src="data:image/png;base64,..."
+  />
+  <div
+    className="input required"
+  >
+    <input
+      autoComplete="off"
+      name="captcha_solution"
+      onChange={[Function]}
+      placeholder="Enter the pictured text"
+      required={true}
+      type="text"
+    />
+  </div>
+</div>
+`;

app/soapbox/features/auth_login/components/__tests__/captcha-test.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import CaptchaField, { NativeCaptchaField } from '../captcha';
+import renderer from 'react-test-renderer';
+import { createComponentWithStore } from 'soapbox/test_helpers';
+import { Map as ImmutableMap } from 'immutable';
+
+describe('<CaptchaField />', () => {
+  it('renders null by default', () => {
+    expect(createComponentWithStore(
+      <CaptchaField />
+    ).toJSON()).toMatchSnapshot();
+  });
+});
+
+describe('<NativeCaptchaField />', () => {
+  it('renders correctly', () => {
+    const captcha = ImmutableMap({
+      answer_data: 'QTEyOEdDTQ...',
+      token: 'CcDExJcv6qqOVw',
+      type: 'native',
+      url: 'data:image/png;base64,...',
+    });
+
+    expect(renderer.create(
+      <NativeCaptchaField
+        captcha={captcha}
+        onChange={() => {}} // eslint-disable-line react/jsx-no-bind
+      />
+    ).toJSON()).toMatchSnapshot();
+  });
+});

app/soapbox/features/auth_login/components/captcha.js

@@ -91,7 +91,7 @@ class CaptchaField extends React.Component {
 
 }
 
-const NativeCaptchaField = ({ captcha, onChange }) => (
+export const NativeCaptchaField = ({ captcha, onChange }) => (
   <div className='captcha'>
     <img alt='captcha' src={captcha.get('url')} />
     <TextInput

app/soapbox/test_helpers.js

@@ -3,14 +3,21 @@
 import React from 'react';
 import thunk from 'redux-thunk';
 import renderer from 'react-test-renderer';
+import { Provider } from 'react-redux';
 import { IntlProvider } from 'react-intl';
 import configureMockStore from 'redux-mock-store';
+import { Map as ImmutableMap } from 'immutable';
 
 // Mock Redux
 // https://redux.js.org/recipes/writing-tests/
 const middlewares = [thunk];
 export const mockStore = configureMockStore(middlewares);
 
+// Test Redux connected components
+export const createComponentWithStore = (children, props = { store: mockStore(ImmutableMap()) }) => {
+  return renderer.create(<Provider {...props}>{children}</Provider>);
+};
+
 // Testing i18n components
 // https://formatjs.io/docs/react-intl/testing/#helper-function-2
 export const createComponentWithIntl = (children, props = { locale: 'en' }) => {