vue-resource-mock
The plugin for Vue.js provides a mock middleware for vue-resource during unit-testing. This interceptor allows you to make mock API calls within your components.
Installation
NPM
$ npm install vue-resource-mock-api --save-dev
Example
// ./index.js
// Import vue-resource
import VueResource from 'vue-resource';
Vue.use(VueResource);
// import vue-resource-mock-api
import VueResourceMock from 'vue-resource-mock-api'
// import mock API to be used by interceptor
import MockData from './mock-api'
Vue.use(VueResourceMock, MockData);
You can also change the url-pattern syntax by passing a nested object with the matchOptions property
Vue.use(VueResourceMock, {
routes: MockData,
matchOptions: {
segmentValueCharset: 'a-zA-Z0-9.:-_%' // default
}
});
// ./mock-api.js
export default {
// Get api token
['POST *login'] (pathMatch, query, request) {
// before respond, you can check the path and query parameters with `pathMatch` & `query`
// powered by 'url-pattern' & 'qs'
// https://www.npmjs.com/package/url-pattern
// https://www.npmjs.com/package/qs
let body = {
api_token: 'test'
};
return {
body: body,
status: 200,
statusText: 'OK',
headers: { /*headers*/ },
delay: 1500, // millisecond
}
},
// Get list of cars
['POST *cars/:car'] (pathMatch, query, request) {
let body = {
data: [
{
Manufacturer: 'BMW',
Model: 'M3',
color: 'blue
},
]
};
return {
body: body,
status: 200,
statusText: 'OK',
headers: { /*headers*/ },
delay: 500, // millisecond
}
},
// shorthand mock
['PUT */path/to/resource'] = 200 // respond with only status code
['POST */path/to/resource'] = { /*whatever*/ } // respond with only body, status code = 200
}
📖 Documentation
See here
📜 Changelog
Details changes for each release are documented in the CHANGELOG.md.
❗️ Issues
Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.
💪 Contribution
Please make sure to read the Contributing Guide before making a pull request.