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

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