Support delay mock

Author: WhatAKitty

README.md

@@ -14,6 +14,7 @@ So, I create one by myself.
 - [x] Combined with Mock.js
 - [x] Support exclude for some other path
 - [x] Proxy for other api server
+- [x] Delay for global and specific path
 - [ ] Support RAP system
 
 ## Usage
@@ -69,6 +70,7 @@ import FetchMock from 'react-fetch-mock';
 if (__dev__) {
   // attention: mocks file should be under `src/`
   window.fetch = new FetchMock(require('path/to/mocks/directory'), {
+    delay: 200, // 200ms
     fetch: window.fetch,
     exclude: [
       'http://www.google.com',
@@ -87,6 +89,7 @@ if (__dev__) {
 // if __dev__ is true, it will back the data you defined in mock directory
 fetch('/api/path', options);
 fetch('/api/path', {
+  delay: 2000,      // /api/path will delayed after 2000ms. Most of suitation, this won't be used usually.
   method: 'POST',
   headers: {
     'Content-Type': 'application/json',

dist/index.js

@@ -37,7 +37,8 @@ var FetchMock = function () {
     var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
       fetch: function fetch() {},
       exclude: [],
-      proxy: []
+      proxy: [],
+      delay: 2000 // ms
     };
 
     _classCallCheck(this, FetchMock);
@@ -50,6 +51,7 @@ var FetchMock = function () {
     this.raw = options.fetch;
     this.exclude = options.exclude || [];
     this.proxy = options.proxy || [];
+    this.delayTime = options.delay;
 
     this.loadMocks = this.loadMocks.bind(this);
     this.loadMock = this.loadMock.bind(this);
@@ -189,7 +191,10 @@ var FetchMock = function () {
       }
 
       var response = new _response2.default(obj);
-      return Promise.resolve(response);
+      var delayTime = options.delay || this.delayTime || 0;
+      return (0, _util.delay)(delayTime).then(function () {
+        return Promise.resolve(response);
+      });
     }
   }]);
 

dist/util.js

@@ -132,8 +132,17 @@ var matchUrl = function matchUrl(sourceUrl, targetUrl) {
   };
 };
 
+var delay = function delay(duration) {
+  return new Promise(function (resolve) {
+    setTimeout(function () {
+      resolve();
+    }, duration);
+  });
+};
+
 exports.isNull = isNull;
 exports.prueUrl = prueUrl;
 exports.parseUrl = parseUrl;
 exports.parseRequest = parseRequest;
-exports.matchUrl = matchUrl;
+exports.matchUrl = matchUrl;
+exports.delay = delay;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-fetch-mock",
-  "version": "0.5.4",
+  "version": "0.6.0",
   "description": "fetch mock for reactjs",
   "main": "index.js",
   "scripts": {

src/index.js

@@ -1,12 +1,13 @@
 import pathToRegexp from 'path-to-regexp';
-import { parseRequest, matchUrl, isNull } from './util';
+import { parseRequest, matchUrl, isNull, delay } from './util';
 import Response from './response';
 
 class FetchMock {
   constructor(required, options = {
     fetch: () => {},
     exclude: [],
     proxy: [],
+    delay: 2000,  // ms
   }) {
     if ('object' !== typeof required) {
       throw new Error('There is no required defined.');
@@ -16,6 +17,7 @@ class FetchMock {
     this.raw = options.fetch;
     this.exclude = options.exclude || [];
     this.proxy = options.proxy || [];
+    this.delayTime = options.delay;
 
     this.loadMocks = this.loadMocks.bind(this);
     this.loadMock = this.loadMock.bind(this);
@@ -106,7 +108,7 @@ class FetchMock {
     return proxied.process ? proxied.process(proxied, matches) : `${proxied.target}/${matches[1]}`;
   }
 
-  fetch(url, options) {
+  fetch(url, options = {}) {
     // using proxy
     if (this.isProxied(url)) {
       url = this.proxied(url);
@@ -137,7 +139,8 @@ class FetchMock {
     }
 
     const response = new Response(obj);
-    return Promise.resolve(response);
+    const delayTime = options.delay || this.delayTime || 0;
+    return delay(delayTime).then(() => Promise.resolve(response));
   }
 }
 

src/util.js

@@ -88,7 +88,7 @@ const matchUrl = (sourceUrl, targetUrl) => {
   const targetUrlWithoutProctol = removeProctol(targetUrl);
   const sourceUrlSplits = sourceUrlWithoutProctol.split('/');
   const targetUrlSplits = targetUrlWithoutProctol.split('/');
-  
+
   if (sourceUrlSplits.length !== targetUrlSplits.length) {
     return {
       result: false,
@@ -104,7 +104,7 @@ const matchUrl = (sourceUrl, targetUrl) => {
     }
 
     if (sourceUrlSplit.startsWith('{') && sourceUrlSplit.endsWith('}')) {
-      if (sourceUrlSplit.replace(/[^{]/g,'').length > 1 || sourceUrlSplit.replace(/[^}]/g,'').length > 1) {
+      if (sourceUrlSplit.replace(/[^{]/g, '').length > 1 || sourceUrlSplit.replace(/[^}]/g, '').length > 1) {
         return {
           result: false,
         };
@@ -124,10 +124,19 @@ const matchUrl = (sourceUrl, targetUrl) => {
   };
 };
 
+const delay = (duration) => {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve();
+    }, duration);
+  });
+};
+
 export {
   isNull,
   prueUrl,
   parseUrl,
   parseRequest,
   matchUrl,
+  delay,
 };

test/index.test.js

@@ -1,8 +1,9 @@
 import 'babel-polyfill';
 import expect from 'expect.js';
-import FetchMock, { Mock } from '../';
+import FetchMock, { Mock } from '../src';
 
 const fetch = new FetchMock(require('../__mocks__'), {
+  delay: 2000,   // delay 5s
   fetch: require('isomorphic-fetch'),
   exclude: [
     'https://www.amazon.com',
@@ -28,7 +29,7 @@ describe('test fetch mock', () => {
     expect(data).not.to.be.empty();
     expect(data).to.be.an('array');
     expect(data).to.have.length(2);
-  });
+  }).timeout(20000);
 
   it('fetch /api/users?a=b', async () => {
     const response = await fetch('/api/users');
@@ -39,7 +40,7 @@ describe('test fetch mock', () => {
     expect(data).not.to.be.empty();
     expect(data).to.be.an('array');
     expect(data).to.have.length(2);
-  });
+  }).timeout(20000);
 
   it('fetch /api/users with url parameters', async () => {
     const response = await fetch('/api/users?name=John');
@@ -50,7 +51,7 @@ describe('test fetch mock', () => {
     expect(data).not.to.be.empty();
     expect(data).to.be.an('array');
     expect(data).to.have.length(1);
-  });
+  }).timeout(20000);
 
   it('fetch /api/users with post parameters', async () => {
     const response = await fetch('/api/users', {
@@ -69,7 +70,7 @@ describe('test fetch mock', () => {
     expect(data).not.to.be.empty();
     expect(data).to.be.an('array');
     expect(data).to.have.length(1);
-  });
+  }).timeout(20000);
 
   it('fetch /api/users/{userId}', async () => {
     const response = await fetch('/api/users/123');
@@ -79,7 +80,7 @@ describe('test fetch mock', () => {
     expect(data).not.to.be(undefined);
     expect(data).not.to.be.empty();
     expect(data).to.be.property('userId', '123');
-  });
+  }).timeout(20000);
 
   it('fetch /api/users/mockjs with mockjs', async () => {
     const response = await fetch('/api/users/mockjs');
@@ -90,7 +91,7 @@ describe('test fetch mock', () => {
     expect(data).not.to.be.empty();
     expect(data).to.be.an('array');
     expect(data).to.have.length(2);
-  });
+  }).timeout(20000);
 
   it('fetch /api/users/mockjs with mockjs', async () => {
     const response = await fetch('/api/users/mockjs');
@@ -101,7 +102,7 @@ describe('test fetch mock', () => {
     expect(data).not.to.be.empty();
     expect(data).to.be.an('array');
     expect(data).to.have.length(2);
-  });
+  }).timeout(20000);
 
   it('fetch /api/users/{userid} with prue data response', async () => {
     const response = await fetch('/api/users/pru/121');
@@ -112,7 +113,7 @@ describe('test fetch mock', () => {
     expect(data).not.to.be.empty();
     expect(data).to.be.an('object');
     expect(data).to.be.property('userId', '121');
-  });
+  }).timeout(20000);
 
   it('fetch exclude path', async () => {
     const response = await fetch('https://www.amazon.com');
@@ -135,7 +136,7 @@ describe('test fetch mock', () => {
       }),
     });
     expect(status).to.be.eql(201);
-  });
+  }).timeout(20000);
 
   it('put /api/users/123', async () => {
     const response = await fetch('/api/users/123', {
@@ -154,7 +155,7 @@ describe('test fetch mock', () => {
     expect(data).not.to.be.empty();
     expect(data).to.be.an('object');
     expect(data.userId).to.be.eql(123);
-  });
+  }).timeout(20000);
 
   it('proxy other api server', async () => {
     const response = await fetch('/ip/?format=json');
@@ -165,5 +166,31 @@ describe('test fetch mock', () => {
     expect(data).not.to.be.empty();
     expect(data).to.be.an('object');
     expect(data.ip).to.be.an('string');
+  }).timeout(20000);
+
+  describe('test delay mock', () => {
+
+    it('global delay', async () => {
+      const start = new Date().getTime();
+      await fetch('/api/users');
+      expect(new Date().getTime() - start).to.greaterThan(2000);
+    }).timeout(20000);
+
+    it('method delay 30ms', async () => {
+      const start = new Date().getTime();
+      await fetch('/api/users', {
+        delay: 30,
+      });
+      expect(new Date().getTime() - start).to.greaterThan(30);
+    }).timeout(20000);
+
+    it('method delay 3000ms', async () => {
+      const start = new Date().getTime();
+      await fetch('/api/users', {
+        delay: 3000,
+      });
+      expect(new Date().getTime() - start).to.greaterThan(3000);
+    }).timeout(20000);
+
   });
 });

test/util.test.js

@@ -1,6 +1,6 @@
 import 'babel-polyfill';
 import expect from 'expect.js';
-import { prueUrl, parseUrl, parseRequest, matchUrl } from '../src/util';
+import { prueUrl, parseUrl, parseRequest, matchUrl, delay } from '../src/util';
 
 describe('test util methods', () => {
   it('get prue url', async () => {
@@ -104,4 +104,10 @@ describe('test util methods', () => {
       result: false,
     });
   });
+  
+  it('delay 5000ms', async () => {
+    const start = new Date().getTime();
+    await delay(5000);
+    expect(new Date().getTime() - start).to.greaterThan(5000);
+  }).timeout(20000);
 });