Merge pull request #5 from kimuraz/test_form

Test form

Author: kimuraz

mixins/ApiForm.js

@@ -14,18 +14,23 @@ export default {
       required: false,
       default: () => null,
     },
+    loadErrCb: {
+      type: Function,
+      required: false,
+      defaut: (err) => {},
+    },
   },
   data() {
     return {
       requestObj: {},
     };
   },
-  created() {
+  mounted() {
     if (this.obj) {
       this.requestObj = this.obj;
     }
     if (this.objId) {
-      this.load(this.objId);
+      this.load(this.objId, this.loadErrCb);
     }
   },
   methods: {
@@ -37,7 +42,7 @@ export default {
       });
     },
     update(saveCallback = (response) => {}, errCallback = (err) => {}) {
-      this.$api.patch(this.route, this.requestObj).then((response) => {
+      this.$api.patch(`${this.route}/${this.requestObj.id}/`, this.requestObj).then((response) => {
         saveCallback(response);
       }).catch((err) => {
         errCallback(err);

package.json

@@ -38,22 +38,13 @@
     "eslint-plugin-html": "^3.0.0",
     "eslint-plugin-import": "^2.2.0",
     "eventsource-polyfill": "^0.9.6",
-    "express": "^4.14.1",
     "extract-text-webpack-plugin": "^2.0.0",
     "file-loader": "^0.11.1",
     "friendly-errors-webpack-plugin": "^1.1.3",
     "html-webpack-plugin": "^2.28.0",
     "http-proxy-middleware": "^0.17.3",
     "inject-loader": "^3.0.0",
     "jest": "^22.0.6",
-    "karma-coverage": "^1.1.1",
-    "karma-mocha": "^1.3.0",
-    "karma-phantomjs-launcher": "^1.0.2",
-    "karma-phantomjs-shim": "^1.4.0",
-    "karma-sinon-chai": "^1.3.1",
-    "karma-sourcemap-loader": "^0.3.7",
-    "karma-spec-reporter": "0.0.31",
-    "karma-webpack": "^2.0.2",
     "moxios": "^0.4.0",
     "opn": "^5.1.0",
     "optimize-css-assets-webpack-plugin": "^2.0.0",
@@ -67,7 +58,6 @@
     "uglifyjs-webpack-plugin": "^0.4.6",
     "url-loader": "^0.5.8",
     "vue-loader": "^13.0.4",
-    "vue-style-loader": "^3.0.1",
     "vue-template-compiler": "^2.4.2",
     "webpack": "^3.8.1",
     "webpack-bundle-analyzer": "^2.2.1",
@@ -87,7 +77,7 @@
   "jest": {
     "moduleNameMapper": {
       "mixins/(.*)$": "<rootDir>/mixins/$1.js",
-      "^vue$": "vue/dist/vue.common.js"
+      "^vue$": "vue/dist/vue.min.js"
     },
     "coverageDirectory": "./coverage/",
     "collectCoverage": true

test/unit/mixins/ApiForm.spec.js

@@ -0,0 +1,160 @@
+import Vue from 'vue';
+import VueRest from '../../../index.js';
+import moxios from 'moxios';
+
+import ApiForm from '../../../mixins/ApiForm';
+
+describe('Testing ApiForm mixin', () => {
+
+  Vue.use(VueRest);
+  Vue.mixin(ApiForm);
+
+  beforeEach(() => {
+    moxios.install(Vue.api);
+  });
+
+  afterEach(() => {
+    moxios.uninstall(Vue.api);
+  });
+
+  const newFood = {
+    food: 'Sushi',
+    flavor: 'Tuna hosomaki',
+  };
+
+  const comp = new Vue({
+    render: () => {},
+    propsData: {
+      route: '/foods',
+      obj: newFood,
+    },
+  }).$mount();
+
+  test('Should set requestObj as obj prop', () => {
+    expect(comp.requestObj).toBe(newFood);
+  });
+
+  test('Should register a new object', (done) => {
+    comp.save((response) => comp.requestObj = response.data);
+
+    moxios.wait(() => {
+      const request = moxios.requests.mostRecent();
+      const responseObj = { ...newFood, id: 1 };
+
+      request.respondWith({
+        status: 201,
+        response: {
+          responseObj,
+        },
+      }).then((response) => {
+        expect(comp.requestObj).toBe(response.data);
+        done();
+      });
+    });
+  });
+
+  test('Should call errCallback on save new obj', (done) => {
+    const errorMsg = 'Error: Request failed with status code 403';
+    let error = '';
+
+    comp.save((response) => {}, (err) => error = err.toString());
+
+    moxios.wait(() => {
+      const request = moxios.requests.mostRecent();
+
+      request.respondWith({
+        status: 403,
+      }).then((response) => {
+        expect(error).toBe(errorMsg);
+        done();
+      });
+    });
+  });
+    
+
+  test('Should update an object', (done) => {
+    Object.assign(comp.requestObj, { id: 1 });
+    comp.save((response) => comp.requestObj = response.data);
+
+    moxios.wait(() => {
+      const request = moxios.requests.mostRecent();
+      const responseObj = { food: 'Sushi', flavor: 'Salmon nigiri', id: 1 };
+
+      request.respondWith({
+        status: 200,
+        response: {
+          responseObj,
+        },
+      }).then((response) => {
+        expect(comp.requestObj).toBe(response.data);
+        done();
+      });
+    });
+  });
+
+  test('Should call errCallback on save new obj', (done) => {
+    Object.assign(comp.requestObj, { id: 1 });
+    const errorMsg = 'Error: Request failed with status code 403';
+    let error = '';
+
+    comp.save((response) => {}, (err) => error = err.toString());
+
+    moxios.wait(() => {
+      const request = moxios.requests.mostRecent();
+
+      request.respondWith({
+        status: 403,
+      }).then((response) => {
+        expect(error).toBe(errorMsg);
+        done();
+      });
+    });
+  });
+
+
+  let comp2Err = '';
+  const comp2 = new Vue({
+    render: () => {},
+    propsData: {
+      route: '/foods',
+      objId: 1,
+      loadErrCb: (err) => comp2Err = err.toString(),
+    },
+  });
+
+  test('Should load succesfully an obj', (done) => {
+    comp2.$mount();
+
+    moxios.wait(() => {
+      const request = moxios.requests.mostRecent();
+      const responseObj = { food: 'Sushi', flavor: 'Salmon skin roll' , id: 1 };
+
+      request.respondWith({
+        status: 200,
+        response: {
+          responseObj,
+        },
+      }).then((response) => {
+        expect(comp2.requestObj).toBe(response.data);
+        done();
+      });
+    });
+  });
+
+  test('Should load succesfully an obj', (done) => {
+    comp2.$mount();
+
+    moxios.wait(() => {
+      const request = moxios.requests.mostRecent();
+      const errorMsg = 'Error: Request failed with status code 403';
+
+      request.respondWith({
+        status: 403,
+      }).then((response) => {
+        expect(comp2Err).toBe(errorMsg);
+        done();
+      });
+    });
+  });
+});
+

test/unit/mixins/Install.spec.js

@@ -0,0 +1,15 @@
+import Vue from 'vue';
+import VueRest from '../../../index.js';
+
+describe('Testing install function', () => {
+
+  Vue.use(VueRest, {
+    axiosOptions: {
+      baseURL: 'http://localhost:8000',
+    },
+  });
+
+  test('Should apply axios settings when axiosOptions is set', () => {
+    expect(Vue.api.defaults.baseURL).toBe('http://localhost:8000');
+  }); 
+});