diff --git a/.eslintrc.js b/.eslintrc.js index 9f4b83d4c..f9dbc71df 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -217,15 +217,15 @@ module.exports = { 'import/newline-after-import': 'error', 'import/no-extraneous-dependencies': [ 'error', - { - devDependencies: [ - 'webpack/**', - 'app/soapbox/test_setup.js', - 'app/soapbox/test_helpers.js', - 'app/**/__tests__/**', - 'app/**/__mocks__/**', - ], - }, + // { + // devDependencies: [ + // 'webpack/**', + // 'app/soapbox/test_setup.js', + // 'app/soapbox/test_helpers.js', + // 'app/**/__tests__/**', + // 'app/**/__mocks__/**', + // ], + // }, ], 'import/no-unresolved': 'error', 'import/no-webpack-loader-syntax': 'error', diff --git a/app/soapbox/actions/__tests__/about-test.js b/app/soapbox/actions/__tests__/about-test.js index 49840e357..a0b042519 100644 --- a/app/soapbox/actions/__tests__/about-test.js +++ b/app/soapbox/actions/__tests__/about-test.js @@ -2,7 +2,7 @@ import MockAdapter from 'axios-mock-adapter'; import { Map as ImmutableMap } from 'immutable'; import { staticClient } from 'soapbox/api'; -import { mockStore } from 'soapbox/test_helpers'; +import { mockStore } from 'soapbox/jest/test-helpers'; import { FETCH_ABOUT_PAGE_REQUEST, diff --git a/app/soapbox/actions/__tests__/compose.test.js b/app/soapbox/actions/__tests__/compose.test.js index 73b64f801..5a743544d 100644 --- a/app/soapbox/actions/__tests__/compose.test.js +++ b/app/soapbox/actions/__tests__/compose.test.js @@ -1,6 +1,6 @@ +import { mockStore } from 'soapbox/jest/test-helpers'; import { InstanceRecord } from 'soapbox/normalizers'; import rootReducer from 'soapbox/reducers'; -import { mockStore } from 'soapbox/test_helpers'; import { uploadCompose } from '../compose'; diff --git a/app/soapbox/actions/__tests__/preload-test.js b/app/soapbox/actions/__tests__/preload-test.js index 5290802d2..a15165164 100644 --- a/app/soapbox/actions/__tests__/preload-test.js +++ b/app/soapbox/actions/__tests__/preload-test.js @@ -1,7 +1,7 @@ import { Map as ImmutableMap } from 'immutable'; import { __stub } from 'soapbox/api'; -import { mockStore } from 'soapbox/test_helpers'; +import { mockStore } from 'soapbox/jest/test-helpers'; import { VERIFY_CREDENTIALS_REQUEST } from '../auth'; import { ACCOUNTS_IMPORT } from '../importer'; diff --git a/app/soapbox/actions/__tests__/statuses-test.js b/app/soapbox/actions/__tests__/statuses-test.js index aa1ac9f3d..972330f39 100644 --- a/app/soapbox/actions/__tests__/statuses-test.js +++ b/app/soapbox/actions/__tests__/statuses-test.js @@ -1,6 +1,6 @@ import { STATUSES_IMPORT } from 'soapbox/actions/importer'; import { __stub } from 'soapbox/api'; -import { mockStore, rootState } from 'soapbox/test_helpers'; +import { mockStore, rootState } from 'soapbox/jest/test-helpers'; import { fetchContext } from '../statuses'; diff --git a/app/soapbox/components/__tests__/__snapshots__/autosuggest_emoji-test.js.snap b/app/soapbox/components/__tests__/__snapshots__/autosuggest_emoji-test.js.snap deleted file mode 100644 index 1ab178e15..000000000 --- a/app/soapbox/components/__tests__/__snapshots__/autosuggest_emoji-test.js.snap +++ /dev/null @@ -1,27 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` renders emoji with custom url 1`] = ` -
- foobar - :foobar: -
-`; - -exports[` renders native emoji 1`] = ` -
- 💙 - :foobar: -
-`; diff --git a/app/soapbox/components/__tests__/__snapshots__/avatar-test.js.snap b/app/soapbox/components/__tests__/__snapshots__/avatar-test.js.snap deleted file mode 100644 index 79035031e..000000000 --- a/app/soapbox/components/__tests__/__snapshots__/avatar-test.js.snap +++ /dev/null @@ -1,37 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` Autoplay renders an animated avatar 1`] = ` -
- -
-`; - -exports[` Still renders a still avatar 1`] = ` -
- -
-`; diff --git a/app/soapbox/components/__tests__/__snapshots__/avatar_overlay-test.js.snap b/app/soapbox/components/__tests__/__snapshots__/avatar_overlay-test.js.snap deleted file mode 100644 index 6481d1b69..000000000 --- a/app/soapbox/components/__tests__/__snapshots__/avatar_overlay-test.js.snap +++ /dev/null @@ -1,28 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` -
- -
-
- -
- -`; diff --git a/app/soapbox/components/__tests__/__snapshots__/badge-test.js.snap b/app/soapbox/components/__tests__/__snapshots__/badge-test.js.snap deleted file mode 100644 index 73783081c..000000000 --- a/app/soapbox/components/__tests__/__snapshots__/badge-test.js.snap +++ /dev/null @@ -1,9 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` renders correctly 1`] = ` - - Patron - -`; 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 deleted file mode 100644 index 11cf66e96..000000000 --- a/app/soapbox/components/__tests__/__snapshots__/column_back_button-test.js.snap +++ /dev/null @@ -1,16 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` renders correctly 1`] = ` - -`; diff --git a/app/soapbox/components/__tests__/__snapshots__/display_name-test.js.snap b/app/soapbox/components/__tests__/__snapshots__/display_name-test.js.snap deleted file mode 100644 index 76c9e9445..000000000 --- a/app/soapbox/components/__tests__/__snapshots__/display_name-test.js.snap +++ /dev/null @@ -1,35 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` renders display name + account name 1`] = ` - - - - - - - - - - @ - bar@baz - - -`; diff --git a/app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap b/app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap deleted file mode 100644 index f5ca74772..000000000 --- a/app/soapbox/components/__tests__/__snapshots__/emoji_selector-test.js.snap +++ /dev/null @@ -1,86 +0,0 @@ -// 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 deleted file mode 100644 index 21f128b39..000000000 --- a/app/soapbox/components/__tests__/__snapshots__/timeline_queue_button_header-test.js.snap +++ /dev/null @@ -1,80 +0,0 @@ -// 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__/autosuggest_emoji-test.js b/app/soapbox/components/__tests__/autosuggest_emoji-test.js index 9a2fb58e8..938ca737b 100644 --- a/app/soapbox/components/__tests__/autosuggest_emoji-test.js +++ b/app/soapbox/components/__tests__/autosuggest_emoji-test.js @@ -1,6 +1,6 @@ import React from 'react'; -import renderer from 'react-test-renderer'; +import { render, screen } from '../../jest/test-helpers'; import AutosuggestEmoji from '../autosuggest_emoji'; describe('', () => { @@ -9,10 +9,11 @@ describe('', () => { native: '💙', colons: ':foobar:', }; - const component = renderer.create(); - const tree = component.toJSON(); - expect(tree).toMatchSnapshot(); + render(); + + expect(screen.getByTestId('emoji')).toHaveTextContent('foobar'); + expect(screen.getByRole('img').getAttribute('src')).not.toBe('http://example.com/emoji.png'); }); it('renders emoji with custom url', () => { @@ -22,9 +23,10 @@ describe('', () => { native: 'foobar', colons: ':foobar:', }; - const component = renderer.create(); - const tree = component.toJSON(); - expect(tree).toMatchSnapshot(); + render(); + + expect(screen.getByTestId('emoji')).toHaveTextContent('foobar'); + expect(screen.getByRole('img').getAttribute('src')).toBe('http://example.com/emoji.png'); }); }); diff --git a/app/soapbox/components/__tests__/avatar-test.js b/app/soapbox/components/__tests__/avatar-test.js deleted file mode 100644 index 3834dfbb5..000000000 --- a/app/soapbox/components/__tests__/avatar-test.js +++ /dev/null @@ -1,38 +0,0 @@ -import { fromJS } from 'immutable'; -import React from 'react'; - -import { createComponent } from 'soapbox/test_helpers'; - -import Avatar from '../avatar'; - -describe('', () => { - const account = fromJS({ - username: 'alice', - acct: 'alice', - display_name: 'Alice', - avatar: '/animated/alice.gif', - avatar_static: '/static/alice.jpg', - }); - - const size = 100; - - describe('Autoplay', () => { - it('renders an animated avatar', () => { - const component = createComponent(); - const tree = component.toJSON(); - - expect(tree).toMatchSnapshot(); - }); - }); - - describe('Still', () => { - it('renders a still avatar', () => { - const component = createComponent(); - const tree = component.toJSON(); - - expect(tree).toMatchSnapshot(); - }); - }); - - // TODO add autoplay test if possible -}); diff --git a/app/soapbox/components/__tests__/avatar.test.js b/app/soapbox/components/__tests__/avatar.test.js new file mode 100644 index 000000000..6b50083ed --- /dev/null +++ b/app/soapbox/components/__tests__/avatar.test.js @@ -0,0 +1,35 @@ +import { fromJS } from 'immutable'; +import React from 'react'; + +import { render, screen } from '../../jest/test-helpers'; +import Avatar from '../avatar'; + +describe('', () => { + const account = fromJS({ + username: 'alice', + acct: 'alice', + display_name: 'Alice', + avatar: '/animated/alice.gif', + avatar_static: '/static/alice.jpg', + }); + + const size = 100; + + // describe('Autoplay', () => { + // it('renders an animated avatar', () => { + // render(); + + // expect(screen.getByRole('img').getAttribute('src')).toBe(account.get('avatar')); + // }); + // }); + + describe('Still', () => { + it('renders a still avatar', () => { + render(); + + expect(screen.getByRole('img').getAttribute('src')).toBe(account.get('avatar')); + }); + }); + + // TODO add autoplay test if possible +}); diff --git a/app/soapbox/components/__tests__/avatar_overlay-test.js b/app/soapbox/components/__tests__/avatar_overlay.test.js similarity index 71% rename from app/soapbox/components/__tests__/avatar_overlay-test.js rename to app/soapbox/components/__tests__/avatar_overlay.test.js index db4250c59..b62d4eef8 100644 --- a/app/soapbox/components/__tests__/avatar_overlay-test.js +++ b/app/soapbox/components/__tests__/avatar_overlay.test.js @@ -1,8 +1,7 @@ import { fromJS } from 'immutable'; import React from 'react'; -import { createComponent } from 'soapbox/test_helpers'; - +import { render, screen } from '../../jest/test-helpers'; import AvatarOverlay from '../avatar_overlay'; describe(' { @@ -23,9 +22,7 @@ describe(' { }); it('renders a overlay avatar', () => { - const component = createComponent(); - const tree = component.toJSON(); - - expect(tree).toMatchSnapshot(); + render(); + expect(screen.queryAllByRole('img')).toHaveLength(2); }); }); diff --git a/app/soapbox/components/__tests__/badge-test.js b/app/soapbox/components/__tests__/badge-test.js deleted file mode 100644 index 0b577dc18..000000000 --- a/app/soapbox/components/__tests__/badge-test.js +++ /dev/null @@ -1,12 +0,0 @@ -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__/badge.test.js b/app/soapbox/components/__tests__/badge.test.js new file mode 100644 index 000000000..1de80285d --- /dev/null +++ b/app/soapbox/components/__tests__/badge.test.js @@ -0,0 +1,12 @@ +import React from 'react'; + +import { render, screen } from '../../jest/test-helpers'; +import Badge from '../badge'; + +describe('', () => { + it('renders correctly', () => { + render(); + + expect(screen.getByTestId('badge')).toHaveTextContent('Patron'); + }); +}); diff --git a/app/soapbox/components/__tests__/column_back_button-test.js b/app/soapbox/components/__tests__/column_back_button-test.js deleted file mode 100644 index b1e5e0849..000000000 --- a/app/soapbox/components/__tests__/column_back_button-test.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; - -import { createComponent } from 'soapbox/test_helpers'; - -import ColumnBackButton from '../column_back_button'; - -describe('', () => { - it('renders correctly', () => { - const component = createComponent(); - 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..6ebc95f40 --- /dev/null +++ b/app/soapbox/components/__tests__/column_back_button.test.js @@ -0,0 +1,12 @@ +import React from 'react'; + +import { render, screen } from '../../jest/test-helpers'; +import ColumnBackButton from '../column_back_button'; + +describe('', () => { + it('renders correctly', () => { + render(); + + expect(screen.getByRole('button')).toHaveTextContent('Back'); + }); +}); diff --git a/app/soapbox/components/__tests__/display_name-test.js b/app/soapbox/components/__tests__/display_name.test.js similarity index 57% rename from app/soapbox/components/__tests__/display_name-test.js rename to app/soapbox/components/__tests__/display_name.test.js index 2583d341b..00e175d40 100644 --- a/app/soapbox/components/__tests__/display_name-test.js +++ b/app/soapbox/components/__tests__/display_name.test.js @@ -1,16 +1,15 @@ import React from 'react'; import { normalizeAccount } from 'soapbox/normalizers'; -import { createComponent } from 'soapbox/test_helpers'; +import { render, screen } from '../../jest/test-helpers'; import DisplayName from '../display_name'; describe('', () => { it('renders display name + account name', () => { const account = normalizeAccount({ acct: 'bar@baz' }); - const component = createComponent(); - const tree = component.toJSON(); + render(); - expect(tree).toMatchSnapshot(); + expect(screen.getByTestId('display-name')).toHaveTextContent('bar@baz'); }); }); diff --git a/app/soapbox/components/__tests__/emoji_selector-test.js b/app/soapbox/components/__tests__/emoji_selector.test.js similarity index 57% rename from app/soapbox/components/__tests__/emoji_selector-test.js rename to app/soapbox/components/__tests__/emoji_selector.test.js index c61263cc6..891e3e61c 100644 --- a/app/soapbox/components/__tests__/emoji_selector-test.js +++ b/app/soapbox/components/__tests__/emoji_selector.test.js @@ -1,7 +1,6 @@ import React from 'react'; -import { createComponent } from 'soapbox/test_helpers'; - +import { render, screen } from '../../jest/test-helpers'; import EmojiSelector from '../emoji_selector'; describe('', () => { @@ -9,8 +8,8 @@ describe('', () => { const children = ; children.__proto__.addEventListener = () => {}; - const component = createComponent(children, {}, true); - const tree = component.toJSON(); - expect(tree).toMatchSnapshot(); + render(children); + + expect(screen.queryAllByRole('button')).toHaveLength(6); }); }); diff --git a/app/soapbox/components/__tests__/timeline_queue_button_header-test.js b/app/soapbox/components/__tests__/timeline_queue_button_header.test.js similarity index 70% rename from app/soapbox/components/__tests__/timeline_queue_button_header-test.js rename to app/soapbox/components/__tests__/timeline_queue_button_header.test.js index d2f9dc534..6874452ae 100644 --- a/app/soapbox/components/__tests__/timeline_queue_button_header-test.js +++ b/app/soapbox/components/__tests__/timeline_queue_button_header.test.js @@ -1,8 +1,7 @@ import React from 'react'; import { defineMessages } from 'react-intl'; -import { createComponent } from 'soapbox/test_helpers'; - +import { render, screen } from '../../jest/test-helpers'; import TimelineQueueButtonHeader from '../timeline_queue_button_header'; const messages = defineMessages({ @@ -10,32 +9,35 @@ const messages = defineMessages({ }); describe('', () => { - it('renders correctly', () => { - expect(createComponent( + it('renders correctly', async() => { + render( {}} // eslint-disable-line react/jsx-no-bind count={0} message={messages.queue} />, - ).toJSON()).toMatchSnapshot(); + ); + expect(screen.queryAllByRole('link')).toHaveLength(0); - expect(createComponent( + render( {}} // eslint-disable-line react/jsx-no-bind count={1} message={messages.queue} />, - ).toJSON()).toMatchSnapshot(); + ); + expect(screen.getByText('Click to see 1 new post', { hidden: true })).toBeInTheDocument(); - expect(createComponent( + render( {}} // eslint-disable-line react/jsx-no-bind count={9999999} message={messages.queue} />, - ).toJSON()).toMatchSnapshot(); + ); + expect(screen.getByText('Click to see 9999999 new posts', { hidden: true })).toBeInTheDocument(); }); }); diff --git a/app/soapbox/components/autosuggest_emoji.js b/app/soapbox/components/autosuggest_emoji.js index f82ff6990..e16d2a2c5 100644 --- a/app/soapbox/components/autosuggest_emoji.js +++ b/app/soapbox/components/autosuggest_emoji.js @@ -28,7 +28,7 @@ export default class AutosuggestEmoji extends React.PureComponent { } return ( -
+
( - {props.title} + {props.title} ); Badge.propTypes = { diff --git a/app/soapbox/components/display_name.js b/app/soapbox/components/display_name.js index 69a1c0177..141988697 100644 --- a/app/soapbox/components/display_name.js +++ b/app/soapbox/components/display_name.js @@ -72,7 +72,7 @@ class DisplayName extends React.PureComponent { } return ( - + {displayName} diff --git a/app/soapbox/components/ui/button/__tests__/__snapshots__/button.test.js.snap b/app/soapbox/components/ui/button/__tests__/__snapshots__/button.test.js.snap deleted file mode 100644 index 832b77056..000000000 --- a/app/soapbox/components/ui/button/__tests__/__snapshots__/button.test.js.snap +++ /dev/null @@ -1,72 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` -`; - -exports[` -`; - -exports[` -`; diff --git a/app/soapbox/components/ui/button/__tests__/button.test.js b/app/soapbox/components/ui/button/__tests__/button.test.js deleted file mode 100644 index f6cc2e4fb..000000000 --- a/app/soapbox/components/ui/button/__tests__/button.test.js +++ /dev/null @@ -1,76 +0,0 @@ -import { shallow } from 'enzyme'; -import React from 'react'; -import renderer from 'react-test-renderer'; - -import Button from '../button'; - -describe('); - const tree = component.toJSON(); - - expect(tree).toMatchSnapshot(); - }); - - it('renders the props.text instead of children', () => { - const text = 'foo'; - const children =

children

; - const component = renderer.create(); - const tree = component.toJSON(); - - expect(tree).toMatchSnapshot(); - }); - - it('renders class="button--block" if props.block given', () => { - const component = renderer.create(); + + expect(screen.getByRole('button')).toHaveTextContent('children'); + }); + + it('renders the props.text instead of children', () => { + const text = 'foo'; + const children =

children

; + render(); + + expect(screen.getByRole('button')).toHaveTextContent('foo'); + expect(screen.getByRole('button')).not.toHaveTextContent('children'); + }); + + it('render full-width button if block prop given', () => { + render( -

-

-
-
-
-`; diff --git a/app/soapbox/components/ui/column/__tests__/column.test.js b/app/soapbox/components/ui/column/__tests__/column.test.js deleted file mode 100644 index b62f724ae..000000000 --- a/app/soapbox/components/ui/column/__tests__/column.test.js +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; - -import { createComponent } from 'soapbox/test_helpers'; - -import Column from '../column'; - -describe('', () => { - it('renders correctly with minimal props', () => { - const component = createComponent(); - const tree = component.toJSON(); - expect(tree).toMatchSnapshot(); - }); -}); diff --git a/app/soapbox/components/ui/column/__tests__/column.test.tsx b/app/soapbox/components/ui/column/__tests__/column.test.tsx new file mode 100644 index 000000000..6241773fa --- /dev/null +++ b/app/soapbox/components/ui/column/__tests__/column.test.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +import { render, screen } from '../../../../jest/test-helpers'; +import Column from '../column'; + +describe('', () => { + it('renders correctly with minimal props', () => { + render(); + + expect(screen.getByRole('button')).toHaveTextContent('Back'); + }); +}); diff --git a/app/soapbox/components/ui/form-group/__tests__/form-group.test.js b/app/soapbox/components/ui/form-group/__tests__/form-group.test.js deleted file mode 100644 index e880b447b..000000000 --- a/app/soapbox/components/ui/form-group/__tests__/form-group.test.js +++ /dev/null @@ -1,61 +0,0 @@ -import React from 'react'; - -import { createShallowComponent } from 'soapbox/test_helpers'; - -jest.mock('uuid', () => ({ - ...jest.requireActual('uuid'), -})); - -import FormGroup from '../form-group'; - -describe('', () => { - it('connects the label and input', () => { - const component = createShallowComponent( - - - , - ); - const otherComponent = createShallowComponent( - - - , - ); - - const inputId = component.find('input').at(0).prop('id'); - const labelId = component.find('label').at(0).prop('htmlFor'); - expect(inputId).toBe(labelId); - - const otherInputId = otherComponent.find('input').at(0).prop('id'); - expect(otherInputId).not.toBe(inputId); - }); - - it('renders errors', () => { - const component = createShallowComponent( - - - , - ); - - expect(component.text()).toContain('is invalid, is required'); - }); - - it('renders label', () => { - const component = createShallowComponent( - - - , - ); - - expect(component.text()).toContain('My label'); - }); - - it('renders hint', () => { - const component = createShallowComponent( - - - , - ); - - expect(component.text()).toContain('My hint'); - }); -}); diff --git a/app/soapbox/components/ui/form-group/__tests__/form-group.test.tsx b/app/soapbox/components/ui/form-group/__tests__/form-group.test.tsx new file mode 100644 index 000000000..676631a3b --- /dev/null +++ b/app/soapbox/components/ui/form-group/__tests__/form-group.test.tsx @@ -0,0 +1,60 @@ +import React from 'react'; + +import { render, screen } from '../../../../jest/test-helpers'; +import FormGroup from '../form-group'; + +jest.mock('uuid', () => jest.requireActual('uuid')); + +describe('', () => { + it('connects the label and input', () => { + render( + <> +
+ + + +
+ +
+ + + +
+ , + ); + + expect(screen.getByLabelText('My label')).toHaveAttribute('data-testid'); + expect(screen.getByLabelText('My other label')).not.toHaveAttribute('data-testid'); + expect(screen.queryByTestId('form-group-error')).not.toBeInTheDocument(); + }); + + it('renders errors', () => { + render( + + + , + ); + + expect(screen.getByTestId('form-group-error')).toHaveTextContent('is invalid'); + }); + + it('renders label', () => { + render( + + + , + ); + + expect(screen.getByTestId('form-group-label')).toHaveTextContent('My label'); + }); + + it('renders hint', () => { + render( + + + , + ); + + expect(screen.getByTestId('form-group-hint')).toHaveTextContent('My hint'); + }); +}); diff --git a/app/soapbox/components/ui/form-group/form-group.tsx b/app/soapbox/components/ui/form-group/form-group.tsx index acb78b623..bd8a078a1 100644 --- a/app/soapbox/components/ui/form-group/form-group.tsx +++ b/app/soapbox/components/ui/form-group/form-group.tsx @@ -24,6 +24,7 @@ const FormGroup: React.FC = (props) => {
-
+
- +
- + {
- + { {intl.formatMessage(messages.deleteText)}

- + - + }> - diff --git a/app/soapbox/features/developers/settings_store.js b/app/soapbox/features/developers/settings_store.js index f13e1622c..2ff9ce9df 100644 --- a/app/soapbox/features/developers/settings_store.js +++ b/app/soapbox/features/developers/settings_store.js @@ -90,7 +90,7 @@ class SettingsStore extends ImmutablePureComponent { return ( - + { - + { - + renders correctly 1`] = ` -
- -
-`; - -exports[` renders correctly 1`] = ` -
-`; - -exports[` renders correctly 1`] = ` -
- -
-`; - -exports[` renders correctly 1`] = ` -
-`; - -exports[` renders correctly 1`] = ` -
-
-
-
-`; - -exports[` renders correctly 1`] = ` - -`; - -exports[` renders correctly 1`] = ` - -`; - -exports[` renders correctly 1`] = ` -
- -
-`; - -exports[` renders correctly 1`] = ` -
- -
-`; diff --git a/app/soapbox/features/forms/__tests__/forms-test.js b/app/soapbox/features/forms/__tests__/forms-test.js deleted file mode 100644 index 566e87c0f..000000000 --- a/app/soapbox/features/forms/__tests__/forms-test.js +++ /dev/null @@ -1,86 +0,0 @@ -import React from 'react'; -import renderer from 'react-test-renderer'; - -import { - InputContainer, - SimpleInput, - SimpleForm, - FieldsGroup, - Checkbox, - RadioGroup, - SelectDropdown, - TextInput, - FileChooser, -} from '..'; - -describe('', () => { - it('renders correctly', () => { - expect(renderer.create( - , - ).toJSON()).toMatchSnapshot(); - }); -}); - -describe('', () => { - it('renders correctly', () => { - expect(renderer.create( - , - ).toJSON()).toMatchSnapshot(); - }); -}); - -describe('', () => { - it('renders correctly', () => { - expect(renderer.create( - , - ).toJSON()).toMatchSnapshot(); - }); -}); - -describe('', () => { - it('renders correctly', () => { - expect(renderer.create( - , - ).toJSON()).toMatchSnapshot(); - }); -}); - -describe('', () => { - it('renders correctly', () => { - expect(renderer.create( - , - ).toJSON()).toMatchSnapshot(); - }); -}); - -describe('', () => { - it('renders correctly', () => { - expect(renderer.create( - , - ).toJSON()).toMatchSnapshot(); - }); -}); - -describe('', () => { - it('renders correctly', () => { - expect(renderer.create( - , - ).toJSON()).toMatchSnapshot(); - }); -}); - -describe('', () => { - it('renders correctly', () => { - expect(renderer.create( - , - ).toJSON()).toMatchSnapshot(); - }); -}); - -describe('', () => { - it('renders correctly', () => { - expect(renderer.create( - , - ).toJSON()).toMatchSnapshot(); - }); -}); diff --git a/app/soapbox/features/security/mfa_form.js b/app/soapbox/features/security/mfa_form.js index 7798e3f40..dd15bfb3d 100644 --- a/app/soapbox/features/security/mfa_form.js +++ b/app/soapbox/features/security/mfa_form.js @@ -144,7 +144,7 @@ class DisableOtpForm extends ImmutablePureComponent { const { isLoading, password } = this.state; return ( - + @@ -335,7 +335,7 @@ class OtpConfirmForm extends ImmutablePureComponent {
- + 1. diff --git a/app/soapbox/features/ui/components/__tests__/__snapshots__/compose-button.test.js.snap b/app/soapbox/features/ui/components/__tests__/__snapshots__/compose-button.test.js.snap deleted file mode 100644 index 670ad6cad..000000000 --- a/app/soapbox/features/ui/components/__tests__/__snapshots__/compose-button.test.js.snap +++ /dev/null @@ -1,29 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[` renders a button element 1`] = ` -
- -
-`; diff --git a/app/soapbox/features/ui/components/__tests__/compose-button.test.js b/app/soapbox/features/ui/components/__tests__/compose-button.test.js index 88ea5fcce..86b9b84bd 100644 --- a/app/soapbox/features/ui/components/__tests__/compose-button.test.js +++ b/app/soapbox/features/ui/components/__tests__/compose-button.test.js @@ -1,26 +1,39 @@ +import { fireEvent, render, screen } from '@testing-library/react'; import { Map as ImmutableMap } from 'immutable'; import React from 'react'; +import { IntlProvider } from 'react-intl'; +import { Provider } from 'react-redux'; +import '@testing-library/jest-dom'; import { MODAL_OPEN } from 'soapbox/actions/modals'; +import { mockStore } from 'soapbox/jest/test-helpers'; import rootReducer from 'soapbox/reducers'; -import { createComponent, mockStore } from 'soapbox/test_helpers'; import ComposeButton from '../compose-button'; +const store = mockStore(rootReducer(ImmutableMap(), {})); +const renderComposeButton = () => { + render( + + + + + , + ); +}; + describe('', () => { it('renders a button element', () => { - const component = createComponent(); - const tree = component.toJSON(); + renderComposeButton(); - expect(tree).toMatchSnapshot(); + expect(screen.getByRole('button')).toHaveTextContent('Compose'); }); it('dispatches the MODAL_OPEN action', () => { - const store = mockStore(rootReducer(ImmutableMap(), {})); - const component = createComponent(, { store }); + renderComposeButton(); expect(store.getActions().length).toEqual(0); - component.root.findByType('button').props.onClick(); + fireEvent.click(screen.getByRole('button')); expect(store.getActions()[0].type).toEqual(MODAL_OPEN); }); }); diff --git a/app/soapbox/features/ui/containers/notifications_container.js b/app/soapbox/features/ui/containers/notifications_container.js index f3f1f90ea..2e113c8fb 100644 --- a/app/soapbox/features/ui/containers/notifications_container.js +++ b/app/soapbox/features/ui/containers/notifications_container.js @@ -8,7 +8,7 @@ import { dismissAlert } from '../../../actions/alerts'; import { getAlerts } from '../../../selectors'; const CustomNotificationStack = (props) => ( -
+
); diff --git a/app/soapbox/reducers/__tests__/alerts-test.js b/app/soapbox/reducers/__tests__/alerts-test.js index 907a0adb3..306ab2fcd 100644 --- a/app/soapbox/reducers/__tests__/alerts-test.js +++ b/app/soapbox/reducers/__tests__/alerts-test.js @@ -5,7 +5,7 @@ import { ALERT_DISMISS, ALERT_CLEAR, } from 'soapbox/actions/alerts'; -import { applyActions } from 'soapbox/test_helpers'; +import { applyActions } from 'soapbox/jest/test-helpers'; import reducer from '../alerts'; diff --git a/app/soapbox/reducers/__tests__/notifications-test.js b/app/soapbox/reducers/__tests__/notifications-test.js index aa5b7cd62..446cfbc68 100644 --- a/app/soapbox/reducers/__tests__/notifications-test.js +++ b/app/soapbox/reducers/__tests__/notifications-test.js @@ -28,7 +28,7 @@ import { NOTIFICATIONS_MARK_READ_REQUEST, } from 'soapbox/actions/notifications'; import { TIMELINE_DELETE } from 'soapbox/actions/timelines'; -import { applyActions } from 'soapbox/test_helpers'; +import { applyActions } from 'soapbox/jest/test-helpers'; import reducer from '../notifications';