Websocket Support

README.md

@@ -1,5 +1,8 @@
 # data-mocks
 
+# modified by aiden for websocket support.
+# will hopefully be deleted soon when merged in to upstream
+
 [![GitHub license](https://img.shields.io/github/license/ovotech/data-mocks.svg)](https://github.com/grug/data-mocks)
 ![npm](https://img.shields.io/npm/dm/data-mocks.svg)
 

jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
   preset: 'ts-jest',
-  testEnvironment: 'jsdom'
+  testEnvironment: 'jsdom',
+  verbose: true,
 };

package.json

@@ -1,12 +1,12 @@
 {
-  "name": "data-mocks",
-  "version": "4.1.0",
+  "name": "@ovotech/data-mocks",
+  "version": "4.2.1",
   "main": "dist/mocks.js",
   "types": "dist/types.d.ts",
-  "repository": "[email protected]:grug/data-mocks.git",
+  "repository": "[email protected]:aidenscott2016/data-mocks.git",
   "author": "Dave Cooper <[email protected]>",
   "license": "MIT",
-  "homepage": "https://github.com/grug/data-mocks",
+  "homepage": "https://github.com/aidenscott2016/data-mocks",
   "scripts": {
     "clean": "rimraf dist",
     "prepublishOnly": "yarn build",
@@ -23,6 +23,7 @@
   },
   "dependencies": {
     "fetch-mock": "^9.4.0",
+    "mock-socket": "^9.0.3",
     "query-string": "^5.1.1",
     "xhr-mock": "^2.5.1"
   },

src/mocks.test.ts

@@ -1,19 +1,65 @@
-import 'isomorphic-fetch';
 import axios from 'axios';
+import fetchMock from 'fetch-mock';
+import 'isomorphic-fetch';
+import { Server as MockSever } from 'mock-socket';
+import XHRMock, { proxy } from 'xhr-mock';
 import {
-  injectMocks,
   extractScenarioFromLocation,
+  injectMocks,
   reduceAllMocksForScenario,
 } from './mocks';
-import { HttpMethod, Scenarios, MockConfig } from './types';
-import XHRMock, { proxy } from 'xhr-mock';
-import fetchMock from 'fetch-mock';
+import { HttpMethod, MockConfig, Scenarios } from './types';
 
 describe('data-mocks', () => {
   beforeEach(() => {
     fetchMock.resetHistory();
   });
 
+  describe('Websockets', () => {
+    const testURL = 'ws://localhost/foo';
+    it('Spawns a working websocket server', async () => {
+      const onMessage = jest.fn();
+      const onConnect = jest.fn();
+      const scenarios: Scenarios = {
+        default: [
+          {
+            url: testURL,
+            method: 'WEBSOCKET',
+            server: (s) => {
+              s.on('connection', (socket) => {
+                console.log('conneted');
+                onConnect();
+                socket.on('message', (req) => {
+                  onMessage();
+                  socket.send(req.toString());
+                  s.close();
+                });
+              });
+            },
+          },
+        ],
+      };
+      injectMocks(scenarios, 'default');
+
+      const socket = new WebSocket(testURL);
+      let res;
+      socket.addEventListener('message', (data) => {
+        res = data.data;
+        socket.close();
+      });
+
+      await awaitSocket(socket, WebSocket.OPEN);
+      expect(onConnect).toBeCalled();
+
+      const message = 'hello world';
+      socket.send(message);
+      await awaitSocket(socket, WebSocket.CLOSED);
+      expect(onMessage).toBeCalled();
+
+      expect(res).toEqual(message);
+    });
+  });
+
   describe('REST', () => {
     describe('HTTP methods', () => {
       const httpMethods: HttpMethod[] = [
@@ -50,7 +96,6 @@ describe('data-mocks', () => {
           const xhrSpy = jest.spyOn(XHRMock, httpMethod.toLowerCase() as any);
 
           injectMocks(scenarios, 'default');
-
           expect(fetchSpy).toHaveBeenCalledTimes(2);
           expect(fetchSpy.mock.calls[0][0]).toEqual(/foo/);
           expect(fetchSpy.mock.calls[1][0]).toEqual(/bar/);
@@ -282,6 +327,8 @@ describe('data-mocks', () => {
   });
 
   describe('Scenarios', () => {
+    const websocketServerFn = jest.fn();
+    const anotherServerFn = jest.fn();
     const scenarios: Scenarios = {
       default: [
         {
@@ -299,6 +346,22 @@ describe('data-mocks', () => {
           responseHeaders: { token: 'bar' },
         },
         { url: /bar/, method: 'POST', response: {}, responseCode: 200 },
+        {
+          url: /graphql/,
+          method: 'GRAPHQL',
+          operations: [
+            {
+              operationName: 'Query',
+              type: 'query',
+              response: { data: { test: 'data' } },
+            },
+          ],
+        },
+        {
+          url: 'ws://localhost',
+          method: 'WEBSOCKET',
+          server: websocketServerFn,
+        },
       ],
       someScenario: [
         {
@@ -308,6 +371,18 @@ describe('data-mocks', () => {
           responseCode: 401,
         },
         { url: /baz/, method: 'POST', response: {}, responseCode: 200 },
+        {
+          url: /graphql/,
+          method: 'GRAPHQL',
+          operations: [
+            {
+              operationName: 'Query',
+              type: 'query',
+              response: { data: { test: 'different data' } },
+            },
+          ],
+        },
+        { url: 'ws://localhost', method: 'WEBSOCKET', server: anotherServerFn },
       ],
     };
 
@@ -340,6 +415,22 @@ describe('data-mocks', () => {
           responseHeaders: { token: 'bar' },
         },
         { url: /bar/, method: 'POST', response: {}, responseCode: 200 },
+        {
+          url: /graphql/,
+          method: 'GRAPHQL',
+          operations: [
+            {
+              operationName: 'Query',
+              type: 'query',
+              response: { data: { test: 'data' } },
+            },
+          ],
+        },
+        {
+          url: 'ws://localhost',
+          method: 'WEBSOCKET',
+          server: websocketServerFn,
+        },
       ]);
     });
 
@@ -367,6 +458,18 @@ describe('data-mocks', () => {
           responseCode: 200,
         },
         { url: /baz/, method: 'POST', response: {}, responseCode: 200 },
+        {
+          url: /graphql/,
+          method: 'GRAPHQL',
+          operations: [
+            {
+              operationName: 'Query',
+              type: 'query',
+              response: { data: { test: 'different data' } },
+            },
+          ],
+        },
+        { url: 'ws://localhost', method: 'WEBSOCKET', server: anotherServerFn },
       ]);
     });
 
@@ -536,3 +639,15 @@ describe('data-mocks', () => {
     });
   });
 });
+
+const awaitSocket = (socket, state) => {
+  return new Promise(function (resolve) {
+    setTimeout(function () {
+      if (socket.readyState === state) {
+        resolve(true);
+      } else {
+        awaitSocket(socket, state).then(resolve);
+      }
+    }, 1000);
+  });
+};

src/mocks.ts

@@ -1,13 +1,15 @@
 import fetchMock from 'fetch-mock';
 import XHRMock, { delay as xhrMockDelay, proxy } from 'xhr-mock';
 import { parse } from 'query-string';
+import { Server as MockServer } from 'mock-socket';
 import {
   Scenarios,
   MockConfig,
   Mock,
   HttpMock,
   GraphQLMock,
   Operation,
+  WebSocketMock,
 } from './types';
 
 /**
@@ -44,13 +46,20 @@ export const injectMocks = (
     throw new Error('Unable to instantiate mocks');
   }
 
-  const restMocks = mocks.filter((m) => m.method !== 'GRAPHQL') as HttpMock[];
+  const restMocks = mocks.filter(
+    (m) => !['GRAPHQL', 'WEBSOCKET'].includes(m.method)
+  ) as HttpMock[];
   const graphQLMocks = mocks.filter(
     (m) => m.method === 'GRAPHQL'
   ) as GraphQLMock[];
 
+  const webSocketMocks = mocks.filter(
+    (m) => m.method === 'WEBSOCKET'
+  ) as WebSocketMock[];
+
   restMocks.forEach(handleRestMock);
   graphQLMocks.forEach(handleGraphQLMock);
+  webSocketMocks.forEach(handleWebsocketMock);
 
   if (config?.allowXHRPassthrough) {
     XHRMock.use(proxy);
@@ -79,12 +88,24 @@ export const reduceAllMocksForScenario = (
   const mocks = defaultMocks.concat(scenarioMocks);
 
   const initialHttpMocks = mocks.filter(
-    ({ method }) => method !== 'GRAPHQL'
+    (m) => !['GRAPHQL', 'WEBSOCKET'].includes(m.method)
   ) as HttpMock[];
   const initialGraphQlMocks = mocks.filter(
     ({ method }) => method === 'GRAPHQL'
   ) as GraphQLMock[];
 
+  const initialWebsocketMocks = mocks.filter(
+    (m) => m.method === 'WEBSOCKET'
+  ) as WebSocketMock[];
+
+  const websocketMocksByUrl = initialWebsocketMocks.reduce<
+    Record<string, WebSocketMock>
+  >((result, mock) => {
+    const { url } = mock;
+    result[url] = mock;
+    return result;
+  }, {});
+
   const httpMocksByUrlAndMethod = initialHttpMocks.reduce<
     Record<string, HttpMock>
   >((result, mock) => {
@@ -130,7 +151,9 @@ export const reduceAllMocksForScenario = (
     }
   ) as GraphQLMock[];
 
-  return (httpMocks as any).concat(graphQlMocks);
+  const websocketMocks = Object.values(websocketMocksByUrl);
+
+  return [...httpMocks, ...graphQlMocks, ...websocketMocks];
 };
 
 /**
@@ -149,7 +172,6 @@ function handleRestMock({
     status: responseCode,
     headers: responseHeaders,
   };
-
   switch (method) {
     case 'GET':
       fetchMock.get(url, () => addDelay(delay).then(() => finalResponse), {
@@ -188,8 +210,7 @@ function handleRestMock({
   }
 }
 
-/**
- * Mocks the right HTTP method for a GraphQL mock.
+/**  const graphQLMocks = mocks.filter(ethod for a GraphQL mock.
  */
 function handleGraphQLMock({ url, operations }: GraphQLMock) {
   const graphQLErrorResponse = { errors: [] };
@@ -281,6 +302,10 @@ function handleGraphQLMock({ url, operations }: GraphQLMock) {
   });
 }
 
+const handleWebsocketMock = ({ url, server }: WebSocketMock) => {
+  server(new MockServer(url));
+};
+
 /**
  * Adds delay (in ms) before resolving a promise.
  */

src/types.ts

@@ -3,6 +3,7 @@ export {
   injectMocks,
   reduceAllMocksForScenario,
 } from './mocks';
+import { Server as MockServer } from 'mock-socket';
 
 export type HttpMethod = 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
 
@@ -27,6 +28,13 @@ export type GraphQLMock = {
   operations: Array<Operation>;
 };
 
+export type WebSocketServerMock = (mockServer: MockServer) => void;
+export type WebSocketMock = {
+  url: string;
+  method: 'WEBSOCKET';
+  server: WebSocketServerMock;
+};
+
 export type Operation = {
   type: 'query' | 'mutation';
   operationName: string;
@@ -36,7 +44,7 @@ export type Operation = {
   delay?: number;
 };
 
-export type Mock = HttpMock | GraphQLMock;
+export type Mock = HttpMock | GraphQLMock | WebSocketMock;
 
 export type Scenarios = {
   default: Mock[];

tsconfig.json

@@ -7,8 +7,8 @@
     "removeComments": true /* Do not emit comments to output. */,
     "strict": true /* Enable all strict type-checking options. */,
     "noImplicitAny": false /* Raise error on expressions and declarations with an implied 'any' type. */,
-    "noUnusedLocals": true /* Report errors on unused locals. */,
-    "noUnusedParameters": true /* Report errors on unused parameters. */,
+    "noUnusedLocals": false /* Report errors on unused locals. */,
+    "noUnusedParameters": false /* Report errors on unused parameters. */,
     "lib": ["es2017", "dom"],
     "esModuleInterop": true
   },