Mock APIs with APItizer

03 Jun 2014 | By Alex Young | Tags testing jquery

When I’m developing APIs for desktop and mobile projects, I’ve found some people like to mock up APIs in tools like Apiary first. This allows non-web developers to create API specifications that can generate sample data for actual HTTP requests.

Sometimes when you’re doing client-side development you want something similar. APItizer, by Mihael Konjević lets you mock APIs with a JSON schema, so you can try out requests from libraries like jQuery without having to hassle a server-side developer.

When developing single page apps, it is beneficial to develop frontend and backend in parallel. To achieve that, you need to mock the API. CanJS implements this elegantly with the can.fixture plugin (used by APItizer). can.fixture intercepts Ajax calls and returns response defined by the fixtures.

To mock an API you need three things:

  1. A JSON schema
  2. To register it with APItizer: apitizer.addSchema('user', schema)
  3. Some sample data: apitizer.fixture.resource('/users', apitizer.schemaStore('user', 10))

Schemas just need to define the properties used by your resources:

var schema = {
    type: 'object',
    properties: {
        id: {
            type: 'integer'
        },
        username: {
            type: 'string'
        },
        password: {
            type: 'string'
        }
    }
};

This will give you some sample users that you can interact with using the standard RESTful CRUD routes.

APItizer also allows you to add custom endpoints and response delays, so you can simulate network latency. Full examples can be found in the project’s readme file.

If you’re working on a UI-heavy Knockout or Angular project, then this might help avoid worrying too much about the server as you try out UI ideas.


blog comments powered by Disqus