vue-resource-mock's Introduction

Vue-Resource-Mock

This package requires no specific version of Vue but vue-resource. It works for both Vue/Vue2 as the time of this writing.

Copy and modified from https://github.com/airtonix/vue-resource-mock

Open to PR/Issue :)

Usage

Install

After npm install vue-resource-mock --save-dev,

import Vue from 'vue'
import VueResource from 'vue-resource'
import VueResourceMock from 'vue-resource-mock'
import MockData from 'path/to/file'   // MockData syntax down below

Vue.use(VueResource)

if (devMode) { // don't use it on your production build
  Vue.use(VueResourceMock, MockData, /* { silent: true/false } */) // after use vue-resource
}

Mock data

export default {

  // basic mock
  ['GET */path/to/resource'] (pathMatch, query, request, pass) {
    // 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 = { /* whatever */ }
    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

  // example pass-through: if the query string variable 'mock=true' set, return mock, otherwise pass-through
  ['GET */path/to/resource'] (pathMatch, query, request, pass) {
    let runMock = (request.params && request.params.mock === 'true');
    let body = { /* whatever */ }
    return (runMock) ? {
        body: body,
        status: 200,
        statusText: 'OK',
        headers: { /*headers*/ }
      } : pass;
  }

}