Angular Multimocks

Angular Multimocks lets you test how your app behaves with different responses from an API.

Angular Multimocks allows you to sets of mock API responses for different scenarios as JSON files. A developer of an e-commerce app could set up scenarios for a new customer, one who is registered and one who has an order outstanding.

Angular Multimocks allows you to switch between scenarios using a query string parameter: ?scenario=foo.

You can use Angular Multimocks to quickly test your app works in all situations while developing or to provide mock data for a suite of automated acceptance tests.

Add Angular Multimocks to your project with Bower:

bower install --save angular-multimocks

Include angular-multimocks.js or angular-multimocks.min.js in your application:

<script src="bower_components/angular-multimocks/js/angular-multimocks.min.js"></script>

Mocks are organised into directories representing the available resources and files for various versions of the response.

.
├── Account
│   ├── loggedIn.json
│   └── anonymous.json
├── Orders
│   └── _default.json
├── Root
│   └── _default.json
└── mockResources.json

A resource file might look like this:

{
  "httpMethod": "GET",
  "statusCode": 200,
  "response": {
    "id": "foo"
  }
}

The manifest file mockResources.json defines the available scenarios and describes which version of each resource should be used for each scenario.

{
  "_default": [
    "Root/_default.json",
    "Account/anonymous.json",
    "Orders/_default.json"
  ],
  "loggedIn": [
    "Account/loggedIn.json"
  ]
}

All scenarios inherit resources defined in _default unless they provide an override. Think of _default as the base class for scenarios.

The example above defines 2 scenarios _default and loggedIn. loggedIn has the default versions of the Root and Orders resources, but overrides Account, using the version in Account/loggedIn.json.

Angular Multimocks defines a Grunt task called multimocks, which will compile resources into an AngularJS module definition. Add the Grunt task to your build and make the module a depedency in your app to enable scenarios.

Install the module using npm:

npm install --save-dev angular-multimocks

Add it to your Grunt configuration:

// load the task
grunt.loadNpmTasks('angular-multimocks');

// configuration for scenarios
multimocks: {
  myApp: {
    src: 'mocks',
    dest: 'build/multimocks.js',
    baseURL: 'http://api.example.com/',
    template: 'myTemplate.tpl' // optional
  }
},

Once the task is run, build/multimocks.js will be generated containing all your mock data. Include that in your app:

<script src="build/multimocks.js"></script>

If the generated build/multimocks.js is too large, you may experience memory issues when running your application.

You can choose to build multiple files, one for each scenario by specifying multipleFiles: true and dest as a directory.

Your Grunt configuration should look something like:

// load the task
grunt.loadNpmTasks('angular-multimocks');

// configuration for scenarios
multimocks: {
  myApp: {
    src: 'mocks',
    dest: 'build/multimocks',
    multipleFiles: true,
    baseURL: 'http://api.example.com/',
    template: 'myTemplate.tpl' // optional
  }
},

When the task is run a file will be generated for each scenario. Include all the generated files in your app:

<script src="build/scenarios/_default.js"></script>
<script src="build/scenarios/foo.js"></script>
<script src="build/scenarios/bar.js"></script>

Angular Multimocks also declares a provider, multimocksDataProvider, which allows you to set mock data by passing an object to the setMockData method.