Merge pull request #341 from amplitude/kwallach/msw-add-on

Add support for capturing requests and responses for test data generation

Author: Kelly Wallach

packages/redux-query/src/lib/cookie.js

@@ -0,0 +1,11 @@
+// @flow
+
+export function getCookie(name: string) {
+  const value = `; ${document.cookie}`;
+  const parts = value.split(`; ${name}=`);
+  if (parts.length === 2)
+    return parts
+      .pop()
+      .split(';')
+      .shift();
+}

packages/redux-query/src/lib/requestsForTestData.js

@@ -0,0 +1,74 @@
+// @flow
+import type { ResponseBody, RequestBody } from '../types';
+import type { HttpMethod } from '../constants/http-methods';
+import { getCookie } from './cookie';
+
+type Requests = {
+  rest: {
+    [url: string]: {
+      method: string,
+      body: ResponseBody,
+      response: any,
+    },
+  },
+  gql: {
+    [query: string]: {
+      response: any,
+    },
+  },
+};
+
+const createBaseRequests = () => {
+  return {
+    rest: {},
+    gql: {},
+  };
+};
+
+const cookieName = 'redux_query_store_requests_for_test_data';
+
+export class RequestsForTestData {
+  requests: Requests = createBaseRequests();
+
+  constructor() {
+    if (this.getShouldStoreRequests()) {
+      window.getRequestsForTestData = this.getRequests;
+      window.clearRequestsForTestData = this.clearRequests;
+    }
+  }
+
+  getShouldStoreRequests = () => {
+    return getCookie(cookieName) === 'true' ? true : false;
+  };
+
+  getRequests = () => {
+    return this.requests;
+  };
+
+  clearRequests = () => {
+    this.requests = createBaseRequests();
+  };
+
+  addRequest = (url: string, body: RequestBody, method: HttpMethod, response: any) => {
+    if (this.getShouldStoreRequests()) {
+      let query = null;
+      let restUrl = url;
+      if (body && body.hasOwnProperty('query')) {
+        const bodyQuery = body.query;
+        const firstNonQueryChar =
+          bodyQuery.indexOf('(') !== -1 ? bodyQuery.indexOf('(') : bodyQuery.indexOf(' {');
+        query = bodyQuery.slice(6, firstNonQueryChar); // 6 because 'query '
+        this.requests.gql[query] = {
+          response,
+        };
+      } else {
+        restUrl = url.indexOf('?') !== -1 ? url.slice(0, url.indexOf('?')) : url;
+        this.requests.rest[restUrl] = {
+          method,
+          body,
+          response,
+        };
+      }
+    }
+  };
+}

packages/redux-query/src/middleware/query.js

@@ -3,23 +3,24 @@
 import Backoff from 'backo';
 
 import {
-  requestStart,
-  requestFailure,
-  requestSuccess,
-  mutateStart,
   mutateFailure,
+  mutateStart,
   mutateSuccess,
+  requestFailure,
+  requestStart,
+  requestSuccess,
 } from '../actions';
 import * as actionTypes from '../constants/action-types';
 import httpMethods from '../constants/http-methods';
 import * as statusCodes from '../constants/status-codes';
-import { getQueryKey } from '../lib/query-key';
-import { updateEntities, optimisticUpdateEntities, rollbackEntities } from '../lib/update';
 import { pick } from '../lib/object';
+import { getQueryKey } from '../lib/query-key';
+import { optimisticUpdateEntities, rollbackEntities, updateEntities } from '../lib/update';
+import { RequestsForTestData } from '../lib/requestsForTestData';
 
 import type { Action, PublicAction } from '../actions';
+import type { State as QueriesState } from '../reducers/queries';
 import type {
-  ActionPromiseValue,
   EntitiesSelector,
   NetworkHandler,
   NetworkInterface,
@@ -29,7 +30,6 @@ import type {
   Status,
   Transform,
 } from '../types';
-import type { State as QueriesState } from '../reducers/queries';
 
 type Config = {|
   backoff: {|
@@ -101,6 +101,8 @@ const queryMiddleware = (
     }
   };
 
+  const requestsForTestData = new RequestsForTestData();
+
   return ({ dispatch, getState }: ReduxStore) => (next: Next) => (action: PublicAction) => {
     let returnValue;
     const config = { ...defaultConfig, ...customConfig };
@@ -171,6 +173,8 @@ const queryMiddleware = (
               attempts += 1;
 
               networkHandler.execute((err, status, responseBody, responseText, responseHeaders) => {
+                requestsForTestData.addRequest(url, body, method, responseBody);
+
                 if (
                   config.retryableStatusCodes.includes(status) &&
                   attempts < config.backoff.maxAttempts
@@ -312,6 +316,8 @@ const queryMiddleware = (
           );
 
           networkHandler.execute((err, status, responseBody, responseText, responseHeaders) => {
+            requestsForTestData.addRequest(url, body, method, responseBody);
+
             const end = new Date();
             const duration = end - start;
             const state = getState();