Test: Start creating component snapshots

.eslintrc.js

@@ -195,6 +195,7 @@ module.exports = {
         devDependencies: [
           'webpack/**',
           'app/soapbox/test_setup.js',
+          'app/soapbox/test_helpers.js',
           'app/**/__tests__/**',
           'app/**/__mocks__/**',
         ],

app/soapbox/actions/__tests__/about-test.js

@@ -6,7 +6,7 @@ import {
 } from '../about';
 import { Map as ImmutableMap } from 'immutable';
 import { __stub as stubApi } from 'soapbox/api';
-import { mockStore } from 'soapbox/test_setup';
+import { mockStore } from 'soapbox/test_helpers';
 
 describe('fetchAboutPage()', () => {
   it('creates the expected actions on success', () => {

app/soapbox/actions/__tests__/auth-test.js

@@ -4,7 +4,7 @@ import {
 } from '../auth';
 import { ALERT_SHOW } from '../alerts';
 import { Map as ImmutableMap } from 'immutable';
-import { mockStore } from 'soapbox/test_setup';
+import { mockStore } from 'soapbox/test_helpers';
 
 describe('logOut()', () => {
   it('creates expected actions', () => {

app/soapbox/components/__tests__/__snapshots__/avatar-test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Avatar /> Autoplay renders a animated avatar 1`] = `
+exports[`<Avatar /> Autoplay renders an animated avatar 1`] = `
 <div
   className="account__avatar"
   onMouseEnter={[Function]}

app/soapbox/components/__tests__/__snapshots__/badge-test.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Badge /> renders correctly 1`] = `
+<span
+  className="badge badge--patron"
+>
+  Patron
+</span>
+`;

app/soapbox/components/__tests__/__snapshots__/column-test.js.snap

@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Column /> renders correctly with minimal props 1`] = `
+<div
+  className="column"
+  role="region"
+/>
+`;

app/soapbox/components/__tests__/__snapshots__/column_back_button-test.js.snap

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ColumnBackButton /> renders correctly 1`] = `
+<button
+  className="column-back-button"
+  onClick={[Function]}
+>
+  <i
+    alt="chevron-left"
+    className="fa fa-chevron-left column-back-button__icon fa-fw"
+    role="img"
+  />
+  Back
+</button>
+`;

app/soapbox/components/__tests__/__snapshots__/column_back_button_slim-test.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ColumnBackButtonSlim /> renders correctly 1`] = `
+<div
+  className="column-back-button--slim"
+>
+  <div
+    className="column-back-button column-back-button--slim-button"
+    onClick={[Function]}
+    role="button"
+    tabIndex="0"
+  >
+    <i
+      alt="chevron-left"
+      className="fa fa-chevron-left column-back-button__icon fa-fw"
+      role="img"
+    />
+    Back
+  </div>
+</div>
+`;

app/soapbox/components/__tests__/__snapshots__/column_header-test.js.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ColumnHeader /> renders correctly with minimal props 1`] = `
+<div
+  className="column-header__wrapper"
+>
+  <h1
+    className="column-header"
+  >
+    <div
+      className="column-header__buttons"
+    />
+  </h1>
+  <div
+    className="column-header__collapsible collapsed"
+    onTransitionEnd={[Function]}
+    tabIndex={-1}
+  >
+    <div
+      className="column-header__collapsible-inner"
+    />
+  </div>
+</div>
+`;

app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap

@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<EmojiSelector /> renders correctly 1`] = `
+<div
+  className="emoji-react-selector"
+>
+  <button
+    className="emoji-react-selector__emoji"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"👍\\" title=\\":+1:\\" src=\\"/emoji/1f44d.svg\\" />",
+      }
+    }
+  />
+  <button
+    className="emoji-react-selector__emoji"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"❤\\" title=\\":heart:\\" src=\\"/emoji/2764.svg\\" />",
+      }
+    }
+  />
+  <button
+    className="emoji-react-selector__emoji"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😆\\" title=\\":laughing:\\" src=\\"/emoji/1f606.svg\\" />",
+      }
+    }
+  />
+  <button
+    className="emoji-react-selector__emoji"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😮\\" title=\\":open_mouth:\\" src=\\"/emoji/1f62e.svg\\" />",
+      }
+    }
+  />
+  <button
+    className="emoji-react-selector__emoji"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😢\\" title=\\":cry:\\" src=\\"/emoji/1f622.svg\\" />",
+      }
+    }
+  />
+  <button
+    className="emoji-react-selector__emoji"
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "<img draggable=\\"false\\" class=\\"emojione\\" alt=\\"😩\\" title=\\":weary:\\" src=\\"/emoji/1f629.svg\\" />",
+      }
+    }
+  />
+</div>
+`;

app/soapbox/components/__tests__/__snapshots__/timeline_queue_button_header-test.js.snap

@@ -0,0 +1,38 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TimelineQueueButtonHeader /> renders correctly 1`] = `
+<div
+  className="timeline-queue-header hidden"
+>
+  <a
+    className="timeline-queue-header__btn"
+    onClick={[Function]}
+  />
+</div>
+`;
+
+exports[`<TimelineQueueButtonHeader /> renders correctly 2`] = `
+<div
+  className="timeline-queue-header"
+>
+  <a
+    className="timeline-queue-header__btn"
+    onClick={[Function]}
+  >
+    Click to see 1 new post
+  </a>
+</div>
+`;
+
+exports[`<TimelineQueueButtonHeader /> renders correctly 3`] = `
+<div
+  className="timeline-queue-header"
+>
+  <a
+    className="timeline-queue-header__btn"
+    onClick={[Function]}
+  >
+    Click to see 9999999 new posts
+  </a>
+</div>
+`;

app/soapbox/components/__tests__/avatar-test.js

@@ -12,10 +12,10 @@ describe('<Avatar />', () => {
     avatar_static: '/static/alice.jpg',
   });
 
-  const size     = 100;
+  const size = 100;
 
   describe('Autoplay', () => {
-    it('renders a animated avatar', () => {
+    it('renders an animated avatar', () => {
       const component = renderer.create(<Avatar account={account} animate size={size} />);
       const tree      = component.toJSON();
 

app/soapbox/components/__tests__/badge-test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Badge from '../badge';
+
+describe('<Badge />', () => {
+  it('renders correctly', () => {
+    const component = renderer.create(<Badge slug='patron' title='Patron' />);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

app/soapbox/components/__tests__/column-test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import Column from '../column';
+
+describe('<Column />', () => {
+  it('renders correctly with minimal props', () => {
+    const component = renderer.create(<Column />);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

app/soapbox/components/__tests__/column_back_button-test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ColumnBackButton from '../column_back_button';
+import { createComponentWithIntl } from 'soapbox/test_helpers';
+
+describe('<ColumnBackButton />', () => {
+  it('renders correctly', () => {
+    const component = createComponentWithIntl(<ColumnBackButton />);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

app/soapbox/components/__tests__/column_back_button_slim-test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ColumnBackButtonSlim from '../column_back_button_slim';
+import { createComponentWithIntl } from 'soapbox/test_helpers';
+
+describe('<ColumnBackButtonSlim />', () => {
+  it('renders correctly', () => {
+    const component = createComponentWithIntl(<ColumnBackButtonSlim />);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

app/soapbox/components/__tests__/column_header-test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import ColumnHeader from '../column_header';
+import { createComponentWithIntl } from 'soapbox/test_helpers';
+
+describe('<ColumnHeader />', () => {
+  it('renders correctly with minimal props', () => {
+    const component = createComponentWithIntl(<ColumnHeader />);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

app/soapbox/components/__tests__/emoji_selector-test.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import EmojiSelector from '../emoji_selector';
+
+describe('<EmojiSelector />', () => {
+  it('renders correctly', () => {
+    const component = renderer.create(<EmojiSelector />);
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

app/soapbox/components/__tests__/timeline_queue_button_header-test.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import TimelineQueueButtonHeader from '../timeline_queue_button_header';
+import { createComponentWithIntl } from 'soapbox/test_helpers';
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  queue: { id: 'status_list.queue_label', defaultMessage: 'Click to see {count} new {count, plural, one {post} other {posts}}' },
+});
+
+describe('<TimelineQueueButtonHeader />', () => {
+  it('renders correctly', () => {
+    expect(createComponentWithIntl(
+      <TimelineQueueButtonHeader
+        key='timeline-queue-button-header'
+        onClick={() => {}} // eslint-disable-line react/jsx-no-bind
+        count={0}
+        message={messages.queue}
+      />
+    ).toJSON()).toMatchSnapshot();
+
+    expect(createComponentWithIntl(
+      <TimelineQueueButtonHeader
+        key='timeline-queue-button-header'
+        onClick={() => {}} // eslint-disable-line react/jsx-no-bind
+        count={1}
+        message={messages.queue}
+      />
+    ).toJSON()).toMatchSnapshot();
+
+    expect(createComponentWithIntl(
+      <TimelineQueueButtonHeader
+        key='timeline-queue-button-header'
+        onClick={() => {}} // eslint-disable-line react/jsx-no-bind
+        count={9999999}
+        message={messages.queue}
+      />
+    ).toJSON()).toMatchSnapshot();
+  });
+});

app/soapbox/test_helpers.js

@@ -0,0 +1,18 @@
+'use strict';
+
+import React from 'react';
+import thunk from 'redux-thunk';
+import renderer from 'react-test-renderer';
+import { IntlProvider } from 'react-intl';
+import configureMockStore from 'redux-mock-store';
+
+// Mock Redux
+// https://redux.js.org/recipes/writing-tests/
+const middlewares = [thunk];
+export const mockStore = configureMockStore(middlewares);
+
+// Testing i18n components
+// https://formatjs.io/docs/react-intl/testing/#helper-function-2
+export const createComponentWithIntl = (children, props = { locale: 'en' }) => {
+  return renderer.create(<IntlProvider {...props}>{children}</IntlProvider>);
+};

app/soapbox/test_setup.js

@@ -2,15 +2,12 @@
 
 import { configure } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
-import thunk from 'redux-thunk';
-import configureMockStore from 'redux-mock-store';
 import { __clear as clearApiMocks } from 'soapbox/api';
 
+// Enzyme
 const adapter = new Adapter();
 configure({ adapter });
 
+// API mocking
 jest.mock('soapbox/api');
 afterEach(() => clearApiMocks());
-
-const middlewares = [thunk];
-export const mockStore = configureMockStore(middlewares);

jest.config.js

@@ -23,6 +23,7 @@ module.exports = {
     '!app/soapbox/locales/locale-data/*.js',
     '!app/soapbox/service_worker/entry.js',
     '!app/soapbox/test_setup.js',
+    '!app/soapbox/test_helpers.js',
   ],
   'coverageDirectory': '<rootDir>/coverage',
   'moduleDirectories': [