Merge pull request #14 from nutgaard/api-rework

feat(api): reworked api to make it less error prone

Author: nutgaard

README.md

@@ -37,18 +37,18 @@ const delayedErrorMock = FetchMock.configure({
 
 ### Examples
 ```typescript
-mock.get('/my-url', { key: 'value' }); // Returns the object as the json-response
-mock.post('/another-url', { key: 'result of posting' });
+mock.get('/my-url', (req, res, ctx) => res(ctx.json({ key: 'value' }))); // Returns the object as the json-response
+mock.post('/another-url', (req, res, ctx) => res(ctx.json({ key: 'result of posting' })));
 
 
 // Creating dynamic content based on url
-mock.put('/api/:id/app', (args: HandlerArgument) => {
-  // `args` contains the original parameters to `fetch`,
+mock.put('/api/:id/app', (req, res, ctx) => {
+  // `req` contains the original parameters to `fetch`,
   // and in addition: url, http-verb, path parameters and query parameters
-  return ResponseUtils.jsonPromise({
-    id: args.pathParams.id,
-    content: 'Some random content'
-  }); 
+  // `res` is used for combining and build your response based on helpers from `ctx`
+  return res(
+    ctx.json({id: req.pathParams.id, content: 'Some random content'})
+  ); 
 });
 
 
@@ -59,13 +59,18 @@ mock.mock(
     MatcherUtils.url('/custom-url'),
     // Your custom matcher here
   ),
-  ResponseUtils.delayed(1000, { data: 'lots of data' })
+  (res, req, ctx) => res(
+    ctx.delay(1000),
+    ctx.json({ data: 'lots of data' })
+  )
 );
 
 // Combining resultsUtils
-mock.get('/test/:id', ResponseUtils.delayed(1000, (args: HandlerArgument) => {
-  return ResponseUtils.jsonPromise({ requestId: args.pathParams.id });
-}));
+mock.get('/test/:id', (req, res, ctx) => res(
+  ctx.delay(1000),
+  ctx.header('X-My-Header' ,'HeaderValue'),
+  ctx.json({ requestId: req.pathParams.id })
+));
 ```
 
 ### Teardown
@@ -102,7 +107,7 @@ describe('test using yet-another-fetch-mock', () => {
   });
 
   it('should capture calls', (done) => {
-      mock.get('/test/:id', { data: 'test' });
+      mock.get('/test/:id', (req, res, ctx) => res(ctx.json({ data: 'test' })));
       Promise.all([
         fetch('/test/121'),
         fetch('/test/122')
@@ -123,23 +128,16 @@ describe('test using yet-another-fetch-mock', () => {
 Full documentation of types can be seen [here](https://www.utgaard.xyz/yet-another-fetch-mock/),
 or [here](https://github.com/nutgaard/yet-another-fetch-mock/blob/master/src/types.ts) if you prefer reading typescript code.
 
-##### !!!NB!!!
-
-**Known issue:**
-`Argument of type '({ queryParams }: HandlerArgument) => MyDataInterface' is not assignable to parameter of type 'MockHandler'.`
-The solution is often to ensure that `MyDataInterface` is also a `JsonObject`.
-E.g
-```
-mock.get('/my-url', () => mockData as MyDataInterface & JsonObject)
-```
-
-
-
 ### Tips
 
-* It is recommended to toggle the fetch-mock functionality behind an environment variable, as to allow uglify etc to remove the code for production build.
-* Take a look at the original [readme](https://github.com/alexjoverm/typescript-library-starter/blob/master/README.md);
+It is recommended to toggle the fetch-mock functionality behind an environment variable, as to allow uglify/envify (or similar) to remove the code for production builds.
 
+As an example;
+```typescript jsx
+if (process.env.USE_MOCK_SETUP === 'true') {
+  require('./mocks')
+}
+``` 
 
 ## Credits
 

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "yet-another-fetch-mock",
-  "version": "0.0.0-development",
+  "version": "4.0.0-beta.2",
   "description": "",
   "keywords": [
     "fetch",

package.json

@@ -1,16 +1,6 @@
 import * as queryString from 'query-string';
-import {
-  HandlerArgument,
-  HttpMethod,
-  MatcherUrl,
-  MockHandler,
-  MockHandlerFunction,
-  RequestUrl,
-  ResponseData
-} from './types';
+import { HttpMethod, MatcherUrl, RequestUrl } from './types';
 import { Key } from 'path-to-regexp';
-import ResponseUtils from './response-utils';
-import { testPromise } from './promise-utils';
 const pathToRegex = require('path-to-regexp');
 
 export function findRequestUrl(input: RequestInfo, init?: RequestInit): RequestUrl {
@@ -60,21 +50,3 @@ export function findBody(input: RequestInfo, init?: RequestInit) {
     return init.body;
   }
 }
-
-export function toMockHandlerFunction(handler: MockHandler): MockHandlerFunction {
-  if (typeof handler === 'function') {
-    return (args: HandlerArgument) =>
-      new Promise<ResponseData>((resolve, reject) => {
-        const result = handler(args);
-        const isPromise = testPromise(result);
-        if (isPromise) {
-          resolve(result as Promise<ResponseData>);
-        } else {
-          const response: ResponseData = { body: JSON.stringify(result) } as ResponseData;
-          resolve(response);
-        }
-      });
-  } else {
-    return ResponseUtils.json(handler);
-  }
-}

src/internal-utils.ts

@@ -81,6 +81,10 @@ mock.get('/path-without-queryparam', ({ queryParams }) => {
     return httpMethodHelper(matcherUrl, 'GET');
   }
 
+  static head(matcherUrl: MatcherUrl): RouteMatcher {
+    return httpMethodHelper(matcherUrl, 'HEAD');
+  }
+
   static post(matcherUrl: MatcherUrl): RouteMatcher {
     return httpMethodHelper(matcherUrl, 'POST');
   }
@@ -92,4 +96,16 @@ mock.get('/path-without-queryparam', ({ queryParams }) => {
   static del(matcherUrl: MatcherUrl): RouteMatcher {
     return httpMethodHelper(matcherUrl, 'DELETE');
   }
+
+  static connect(matcherUrl: MatcherUrl): RouteMatcher {
+    return httpMethodHelper(matcherUrl, 'CONNECT');
+  }
+
+  static options(matcherUrl: MatcherUrl): RouteMatcher {
+    return httpMethodHelper(matcherUrl, 'OPTIONS');
+  }
+
+  static patch(matcherUrl: MatcherUrl): RouteMatcher {
+    return httpMethodHelper(matcherUrl, 'PATCH');
+  }
 }

src/matcher-utils.ts

@@ -1,4 +1,4 @@
-import { HandlerArgument, Middleware, ResponseData } from './types';
+import { MockRequest, Middleware, ResponseData } from './types';
 
 const defaultFailure: ResponseData = {
   status: 500,
@@ -7,7 +7,7 @@ const defaultFailure: ResponseData = {
 
 export default class MiddlewareUtils {
   static combine(...middlewares: Middleware[]): Middleware {
-    return (request: HandlerArgument, response: ResponseData) => {
+    return (request: MockRequest, response: ResponseData) => {
       return middlewares.reduce(
         (currentResponse, middleware) => currentResponse.then(resp => middleware(request, resp)),
         Promise.resolve(response)
@@ -16,7 +16,7 @@ export default class MiddlewareUtils {
   }
 
   static delayMiddleware(delayMs: number): Middleware {
-    return (request: HandlerArgument, response: ResponseData) => {
+    return (request: MockRequest, response: ResponseData) => {
       return new Promise<ResponseData>(resolve => {
         setTimeout(() => resolve(response), delayMs);
       });
@@ -27,7 +27,7 @@ export default class MiddlewareUtils {
     probabilityOfFailure: number,
     failure: ResponseData = defaultFailure
   ): Middleware {
-    return (request: HandlerArgument, response: ResponseData) => {
+    return (request: MockRequest, response: ResponseData) => {
       return new Promise<ResponseData>(resolve => {
         const rnd = Math.random();
 

src/middleware-utils.ts

@@ -0,0 +1,85 @@
+import { MockRequest, HandlerResponseElement, ResponseData } from './types';
+
+async function delay(ms: number): Promise<any> {
+  return new Promise<ResponseData>(resolve => {
+    setTimeout(() => resolve(), ms);
+  });
+}
+
+class MockContext {
+  private req: MockRequest;
+  private realFetch: (input: RequestInfo, init?: RequestInit) => Promise<Response>;
+
+  constructor(
+    req: MockRequest,
+    realFetch: (input: RequestInfo, init?: RequestInit) => Promise<Response>
+  ) {
+    this.req = req;
+    this.realFetch = realFetch;
+  }
+
+  status(code: number): HandlerResponseElement {
+    return async (data: ResponseData) => {
+      data.status = code;
+      return data;
+    };
+  }
+
+  statusText(message: string): HandlerResponseElement {
+    return async (data: ResponseData) => {
+      data.statusText = message;
+      return data;
+    };
+  }
+
+  delay(ms: number): HandlerResponseElement {
+    return async (data: ResponseData) => {
+      await delay(ms);
+      return data;
+    };
+  }
+
+  json(value: any): HandlerResponseElement {
+    return async (data: ResponseData) => {
+      await this.header('Content-Type', 'application/json')(data);
+      await this.body(JSON.stringify(value))(data);
+      return data;
+    };
+  }
+
+  text(value: string): HandlerResponseElement {
+    return async (data: ResponseData) => {
+      await this.header('Content-Type', 'text/plain')(data);
+      await this.body(value)(data);
+      return data;
+    };
+  }
+
+  body(body: any): HandlerResponseElement {
+    return async (data: ResponseData) => {
+      data.body = body;
+      return data;
+    };
+  }
+
+  header(key: string, value: string): HandlerResponseElement {
+    return async (data: ResponseData) => {
+      const headers = data.headers || new Headers();
+      if (headers instanceof Headers) {
+        headers.set(key, value);
+      } else if (Array.isArray(headers)) {
+        headers.push([key, value]);
+      } else {
+        headers[key] = value;
+      }
+      data.headers = headers;
+      return data;
+    };
+  }
+
+  fetch(): Promise<Response> {
+    return this.realFetch(this.req.input, this.req.init);
+  }
+}
+
+export default MockContext;