4

I'm trying to test a service that I've created that makes an API call with vue-resource. The service should make the call and update the component with the new data, however in my tests it doesn't register the updated value. I'm using the same setup as the vue-cli webpack example and have based my auth service off this repo (which unfortunately doesn't have any tests)

my service:

export default {
   login(context, creds){
      context.$http.post(LOGIN_URL, creds)
        .then((response) => {
           //do something else here
        }, (response) => {
           context.error = response.data.error
        }
   }
}

my test:

import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource)
import Auth from 'src/auth'

describe('Auth', () => {
   it('should throw an error on unsuccessful login', (done) => {

     //intercept the api call and force an invalid response
     Vue.http.interceptors.unshift((request, next) => {
        next(request.respondWidth({error: 'some error'}, {status: 401}));
     });


     const vm = new Vue({
        data: {
           error: ''
        }
     }).$mount()

     Auth.login(vm, {email: 'test@test.com', pass: 'test'} )

     //this always fails
     expect(vm.error).to.equal('some error')

     //ive also tried:
     vm.$nextTick(() => {
        expect(vm.error).to.equal('some error')
        //done()
     });

     //undo our interceptor
     Vue.http.interceptors.shift()

   }
}

When I run the test it fails because it's expecting '' to equal 'some error'.

My suspicions are around the fact that vue-resource is using promises.

kylewelsby
  • 4,031
  • 2
  • 29
  • 35
Matt Sanders
  • 370
  • 2
  • 12

1 Answers1

4

After reading through some of the Vue.js tests I found my answer. Instead of using vm.$nextTick I did the following:

setTimeout(function(){
   expect(vm.error).to.equal('something')
   done()
}, 0)
Matt Sanders
  • 370
  • 2
  • 12
  • without getting into the deep darkness of vue intricacies, I believe it's because when you set a timeout it runs after the rest of the code because it's at the bottom of the call stack. So by the time it's run everything else has updated. there are some pretty good explanations of the call stack out there which should clear things up a bit. – Matt Sanders Aug 24 '16 at 05:31