matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Convert old tests to use "react-testing-library"

Browse Source
This commit is contained in:
Justin
2022-04-04 11:53:47 -04:00
parent 9a099b3fa7
commit ed47cf5f09
71 changed files with 411 additions and 1515 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
app/soapbox/components/__tests__/__snapshots__/autosuggest_emoji-test.js.snap
View File

@ -1,27 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<AutosuggestEmoji /> renders emoji with custom url 1`] = `
<div
className="autosuggest-emoji"
>
<img
alt="foobar"
className="emojione"
src="http://example.com/emoji.png"
/>
:foobar:
</div>
`;
exports[`<AutosuggestEmoji /> renders native emoji 1`] = `
<div
className="autosuggest-emoji"
>
<img
alt="💙"
className="emojione"
src="/packs/emoji/1f499.svg"
/>
:foobar:
</div>
`;

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

@ -1,37 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Avatar /> Autoplay renders an animated avatar 1`] = `
<div
className="rounded-full still-image"
style={
Object {
"height": "100px",
"width": "100px",
}
}
>
<img
alt=""
onLoad={[Function]}
src="/animated/alice.gif"
/>
</div>
`;
exports[`<Avatar /> Still renders a still avatar 1`] = `
<div
className="rounded-full still-image"
style={
Object {
"height": "100px",
"width": "100px",
}
}
>
<img
alt=""
onLoad={[Function]}
src="/animated/alice.gif"
/>
</div>
`;

28
app/soapbox/components/__tests__/__snapshots__/avatar_overlay-test.js.snap
View File

@ -1,28 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<AvatarOverlay renders a overlay avatar 1`] = `
<div
className="account__avatar-overlay"
>
<div
className="account__avatar-overlay-base still-image"
style={Object {}}
>
<img
alt=""
onLoad={[Function]}
src="/animated/alice.gif"
/>
</div>
<div
className="account__avatar-overlay-overlay still-image"
style={Object {}}
>
<img
alt=""
onLoad={[Function]}
src="/animated/eve.gif"
/>
</div>
</div>
`;

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

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

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

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

35
app/soapbox/components/__tests__/__snapshots__/display_name-test.js.snap
View File

@ -1,35 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<DisplayName /> renders display name + account name 1`] = `
<span
className="display-name"
>
<span
className="hover-ref-wrapper"
onClick={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
>
<span
className="display-name__name"
>
<bdi>
<strong
className="display-name__html"
dangerouslySetInnerHTML={
Object {
"__html": "bar",
}
}
/>
</bdi>
</span>
</span>
<span
className="display-name__account"
>
@
bar@baz
</span>
</span>
`;

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

@ -1,86 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<EmojiSelector /> renders correctly 1`] = `
<div
onBlur={[Function]}
onFocus={[Function]}
tabIndex="-1"
>
<div
className="flex space-x-2 bg-white dark:bg-slate-900 p-3 rounded-full shadow-md z-[999] w-max"
>
<button
className=""
onClick={[Function]}
tabIndex={-1}
>
<img
alt="👍"
className="w-8 h-8 duration-100 hover:scale-125"
draggable="false"
src="/packs/emoji/1f44d.svg"
/>
</button>
<button
className=""
onClick={[Function]}
tabIndex={-1}
>
<img
alt="❤"
className="w-8 h-8 duration-100 hover:scale-125"
draggable="false"
src="/packs/emoji/2764.svg"
/>
</button>
<button
className=""
onClick={[Function]}
tabIndex={-1}
>
<img
alt="😆"
className="w-8 h-8 duration-100 hover:scale-125"
draggable="false"
src="/packs/emoji/1f606.svg"
/>
</button>
<button
className=""
onClick={[Function]}
tabIndex={-1}
>
<img
alt="😮"
className="w-8 h-8 duration-100 hover:scale-125"
draggable="false"
src="/packs/emoji/1f62e.svg"
/>
</button>
<button
className=""
onClick={[Function]}
tabIndex={-1}
>
<img
alt="😢"
className="w-8 h-8 duration-100 hover:scale-125"
draggable="false"
src="/packs/emoji/1f622.svg"
/>
</button>
<button
className=""
onClick={[Function]}
tabIndex={-1}
>
<img
alt="😩"
className="w-8 h-8 duration-100 hover:scale-125"
draggable="false"
src="/packs/emoji/1f629.svg"
/>
</button>
</div>
</div>
`;

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

@ -1,80 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<TimelineQueueButtonHeader /> renders correctly 1`] = `
<div
className="left-1/2 -translate-x-1/2 fixed top-20 z-50 hidden"
>
<a
className="flex items-center bg-primary-600 hover:bg-primary-700 hover:scale-105 active:scale-100 transition-transform text-white rounded-full px-4 py-2 space-x-1.5 cursor-pointer"
onClick={[Function]}
>
<div
className="svg-icon"
>
<svg
id={
Object {
"process": [Function],
}
}
/>
</div>
</a>
</div>
`;
exports[`<TimelineQueueButtonHeader /> renders correctly 2`] = `
<div
className="left-1/2 -translate-x-1/2 fixed top-20 z-50 hidden"
>
<a
className="flex items-center bg-primary-600 hover:bg-primary-700 hover:scale-105 active:scale-100 transition-transform text-white rounded-full px-4 py-2 space-x-1.5 cursor-pointer"
onClick={[Function]}
>
<div
className="svg-icon"
>
<svg
id={
Object {
"process": [Function],
}
}
/>
</div>
<p
className="text-sm text-inherit font-normal tracking-normal font-sans"
>
Click to see 1 new post
</p>
</a>
</div>
`;
exports[`<TimelineQueueButtonHeader /> renders correctly 3`] = `
<div
className="left-1/2 -translate-x-1/2 fixed top-20 z-50 hidden"
>
<a
className="flex items-center bg-primary-600 hover:bg-primary-700 hover:scale-105 active:scale-100 transition-transform text-white rounded-full px-4 py-2 space-x-1.5 cursor-pointer"
onClick={[Function]}
>
<div
className="svg-icon"
>
<svg
id={
Object {
"process": [Function],
}
}
/>
</div>
<p
className="text-sm text-inherit font-normal tracking-normal font-sans"
>
Click to see 9999999 new posts
</p>
</a>
</div>
`;

16
app/soapbox/components/__tests__/autosuggest_emoji-test.js
View File

@ -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('<AutosuggestEmoji />', () => {
@ -9,10 +9,11 @@ describe('<AutosuggestEmoji />', () => {
native: '💙',
colons: ':foobar:',
};
const component = renderer.create(<AutosuggestEmoji emoji={emoji} />);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
render(<AutosuggestEmoji emoji={emoji} />);
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('<AutosuggestEmoji />', () => {
native: 'foobar',
colons: ':foobar:',
};
const component = renderer.create(<AutosuggestEmoji emoji={emoji} />);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
render(<AutosuggestEmoji emoji={emoji} />);
expect(screen.getByTestId('emoji')).toHaveTextContent('foobar');
expect(screen.getByRole('img').getAttribute('src')).toBe('http://example.com/emoji.png');
});
});

38
app/soapbox/components/__tests__/avatar-test.js
View File

@ -1,38 +0,0 @@
import { fromJS } from 'immutable';
import React from 'react';
import { createComponent } from 'soapbox/test_helpers';
import Avatar from '../avatar';
describe('<Avatar />', () => {
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(<Avatar account={account} animate size={size} />);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
});
describe('Still', () => {
it('renders a still avatar', () => {
const component = createComponent(<Avatar account={account} size={size} />);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
});
// TODO add autoplay test if possible
});

35
app/soapbox/components/__tests__/avatar.test.js Normal file
View File

@ -0,0 +1,35 @@
import { fromJS } from 'immutable';
import React from 'react';
import { render, screen } from '../../jest/test-helpers';
import Avatar from '../avatar';
describe('<Avatar />', () => {
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(<Avatar account={account} animate size={size} />);
// expect(screen.getByRole('img').getAttribute('src')).toBe(account.get('avatar'));
// });
// });
describe('Still', () => {
it('renders a still avatar', () => {
render(<Avatar account={account} size={size} />);
expect(screen.getByRole('img').getAttribute('src')).toBe(account.get('avatar'));
});
});
// TODO add autoplay test if possible
});

9
app/soapbox/components/__tests__/avatar_overlay-test.js → app/soapbox/components/__tests__/avatar_overlay.test.js
View File

@ -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('<AvatarOverlay', () => {
@ -23,9 +22,7 @@ describe('<AvatarOverlay', () => {
});
it('renders a overlay avatar', () => {
const component = createComponent(<AvatarOverlay account={account} friend={friend} />);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
render(<AvatarOverlay account={account} friend={friend} />);
expect(screen.queryAllByRole('img')).toHaveLength(2);
});
});

12
app/soapbox/components/__tests__/badge-test.js
View File

@ -1,12 +0,0 @@
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();
});
});

12
app/soapbox/components/__tests__/badge.test.js Normal file
View File

@ -0,0 +1,12 @@
import React from 'react';
import { render, screen } from '../../jest/test-helpers';
import Badge from '../badge';
describe('<Badge />', () => {
it('renders correctly', () => {
render(<Badge slug='patron' title='Patron' />);
expect(screen.getByTestId('badge')).toHaveTextContent('Patron');
});
});

13
app/soapbox/components/__tests__/column_back_button-test.js
View File

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

12
app/soapbox/components/__tests__/column_back_button.test.js Normal file
View File

@ -0,0 +1,12 @@
import React from 'react';
import { render, screen } from '../../jest/test-helpers';
import ColumnBackButton from '../column_back_button';
describe('<ColumnBackButton />', () => {
it('renders correctly', () => {
render(<ColumnBackButton />);
expect(screen.getByRole('button')).toHaveTextContent('Back');
});
});

7
app/soapbox/components/__tests__/display_name-test.js → app/soapbox/components/__tests__/display_name.test.js
View File

@ -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('<DisplayName />', () => {
it('renders display name + account name', () => {
const account = normalizeAccount({ acct: 'bar@baz' });
const component = createComponent(<DisplayName account={account} />);
const tree = component.toJSON();
render(<DisplayName account={account} />);
expect(tree).toMatchSnapshot();
expect(screen.getByTestId('display-name')).toHaveTextContent('bar@baz');
});
});

9
app/soapbox/components/__tests__/emoji_selector-test.js → app/soapbox/components/__tests__/emoji_selector.test.js
View File

@ -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('<EmojiSelector />', () => {
@ -9,8 +8,8 @@ describe('<EmojiSelector />', () => {
const children = <EmojiSelector />;
children.__proto__.addEventListener = () => {};
const component = createComponent(children, {}, true);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
render(children);
expect(screen.queryAllByRole('button')).toHaveLength(6);
});
});

20
app/soapbox/components/__tests__/timeline_queue_button_header-test.js → app/soapbox/components/__tests__/timeline_queue_button_header.test.js
View File

@ -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('<TimelineQueueButtonHeader />', () => {
it('renders correctly', () => {
expect(createComponent(
it('renders correctly', async() => {
render(
<TimelineQueueButtonHeader
key='timeline-queue-button-header'
onClick={() => {}} // eslint-disable-line react/jsx-no-bind
count={0}
message={messages.queue}
/>,
).toJSON()).toMatchSnapshot();
);
expect(screen.queryAllByRole('link')).toHaveLength(0);
expect(createComponent(
render(
<TimelineQueueButtonHeader
key='timeline-queue-button-header'
onClick={() => {}} // 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(
<TimelineQueueButtonHeader
key='timeline-queue-button-header'
onClick={() => {}} // 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();
});
});