Merge branch 'kiltec-reactive_api_url_configurable' into develop

docs/Vuetable-Properties.md

@@ -1,29 +1,30 @@
 ## Vuetable - Properties
 
+- [append-params](#-append-params)
 - [api-mode](#-api-mode)
 - [api-url](#-api-url)
-- [fields](#-fields)
+- [css](#-css)
 - [data](#-data)
 - data-manager
 - [data-path](#-data-path)
 - data-total
-- [pagination-path](#-pagination-path)
-- [load-on-start](#-load-on-start)
-- [append-params](#-append-params)
-- [query-params](#-query-params)
+- [detail-row-component](#-detail-row-component)
+- [detail-row-transition](#-detail-row-transition)
+- [fields](#-fields)
 - [http-options](#-http-options)
 - [http-method](#-http-method)
-- [track-by](#-track-by)
-- [sort-order](#-sort-order)
+- [load-on-start](#-load-on-start)
+- [min-rows](#-min-rows)
 - [multi-sort](#-multi-sort)
 - [multi-sort-key](#-multi-sort-key)
+- [pagination-path](#-pagination-path)
 - [per-page](#-per-page)
-- [css](#-css)
+- [query-params](#-query-params)
+- [reactive-api-url](#-reactive-api-url)
 - [render-icon](#-render-icon)
-- [min-rows](#-min-rows)
 - [row-class](#-row-class)
-- [detail-row-component](#-detail-row-component)
-- [detail-row-transition](#-detail-row-transition)
+- [sort-order](#-sort-order)
+- [track-by](#-track-by)
 
 ### # api-mode
 - type: _Boolean_
@@ -49,6 +50,14 @@
   The URL of the api endpoint that Vuetable will interact with. If the API supports sorting, filtering, pagination of the data, 
   Vuetable can automatically append appropriate information to the server via query string.
 
+### # reactive-api-url
+- works in `api-mode` only
+- type: _Boolean_
+- default: `true`
+- description
+
+  Tells Vuetable whether it should watch for the change in `api-url` prop and refresh the data automatically.
+
 ### # fields
 - type: _Array_
 - default: _none_

src/components/Vuetable.vue

@@ -136,6 +136,10 @@ export default {
           return ['get', 'post'].indexOf(value) > -1
         }
     },
+    reactiveApiUrl: {
+        type: Boolean,
+        default: true
+    },
     apiMode: {
       type: Boolean,
       default: true
@@ -874,7 +878,7 @@ export default {
       }
     },
     'apiUrl': function (newVal, oldVal) {
-      if(newVal !== oldVal)
+      if(this.reactiveApiUrl && newVal !== oldVal)
         this.refresh()
     }
   },

test/unit/specs/Vuetable.spec.js

@@ -5,23 +5,25 @@ const VuetableInjector = require('!!vue-loader?inject!../../../src/components/Vu
 describe('data requests', () => {
   let VuetableWithMocks
   let AxiosGetStub
+  let sandbox = sinon.sandbox.create()
 
   beforeEach(function() {
-    AxiosGetStub = sinon.stub().resolves();
+    AxiosGetStub = sinon.stub().resolves({data: {data: [{name: 'john', description:'foo bar'}]}});
     VuetableWithMocks = VuetableInjector({
        'axios': {
          get: AxiosGetStub
        }
      })
+
   })
 
   afterEach(function() {
-    AxiosGetStub.reset();
+    sandbox.restore()
   })
 
   it('should loadData() to the given api when mounted', () => {
     const vm = new Vue({
-      template: '<vuetable :silent="true" :fields="columns" api-url="http://example.com/api/test"></vuetable>',
+      template: '<vuetable :silent="true" :fields="columns" api-url="http://example.com/api/test/loadOnMount"></vuetable>',
       components: {'vuetable': VuetableWithMocks },
       data: {
         columns: [
@@ -30,12 +32,12 @@ describe('data requests', () => {
       }
     }).$mount()
 
-    expect(AxiosGetStub).to.have.been.calledWith('http://example.com/api/test', {params: {page: 1, per_page: 10, sort: '' }})
+    expect(AxiosGetStub).to.have.been.calledWith('http://example.com/api/test/loadOnMount', {params: {page: 1, per_page: 10, sort: '' }})
   })
 
   it('should not loadData() when load-on-start set to false', () => {
     const vm = new Vue({
-      template: '<vuetable ref="vuetable" :load-on-start="false" :fields="columns" api-url="http://example.com/api/test" :silent="true"></vuetable>',
+      template: '<vuetable ref="vuetable" :load-on-start="false" :fields="columns" api-url="http://example.com/api/test/noLoadOnMount" :silent="true"></vuetable>',
       components: {'vuetable': VuetableWithMocks},
       data: {
         columns: [
@@ -48,8 +50,52 @@ describe('data requests', () => {
     expect(AxiosGetStub).to.not.have.been.called
   })
 
+  it('should refresh the data if the api-url changes', done => {
+    const vm = new Vue({
+      template: '<vuetable ref="vuetable" :load-on-start="false" :fields="columns" :api-url="apiUrl" :silent="true"></vuetable>',
+      components: {'vuetable': VuetableWithMocks},
+      data: {
+        columns: [
+          'name', 'description'
+        ],
+        apiUrl: 'http://example.com/api/test'
+      }
+    }).$mount()
+
+    let refreshSpy = sandbox.spy(vm.$refs.vuetable, 'refresh')
+
+    const newApiUrl = 'http://example.com/api/test/apiUrlChange';
+    vm.apiUrl = newApiUrl
+
+    vm.$nextTick().then(() => {
+      expect(refreshSpy).to.have.been.called
+      expect(AxiosGetStub).to.have.been.calledWith('http://example.com/api/test/apiUrlChange', {params: {page: 1, per_page: 10, sort: ''}})
+    }).then(done, done)
+  })
+
+  it('should not refresh the data if the api-url changes and reactive api url is disabled', done => {
+    const vm = new Vue({
+      template: '<vuetable ref="vuetable" :reactive-api-url="false" :load-on-start="false" :fields="columns" :api-url="apiUrl" :silent="true"></vuetable>',
+      components: {'vuetable': VuetableWithMocks},
+      data: {
+       columns: [
+         'name', 'description'
+       ],
+       apiUrl: 'http://example.com/api/test'
+      }
+      }).$mount()
+
+    let refreshSpy = sandbox.spy(vm.$refs.vuetable, 'refresh')
 
+    const newApiUrl = 'http://example.com/api/test/noReactiveApiUrl';
+    vm.apiUrl = newApiUrl
 
+    vm.$nextTick().then(() => {
+      expect(refreshSpy).to.not.have.been.called
+      expect(AxiosGetStub).to.not.have.been.calledWith('http://example.com/api/test/noReactiveApiUrl', {params: {page: 1, per_page: 10, sort: ''}})
+    })
+      .then(done, done)
+  })
 })
 
 /**