can-fixture-defaults

Provides useful default behavior using can-fixture

can-fixture enables mocking a back-end CRUD API for development by intercepting in-browser XHR requests. However, the API can be a little intimidating for beginners. The purpose of can-fixture-defaults is to allow mocking of data with minimal configuration simply by specifying a base url and passing an array of objects.

Usage

Import into your project:

import mockData from 'can-fixture-defaults';

Define a base URL for a simulated RESTful endpoint and pass in an array of objects:

import mockData from 'can-fixture-defaults';

const baseItems = [
  { id: 1, name: 'Han', job: 'Scoundrel' },
  { id: 2, name: 'Luke', job: 'Jedi' },
  { id: 3, name: 'Chewie', job: 'RRRARGH' },
];

mockData('/api/characters', baseItems);

Then simply use whatever library you'd normally use for AJAX requests and it should behave just like a normal API.

Find All

axios.get('/api/characters').then((resp) => {
  console.log(resp.data); // --> same as baseItems
});

Find One

axios.get('/api/characters/2').then((resp) => {
  console.log(resp.data.name); // --> 'Luke'
})

Create

axios.post('/api/characters',  {name: 'Obi Wan', job: 'Only Hope'}).then((resp) => {
  console.log(resp.data.id); // newly assigned id
  return axios.get('/api/characters')
}).then((resp) => {
  console.log(resp.data); // baseItems + newly created object
});

Update

axios.put('/api/characters/1', {name: 'Han', job: 'Nerf Herder'}).then((resp) => {
  console.log(resp.data.job) // --> 'Nerf Herder'
  return axios.get('/api/characters/1');
}).then((resp) => {
  console.log(resp.data.job) // --> 'Nerf Herder'
});

Delete

axios.delete('/api/characters/1').then((resp) => {
  console.log(resp.data.id) // --> '1'
  return axios.get('/api/characters');
}).then((resp) => {
  console.log(resp.data) // baseItems, missing Han
});

Specify a different id property

If your API uses a different ID field and you'd like your fixtures to match it, simply specify an id as a third argument.

import mockData from 'can-fixture-defaults';

// use mongo-style _id field instead
const baseItems = [{_id: 1, name: 'Leia', job: 'Rebel Scum'}]
mockData('/api/characters', baseItems, '_id');

Disable a fixture

If you'd like to be able to turn off a fixture, call .close() on the object returned by mockData:

import mockData from 'can-fixture-defaults';

const mocked = mockData('/api/characters', []);
mockData.close();
axios.get('/api/characters'); // now works normally without being intercepted