Update to new version

juffalow · Jan 5, 2019 · eb0b604 · eb0b604
1 parent e05e25e
commit eb0b604
Show file tree

Hide file tree

Showing 8 changed files with 94 additions and 5,317 deletions.
diff --git a/.npmignore b/.npmignore
diff --git a/README.md b/README.md
@@ -2,11 +2,8 @@
 
 [![License](https://img.shields.io/badge/License-MIT-blue.svg?maxAge=2592000)](https://github.com/juffalow/chaos-request/blob/master/LICENSE)
 
-Chaos Request will change the *XHR* & *Fetch* response from time to time, so your application
-cannot rely on getting only successful response from the server. It makes you
-think what is going to happen if API is not working or something goes wrong.
-
-Also it can mock your missing API calls, so you can work without waiting for backend to be implemented.
+Chaos Request changes the behavior of `fetch`. You can change body of the response,
+status code or throw exception.
 
 This project was inspired by [Chaos Monkey](https://github.com/Netflix/chaosmonkey)
 
@@ -20,104 +17,86 @@ npm install [--save-dev] chaos-request
 yarn add [--dev] chaos-request
 ```
 
-## How it works
+## Usage
 
 ```javascript
 import ChaosRequest from 'chaos-request';
 
-ChaosRequest.mock();
-```
-
-## React example
-
-In the root component ( let's say `App` ), import `ChaosRequest` and in `componentDidMount` method, call `mock`.
-
-```javascript
-import React, { Component } from 'react';
-import ChaosRequest from './chaos-request';
+const shouldChangeResponse = () => {
+  return true;
+};
 
-class App extends Component {
-  componentDidMount() {
-    ChaosRequest.mock();
-  }
+const getResponse = () => {
+  return {
+    body: JSON.stringify({}),
+    init: {
+      status: 200,
+      statusText: 'OK',
+      headers: {
+        'Content-type': 'application/json',
+      },
+    },
+  };
+};
 
-  render() {
-    return (<div></div>);
-  }
-}
+const chaosRequest = new ChaosRequest(shouldChangeResponse, getResponse);
+chaosRequest.mock();
 ```
 
-This will create a default mock - probability is 20% and default response is empty object `{}` with status `400`.
-
-## Options
+## React example
 
-The `mock` function takes two parameters:
+Open `index.js` file and import `ChaosRequest` module. It takes two parameters, both are functions.
+The first function decides if the request should be changed or not. If not, default fetch API will be used. The second function returns an object with two fields: `body` and `init`. Here you can define what should the fetch return.
 
 ```javascript
-mock: function(shouldChangeResponse, getResponse) {
+// index.js
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+import ChaosRequest from 'chaos-request';
 
-}
-```
+const shouldChangeResponse = () => {
+  return true;
+};
 
-#### shouldChangeResponse
+const getResponse = () => {
+  return {
+    body: JSON.stringify({test: 'just test!'}),
+    init: {
+      status: 200,
+      statusText: 'OK',
+      headers: {
+        'Content-type': 'application/json',
+      },
+    },
+  };
+};
 
-The `shouldChangeResponse` is called before network call. If it returns true, the response is changed. If it returns false, everything continues without any change.
+const chaosRequest = new ChaosRequest(shouldChangeResponse, getResponse);
+chaosRequest.mock();
 
-```javascript
-const shouldChangeResponseFunction = function(url) {
-  return Math.random() <= 0.2;
-}
+ReactDOM.render(<App />, document.getElementById('root'));
 ```
 
-But if you need to get more probability for some specific URL, you can easily modify it:
-
 ```javascript
-const shouldChangeResponseFunction = function(url) {
-  if (url === 'some specific URL') {
-    return true;
-  }
-
-  return Math.random() <= 0.2;
-}
-```
-
-#### getResponse
-
-The `getResponse` is used for either default response or url specific response.
+// App.js
+import React, { Component } from 'react';
 
-```javascript
-const getResponseFunction = function(url) {
-  return {
-    responseText: '{}',
-    status: 400,
-    statusText: 'Bad Request',
-  };
-}
-```
+class App extends Component {
 
-If you need to return different responses for different URLs:
+  componentDidMount() {
+    fetch('https://<your-api-url>/')
+      .then(response => response.json())
+      .then((object) => {
+        console.log(object); // {test: "just test!"}
+      });
+  }
 
-```javascript
-const getResponseFunction = function(url) {
-  switch(url) {
-    case 'url1':
-      return {
-        responseText: '{value:"Response for url1"}',
-        status: 200,
-        statusText: 'OK',
-      };
-    case 'url2':
-      return {
-        responseText: '{value:"Response for url2"}',
-        status: 200,
-        statusText: 'OK',
-      };
+  render() {
+    return (
+      <div></div>
+    )
   }
-  return {
-    responseText: '{}',
-    status: 400,
-    statusText: 'Bad Request',
-  };
 }
 ```
 

diff --git a/index.js b/index.js
@@ -1,29 +1,39 @@
-import mockXhr from './src/xhr';
-import mockFetch from './src/fetch';
+export default class ChaosRequest {
+  constructor(shouldChangeResponse, getResponse) {
 
-const shouldChangeResponseFunction = function(url) {
-  const random = Math.random();
-  console.log(random);
-  if (random <= 0.2) {
-    console.log('true');
-    return true;
+    this.shouldChangeResponse = typeof shouldChangeResponse === 'function' ? shouldChangeResponse : function() {
+      return true;
+    };
+
+    this.getResponse = typeof getResponse === 'function' ? getResponse : function() {
+      return {
+        body: JSON.stringify({}),
+        init: {
+          status: 200,
+          statusText: 'OK',
+          headers: {
+            'Content-type': 'application/json',
+          },
+        },
+      };
+    };
   }
-  return false;
-}
 
-const getResponseFunction = function(url) {
-  return {
-    responseText: '{}',
-    status: 400,
-    statusText: 'Bad Request',
-  };
-}
+  mock() {
+    this.fetch = window.fetch;
+    window.fetch = (...args) => {
+      if (this.shouldChangeResponse(args)) {
+        return new Promise((resolve) => {
+          const response = this.getResponse(args);
+
+          resolve(new Response(response.body, response.init));
+        });
+      }
+      return this.fetch.apply(null, args);
+    }
+  }
 
-export default {
-  mock: function(shouldChangeResponse, getResponse) {
-    shouldChangeResponse = typeof shouldChangeResponse === 'function' ? shouldChangeResponse : shouldChangeResponseFunction;
-    getResponse = typeof getResponse === 'function' ? getResponse : getResponseFunction;
-    mockXhr(shouldChangeResponse, getResponse);
-    mockFetch(window, shouldChangeResponse, getResponse);
+  restore() {
+    window.fetch = this.fetch;
   }
-};
+};