2016-08-15 13 views
4

vue-resourceでAPI呼び出しを行うサービスをテストしようとしています。サービスは呼び出しを行い、新しいデータでコンポーネントを更新する必要がありますが、テストでは更新された値は登録されません。VueJSとVueResourceのユニットテスト時に状態が変化しない

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

私のテスト:

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: '[email protected]', 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() 

    } 
} 
私は

(残念ながらすべてのテストを持っていません)私のサービスを vue-cli webpack例と同じ設定を使用していますし、 this repoを自分の認証サービスをオフに基づいています

私がテストを実行すると、「何らかのエラーに等しくなる」ことが期待されるため失敗します。

私の疑惑は、vue-resourceが約束を使用しているという疑惑があります。

答えて

4

Vue.jsテストの一部を読んだ後、私は答えを見つけました。 vm。$ nextTickを使う代わりに、私は次のようにしました:

setTimeout(function(){ 
    expect(vm.error).to.equal('something') 
    done() 
}, 0) 
+0

これは私にとってもうまくいきました。 –

+0

では、vue intricaciesの深刻な暗闇に陥ることなく、タイムアウトを設定すると、コールスタックの最下部にあるので、残りのコードの後に​​実行されるからだと思います。だからそれが実行される頃には、他のすべてが更新されています。いくつかのことを明確にすべきであるコールスタックのかなり良い説明がいくつかあります。 –

関連する問題