Replace JavaScript Testing Framework from Mocha to Jest (#5412)

This commit is contained in:
Yamagishi Kazutoshi 2017-10-16 16:33:08 +09:00 committed by Eugen Rochko
parent 93b54b8d4b
commit d5b767c374
25 changed files with 1266 additions and 682 deletions

View File

@ -5,6 +5,7 @@ env:
browser: true browser: true
node: true node: true
es6: true es6: true
jest: true
parser: babel-eslint parser: babel-eslint

View File

@ -53,5 +53,5 @@ before_script:
script: script:
- travis_retry bundle exec parallel_test spec/ --group-by filesize --type rspec - travis_retry bundle exec parallel_test spec/ --group-by filesize --type rspec
- npm test - yarn test
- bundle exec i18n-tasks unused - bundle exec i18n-tasks unused

View File

@ -0,0 +1,33 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Avatar /> Autoplay renders a animated avatar 1`] = `
<div
className="account__avatar"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
style={
Object {
"backgroundImage": "url(/animated/alice.gif)",
"backgroundSize": "100px 100px",
"height": "100px",
"width": "100px",
}
}
/>
`;
exports[`<Avatar /> Still renders a still avatar 1`] = `
<div
className="account__avatar"
onMouseEnter={[Function]}
onMouseLeave={[Function]}
style={
Object {
"backgroundImage": "url(/static/alice.jpg)",
"backgroundSize": "100px 100px",
"height": "100px",
"width": "100px",
}
}
/>
`;

View File

@ -0,0 +1,24 @@
// 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"
style={
Object {
"backgroundImage": "url(/static/alice.jpg)",
}
}
/>
<div
className="account__avatar-overlay-overlay"
style={
Object {
"backgroundImage": "url(/static/eve.jpg)",
}
}
/>
</div>
`;

View File

@ -0,0 +1,114 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<Button /> adds class "button-secondary" if props.secondary given 1`] = `
<button
className="button button-secondary"
disabled={undefined}
onClick={[Function]}
style={
Object {
"height": "36px",
"lineHeight": "36px",
"padding": "0 16px",
}
}
/>
`;
exports[`<Button /> renders a button element 1`] = `
<button
className="button"
disabled={undefined}
onClick={[Function]}
style={
Object {
"height": "36px",
"lineHeight": "36px",
"padding": "0 16px",
}
}
/>
`;
exports[`<Button /> renders a disabled attribute if props.disabled given 1`] = `
<button
className="button"
disabled={true}
onClick={[Function]}
style={
Object {
"height": "36px",
"lineHeight": "36px",
"padding": "0 16px",
}
}
/>
`;
exports[`<Button /> renders class="button--block" if props.block given 1`] = `
<button
className="button button--block"
disabled={undefined}
onClick={[Function]}
style={
Object {
"height": "36px",
"lineHeight": "36px",
"padding": "0 16px",
}
}
/>
`;
exports[`<Button /> renders the children 1`] = `
<button
className="button"
disabled={undefined}
onClick={[Function]}
style={
Object {
"height": "36px",
"lineHeight": "36px",
"padding": "0 16px",
}
}
>
<p>
children
</p>
</button>
`;
exports[`<Button /> renders the given text 1`] = `
<button
className="button"
disabled={undefined}
onClick={[Function]}
style={
Object {
"height": "36px",
"lineHeight": "36px",
"padding": "0 16px",
}
}
>
foo
</button>
`;
exports[`<Button /> renders the props.text instead of children 1`] = `
<button
className="button"
disabled={undefined}
onClick={[Function]}
style={
Object {
"height": "36px",
"lineHeight": "36px",
"padding": "0 16px",
}
}
>
foo
</button>
`;

View File

@ -0,0 +1,23 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<DisplayName /> renders display name + account name 1`] = `
<span
className="display-name"
>
<strong
className="display-name__html"
dangerouslySetInnerHTML={
Object {
"__html": "<p>Foo</p>",
}
}
/>
<span
className="display-name__account"
>
@
bar@baz
</span>
</span>
`;

View File

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

View File

@ -0,0 +1,29 @@
import React from 'react';
import renderer from 'react-test-renderer';
import { fromJS } from 'immutable';
import AvatarOverlay from '../avatar_overlay';
describe('<AvatarOverlay', () => {
const account = fromJS({
username: 'alice',
acct: 'alice',
display_name: 'Alice',
avatar: '/animated/alice.gif',
avatar_static: '/static/alice.jpg',
});
const friend = fromJS({
username: 'eve',
acct: 'eve@blackhat.lair',
display_name: 'Evelyn',
avatar: '/animated/eve.gif',
avatar_static: '/static/eve.jpg',
});
it('renders a overlay avatar', () => {
const component = renderer.create(<AvatarOverlay account={account} friend={friend} />);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
});

View File

@ -0,0 +1,75 @@
import { shallow } from 'enzyme';
import React from 'react';
import renderer from 'react-test-renderer';
import Button from '../button';
describe('<Button />', () => {
it('renders a button element', () => {
const component = renderer.create(<Button />);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders the given text', () => {
const text = 'foo';
const component = renderer.create(<Button text={text} />);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
it('handles click events using the given handler', () => {
const handler = jest.fn();
const button = shallow(<Button onClick={handler} />);
button.find('button').simulate('click');
expect(handler.mock.calls.length).toEqual(1);
});
it('does not handle click events if props.disabled given', () => {
const handler = jest.fn();
const button = shallow(<Button onClick={handler} disabled />);
button.find('button').simulate('click');
expect(handler.mock.calls.length).toEqual(0);
});
it('renders a disabled attribute if props.disabled given', () => {
const component = renderer.create(<Button disabled />);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders the children', () => {
const children = <p>children</p>;
const component = renderer.create(<Button>{children}</Button>);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders the props.text instead of children', () => {
const text = 'foo';
const children = <p>children</p>;
const component = renderer.create(<Button text={text}>{children}</Button>);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
it('renders class="button--block" if props.block given', () => {
const component = renderer.create(<Button block />);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
it('adds class "button-secondary" if props.secondary given', () => {
const component = renderer.create(<Button secondary />);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
});

View File

@ -0,0 +1,18 @@
import React from 'react';
import renderer from 'react-test-renderer';
import { fromJS } from 'immutable';
import DisplayName from '../display_name';
describe('<DisplayName />', () => {
it('renders display name + account name', () => {
const account = fromJS({
username: 'bar',
acct: 'bar@baz',
display_name_html: '<p>Foo</p>',
});
const component = renderer.create(<DisplayName account={account} />);
const tree = component.toJSON();
expect(tree).toMatchSnapshot();
});
});

View File

@ -0,0 +1,61 @@
import emojify from '../emoji';
describe('emoji', () => {
describe('.emojify', () => {
it('ignores unknown shortcodes', () => {
expect(emojify(':foobarbazfake:')).toEqual(':foobarbazfake:');
});
it('ignores shortcodes inside of tags', () => {
expect(emojify('<p data-foo=":smile:"></p>')).toEqual('<p data-foo=":smile:"></p>');
});
it('works with unclosed tags', () => {
expect(emojify('hello>')).toEqual('hello>');
expect(emojify('<hello')).toEqual('<hello');
});
it('works with unclosed shortcodes', () => {
expect(emojify('smile:')).toEqual('smile:');
expect(emojify(':smile')).toEqual(':smile');
});
it('does unicode', () => {
expect(emojify('\uD83D\uDC69\u200D\uD83D\uDC69\u200D\uD83D\uDC66\u200D\uD83D\uDC66')).toEqual(
'<img draggable="false" class="emojione" alt="👩‍👩‍👦‍👦" title=":woman-woman-boy-boy:" src="/emoji/1f469-200d-1f469-200d-1f466-200d-1f466.svg" />');
expect(emojify('👨‍👩‍👧‍👧')).toEqual(
'<img draggable="false" class="emojione" alt="👨‍👩‍👧‍👧" title=":man-woman-girl-girl:" src="/emoji/1f468-200d-1f469-200d-1f467-200d-1f467.svg" />');
expect(emojify('👩‍👩‍👦')).toEqual('<img draggable="false" class="emojione" alt="👩‍👩‍👦" title=":woman-woman-boy:" src="/emoji/1f469-200d-1f469-200d-1f466.svg" />');
expect(emojify('\u2757')).toEqual(
'<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg" />');
});
it('does multiple unicode', () => {
expect(emojify('\u2757 #\uFE0F\u20E3')).toEqual(
'<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg" /> <img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="/emoji/23-20e3.svg" />');
expect(emojify('\u2757#\uFE0F\u20E3')).toEqual(
'<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg" /><img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="/emoji/23-20e3.svg" />');
expect(emojify('\u2757 #\uFE0F\u20E3 \u2757')).toEqual(
'<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg" /> <img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="/emoji/23-20e3.svg" /> <img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg" />');
expect(emojify('foo \u2757 #\uFE0F\u20E3 bar')).toEqual(
'foo <img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg" /> <img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="/emoji/23-20e3.svg" /> bar');
});
it('ignores unicode inside of tags', () => {
expect(emojify('<p data-foo="\uD83D\uDC69\uD83D\uDC69\uD83D\uDC66"></p>')).toEqual('<p data-foo="\uD83D\uDC69\uD83D\uDC69\uD83D\uDC66"></p>');
});
it('does multiple emoji properly (issue 5188)', () => {
expect(emojify('👌🌈💕')).toEqual('<img draggable="false" class="emojione" alt="👌" title=":ok_hand:" src="/emoji/1f44c.svg" /><img draggable="false" class="emojione" alt="🌈" title=":rainbow:" src="/emoji/1f308.svg" /><img draggable="false" class="emojione" alt="💕" title=":two_hearts:" src="/emoji/1f495.svg" />');
expect(emojify('👌 🌈 💕')).toEqual('<img draggable="false" class="emojione" alt="👌" title=":ok_hand:" src="/emoji/1f44c.svg" /> <img draggable="false" class="emojione" alt="🌈" title=":rainbow:" src="/emoji/1f308.svg" /> <img draggable="false" class="emojione" alt="💕" title=":two_hearts:" src="/emoji/1f495.svg" />');
});
it('does an emoji that has no shortcode', () => {
expect(emojify('🕉️')).toEqual('<img draggable="false" class="emojione" alt="🕉️" title="" src="/emoji/1f549.svg" />');
});
it('does an emoji whose filename is irregular', () => {
expect(emojify('↙️')).toEqual('<img draggable="false" class="emojione" alt="↙️" title=":arrow_lower_left:" src="/emoji/2199.svg" />');
});
});
});

View File

@ -0,0 +1,130 @@
import { pick } from 'lodash';
import { emojiIndex } from 'emoji-mart';
import { search } from '../emoji_mart_search_light';
const trimEmojis = emoji => pick(emoji, ['id', 'unified', 'native', 'custom']);
describe('emoji_index', () => {
it('should give same result for emoji_index_light and emoji-mart', () => {
const expected = [
{
id: 'pineapple',
unified: '1f34d',
native: '🍍',
},
];
expect(search('pineapple').map(trimEmojis)).toEqual(expected);
expect(emojiIndex.search('pineapple').map(trimEmojis)).toEqual(expected);
});
it('orders search results correctly', () => {
const expected = [
{
id: 'apple',
unified: '1f34e',
native: '🍎',
},
{
id: 'pineapple',
unified: '1f34d',
native: '🍍',
},
{
id: 'green_apple',
unified: '1f34f',
native: '🍏',
},
{
id: 'iphone',
unified: '1f4f1',
native: '📱',
},
];
expect(search('apple').map(trimEmojis)).toEqual(expected);
expect(emojiIndex.search('apple').map(trimEmojis)).toEqual(expected);
});
it('handles custom emoji', () => {
const custom = [
{
id: 'mastodon',
name: 'mastodon',
short_names: ['mastodon'],
text: '',
emoticons: [],
keywords: ['mastodon'],
imageUrl: 'http://example.com',
custom: true,
},
];
search('', { custom });
emojiIndex.search('', { custom });
const expected = [
{
id: 'mastodon',
custom: true,
},
];
expect(search('masto').map(trimEmojis)).toEqual(expected);
expect(emojiIndex.search('masto').map(trimEmojis)).toEqual(expected);
});
it('should filter only emojis we care about, exclude pineapple', () => {
const emojisToShowFilter = unified => unified !== '1F34D';
expect(search('apple', { emojisToShowFilter }).map((obj) => obj.id))
.not.toContain('pineapple');
expect(emojiIndex.search('apple', { emojisToShowFilter }).map((obj) => obj.id))
.not.toContain('pineapple');
});
it('can include/exclude categories', () => {
expect(search('flag', { include: ['people'] })).toEqual([]);
expect(emojiIndex.search('flag', { include: ['people'] })).toEqual([]);
});
it('does an emoji whose unified name is irregular', () => {
const expected = [
{
'id': 'water_polo',
'unified': '1f93d',
'native': '🤽',
},
{
'id': 'man-playing-water-polo',
'unified': '1f93d-200d-2642-fe0f',
'native': '🤽‍♂️',
},
{
'id': 'woman-playing-water-polo',
'unified': '1f93d-200d-2640-fe0f',
'native': '🤽‍♀️',
},
];
expect(search('polo').map(trimEmojis)).toEqual(expected);
expect(emojiIndex.search('polo').map(trimEmojis)).toEqual(expected);
});
it('can search for thinking_face', () => {
const expected = [
{
id: 'thinking_face',
unified: '1f914',
native: '🤔',
},
];
expect(search('thinking_fac').map(trimEmojis)).toEqual(expected);
expect(emojiIndex.search('thinking_fac').map(trimEmojis)).toEqual(expected);
});
it('can search for woman-facepalming', () => {
const expected = [
{
id: 'woman-facepalming',
unified: '1f926-200d-2640-fe0f',
native: '🤦‍♀️',
},
];
expect(search('woman-facep').map(trimEmojis)).toEqual(expected);
expect(emojiIndex.search('woman-facep').map(trimEmojis)).toEqual(expected);
});
});

View File

@ -1,14 +1,18 @@
import { expect } from 'chai';
import { mount } from 'enzyme';
import sinon from 'sinon';
import React from 'react'; import React from 'react';
import Column from '../../../../../../app/javascript/mastodon/features/ui/components/column'; import { mount } from 'enzyme';
import ColumnHeader from '../../../../../../app/javascript/mastodon/features/ui/components/column_header'; import Column from '../column';
import ColumnHeader from '../column_header';
describe('<Column />', () => { describe('<Column />', () => {
describe('<ColumnHeader /> click handler', () => { describe('<ColumnHeader /> click handler', () => {
const originalRaf = global.requestAnimationFrame;
beforeEach(() => { beforeEach(() => {
global.requestAnimationFrame = sinon.spy(); global.requestAnimationFrame = jest.fn();
});
afterAll(() => {
global.requestAnimationFrame = originalRaf;
}); });
it('runs the scroll animation if the column contains scrollable content', () => { it('runs the scroll animation if the column contains scrollable content', () => {
@ -18,13 +22,13 @@ describe('<Column />', () => {
</Column> </Column>
); );
wrapper.find(ColumnHeader).simulate('click'); wrapper.find(ColumnHeader).simulate('click');
expect(global.requestAnimationFrame.called).to.equal(true); expect(global.requestAnimationFrame.mock.calls.length).toEqual(1);
}); });
it('does not try to scroll if there is no scrollable content', () => { it('does not try to scroll if there is no scrollable content', () => {
const wrapper = mount(<Column heading='notifications' />); const wrapper = mount(<Column heading='notifications' />);
wrapper.find(ColumnHeader).simulate('click'); wrapper.find(ColumnHeader).simulate('click');
expect(global.requestAnimationFrame.called).to.equal(false); expect(global.requestAnimationFrame.mock.calls.length).toEqual(0);
}); });
}); });
}); });

View File

@ -0,0 +1,5 @@
import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
const adapter = new Adapter();
configure({ adapter });

17
jest.config.js Normal file
View File

@ -0,0 +1,17 @@
module.exports = {
projects: [
'<rootDir>/app/javascript/mastodon',
],
testPathIgnorePatterns: [
'<rootDir>/node_modules/',
'<rootDir>/vendor/',
'<rootDir>/config/',
'<rootDir>/log/',
'<rootDir>/public/',
'<rootDir>/tmp/',
],
setupFiles: [
'raf/polyfill',
],
setupTestFrameworkScriptFile: '<rootDir>/app/javascript/mastodon/test_setup.js',
};

View File

@ -7,9 +7,9 @@
"build:production": "cross-env RAILS_ENV=production ./bin/webpack", "build:production": "cross-env RAILS_ENV=production ./bin/webpack",
"manage:translations": "node ./config/webpack/translationRunner.js", "manage:translations": "node ./config/webpack/translationRunner.js",
"start": "node ./streaming/index.js", "start": "node ./streaming/index.js",
"test": "npm run test:lint && npm run test:mocha", "test": "npm run test:lint && npm run test:jest",
"test:lint": "eslint -c .eslintrc.yml --ext=js app/javascript/ config/webpack/ spec/javascript/ streaming/", "test:lint": "eslint -c .eslintrc.yml --ext=js app/javascript/ config/webpack/ spec/javascript/ streaming/",
"test:mocha": "cross-env NODE_ENV=test mocha --require ./spec/javascript/setup.js --compilers js:babel-register ./spec/javascript/components/**/*.test.js", "test:jest": "cross-env NODE_ENV=test jest",
"postinstall": "npm rebuild node-sass" "postinstall": "npm rebuild node-sass"
}, },
"repository": { "repository": {
@ -118,22 +118,36 @@
}, },
"devDependencies": { "devDependencies": {
"babel-eslint": "^7.2.3", "babel-eslint": "^7.2.3",
"chai": "^4.1.0",
"chai-enzyme": "^0.8.0",
"enzyme": "^3.0.0", "enzyme": "^3.0.0",
"enzyme-adapter-react-16": "^1.0.0", "enzyme-adapter-react-16": "^1.0.0",
"eslint": "^3.19.0", "eslint": "^3.19.0",
"eslint-plugin-jsx-a11y": "^4.0.0", "eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-react": "^6.10.3", "eslint-plugin-react": "^6.10.3",
"jsdom": "^11.1.0", "jest": "^21.2.1",
"mocha": "^3.4.1", "raf": "^3.4.0",
"react-intl-translations-manager": "^5.0.0", "react-intl-translations-manager": "^5.0.0",
"react-test-renderer": "^16.0.0", "react-test-renderer": "^16.0.0",
"sinon": "^2.3.7",
"webpack-dev-server": "^2.6.1", "webpack-dev-server": "^2.6.1",
"yargs": "^8.0.2" "yargs": "^8.0.2"
}, },
"optionalDependencies": { "optionalDependencies": {
"fsevents": "*" "fsevents": "*"
},
"jest": {
"projects": [
"<rootDir>/app/javascript/mastodon"
],
"testPathIgnorePatterns": [
"<rootDir>/node_modules/",
"<rootDir>/vendor/",
"<rootDir>/config/",
"<rootDir>/log/",
"<rootDir>/public/",
"<rootDir>/tmp/"
],
"setupFiles": [
"raf/polyfill"
],
"setupTestFrameworkScriptFile": "<rootDir>/app/javascript/mastodon/test_setup.js"
} }
} }

View File

@ -1,3 +0,0 @@
---
env:
mocha: true

View File

@ -1,44 +0,0 @@
import React from 'react';
import Avatar from '../../../app/javascript/mastodon/components/avatar';
import { expect } from 'chai';
import { render } from 'enzyme';
import { fromJS } from 'immutable';
describe('<Avatar />', () => {
const account = fromJS({
username: 'alice',
acct: 'alice',
display_name: 'Alice',
avatar: '/animated/alice.gif',
avatar_static: '/static/alice.jpg',
});
const size = 100;
const animated = render(<Avatar account={account} animate size={size} />);
const still = render(<Avatar account={account} size={size} />);
// Autoplay
xit('renders a div element with the given src as background', () => {
expect(animated.find('div')).to.have.style('background-image', `url(${account.get('avatar')})`);
});
xit('renders a div element of the given size', () => {
['width', 'height'].map((attr) => {
expect(animated.find('div')).to.have.style(attr, `${size}px`);
});
});
// Still
xit('renders a div element with the given static src as background if not autoplay', () => {
expect(still.find('div')).to.have.style('background-image', `url(${account.get('avatar_static')})`);
});
xit('renders a div element of the given size if not autoplay', () => {
['width', 'height'].map((attr) => {
expect(still.find('div')).to.have.style(attr, `${size}px`);
});
});
// TODO add autoplay test if possible
});

View File

@ -1,36 +0,0 @@
import React from 'react';
import AvatarOverlay from '../../../app/javascript/mastodon/components/avatar_overlay';
import { expect } from 'chai';
import { render } from 'enzyme';
import { fromJS } from 'immutable';
describe('<Avatar />', () => {
const account = fromJS({
username: 'alice',
acct: 'alice',
display_name: 'Alice',
avatar: '/animated/alice.gif',
avatar_static: '/static/alice.jpg',
});
const friend = fromJS({
username: 'eve',
acct: 'eve@blackhat.lair',
display_name: 'Evelyn',
avatar: '/animated/eve.gif',
avatar_static: '/static/eve.jpg',
});
const overlay = render(<AvatarOverlay account={account} friend={friend} />);
xit('renders account static src as base of overlay avatar', () => {
expect(overlay.find('.account__avatar-overlay-base'))
.to.have.style('background-image', `url(${account.get('avatar_static')})`);
});
xit('renders friend static src as overlay of overlay avatar', () => {
expect(overlay.find('.account__avatar-overlay-overlay'))
.to.have.style('background-image', `url(${friend.get('avatar_static')})`);
});
});

View File

@ -1,72 +0,0 @@
import React from 'react';
import Button from '../../../app/javascript/mastodon/components/button';
import { expect } from 'chai';
import { shallow } from 'enzyme';
import sinon from 'sinon';
describe('<Button />', () => {
xit('renders a button element', () => {
const wrapper = shallow(<Button />);
expect(wrapper).to.match('button');
});
xit('renders the given text', () => {
const text = 'foo';
const wrapper = shallow(<Button text={text} />);
expect(wrapper.find('button')).to.have.text(text);
});
it('handles click events using the given handler', () => {
const handler = sinon.spy();
const wrapper = shallow(<Button onClick={handler} />);
wrapper.find('button').simulate('click');
expect(handler.calledOnce).to.equal(true);
});
it('does not handle click events if props.disabled given', () => {
const handler = sinon.spy();
const wrapper = shallow(<Button onClick={handler} disabled />);
wrapper.find('button').simulate('click');
expect(handler.called).to.equal(false);
});
xit('renders a disabled attribute if props.disabled given', () => {
const wrapper = shallow(<Button disabled />);
expect(wrapper.find('button')).to.be.disabled();
});
xit('renders the children', () => {
const children = <p>children</p>;
const wrapper = shallow(<Button>{children}</Button>);
expect(wrapper.find('button')).to.contain(children);
});
xit('renders the props.text instead of children', () => {
const text = 'foo';
const children = <p>children</p>;
const wrapper = shallow(<Button text={text}>{children}</Button>);
expect(wrapper.find('button')).to.have.text(text);
expect(wrapper.find('button')).to.not.contain(children);
});
xit('renders style="display: block; width: 100%;" if props.block given', () => {
const wrapper = shallow(<Button block />);
expect(wrapper.find('button')).to.have.className('button--block');
});
xit('renders style="display: inline-block; width: auto;" by default', () => {
const wrapper = shallow(<Button />);
expect(wrapper.find('button')).to.not.have.className('button--block');
});
xit('adds class "button-secondary" if props.secondary given', () => {
const wrapper = shallow(<Button secondary />);
expect(wrapper.find('button')).to.have.className('button-secondary');
});
xit('does not add class "button-secondary" by default', () => {
const wrapper = shallow(<Button />);
expect(wrapper.find('button')).to.not.have.className('button-secondary');
});
});

View File

@ -1,18 +0,0 @@
import React from 'react';
import DisplayName from '../../../app/javascript/mastodon/components/display_name';
import { expect } from 'chai';
import { render } from 'enzyme';
import { fromJS } from 'immutable';
describe('<DisplayName />', () => {
xit('renders display name + account name', () => {
const account = fromJS({
username: 'bar',
acct: 'bar@baz',
display_name_html: '<p>Foo</p>',
});
const wrapper = render(<DisplayName account={account} />);
expect(wrapper).to.have.text('Foo @bar@baz');
});
});

View File

@ -1,111 +0,0 @@
import { expect } from 'chai';
import { search } from '../../../app/javascript/mastodon/features/emoji/emoji_mart_search_light';
import { emojiIndex } from 'emoji-mart';
import { pick } from 'lodash';
const trimEmojis = emoji => pick(emoji, ['id', 'unified', 'native', 'custom']);
// hack to fix https://github.com/chaijs/type-detect/issues/98
// see: https://github.com/chaijs/type-detect/issues/98#issuecomment-325010785
import jsdom from 'jsdom';
global.window = new jsdom.JSDOM().window;
global.document = window.document;
global.HTMLElement = window.HTMLElement;
describe('emoji_index', () => {
it('should give same result for emoji_index_light and emoji-mart', () => {
let expected = [{
id: 'pineapple',
unified: '1f34d',
native: '🍍',
}];
expect(search('pineapple').map(trimEmojis)).to.deep.equal(expected);
expect(emojiIndex.search('pineapple').map(trimEmojis)).to.deep.equal(expected);
});
it('orders search results correctly', () => {
let expected = [{
id: 'apple',
unified: '1f34e',
native: '🍎',
}, {
id: 'pineapple',
unified: '1f34d',
native: '🍍',
}, {
id: 'green_apple',
unified: '1f34f',
native: '🍏',
}, {
id: 'iphone',
unified: '1f4f1',
native: '📱',
}];
expect(search('apple').map(trimEmojis)).to.deep.equal(expected);
expect(emojiIndex.search('apple').map(trimEmojis)).to.deep.equal(expected);
});
it('handles custom emoji', () => {
let custom = [{
id: 'mastodon',
name: 'mastodon',
short_names: ['mastodon'],
text: '',
emoticons: [],
keywords: ['mastodon'],
imageUrl: 'http://example.com',
custom: true,
}];
search('', { custom });
emojiIndex.search('', { custom });
let expected = [ { id: 'mastodon', custom: true } ];
expect(search('masto').map(trimEmojis)).to.deep.equal(expected);
expect(emojiIndex.search('masto').map(trimEmojis)).to.deep.equal(expected);
});
it('should filter only emojis we care about, exclude pineapple', () => {
let emojisToShowFilter = (unified) => unified !== '1F34D';
expect(search('apple', { emojisToShowFilter }).map((obj) => obj.id))
.not.to.contain('pineapple');
expect(emojiIndex.search('apple', { emojisToShowFilter }).map((obj) => obj.id))
.not.to.contain('pineapple');
});
it('can include/exclude categories', () => {
expect(search('flag', { include: ['people'] }))
.to.deep.equal([]);
expect(emojiIndex.search('flag', { include: ['people'] }))
.to.deep.equal([]);
});
it('does an emoji whose unified name is irregular', () => {
let expected = [{
'id': 'water_polo',
'unified': '1f93d',
'native': '🤽',
}, {
'id': 'man-playing-water-polo',
'unified': '1f93d-200d-2642-fe0f',
'native': '🤽‍♂️',
}, {
'id': 'woman-playing-water-polo',
'unified': '1f93d-200d-2640-fe0f',
'native': '🤽‍♀️',
}];
expect(search('polo').map(trimEmojis)).to.deep.equal(expected);
expect(emojiIndex.search('polo').map(trimEmojis)).to.deep.equal(expected);
});
it('can search for thinking_face', () => {
let expected = [ { id: 'thinking_face', unified: '1f914', native: '🤔' } ];
expect(search('thinking_fac').map(trimEmojis)).to.deep.equal(expected);
expect(emojiIndex.search('thinking_fac').map(trimEmojis)).to.deep.equal(expected);
});
it('can search for woman-facepalming', () => {
let expected = [ { id: 'woman-facepalming', unified: '1f926-200d-2640-fe0f', native: '🤦‍♀️' } ];
expect(search('woman-facep').map(trimEmojis)).to.deep.equal(expected);
expect(emojiIndex.search('woman-facep').map(trimEmojis)).deep.equal(expected);
});
});

View File

@ -1,61 +0,0 @@
import { expect } from 'chai';
import emojify from '../../../app/javascript/mastodon/features/emoji/emoji';
describe('emojify', () => {
it('ignores unknown shortcodes', () => {
expect(emojify(':foobarbazfake:')).to.equal(':foobarbazfake:');
});
it('ignores shortcodes inside of tags', () => {
expect(emojify('<p data-foo=":smile:"></p>')).to.equal('<p data-foo=":smile:"></p>');
});
it('works with unclosed tags', () => {
expect(emojify('hello>')).to.equal('hello>');
expect(emojify('<hello')).to.equal('<hello');
});
it('works with unclosed shortcodes', () => {
expect(emojify('smile:')).to.equal('smile:');
expect(emojify(':smile')).to.equal(':smile');
});
it('does unicode', () => {
expect(emojify('\uD83D\uDC69\u200D\uD83D\uDC69\u200D\uD83D\uDC66\u200D\uD83D\uDC66')).to.equal(
'<img draggable="false" class="emojione" alt="👩‍👩‍👦‍👦" title=":woman-woman-boy-boy:" src="/emoji/1f469-200d-1f469-200d-1f466-200d-1f466.svg" />');
expect(emojify('👨‍👩‍👧‍👧')).to.equal(
'<img draggable="false" class="emojione" alt="👨‍👩‍👧‍👧" title=":man-woman-girl-girl:" src="/emoji/1f468-200d-1f469-200d-1f467-200d-1f467.svg" />');
expect(emojify('👩‍👩‍👦')).to.equal('<img draggable="false" class="emojione" alt="👩‍👩‍👦" title=":woman-woman-boy:" src="/emoji/1f469-200d-1f469-200d-1f466.svg" />');
expect(emojify('\u2757')).to.equal(
'<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg" />');
});
it('does multiple unicode', () => {
expect(emojify('\u2757 #\uFE0F\u20E3')).to.equal(
'<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg" /> <img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="/emoji/23-20e3.svg" />');
expect(emojify('\u2757#\uFE0F\u20E3')).to.equal(
'<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg" /><img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="/emoji/23-20e3.svg" />');
expect(emojify('\u2757 #\uFE0F\u20E3 \u2757')).to.equal(
'<img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg" /> <img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="/emoji/23-20e3.svg" /> <img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg" />');
expect(emojify('foo \u2757 #\uFE0F\u20E3 bar')).to.equal(
'foo <img draggable="false" class="emojione" alt="❗" title=":exclamation:" src="/emoji/2757.svg" /> <img draggable="false" class="emojione" alt="#️⃣" title=":hash:" src="/emoji/23-20e3.svg" /> bar');
});
it('ignores unicode inside of tags', () => {
expect(emojify('<p data-foo="\uD83D\uDC69\uD83D\uDC69\uD83D\uDC66"></p>')).to.equal('<p data-foo="\uD83D\uDC69\uD83D\uDC69\uD83D\uDC66"></p>');
});
it('does multiple emoji properly (issue 5188)', () => {
expect(emojify('👌🌈💕')).to.equal('<img draggable="false" class="emojione" alt="👌" title=":ok_hand:" src="/emoji/1f44c.svg" /><img draggable="false" class="emojione" alt="🌈" title=":rainbow:" src="/emoji/1f308.svg" /><img draggable="false" class="emojione" alt="💕" title=":two_hearts:" src="/emoji/1f495.svg" />');
expect(emojify('👌 🌈 💕')).to.equal('<img draggable="false" class="emojione" alt="👌" title=":ok_hand:" src="/emoji/1f44c.svg" /> <img draggable="false" class="emojione" alt="🌈" title=":rainbow:" src="/emoji/1f308.svg" /> <img draggable="false" class="emojione" alt="💕" title=":two_hearts:" src="/emoji/1f495.svg" />');
});
it('does an emoji that has no shortcode', () => {
expect(emojify('🕉️')).to.equal('<img draggable="false" class="emojione" alt="🕉️" title="" src="/emoji/1f549.svg" />');
});
it('does an emoji whose filename is irregular', () => {
expect(emojify('↙️')).to.equal('<img draggable="false" class="emojione" alt="↙️" title=":arrow_lower_left:" src="/emoji/2199.svg" />');
});
});

View File

@ -1,15 +0,0 @@
import { JSDOM } from 'jsdom';
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({ adapter: new Adapter() });
const { window } = new JSDOM('', {
userAgent: 'node.js',
});
Object.keys(window).forEach(property => {
if (typeof global[property] === 'undefined') {
global[property] = window[property];
}
});

972
yarn.lock

File diff suppressed because it is too large Load Diff