Vue-resource: Jasmine-Ajax and Vue Resource

[AndyArcherKG]

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.

[jonathonwang]

I am having this same issue,
When I hit my method that does an ajax call within my tests, there is no new request showing up within jasmine.Ajax.requests. and my jasmine.Ajax.request.mostRecent() returns undefined. However, when i set up ajax requests without using vue-resource they appear fine.

[vfreitas-]

Same issue here.

[holmescn]

I have add a console log at vue-resource/src/http/client/xhr.js, it shows that XMLHttpRequest is not faked.
I am trying to figure it out that why it is not faked.

[holmescn]

It seems that the jasmine.Ajax.install does work as expected. But this https://github.com/vuejs/vue-resource/issues/198 gives another solution.

[AndyArcherKG]

Yeah Jasmine ajax in my other non vue projects works fine at faking the response. Yeah i saw that post a while ago in which the author even mentions jasmine ajax. - which is kinda weird.

[patrickdavey]

I have this mostly working using the solution in #198 , however, I'm having an issue with asserting after the promise has been resolved. The code works correctly, I just can't get the test to pass. Relevant bits of the spec and code are below:

    it('should change the state to downloading if download called', () => {
      Vue.http.interceptors.unshift({
        request: function (request) {
          request.client = function (request) {
            var response = {request: request};
            response.status = 200;
            return response;
          };
          return request;
        }
      });
      testComponent.download();

      expect(testComponent.cast.state).toBe('downloading');
    });

    download: function() {
      this.$http.post('/items/' + this.cast.id + '/download.json')
        .then(response => {
          this.cast.state = 'downloading'
        }, error => {
          this.error = 'Could not fetch casts from server!'
        })
    }

If anyone in this thread has a pointer that'd be awesome!

[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.

[mcmillion]

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