From 39ea5c0e2e9bdf2c6e3bd0797e6fb422e6117aa2 Mon Sep 17 00:00:00 2001
From: Yamagishi Kazutoshi <ykzts@desire.sh>
Date: Fri, 2 Jun 2017 00:27:15 +0900
Subject: Improve tests for JavaScript (#3496)

- Upgrade dependencies
    - chai (3.5.0 -> 4.0.1)
    - chai-enzyme (0.6.1 -> 0.7.1)
    - sinon (2.2.0 -> 2.3.2)
- Change extensions from .jsx to .js
- Don't assign `React` to `global`
- Check code format using ESLint
---
 spec/javascript/components/avatar.test.js          | 20 +++++
 spec/javascript/components/avatar.test.jsx         | 20 -----
 spec/javascript/components/button.test.js          | 71 ++++++++++++++++
 spec/javascript/components/button.test.jsx         | 71 ----------------
 spec/javascript/components/display_name.test.js    | 27 ++++++
 spec/javascript/components/display_name.test.jsx   | 27 ------
 spec/javascript/components/dropdown_menu.test.js   | 97 ++++++++++++++++++++++
 spec/javascript/components/dropdown_menu.test.jsx  | 97 ----------------------
 .../features/ui/components/column.test.js          | 30 +++++++
 .../features/ui/components/column.test.jsx         | 30 -------
 .../components/loading_indicator.test.js           |  8 ++
 .../components/loading_indicator.test.jsx          |  8 --
 spec/javascript/setup.js                           |  5 +-
 13 files changed, 254 insertions(+), 257 deletions(-)
 create mode 100644 spec/javascript/components/avatar.test.js
 delete mode 100644 spec/javascript/components/avatar.test.jsx
 create mode 100644 spec/javascript/components/button.test.js
 delete mode 100644 spec/javascript/components/button.test.jsx
 create mode 100644 spec/javascript/components/display_name.test.js
 delete mode 100644 spec/javascript/components/display_name.test.jsx
 create mode 100644 spec/javascript/components/dropdown_menu.test.js
 delete mode 100644 spec/javascript/components/dropdown_menu.test.jsx
 create mode 100644 spec/javascript/components/features/ui/components/column.test.js
 delete mode 100644 spec/javascript/components/features/ui/components/column.test.jsx
 create mode 100644 spec/javascript/components/loading_indicator.test.js
 delete mode 100644 spec/javascript/components/loading_indicator.test.jsx

(limited to 'spec/javascript')

diff --git a/spec/javascript/components/avatar.test.js b/spec/javascript/components/avatar.test.js
new file mode 100644
index 000000000..03b71dc9d
--- /dev/null
+++ b/spec/javascript/components/avatar.test.js
@@ -0,0 +1,20 @@
+import { expect } from 'chai';
+import { render } from 'enzyme';
+import React from 'react';
+import Avatar from '../../../app/javascript/mastodon/components/avatar';
+
+describe('<Avatar />', () => {
+  const src = '/path/to/image.jpg';
+  const size = 100;
+  const wrapper = render(<Avatar src={src} animate size={size} />);
+
+  it('renders a div element with the given src as background', () => {
+    expect(wrapper.find('div')).to.have.style('background-image', `url(${src})`);
+  });
+
+  it('renders a div element of the given size', () => {
+    ['width', 'height'].map((attr) => {
+      expect(wrapper.find('div')).to.have.style(attr, `${size}px`);
+    });
+  });
+});
diff --git a/spec/javascript/components/avatar.test.jsx b/spec/javascript/components/avatar.test.jsx
deleted file mode 100644
index f70173880..000000000
--- a/spec/javascript/components/avatar.test.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { expect } from 'chai';
-import { render } from 'enzyme';
-
-import Avatar from '../../../app/javascript/mastodon/components/avatar'
-
-describe('<Avatar />', () => {
-  const src = '/path/to/image.jpg';
-  const size = 100;
-  const wrapper = render(<Avatar src={src} animate size={size} />);
-
-  it('renders a div element with the given src as background', () => {
-    expect(wrapper.find('div')).to.have.style('background-image', `url(${src})`);
-  });
-
-  it('renders a div element of the given size', () => {
-    ['width', 'height'].map((attr) => {
-      expect(wrapper.find('div')).to.have.style(attr, `${size}px`);
-    });
-  });
-});
diff --git a/spec/javascript/components/button.test.js b/spec/javascript/components/button.test.js
new file mode 100644
index 000000000..9cf8b1eed
--- /dev/null
+++ b/spec/javascript/components/button.test.js
@@ -0,0 +1,71 @@
+import { expect } from 'chai';
+import { shallow } from 'enzyme';
+import sinon from 'sinon';
+import React from 'react';
+import Button from '../../../app/javascript/mastodon/components/button';
+
+describe('<Button />', () => {
+  it('renders a button element', () => {
+    const wrapper = shallow(<Button />);
+    expect(wrapper).to.match('button');
+  });
+
+  it('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);
+  });
+
+  it('renders a disabled attribute if props.disabled given', () => {
+    const wrapper = shallow(<Button disabled />);
+    expect(wrapper.find('button')).to.be.disabled();
+  });
+
+  it('renders the children', () => {
+    const children = <p>children</p>;
+    const wrapper = shallow(<Button>{children}</Button>);
+    expect(wrapper.find('button')).to.contain(children);
+  });
+
+  it('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);
+  });
+
+  it('renders style="display: block; width: 100%;" if props.block given', () => {
+    const wrapper = shallow(<Button block />);
+    expect(wrapper.find('button')).to.have.className('button--block');
+  });
+
+  it('renders style="display: inline-block; width: auto;" by default', () => {
+    const wrapper = shallow(<Button />);
+    expect(wrapper.find('button')).to.not.have.className('button--block');
+  });
+
+  it('adds class "button-secondary" if props.secondary given', () => {
+    const wrapper = shallow(<Button secondary />);
+    expect(wrapper.find('button')).to.have.className('button-secondary');
+  });
+
+  it('does not add class "button-secondary" by default', () => {
+    const wrapper = shallow(<Button />);
+    expect(wrapper.find('button')).to.not.have.className('button-secondary');
+  });
+});
diff --git a/spec/javascript/components/button.test.jsx b/spec/javascript/components/button.test.jsx
deleted file mode 100644
index e08671c01..000000000
--- a/spec/javascript/components/button.test.jsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { expect } from 'chai';
-import { shallow } from 'enzyme';
-import sinon from 'sinon';
-
-import Button from '../../../app/javascript/mastodon/components/button';
-
-describe('<Button />', () => {
-  it('renders a button element', () => {
-    const wrapper = shallow(<Button />);
-    expect(wrapper).to.match('button');
-  });
-
-  it('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);
-  });
-
-  it('renders a disabled attribute if props.disabled given', () => {
-    const wrapper = shallow(<Button disabled />);
-    expect(wrapper.find('button')).to.be.disabled();
-  });
-
-  it('renders the children', () => {
-    const children = <p>children</p>;
-    const wrapper = shallow(<Button>{children}</Button>);
-    expect(wrapper.find('button')).to.contain(children);
-  });
-
-  it('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);
-  });
-
-  it('renders style="display: block; width: 100%;" if props.block given', () => {
-    const wrapper = shallow(<Button block />);
-    expect(wrapper.find('button')).to.have.className('button--block');
-  });
-
-  it('renders style="display: inline-block; width: auto;" by default', () => {
-    const wrapper = shallow(<Button />);
-    expect(wrapper.find('button')).to.not.have.className('button--block');
-  });
-
-  it('adds class "button-secondary" if props.secondary given', () => {
-    const wrapper = shallow(<Button secondary />);
-    expect(wrapper.find('button')).to.have.className('button-secondary');
-  });
-
-  it('does not add class "button-secondary" by default', () => {
-    const wrapper = shallow(<Button />);
-    expect(wrapper.find('button')).to.not.have.className('button-secondary');
-  });
-});
diff --git a/spec/javascript/components/display_name.test.js b/spec/javascript/components/display_name.test.js
new file mode 100644
index 000000000..d6dc7edc0
--- /dev/null
+++ b/spec/javascript/components/display_name.test.js
@@ -0,0 +1,27 @@
+import { expect } from 'chai';
+import { render } from 'enzyme';
+import Immutable  from 'immutable';
+import React from 'react';
+import DisplayName from '../../../app/javascript/mastodon/components/display_name';
+
+describe('<DisplayName />', () => {
+  it('renders display name + account name', () => {
+    const account = Immutable.fromJS({
+      username: 'bar',
+      acct: 'bar@baz',
+      display_name: 'Foo',
+    });
+    const wrapper = render(<DisplayName account={account} />);
+    expect(wrapper).to.have.text('Foo @bar@baz');
+  });
+
+  it('renders the username + account name if display name is empty', () => {
+    const account = Immutable.fromJS({
+      username: 'bar',
+      acct: 'bar@baz',
+      display_name: '',
+    });
+    const wrapper = render(<DisplayName account={account} />);
+    expect(wrapper).to.have.text('bar @bar@baz');
+  });
+});
diff --git a/spec/javascript/components/display_name.test.jsx b/spec/javascript/components/display_name.test.jsx
deleted file mode 100644
index 7072e653e..000000000
--- a/spec/javascript/components/display_name.test.jsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { expect } from 'chai';
-import { render } from 'enzyme';
-import Immutable  from 'immutable';
-
-import DisplayName from '../../../app/javascript/mastodon/components/display_name'
-
-describe('<DisplayName />', () => {
-  it('renders display name + account name', () => {
-    const account = Immutable.fromJS({
-      username: 'bar',
-      acct: 'bar@baz',
-      display_name: 'Foo'
-    });
-    const wrapper = render(<DisplayName account={account} />);
-    expect(wrapper).to.have.text('Foo @bar@baz');
-  });
-
-  it('renders the username + account name if display name is empty', () => {
-    const account = Immutable.fromJS({
-      username: 'bar',
-      acct: 'bar@baz',
-      display_name: ''
-    });
-    const wrapper = render(<DisplayName account={account} />);
-    expect(wrapper).to.have.text('bar @bar@baz');
-  });
-});
diff --git a/spec/javascript/components/dropdown_menu.test.js b/spec/javascript/components/dropdown_menu.test.js
new file mode 100644
index 000000000..54cdcabf0
--- /dev/null
+++ b/spec/javascript/components/dropdown_menu.test.js
@@ -0,0 +1,97 @@
+import { expect } from 'chai';
+import { shallow, mount } from 'enzyme';
+import sinon from 'sinon';
+import React from 'react';
+import DropdownMenu from '../../../app/javascript/mastodon/components/dropdown_menu';
+import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown';
+
+describe('<DropdownMenu />', () => {
+  const icon = 'my-icon';
+  const size = 123;
+  const action = sinon.spy();
+
+  const items = [
+    { text: 'first item',  action: action, href: '/some/url' },
+    { text: 'second item', action: 'noop' },
+  ];
+  const wrapper = shallow(<DropdownMenu icon={icon} items={items} size={size} />);
+
+  it('contains one <Dropdown />', () => {
+    expect(wrapper).to.have.exactly(1).descendants(Dropdown);
+  });
+
+  it('contains one <DropdownTrigger />', () => {
+    expect(wrapper.find(Dropdown)).to.have.exactly(1).descendants(DropdownTrigger);
+  });
+
+  it('contains one <DropdownContent />', () => {
+    expect(wrapper.find(Dropdown)).to.have.exactly(1).descendants(DropdownContent);
+  });
+
+  it('uses props.size for <DropdownTrigger /> style values', () => {
+    ['font-size', 'width', 'line-height'].map((property) => {
+      expect(wrapper.find(DropdownTrigger)).to.have.style(property, `${size}px`);
+    });
+  });
+
+  it('uses props.icon as icon class name', () => {
+    expect(wrapper.find(DropdownTrigger).find('i')).to.have.className(`fa-${icon}`);
+  });
+
+  it('is not expanded by default', () => {
+    expect(wrapper.state('expanded')).to.be.equal(false);
+  });
+
+  it('does not render the list elements if not expanded', () => {
+    const lis = wrapper.find(DropdownContent).find('li');
+    expect(lis.length).to.be.equal(0);
+  });
+
+  it('sets expanded to true when clicking the trigger', () => {
+    const wrapper = mount(<DropdownMenu icon={icon} items={items} size={size} />);
+    wrapper.find(DropdownTrigger).first().simulate('click');
+    expect(wrapper.state('expanded')).to.be.equal(true);
+  });
+
+  // Error: ReactWrapper::state() can only be called on the root
+  /*it('sets expanded to false when clicking outside', () => {
+    const wrapper = mount((
+      <div>
+        <DropdownMenu icon={icon} items={items} size={size} />
+        <span />
+      </div>
+    ));
+
+    wrapper.find(DropdownTrigger).first().simulate('click');
+    expect(wrapper.find(DropdownMenu).first().state('expanded')).to.be.equal(true);
+
+    wrapper.find('span').first().simulate('click');
+    expect(wrapper.find(DropdownMenu).first().state('expanded')).to.be.equal(false);
+  })*/
+
+  it('renders list elements for each props.items if expanded', () => {
+    const wrapper = mount(<DropdownMenu icon={icon} items={items} size={size} />);
+    wrapper.find(DropdownTrigger).first().simulate('click');
+    const lis = wrapper.find(DropdownContent).find('li');
+    expect(lis.length).to.be.equal(items.length);
+  });
+
+  it('uses the href passed in via props.items', () => {
+    wrapper
+      .find(DropdownContent).find('li a')
+      .forEach((a, i) => expect(a).to.have.attr('href', items[i].href));
+  });
+
+  it('uses the text passed in via props.items', () => {
+    wrapper
+      .find(DropdownContent).find('li a')
+      .forEach((a, i) => expect(a).to.have.text(items[i].text));
+  });
+
+  it('uses the action passed in via props.items as click handler', () => {
+    const wrapper = mount(<DropdownMenu icon={icon} items={items} size={size} />);
+    wrapper.find(DropdownTrigger).first().simulate('click');
+    wrapper.find(DropdownContent).find('li a').first().simulate('click');
+    expect(action.calledOnce).to.equal(true);
+  });
+});
diff --git a/spec/javascript/components/dropdown_menu.test.jsx b/spec/javascript/components/dropdown_menu.test.jsx
deleted file mode 100644
index c5bbf5ad6..000000000
--- a/spec/javascript/components/dropdown_menu.test.jsx
+++ /dev/null
@@ -1,97 +0,0 @@
-import { expect } from 'chai';
-import { shallow, mount } from 'enzyme';
-import sinon from 'sinon';
-
-import DropdownMenu from '../../../app/javascript/mastodon/components/dropdown_menu';
-import Dropdown, { DropdownTrigger, DropdownContent } from 'react-simple-dropdown';
-
-describe('<DropdownMenu />', () => {
-  const icon = 'my-icon';
-  const size = 123;
-  const action = sinon.spy();
-
-  const items = [
-    { text: 'first item',  action: action, href: '/some/url' },
-    { text: 'second item', action: 'noop' }
-  ];
-  const wrapper = shallow(<DropdownMenu icon={icon} items={items} size={size} />);
-
-  it('contains one <Dropdown />', () => {
-    expect(wrapper).to.have.exactly(1).descendants(Dropdown);
-  });
-
-  it('contains one <DropdownTrigger />', () => {
-    expect(wrapper.find(Dropdown)).to.have.exactly(1).descendants(DropdownTrigger);
-  });
-
-  it('contains one <DropdownContent />', () => {
-    expect(wrapper.find(Dropdown)).to.have.exactly(1).descendants(DropdownContent);
-  });
-
-  it('uses props.size for <DropdownTrigger /> style values', () => {
-    ['font-size', 'width', 'line-height'].map((property) => {
-      expect(wrapper.find(DropdownTrigger)).to.have.style(property, `${size}px`);
-    });
-  });
-
-  it('uses props.icon as icon class name', () => {
-    expect(wrapper.find(DropdownTrigger).find('i')).to.have.className(`fa-${icon}`)
-  });
-
-  it('is not expanded by default', () => {
-    expect(wrapper.state('expanded')).to.be.equal(false);
-  })
-
-  it('does not render the list elements if not expanded', () => {
-    const lis = wrapper.find(DropdownContent).find('li');
-    expect(lis.length).to.be.equal(0);
-  })
-
-  it('sets expanded to true when clicking the trigger', () => {
-    const wrapper = mount(<DropdownMenu icon={icon} items={items} size={size} />);
-    wrapper.find(DropdownTrigger).first().simulate('click');
-    expect(wrapper.state('expanded')).to.be.equal(true);
-  })
-
-  // Error: ReactWrapper::state() can only be called on the root
-  /*it('sets expanded to false when clicking outside', () => {
-    const wrapper = mount((
-      <div>
-        <DropdownMenu icon={icon} items={items} size={size} />
-        <span />
-      </div>
-    ));
-
-    wrapper.find(DropdownTrigger).first().simulate('click');
-    expect(wrapper.find(DropdownMenu).first().state('expanded')).to.be.equal(true);
-
-    wrapper.find('span').first().simulate('click');
-    expect(wrapper.find(DropdownMenu).first().state('expanded')).to.be.equal(false);
-  })*/
-
-  it('renders list elements for each props.items if expanded', () => {
-    const wrapper = mount(<DropdownMenu icon={icon} items={items} size={size} />);
-    wrapper.find(DropdownTrigger).first().simulate('click');
-    const lis = wrapper.find(DropdownContent).find('li');
-    expect(lis.length).to.be.equal(items.length);
-  });
-
-  it('uses the href passed in via props.items', () => {
-    wrapper
-      .find(DropdownContent).find('li a')
-      .forEach((a, i) => expect(a).to.have.attr('href', items[i].href));
-  });
-
-  it('uses the text passed in via props.items', () => {
-    wrapper
-      .find(DropdownContent).find('li a')
-      .forEach((a, i) => expect(a).to.have.text(items[i].text));
-  });
-
-  it('uses the action passed in via props.items as click handler', () => {
-    const wrapper = mount(<DropdownMenu icon={icon} items={items} size={size} />);
-    wrapper.find(DropdownTrigger).first().simulate('click');
-    wrapper.find(DropdownContent).find('li a').first().simulate('click');
-    expect(action.calledOnce).to.equal(true);
-  });
-});
diff --git a/spec/javascript/components/features/ui/components/column.test.js b/spec/javascript/components/features/ui/components/column.test.js
new file mode 100644
index 000000000..df0f43e60
--- /dev/null
+++ b/spec/javascript/components/features/ui/components/column.test.js
@@ -0,0 +1,30 @@
+import { expect } from 'chai';
+import { mount } from 'enzyme';
+import sinon from 'sinon';
+import React from 'react';
+import Column from '../../../../../../app/javascript/mastodon/features/ui/components/column';
+import ColumnHeader from '../../../../../../app/javascript/mastodon/features/ui/components/column_header';
+
+describe('<Column />', () => {
+  describe('<ColumnHeader /> click handler', () => {
+    beforeEach(() => {
+      global.requestAnimationFrame = sinon.spy();
+    });
+
+    it('runs the scroll animation if the column contains scrollable content', () => {
+      const wrapper = mount(
+        <Column heading="notifications">
+          <div className="scrollable" />
+        </Column>
+      );
+      wrapper.find(ColumnHeader).simulate('click');
+      expect(global.requestAnimationFrame.called).to.equal(true);
+    });
+
+    it('does not try to scroll if there is no scrollable content', () => {
+      const wrapper = mount(<Column heading="notifications" />);
+      wrapper.find(ColumnHeader).simulate('click');
+      expect(global.requestAnimationFrame.called).to.equal(false);
+    });
+  });
+});
diff --git a/spec/javascript/components/features/ui/components/column.test.jsx b/spec/javascript/components/features/ui/components/column.test.jsx
deleted file mode 100644
index 6359905e6..000000000
--- a/spec/javascript/components/features/ui/components/column.test.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import { expect } from 'chai';
-import { mount } from 'enzyme';
-import sinon from 'sinon';
-
-import Column from '../../../../../../app/javascript/mastodon/features/ui/components/column';
-import ColumnHeader from '../../../../../../app/javascript/mastodon/features/ui/components/column_header';
-
-describe('<Column />', () => {
-  describe('<ColumnHeader /> click handler', () => {
-    beforeEach(() => {
-      global.requestAnimationFrame = sinon.spy();
-    });
-
-    it('runs the scroll animation if the column contains scrollable content', () => {
-      const wrapper = mount(
-        <Column heading="notifications">
-          <div className="scrollable" />
-        </Column>
-      );
-      wrapper.find(ColumnHeader).simulate('click');
-      expect(global.requestAnimationFrame.called).to.equal(true);
-    });
-
-    it('does not try to scroll if there is no scrollable content', () => {
-      const wrapper = mount(<Column heading="notifications" />);
-      wrapper.find(ColumnHeader).simulate('click');
-      expect(global.requestAnimationFrame.called).to.equal(false);
-    });
-  });
-});
diff --git a/spec/javascript/components/loading_indicator.test.js b/spec/javascript/components/loading_indicator.test.js
new file mode 100644
index 000000000..0859dd192
--- /dev/null
+++ b/spec/javascript/components/loading_indicator.test.js
@@ -0,0 +1,8 @@
+import { expect } from 'chai';
+import { shallow } from 'enzyme';
+import React from 'react';
+import LoadingIndicator from '../../../app/javascript/mastodon/components/loading_indicator';
+
+describe('<LoadingIndicator />', () => {
+
+});
diff --git a/spec/javascript/components/loading_indicator.test.jsx b/spec/javascript/components/loading_indicator.test.jsx
deleted file mode 100644
index a372640be..000000000
--- a/spec/javascript/components/loading_indicator.test.jsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import { expect } from 'chai';
-import { shallow } from 'enzyme';
-
-import LoadingIndicator from '../../../app/javascript/mastodon/components/loading_indicator'
-
-describe('<LoadingIndicator />', () => {
-
-});
diff --git a/spec/javascript/setup.js b/spec/javascript/setup.js
index 24f21db72..7d4b2866e 100644
--- a/spec/javascript/setup.js
+++ b/spec/javascript/setup.js
@@ -15,8 +15,5 @@ Object.keys(document.defaultView).forEach((property) => {
 });
 
 global.navigator = {
-  userAgent: 'node.js'
+  userAgent: 'node.js',
 };
-
-var React    = window.React    = global.React    = require('react');
-var ReactDOM = window.ReactDOM = global.ReactDOM = require('react-dom');
-- 
cgit