Test: Start creating component snapshots

This commit is contained in:
Alex Gleason 2020-06-09 21:29:50 -05:00
parent 522170c07f
commit 6d6dbd9113
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
22 changed files with 303 additions and 10 deletions

View file

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

View file

@ -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', () => {

View file

@ -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', () => {

View file

@ -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]}

View file

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

View file

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

View file

@ -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>
`;

View file

@ -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>
`;

View file

@ -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>
`;

View file

@ -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>
`;

View file

@ -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>
`;

View file

@ -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();

View file

@ -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();
});
});

View file

@ -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();
});
});

View file

@ -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();
});
});

View file

@ -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();
});
});

View file

@ -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();
});
});

View file

@ -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();
});
});

View file

@ -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();
});
});

View file

@ -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>);
};

View file

@ -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);

View file

@ -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': [