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

.eslintrc.yml

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

.travis.yml

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

app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap

@@ -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",
+ }
+ }
+/>
+`;

app/javascript/mastodon/components/__tests__/__snapshots__/avatar_overlay-test.js.snap

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

app/javascript/mastodon/components/__tests__/__snapshots__/button-test.js.snap

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

app/javascript/mastodon/components/__tests__/__snapshots__/display_name-test.js.snap

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

app/javascript/mastodon/components/__tests__/avatar-test.js

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

app/javascript/mastodon/components/__tests__/avatar_overlay-test.js

@@ -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: '[email protected]',
+ 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();
+ });
+});

app/javascript/mastodon/components/__tests__/button-test.js

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

app/javascript/mastodon/components/__tests__/display_name-test.js

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