PLT-5755: Infrastructure for Component Testing. (mattermost#5814)

This migrates the existing webapp tests to using Jest and Enzyme. The
infrastructure is put in place for React component testing, and a few
simple example component tests are implemented.

This also adds snapshot testing of components, coverage checking for the
webapp (although that is not yet integrated to Coveralls), and the
ability to run npm run test:watch to automatically re-run affected tests
when working on the webapp codebase.

.babelrc

@@ -0,0 +1,7 @@
+{
+ "presets": [
+ "es2015",
+ "react",
+ "stage-0"
+ ]
+}

client/client.jsx

@@ -2149,6 +2149,7 @@ export default class Client {
  request.
  post(`${this.getEmojiRoute()}/delete`).
  set(this.defaultHeaders).
+ type('application/json').
  accept('application/json').
  send({id}).
  end(this.handleResponse.bind(this, 'deleteEmoji', success, error));
@@ -2218,6 +2219,7 @@ export default class Client {
  request.
  post(`${this.getChannelNeededRoute(channelId)}/posts/${reaction.post_id}/reactions/save`).
  set(this.defaultHeaders).
+ type('application/json').
  accept('application/json').
  send(reaction).
  end(this.handleResponse.bind(this, 'saveReaction', success, error));
@@ -2229,6 +2231,7 @@ export default class Client {
  request.
  post(`${this.getChannelNeededRoute(channelId)}/posts/${reaction.post_id}/reactions/delete`).
  set(this.defaultHeaders).
+ type('application/json').
  accept('application/json').
  send(reaction).
  end(this.handleResponse.bind(this, 'deleteReaction', success, error));

components/about_build_modal.jsx

@@ -140,7 +140,7 @@ export default class AboutBuildModal extends React.Component {
  id='about.version'
  defaultMessage='Version:'
  />
- {version}
+ <span id='versionString'>{version}</span>
  </div>
  <div>
  <FormattedMessage

package.json

@@ -1,6 +1,8 @@
 {
  "name": "mattermost-webapp",
- "browser": {"./client/web_client.jsx": "./client/browser_web_client.jsx"},
+ "browser": {
+ "./client/web_client.jsx": "./client/browser_web_client.jsx"
+ },
  "version": "0.0.1",
  "private": true,
  "dependencies": {
@@ -39,6 +41,7 @@
  "devDependencies": {
  "babel-core": "6.24.0",
  "babel-eslint": "7.1.1",
+ "babel-jest": "19.0.0",
  "babel-loader": "6.4.0",
  "babel-plugin-transform-runtime": "6.23.0",
  "babel-polyfill": "6.23.0",
@@ -48,36 +51,75 @@
  "copy-webpack-plugin": "4.0.1",
  "cross-env": "3.2.3",
  "css-loader": "0.27.3",
+ "enzyme": "2.7.1",
+ "enzyme-to-json": "1.5.0",
  "eslint": "3.17.1",
  "eslint-plugin-react": "6.10.0",
  "exports-loader": "0.6.4",
  "extract-text-webpack-plugin": "2.1.0",
  "file-loader": "0.10.1",
  "html-loader": "0.4.5",
  "html-webpack-plugin": "2.28.0",
+ "identity-obj-proxy": "3.0.0",
  "image-webpack-loader": "3.2.0",
  "imports-loader": "0.7.1",
+ "jest": "19.0.2",
+ "jest-cli": "19.0.2",
  "jquery-deferred": "0.3.1",
  "jsdom": "9.12.0",
  "jsdom-global": "2.1.1",
  "json-loader": "0.5.4",
- "mocha": "3.2.0",
- "mocha-jsdom": "1.1.0",
- "mocha-webpack": "0.7.0",
  "node-sass": "4.5.0",
  "raw-loader": "0.5.1",
  "react-addons-test-utils": "15.4.2",
+ "react-dom": "15.4.2",
  "sass-loader": "6.0.3",
  "style-loader": "0.13.2",
  "url-loader": "0.5.8",
  "webpack": "2.2.1",
  "webpack-node-externals": "1.5.4"
  },
+ "jest": {
+ "snapshotSerializers": [
+ "<rootDir>/node_modules/enzyme-to-json/serializer"
+ ],
+ "testPathIgnorePatterns": [
+ "/node_modules/",
+ "/non_npm_dependencies/"
+ ],
+ "collectCoverageFrom": [
+ "actions/**/*.{js,jsx}",
+ "client/**/*.{js,jsx}",
+ "components/**/*.{js,jsx}",
+ "routes/**/*.{js,jsx}",
+ "stores/**/*.{js,jsx}",
+ "utils/**/*.{js,jsx}"
+ ],
+ "coverageReporters": [
+ "lcov",
+ "text-summary"
+ ],
+ "moduleNameMapper": {
+ "^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "identity-obj-proxy",
+ "^.+\\.(css|less|scss)$": "identity-obj-proxy",
+ "^.+\\.(json)$": "identity-obj-proxy"
+ },
+ "moduleDirectories": [
+ "",
+ "node_modules",
+ "non_npm_dependencies"
+ ],
+ "transformIgnorePatterns": [
+ "node_modules/(?!react-native|react-router)"
+ ]
+ },
  "scripts": {
  "check": "eslint --ext \".jsx\" --ignore-pattern node_modules --quiet .",
  "build": "cross-env NODE_ENV=production webpack",
  "run": "cross-env NODE_ENV=production webpack --progress --watch",
  "run-fullmap": "webpack --progress --watch",
- "test": "mocha-webpack --webpack-config webpack.config.js \"**/*.test.jsx\""
+ "test": "jest",
+ "test:watch": "jest --watch",
+ "test:coverage": "jest --coverage"
  }
 }

tests/.eslintrc.json

@@ -8,5 +8,8 @@
  "no-unreachable": 0,
  "new-cap": 0,
  "max-nested-callbacks": 0
+ },
+ "env": {
+ "jest": true
  }
 }