diff --git a/.eslintrc.js b/.eslintrc.js index 94f517ea6..aaeaedc8d 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -195,6 +195,7 @@ module.exports = { devDependencies: [ 'webpack/**', 'app/soapbox/test_setup.js', + 'app/soapbox/test_helpers.js', 'app/**/__tests__/**', 'app/**/__mocks__/**', ], diff --git a/app/soapbox/actions/__tests__/about-test.js b/app/soapbox/actions/__tests__/about-test.js index 28e7e726f..73c7b5d4f 100644 --- a/app/soapbox/actions/__tests__/about-test.js +++ b/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', () => { diff --git a/app/soapbox/actions/__tests__/auth-test.js b/app/soapbox/actions/__tests__/auth-test.js index 367abfae1..a013c700f 100644 --- a/app/soapbox/actions/__tests__/auth-test.js +++ b/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', () => { diff --git a/app/soapbox/components/__tests__/__snapshots__/avatar-test.js.snap b/app/soapbox/components/__tests__/__snapshots__/avatar-test.js.snap index 37a817e64..c3139fe69 100644 --- a/app/soapbox/components/__tests__/__snapshots__/avatar-test.js.snap +++ b/app/soapbox/components/__tests__/__snapshots__/avatar-test.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[` Autoplay renders a animated avatar 1`] = ` +exports[` Autoplay renders an animated avatar 1`] = `
renders correctly 1`] = ` + + Patron + +`; diff --git a/app/soapbox/components/__tests__/__snapshots__/column-test.js.snap b/app/soapbox/components/__tests__/__snapshots__/column-test.js.snap new file mode 100644 index 000000000..d6fef9f59 --- /dev/null +++ b/app/soapbox/components/__tests__/__snapshots__/column-test.js.snap @@ -0,0 +1,8 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders correctly with minimal props 1`] = ` +
+`; diff --git a/app/soapbox/components/__tests__/__snapshots__/column_back_button-test.js.snap b/app/soapbox/components/__tests__/__snapshots__/column_back_button-test.js.snap new file mode 100644 index 000000000..b7fb5b8b3 --- /dev/null +++ b/app/soapbox/components/__tests__/__snapshots__/column_back_button-test.js.snap @@ -0,0 +1,15 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders correctly 1`] = ` + +`; diff --git a/app/soapbox/components/__tests__/__snapshots__/column_back_button_slim-test.js.snap b/app/soapbox/components/__tests__/__snapshots__/column_back_button_slim-test.js.snap new file mode 100644 index 000000000..87c89f910 --- /dev/null +++ b/app/soapbox/components/__tests__/__snapshots__/column_back_button_slim-test.js.snap @@ -0,0 +1,21 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders correctly 1`] = ` +
+
+ + Back +
+
+`; diff --git a/app/soapbox/components/__tests__/__snapshots__/column_header-test.js.snap b/app/soapbox/components/__tests__/__snapshots__/column_header-test.js.snap new file mode 100644 index 000000000..0890bddb7 --- /dev/null +++ b/app/soapbox/components/__tests__/__snapshots__/column_header-test.js.snap @@ -0,0 +1,24 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders correctly with minimal props 1`] = ` +
+

+
+

+
+
+
+
+`; diff --git a/app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap b/app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap new file mode 100644 index 000000000..6b6307012 --- /dev/null +++ b/app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap @@ -0,0 +1,56 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders correctly 1`] = ` +
+
+`; diff --git a/app/soapbox/components/__tests__/__snapshots__/timeline_queue_button_header-test.js.snap b/app/soapbox/components/__tests__/__snapshots__/timeline_queue_button_header-test.js.snap new file mode 100644 index 000000000..849b98606 --- /dev/null +++ b/app/soapbox/components/__tests__/__snapshots__/timeline_queue_button_header-test.js.snap @@ -0,0 +1,38 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders correctly 1`] = ` +
+ +
+`; + +exports[` renders correctly 2`] = ` + +`; + +exports[` renders correctly 3`] = ` + +`; diff --git a/app/soapbox/components/__tests__/avatar-test.js b/app/soapbox/components/__tests__/avatar-test.js index 5a72fc19a..f7f430c7a 100644 --- a/app/soapbox/components/__tests__/avatar-test.js +++ b/app/soapbox/components/__tests__/avatar-test.js @@ -12,10 +12,10 @@ describe('', () => { 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(); const tree = component.toJSON(); diff --git a/app/soapbox/components/__tests__/badge-test.js b/app/soapbox/components/__tests__/badge-test.js new file mode 100644 index 000000000..5a42f0531 --- /dev/null +++ b/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('', () => { + it('renders correctly', () => { + const component = renderer.create(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/app/soapbox/components/__tests__/column-test.js b/app/soapbox/components/__tests__/column-test.js new file mode 100644 index 000000000..7c873cc10 --- /dev/null +++ b/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('', () => { + it('renders correctly with minimal props', () => { + const component = renderer.create(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/app/soapbox/components/__tests__/column_back_button-test.js b/app/soapbox/components/__tests__/column_back_button-test.js new file mode 100644 index 000000000..9bd393135 --- /dev/null +++ b/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('', () => { + it('renders correctly', () => { + const component = createComponentWithIntl(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/app/soapbox/components/__tests__/column_back_button_slim-test.js b/app/soapbox/components/__tests__/column_back_button_slim-test.js new file mode 100644 index 000000000..36a3e4e62 --- /dev/null +++ b/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('', () => { + it('renders correctly', () => { + const component = createComponentWithIntl(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/app/soapbox/components/__tests__/column_header-test.js b/app/soapbox/components/__tests__/column_header-test.js new file mode 100644 index 000000000..f3f027b9c --- /dev/null +++ b/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('', () => { + it('renders correctly with minimal props', () => { + const component = createComponentWithIntl(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/app/soapbox/components/__tests__/emoji_selector-test.js b/app/soapbox/components/__tests__/emoji_selector-test.js new file mode 100644 index 000000000..c475aae4b --- /dev/null +++ b/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('', () => { + it('renders correctly', () => { + const component = renderer.create(); + const tree = component.toJSON(); + expect(tree).toMatchSnapshot(); + }); +}); diff --git a/app/soapbox/components/__tests__/timeline_queue_button_header-test.js b/app/soapbox/components/__tests__/timeline_queue_button_header-test.js new file mode 100644 index 000000000..cb3b60900 --- /dev/null +++ b/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('', () => { + it('renders correctly', () => { + expect(createComponentWithIntl( + {}} // eslint-disable-line react/jsx-no-bind + count={0} + message={messages.queue} + /> + ).toJSON()).toMatchSnapshot(); + + expect(createComponentWithIntl( + {}} // eslint-disable-line react/jsx-no-bind + count={1} + message={messages.queue} + /> + ).toJSON()).toMatchSnapshot(); + + expect(createComponentWithIntl( + {}} // eslint-disable-line react/jsx-no-bind + count={9999999} + message={messages.queue} + /> + ).toJSON()).toMatchSnapshot(); + }); +}); diff --git a/app/soapbox/test_helpers.js b/app/soapbox/test_helpers.js new file mode 100644 index 000000000..41541ac43 --- /dev/null +++ b/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({children}); +}; diff --git a/app/soapbox/test_setup.js b/app/soapbox/test_setup.js index b185523f0..05f248813 100644 --- a/app/soapbox/test_setup.js +++ b/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); diff --git a/jest.config.js b/jest.config.js index 77fb55c23..f82434062 100644 --- a/jest.config.js +++ b/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': '/coverage', 'moduleDirectories': [