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

package.json

@@ -9,8 +9,8 @@
     "start": "rimraf ./tmp/streaming && babel ./streaming/index.js --out-dir ./tmp && node ./tmp/streaming/index.js",
     "storybook": "NODE_ENV=test start-storybook -p 9001 -c storybook",
     "test": "npm run test:lint && npm run test:mocha",
-    "test:lint": "eslint -c .eslintrc.yml --ext=js app/javascript/ config/webpack/ storyboard/ streaming/",
+    "test:lint": "eslint -c .eslintrc.yml --ext=js app/javascript/ config/webpack/ spec/javascript/ storyboard/ streaming/",
-    "test:mocha": "NODE_ENV=test mocha --require ./spec/javascript/setup.js --compilers js:babel-register ./spec/javascript/components/*.test.jsx",
+    "test:mocha": "NODE_ENV=test mocha --require ./spec/javascript/setup.js --compilers js:babel-register ./spec/javascript/components/*.test.js",
     "postinstall": "npm rebuild node-sass"
   },
   "repository": {
@@ -116,8 +116,8 @@
   "devDependencies": {
     "@kadira/storybook": "^2.35.3",
     "babel-eslint": "^7.2.3",
-    "chai": "^3.5.0",
+    "chai": "^4.0.1",
-    "chai-enzyme": "^0.6.1",
+    "chai-enzyme": "^0.7.1",
     "enzyme": "^2.8.2",
     "eslint": "^3.19.0",
     "eslint-plugin-jsx-a11y": "^4.0.0",
@@ -127,7 +127,7 @@
     "mocha": "^3.4.1",
     "react-intl-translations-manager": "^5.0.0",
     "react-test-renderer": "^15.5.4",
-    "sinon": "^2.2.0",
+    "sinon": "^2.3.2",
     "webpack-dev-server": "^2.4.5"
   },
   "optionalDependencies": {

spec/javascript/components/avatar.test.js

@@ -1,7 +1,7 @@
 import { expect } from 'chai';
 import { render } from 'enzyme';
-
+import React from 'react';
-import Avatar from '../../../app/javascript/mastodon/components/avatar'
+import Avatar from '../../../app/javascript/mastodon/components/avatar';
 
 describe('<Avatar />', () => {
   const src = '/path/to/image.jpg';

spec/javascript/components/button.test.js

@@ -1,7 +1,7 @@
 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 />', () => {

spec/javascript/components/display_name.test.js

@@ -1,15 +1,15 @@
 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'
+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'
+      display_name: 'Foo',
     });
     const wrapper = render(<DisplayName account={account} />);
     expect(wrapper).to.have.text('Foo @bar@baz');
@@ -19,7 +19,7 @@ describe('<DisplayName />', () => {
     const account = Immutable.fromJS({
       username: 'bar',
       acct: 'bar@baz',
-      display_name: ''
+      display_name: '',
     });
     const wrapper = render(<DisplayName account={account} />);
     expect(wrapper).to.have.text('bar @bar@baz');

spec/javascript/components/dropdown_menu.test.js

@@ -1,7 +1,7 @@
 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';
 
@@ -12,7 +12,7 @@ describe('<DropdownMenu />', () => {
 
   const items = [
     { text: 'first item',  action: action, href: '/some/url' },
-    { text: 'second item', action: 'noop' }
+    { text: 'second item', action: 'noop' },
   ];
   const wrapper = shallow(<DropdownMenu icon={icon} items={items} size={size} />);
 
@@ -35,23 +35,23 @@ describe('<DropdownMenu />', () => {
   });
 
   it('uses props.icon as icon class name', () => {
-    expect(wrapper.find(DropdownTrigger).find('i')).to.have.className(`fa-${icon}`)
+    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', () => {

spec/javascript/components/features/ui/components/column.test.js

@@ -1,7 +1,7 @@
 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';
 

spec/javascript/components/loading_indicator.test.js

@@ -1,7 +1,7 @@
 import { expect } from 'chai';
 import { shallow } from 'enzyme';
-
+import React from 'react';
-import LoadingIndicator from '../../../app/javascript/mastodon/components/loading_indicator'
+import LoadingIndicator from '../../../app/javascript/mastodon/components/loading_indicator';
 
 describe('<LoadingIndicator />', () => {
 

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');

yarn.lock

@@ -1494,20 +1494,23 @@ center-align@^0.1.1:
     align-text "^0.1.3"
     lazy-cache "^1.0.3"
 
-chai-enzyme@^0.6.1:
+chai-enzyme@^0.7.1:
-  version "0.6.1"
+  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/chai-enzyme/-/chai-enzyme-0.6.1.tgz#585c963c6ea1331446efd12ee8391e807d758620"
+  resolved "https://registry.yarnpkg.com/chai-enzyme/-/chai-enzyme-0.7.1.tgz#a945c81989bcc4fd96af6263f9c0a9c668f29b66"
   dependencies:
     html "^1.0.0"
     react-element-to-jsx-string "^5.0.0"
 
-chai@^3.5.0:
+chai@^4.0.1:
-  version "3.5.0"
+  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/chai/-/chai-3.5.0.tgz#4d02637b067fe958bdbfdd3a40ec56fef7373247"
+  resolved "https://registry.yarnpkg.com/chai/-/chai-4.0.1.tgz#9e41e808e17a7f10807721e2ac5a589d5bb09082"
   dependencies:
     assertion-error "^1.0.1"
-    deep-eql "^0.1.3"
+    check-error "^1.0.1"
-    type-detect "^1.0.0"
+    deep-eql "^2.0.1"
+    get-func-name "^2.0.0"
+    pathval "^1.0.0"
+    type-detect "^4.0.0"
 
 chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
   version "1.1.3"
@@ -1519,6 +1522,10 @@ chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
+check-error@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.2.tgz#574d312edd88bb5dd8912e9286dd6c0aed4aac82"
+
 cheerio@^0.22.0:
   version "0.22.0"
   resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-0.22.0.tgz#a9baa860a3f9b595a6b81b1a86873121ed3a269e"
@@ -2084,11 +2091,11 @@ decimal.js@7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-7.1.1.tgz#1adcad7d70d7a91c426d756f1eb6566c3be6cbcf"
 
-deep-eql@^0.1.3:
+deep-eql@^2.0.1:
-  version "0.1.3"
+  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-0.1.3.tgz#ef558acab8de25206cd713906d74e56930eb69f2"
+  resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-2.0.2.tgz#b1bac06e56f0a76777686d50c9feb75c2ed7679a"
   dependencies:
-    type-detect "0.1.1"
+    type-detect "^3.0.0"
 
 deep-equal@^1.0.1:
   version "1.0.1"
@@ -2969,6 +2976,10 @@ get-caller-file@^1.0.1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-1.0.2.tgz#f702e63127e7e231c160a80c1554acb70d5047e5"
 
+get-func-name@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.0.tgz#ead774abee72e20409433a066366023dd6887a41"
+
 get-stdin@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-4.0.1.tgz#b968c6b0a04384324902e8bf1a5df32579a450fe"
@@ -4640,6 +4651,10 @@ path-type@^1.0.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
+pathval@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/pathval/-/pathval-1.1.0.tgz#b942e6d4bde653005ef6b71361def8727d0645e0"
+
 pbkdf2-compat@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/pbkdf2-compat/-/pbkdf2-compat-2.0.1.tgz#b6e0c8fa99494d94e0511575802a59a5c142f288"
@@ -6102,9 +6117,9 @@ signal-exit@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
 
-sinon@^2.2.0:
+sinon@^2.3.2:
-  version "2.3.1"
+  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/sinon/-/sinon-2.3.1.tgz#48c9c758b4d0bb86327486833f1c4298919ce9ee"
+  resolved "https://registry.yarnpkg.com/sinon/-/sinon-2.3.2.tgz#c43a9c570f32baac1159505cfeed19108855df89"
   dependencies:
     diff "^3.1.0"
     formatio "1.2.0"
@@ -6564,13 +6579,9 @@ type-check@~0.3.2:
   dependencies:
     prelude-ls "~1.1.2"
 
-type-detect@0.1.1:
+type-detect@^3.0.0:
-  version "0.1.1"
+  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-0.1.1.tgz#0ba5ec2a885640e470ea4e8505971900dac58822"
+  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-3.0.0.tgz#46d0cc8553abb7b13a352b0d6dea2fd58f2d9b55"
-
-type-detect@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-1.0.0.tgz#762217cc06db258ec48908a1298e8b95121e8ea2"
 
 type-detect@^4.0.0:
   version "4.0.3"