Jasmine-Ajax and Vue Resource

Hello, i’m trying to unit test my vue-resource ajax requests but jasmine-ajax does not seem to be able to picking up and intercepting the ajax request. I had jasmine-ajax working when i use jQuery ajax, but this doenst seem to be playing ball.

My Code:

it('should use the delete method', function(){
    var vm = new Vue({
    template: '<div><test :status="status" :entity="entity" :detailspage="" :user="user" v-ref:action-comp></test></div>',


    components: {
    'test': Action
    }, 
    data: {
    status: 'processing',
    entity: {entity_id: '123'},
    user: 'standard'
    }

    }).$mount();

    vm.$refs.actionComp.cancelItem(vm.entity, 'true');

    var request = jasmine.Ajax.requests.mostRecent();

    expect(request.method).toEqual('DELETE');

    });
/* my vue-resource */
vm.$http.delete('/api-url/' + entity.entity_id)
                .then(function (res){
                    entity.status = 'cancelled';
                    vm.getUpdatedList();
                }, function (res) {
                    console.log('testing error');
                });`

it just does not intercept so the error is always fired.

[mcmillion]

Why was this closed? This appears to be an ongoing issue.

[Doogiemuc]

I am searching in the same area. My tests are running with karma+webpack+mocha+sinonjs (This is how the large vue webpack template sets up everything.) And I have the same problem with vue-resource.

In sinon.js one can setup a sinon.fakeServer.create() that should intercept all AJAX calls, but for some reasons, it does not intercept the calls by vue-resource. Somehow vue-resource fiddles areound with XMLHttpRequest on its own.

The only way I got it working was with another method, by using vue-resource’s own interceptorlike this in my test spec:

    Vue.use(require('vue-resource'));
    Vue.http.interceptors.push((request, next) => {
      if (request.url == '/tabletestdata') {
        console.log('Intercepting request to '+request.url+ '. Sending reply with canned testdata.')
        // stop and return response
        next(request.respondWith(testData, { status: 200, statusText: 'Ok' }))
      } else {
        next()
      }
    });

I’d assume that jasmine.Ajax.request hangs on the same problem than sinon.fakeServer.