use Jest instead of Karma, update to prettier-eslint-cli

Author: bertho-zero

.eslintignore

@@ -1,3 +1 @@
 webpack/*
-karma.conf.js
-tests.webpack.js

README.md

@@ -241,12 +241,10 @@ After this modification to both loaders you will be able to use scss and less fi
 
 #### Unit Tests
 
-The project uses [Jest](https://facebook.github.io/jest/) and [Mocha](https://mochajs.org/) to run your unit tests, it uses [Karma](http://karma-runner.github.io/0.13/index.html) as the test runner, it enables the feature that you are able to render your tests to the browser (e.g: Firefox, Chrome etc.), which means you are able to use the [Test Utilities](http://facebook.github.io/react/docs/test-utils.html) from Facebook api like `renderIntoDocument()`.
+The project uses [Jest](https://facebook.github.io/jest/) with [Mocha](https://mochajs.org/) to run your unit tests.
 
 To run the tests in the project, just simply run `npm test` if you have `Chrome` installed, it will be automatically launched as a test service for you.
 
-To keep watching your test suites that you are working on, just set `singleRun: false` in the `karma.conf.js` file. Please be sure set it to `true` if you are running `npm test` on a continuous integration server (travis-ci, etc).
-
 ## Deployment on Heroku
 
 To get this project to work on Heroku, you need to:

api/__tests__/api-test.js

@@ -11,7 +11,10 @@ describe('mapUrl', () => {
 
   it('extracts nothing if the url is empty', () => {
     const url = '';
-    const splittedUrlPath = url.split('?')[0].split('/').slice(1);
+    const splittedUrlPath = url
+      .split('?')[0]
+      .split('/')
+      .slice(1);
     const availableActions = { a: 1, widget: { c: 1, load: () => 'baz' } };
 
     expect(mapUrl(availableActions, splittedUrlPath)).to.deep.equal({
@@ -22,7 +25,10 @@ describe('mapUrl', () => {
 
   it('extracts nothing if nothing was found', () => {
     const url = '/widget/load/?foo=bar';
-    const splittedUrlPath = url.split('?')[0].split('/').slice(1);
+    const splittedUrlPath = url
+      .split('?')[0]
+      .split('/')
+      .slice(1);
     const availableActions = { a: 1, info: { c: 1, load: () => 'baz' } };
 
     expect(mapUrl(availableActions, splittedUrlPath)).to.deep.equal({
@@ -33,7 +39,10 @@ describe('mapUrl', () => {
 
   it('extracts the available actions and the params from an relative url string with GET params', () => {
     const url = '/widget/load/param1/xzy?foo=bar';
-    const splittedUrlPath = url.split('?')[0].split('/').slice(1);
+    const splittedUrlPath = url
+      .split('?')[0]
+      .split('/')
+      .slice(1);
     const availableActions = { a: 1, widget: { c: 1, load: () => 'baz' } };
 
     expect(mapUrl(availableActions, splittedUrlPath)).to.deep.equal({
@@ -44,7 +53,10 @@ describe('mapUrl', () => {
 
   it('extracts the available actions from an url string without GET params', () => {
     const url = '/widget/load/?foo=bar';
-    const splittedUrlPath = url.split('?')[0].split('/').slice(1);
+    const splittedUrlPath = url
+      .split('?')[0]
+      .split('/')
+      .slice(1);
     const availableActions = { a: 1, widget: { c: 1, load: () => 'baz' } };
 
     expect(mapUrl(availableActions, splittedUrlPath)).to.deep.equal({
@@ -55,7 +67,10 @@ describe('mapUrl', () => {
 
   it('does not find the avaialble action if deeper nesting is required', () => {
     const url = '/widget';
-    const splittedUrlPath = url.split('?')[0].split('/').slice(1);
+    const splittedUrlPath = url
+      .split('?')[0]
+      .split('/')
+      .slice(1);
     const availableActions = { a: 1, widget: { c: 1, load: () => 'baz' } };
 
     expect(mapUrl(availableActions, splittedUrlPath)).to.deep.equal({

api/actions/__tests__/widget-update-test.js

@@ -24,11 +24,7 @@ describe('widget update', () => {
     });
 
     it('does not accept green widgets', () => {
-      sinon.stub(load, 'default').returns(
-        new Promise(resolve => {
-          resolve(widgets);
-        })
-      );
+      sinon.stub(load, 'default').resolves(widgets);
       return update({ session: {}, body: { color: 'Green' } }).then(
         () => {},
         err => {
@@ -38,25 +34,17 @@ describe('widget update', () => {
     });
 
     it('fails to load widgets', () => {
-      sinon.stub(load, 'default').returns(
-        new Promise((resolve, reject) => {
-          reject('Widget fail to load.');
-        })
-      );
+      sinon.stub(load, 'default').rejects(new Error('Widget fail to load.'));
       return update({ session: {}, body: { color: 'Blue' } }).then(
         () => {},
         err => {
-          expect(err).to.equal('Widget fail to load.');
+          expect(err.message).to.equal('Widget fail to load.');
         }
       );
     });
 
     it('updates a widget', () => {
-      sinon.stub(load, 'default').returns(
-        new Promise(resolve => {
-          resolve(widgets);
-        })
-      );
+      sinon.stub(load, 'default').resolves(widgets);
       const widget = { id: 2, color: 'Blue' };
       return update({ session: {}, body: widget }).then(res => {
         expect(res).to.deep.equal(widget);

api/api.js

@@ -36,7 +36,10 @@ app
   .use(bodyParser.json());
 
 const actionsHandler = (req, res, next) => {
-  const splittedUrlPath = req.url.split('?')[0].split('/').slice(1);
+  const splittedUrlPath = req.url
+    .split('?')[0]
+    .split('/')
+    .slice(1);
   const { action, params } = mapUrl(actions, splittedUrlPath);
 
   req.app = app;

api/hooks/validateHook.js

@@ -3,9 +3,11 @@ import { createAsyncValidator as validator } from 'utils/validation';
 
 export default function validateHook(schema) {
   return hook =>
-    validator(schema, { hook })(hook.data).then(() => hook).catch(errorsValidation => {
-      if (Object.keys(errorsValidation).length) {
-        throw new errors.BadRequest('Validation failed', errorsValidation);
-      }
-    });
+    validator(schema, { hook })(hook.data)
+      .then(() => hook)
+      .catch(errorsValidation => {
+        if (Object.keys(errorsValidation).length) {
+          throw new errors.BadRequest('Validation failed', errorsValidation);
+        }
+      });
 }

jest.config.js

@@ -0,0 +1,17 @@
+module.exports = {
+  moduleDirectories: [
+    process.env.NODE_PATH,
+    'node_modules'
+  ],
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|svg|ttf|woff|woff2)$': '<rootDir>/__mocks__/fileMock.js',
+    '\\.(css|less|scss)$': 'identity-obj-proxy'
+  },
+  globals: {
+    __CLIENT__: process.env.NODE_PATH === 'src',
+    __SERVER__: process.env.NODE_PATH === 'api',
+    __DEVELOPMENT__: true,
+    __DEVTOOLS__: false, // <-------- DISABLE redux-devtools HERE
+    __DLLS__: false
+  }
+};

karma.conf.js

@@ -24,31 +24,29 @@
   ],
   "main": "bin/server.js",
   "scripts": {
-    "precommit": "lint-staged",
-    "precommit-prettier": "eslint --print-config .eslintrc.js | prettier-eslint --write",
     "start": "concurrently --kill-others \"npm run start-prod\" \"npm run start-prod-api\"",
-    "start-prod": "better-npm-run start-prod",
-    "start-prod-api": "better-npm-run start-prod-api",
+    "start-prod": "bnr start-prod",
+    "start-prod-api": "bnr start-prod-api",
     "dev": "concurrently --kill-others \"npm run watch-client\" \"npm run start-dev\" \"npm run start-dev-api\"",
-    "start-dev": "better-npm-run start-dev",
-    "start-dev-api": "better-npm-run start-dev-api",
-    "watch-client": "better-npm-run watch-client",
-    "build": "better-npm-run build",
+    "start-dev": "bnr start-dev",
+    "start-dev-api": "bnr start-dev-api",
+    "watch-client": "bnr watch-client",
+    "build": "bnr build",
     "build-dlls": "webpack --colors --display-error-details --config webpack/vendor.config.js",
     "postinstall": "concurrently \"npm run build\" \"npm run build-dlls\"",
-    "prettier": "npm run precommit-prettier -- \"./+(src|api)/**/*.js\"",
+    "precommit": "lint-staged",
+    "prettier": "prettier-eslint --write --eslint-config-path .eslintrc './+(src|api)/**/*.js'",
     "lint": "eslint -c .eslintrc api src",
-    "test": "karma start",
-    "test-node": "jest $(find api -name '*-test.js')",
-    "test-node-watch": "jest $(find api -name '*-test.js') --watch",
+    "test": "bnr test",
+    "test-node": "bnr test-node",
+    "lighthouse-report": "lighthouse http://localhost:8080 --view",
     "docker-build": ". ./docker/build.sh",
     "docker-dev": ". ./docker/run.dev.sh",
-    "docker-prod": ". ./docker/run.prod.sh",
-    "lighthouse-report": "LIGHTHOUSE_CHROMIUM_PATH=$(which google-chrome) lighthouse http://localhost:8080"
+    "docker-prod": ". ./docker/run.prod.sh"
   },
   "lint-staged": {
     "+(src|api)/**/*.js": [
-      "npm run precommit-prettier",
+      "prettier-eslint --write --eslint-config-path .eslintrc",
       "eslint -c .eslintrc",
       "git add"
     ]
@@ -105,6 +103,18 @@
       "env": {
         "NODE_ENV": "production"
       }
+    },
+    "test": {
+      "command": "jest src",
+      "env": {
+        "NODE_PATH": "src"
+      }
+    },
+    "test-node": {
+      "command": "jest api",
+      "env": {
+        "NODE_PATH": "api"
+      }
     }
   },
   "dependencies": {
@@ -172,7 +182,7 @@
   },
   "devDependencies": {
     "babel-eslint": "^7.1.1",
-    "babel-jest": "^20.0.1",
+    "babel-jest": "^21.0.2",
     "babel-loader": "^7.0.0",
     "better-npm-run": "^0.1.0",
     "bootstrap-loader": "^2.1.0",
@@ -181,6 +191,7 @@
     "clean-webpack-plugin": "^0.1.15",
     "concurrently": "^3.3.0",
     "css-loader": "^0.28.5",
+    "enzyme": "^2.9.1",
     "eslint": "^4.4.1",
     "eslint-config-airbnb": "^15.1.0",
     "eslint-loader": "^1.6.1",
@@ -193,23 +204,15 @@
     "happypack": "^3.0.2",
     "html-webpack-plugin": "^2.30.1",
     "husky": "^0.14.3",
-    "jest": "^20.0.1",
-    "jest-cli": "^20.0.1",
-    "karma": "^1.4.1",
-    "karma-cli": "^1.0.1",
-    "karma-mocha": "^1.3.0",
-    "karma-mocha-reporter": "^2.2.2",
-    "karma-phantomjs-launcher": "^1.0.2",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^2.0.2",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^21.1.0",
+    "jest-cli": "^21.1.0",
     "less": "^2.7.2",
     "less-loader": "^4.0.3",
     "lighthouse": "^2.4.0",
     "lint-staged": "^4.0.3",
     "mocha": "^3.5.0",
     "node-sass": "^4.5.0",
-    "phantomjs-polyfill": "^0.0.2",
-    "phantomjs-prebuilt": "^2.1.15",
     "piping": "^1.0.0-rc.4",
     "postcss": "^6.0.9",
     "postcss-browser-reporter": "^0.5.0",
@@ -218,7 +221,7 @@
     "postcss-loader": "^2.0.5",
     "postcss-reporter": "^5.0.0",
     "postcss-url": "^7.1.2",
-    "prettier-eslint": "^6.4.2",
+    "prettier-eslint-cli": "^4.3.2",
     "react-a11y": "^0.3.3",
     "react-addons-test-utils": "^15.4.2",
     "react-hot-loader": "^3.0.0-beta.3",

package.json

@@ -14,7 +14,10 @@ const storage = __SERVER__ ? null : require('localforage');
 const host = clientUrl => (__SERVER__ ? `http://${config.apiHost}:${config.apiPort}` : clientUrl);
 
 const configureApp = transport =>
-  feathers().configure(transport).configure(hooks()).configure(authentication({ storage }));
+  feathers()
+    .configure(transport)
+    .configure(hooks())
+    .configure(authentication({ storage }));
 
 export const socket = io('', { path: host('/ws'), autoConnect: false });