feat(*) full mocking of http requests

Using nock to capture all the infos about the requests (responses/headers ...) and re-injecting those infos via superagent-mocker, I can now use the client as if there was a server behind (and mock any request if necessary).

Author: topheman

package.json

@@ -20,7 +20,7 @@
     "webpack-lazy": "./node_modules/.bin/webpack-dev-server --progress --colors --lazy",
     "webpack": "./node_modules/.bin/webpack-dev-server --progress --colors --hot --inline",
     "webpack-dev": "API_ROOT_URL='http://localhost:8000/github' DEVTOOLS=true npm run webpack",
-    "webpack-mock": "DEVTOOLS=true NODE_ENV=mock npm run webpack",
+    "webpack-mock": "DEVTOOLS=true NODE_ENV=mock API_ROOT_URL='http://localhost' npm run webpack",
     "webpack-dev-simple": "DEVTOOLS=true npm run webpack",
     "generate-http-fixtures": "node ./bin/nock/call-nock.js"
   },
@@ -95,7 +95,8 @@
     "react-router": "^1.0.0",
     "redux": "^3.0.4",
     "redux-router": "^1.0.0-beta3",
-    "superagent": "^1.4.0"
+    "superagent": "^1.4.0",
+    "superagent-mocker": "^0.3.0"
   },
   "private": true
 }

src/bootstrap.js

@@ -80,7 +80,6 @@ else {
 
 if (process.env.NODE_ENV === 'mock') {
   console.info('MOCK mode');
-  console.info('STUB_MOCK_TIMEOUT', process.env.STUB_MOCK_TIMEOUT);
 }
 
 ReactDOM.render(rootElement, document.getElementById('app-container'));

src/services/httpService.js

@@ -1,18 +1,14 @@
 /**
- * To avoid having to involve webpack into requiring modules when we'll execute any code server-side
- * I dropped the resolve.alias solution in favor of dependency injection.
+ * This is the singleton of the http service, where you can get the github client (which decorates the response from the github API)
+ * In your app you may not want such a custom client, you should definitly take a look at
+ * https://github.com/erikras/react-redux-universal-hot-example/blob/master/src/helpers/ApiClient.js
  */
 
 let instance = null;
 
 class HttpService {
   constructor() {
-    if (process.env.NODE_ENV === 'mock') {
-      this.service = require('./httpService/http.stub');
-    }
-    else {
-      this.service = require('./httpService/http');
-    }
+    this.service = require('./httpService/http');
   }
   get(relativeUrl, params) {
     return this.service.get(relativeUrl, params);

src/services/httpService/http.js

@@ -1,4 +1,14 @@
-import request from 'superagent';
+/**
+ * This is the github client which decorates requests and responses from github.
+ * It will adapt to the API_ROOT_URL you pass in env var.
+ * In mock mode, it won't make any http requests, but will use the test/fixtures/http.json mock files (generated via npm run generate-http-fixtures)
+ */
+
+const request = require('superagent');
+
+if (process.env.NODE_ENV === 'mock') {
+  require('./http.mock.js')(request);
+}
 
 export default {
   get(relativeUrl, params = {}) {

src/services/httpService/http.mock.js

@@ -0,0 +1,30 @@
+/**
+ * This function decorates "request" and adds the mock fixtures generated via npm run generate-http-fixtures
+ *
+ * It will be on when you npm run webpack-mock
+ */
+
+import fixtures from '../../../test/fixtures/http.json';
+
+export default function mockRequest(request) {
+
+  const mock = require('superagent-mocker')(request);
+
+  if (fixtures.length === 0) {
+    throw new Error('Fixtures missing, please npm run generate-http-fixtures');
+  }
+  fixtures.forEach((fixture) => {
+    console.info('mocking', fixture.path);
+    mock.get(fixture.scope + fixture.path, (req) => {
+      const res = {
+        headers: fixture.headers,
+        body: fixture.response,
+        status: fixture.status
+      };
+      console.log('MOCK', fixture.path, req, res);
+      return res;
+    });
+  });
+
+  return mock;
+}

src/services/httpService/http.mocks/followers.json

@@ -14,7 +14,6 @@ console.log('Launched in ' + (MODE_DEV_SERVER ? 'dev-server' : 'build') + ' mode
 const NODE_ENV = process.env.NODE_ENV ? process.env.NODE_ENV.toLowerCase() : 'dev';
 const DEVTOOLS = process.env.DEVTOOLS ? JSON.parse(process.env.DEVTOOLS) : false;
 const API_ROOT_URL = process.env.API_ROOT_URL ? process.env.API_ROOT_URL : 'https://api.github.com';
-const STUB_MOCK_TIMEOUT = process.env.STUB_MOCK_TIMEOUT ? process.env.STUB_MOCK_TIMEOUT : 400;
 const DISABLE_LINTER = process.env.DISABLE_LINTER ? JSON.parse(process.env.DISABLE_LINTER) : false;
 
 const SOURCEMAPS_ACTIVE = NODE_ENV !== 'production' || DEVTOOLS === true;
@@ -27,7 +26,6 @@ else if(NODE_ENV === 'test'){
 }
 else if(NODE_ENV === 'mock'){
   console.log('MOCK mode');
-  console.log('STUB_MOCK_TIMEOUT', STUB_MOCK_TIMEOUT);
 }
 else{
   console.log('DEVELOPMENT mode');
@@ -65,7 +63,6 @@ plugins.push(new webpack.DefinePlugin({
     'NODE_ENV': JSON.stringify(NODE_ENV),
     'DEVTOOLS': DEVTOOLS, // I rely on the variable bellow to make a bundle with the redux devtools (or not)
     'API_ROOT_URL': JSON.stringify(API_ROOT_URL), // The httpClient will rely on that (change it at will)
-    'STUB_MOCK_TIMEOUT': JSON.parse(STUB_MOCK_TIMEOUT), // The httpStub will rely on that (change it at will)
     'DISABLE_LINTER': DISABLE_LINTER // Simply to log in browser console if linting is on or off
   }
 }));