2016-08-05 8 views
0

Ich habe eine Vue-komponente modal, die onClose prop durch seine elternteil hat. Wenn Sie auf die Schaltfläche ok klicken, wird die Methode onClose ausgelöst. Der Code ist wie folgt:wie zu prüfen, ob vue komponente übergibt methode

Vue.component('modal', { 
 
    template: '#modal-template', 
 
    props: { 
 
    onClose: { 
 
     type: Function 
 
    } 
 
    }, 
 
    methods: { 
 
    ok() { 
 
     this.onClose(); 
 
    } 
 
    } 
 
}) 
 

 
// start app 
 
new Vue({ 
 
    el: '#app', 
 
    methods: { 
 
    close() { 
 
    \t alert('close') 
 
    } 
 
    } 
 
})
<script src="https://npmcdn.com/[email protected]/dist/vue.min.js"></script> 
 

 
<script type="x/template" id="modal-template"> 
 
    <div class="modal-mask"> 
 
    <button @click='ok()'> OK </button> 
 
    </div> 
 
</script> 
 

 
<div id="app"> 
 
    <modal :on-close="close" ></modal> 
 
</div>

Ich denke, das Gerät zu testen für modal Komponente spy auf close Methode definieren sollte, so sollte der Test, wie nachstehend sein:

let vm = new Vue({ 
    template: '<div><modal v-ref:test-component :on-close="close"></modal></div>', 
    methods: { 
    close: sinon.spy() 
    }, 
    components: { ConfirmModal } 
}).$mount() 
const modal = vm.$refs.testComponent 
modal.ok() 
expect(vm.close).have.been.called() 

die Test fehlgeschlagen mit Fehler: TypeError: [Function] is not a spy or a call to a spy!

Antwort

0

Hier ist ein Auszug aus den Unit-Tests:

it('methods', function() { 
    var spy = jasmine.createSpy() 
    var vm = new Vue({ 
    el: el, 
    template: '<a v-on:click="test"></a>', 
    data: {a: 1}, 
    methods: { 
     test: spy 
    } 
    }) 
    var a = el.firstChild 
    trigger(a, 'click') 
    expect(spy.calls.count()).toBe(1) 
    vm.$destroy() 
    trigger(a, 'click') 
    expect(spy.calls.count()).toBe(1) 
}) 
Verwandte Themen