Data Mocks Server

This package was originally a port of https://github.com/ovotech/data-mocks that prefers spinning up an express server instead of mocking out fetch and XHR operations. Thanks goes to grug for his idea and implementation.

Table of contents

• Data Mocks Server
  • Table of contents
  • Installation
  • Example usage
  • API
    • run
      • default
      • scenarios
      • options
  • Types
    • Mock
    • HttpMock
    • Response
    • HttpResponseFunction
    • GraphQlMock
      • Operation
    • GraphQlResponse
    • GraphQlResponseFunction
    • Override

Installation

npm install data-mocks-server

Example usage

const { run } = require('data-mocks-server');

run({
  default: [
    {
      url: '/api/test-me',
      method: 'GET',
      response: { data: { blue: 'yoyo' } },
    },
  ],
  scenarios: {
    cheese: [
      {
        url: '/api/test-me',
        method: 'GET',
        response: { data: { blue: 'cheese' } },
      },
    ],
  },
});

Calls to http://localhost:3000/api/test-me will start by returning { blue: 'yoyo' }.

Visiting http://localhost:3000 will allow you to Modify scenarios. The default response will always be included unless a scenario overrides it. In this case enabling cheese will modify /api/test-me so that it returns { blue: 'cheese' }.

API

createExpressApp

Returns the internal express instance

function({ default, scenarios, options })

run

Returns an http server, with an additional kill method

function({ default, scenarios, options })

default

Array<Mock> | { context, mocks } | required

Property	Type	Default	Description
context	object	undefined	Used to set up data across API calls.
mocks	Array<Mock>	required	See Mock for more details.

scenarios

{ [scenarioName]: Array<Mock> | { group, mocks } }

Property	Type	Default	Description
scenarioName	string	required	Name of scenario.
Mock	Mock	required	See Mock for more details.
group	string	undefined	Used to group scenarios together so that only one scenario in a group can be selected.
context	object	undefined	Used to set up data across API calls.
mocks	Array<Mock>	required	See Mock for more details.

options

{ port, uiPath, modifyScenariosPath, resetScenariosPath, scenariosPath } | defaults to {}

Property	Type	Default	Description
port	number	3000	Port that the http server runs on.
uiPath	string	/	Path that the UI will load on. http://localhost:{port}{uiPath}
modifyScenariosPath	string	/modify-scenarios	API path for modifying scenarios. http://localhost:{port}{modifyScenariosPath}
resetScenariosPath	string	/reset-scenarios	API path for resetting scenarios. http://localhost:{port}{resetScenariosPath}
scenariosPath	string	/scenarios	API path for getting scenarios. http://localhost:{port}{scenariosPath}
cookieMode	boolean	false	Whether or not to store scenario selections in a cookie rather than directly in the server

Types

Mock

HttpMock | GraphQlMock

See HttpMock and GraphQlMock for more details.

HttpMock

{ url, method, response }

Property	Type	Default	Description
url	string / RegExp	required	Path of endpoint. Must start with /.
method	'GET' / 'POST' / 'PUT' / 'DELETE' / 'PATCH'	required	HTTP method of endpoint.
response	undefined / Response / HttpResponseFunction	undefined	Response, HttpResponseFunction.

Response

{ status, headers, data, delay }

Property	Type	Default	Description
status	number	200	HTTP status code for response.
headers	object / undefined	See description	Key/value pairs of HTTP headers for response. Defaults to undefined when response is undefined, adds 'Content-Type': 'application/json' when response is not undefined and Content-Type is not supplied.
data	null / string / object	undefined	Response data
delay	number	0	Number of milliseconds before the response is returned.

HttpResponseFunction

function({ query, body, params, context, updateContext }): response | Promise<response>

Property	Type	Default	Description
query	object	{}	query object as defined by express.
body	object	{}	body object as defined by express.
params	object	{}	params object as defined by express.
context	object	{}	Data stored across API calls.
updateContext	Function	partialContext => updatedContext	Used to update context. partialContext can either be an object or a function (context => partialContext).
response	undefined / Response	required	Response.

GraphQlMock

{ url, method, operations }

Property	Type	Default	Description
url	string	required	Path of endpoint.
method	'GRAPHQL'	required	Indentifies this mock as a GraphQlMock.
operations	Array<Operation>	required	List of operations for GraphQL endpoint. See Operation for more details.

Operation

{ type, name, response }

Property	Type	Default	Description
type	'query' / 'mutation'	required	Type of operation.
name	string	required	Name of operation.
response	undefined / GraphQlResponse / GraphQlResponseFunction	undefined	GraphQlResponse, GraphQlResponseFunction.

GraphQlResponse

{ status, headers, data, delay }

Property	Type	Default	Description
status	number	200	HTTP status code for response.
headers	object / undefined	See description	Key/value pairs of HTTP headers for response. Defaults to undefined when response is undefined, adds 'Content-Type': 'application/json' when response is not undefined and Content-Type is not supplied.
data	{ data?: null / object, errors?: array }	undefined	Response data
delay	number	0	Number of milliseconds before the response is returned.

GraphQlResponseFunction

function({ variables, context, updateContext }): response | Promise<response>

Property	Type	Default	Description
variables	object	{}	variables sent by client.
context	object	{}	Data stored across API calls.
updateContext	Function	partialContext => updatedContext	Used to update context. partialContext can either be an object or a function (context => partialContext).
response	undefined / GraphQlResponse	required	GraphQlResponse.

Allowing for multiple responses

Sometimes you may want an endpoint to respond with different status codes depending on what is sent. It is the recommendation of this package that this can be achieved by using scenarios. However, given response can be a function, it is possible to respond with a different value for the status, headers, data and delay properties:

const mock = {
  url: '/some-url',
  method: 'GET',
  response: ({ body }) => {
    if (body.name === 'error1') {
      return {
        status: 400,
        data: { message: 'something went wrong' },
        delay: 1000,
      };
    }

    if (body.name === 'error2') {
      return {
        status: 500,
        data: { message: 'something else went wrong' },
        delay: 2000,
      };
    }

    if (body.name === 'notFound') {
      return {
        status: 404,
        data: { message: 'no data here' },
      };
    }

    // Default status is 200
    return { data: { message: 'success' } };
  },
};