vueコンポーネントの受け渡し方法をテストする方法

Question

私はVueコンポーネントmodalを持っています。これは親によって渡されたonCloseのpropを持っています。 okボタンをクリックすると、onCloseメソッドがトリガされます。コードは以下の通りである：

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/vue@1.0.26/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>

Iはmodalコンポーネントのユニットテストはclose方法にspyを定義する必要があり、そうテストは以下のようでなければならないと思う：

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() 

エラーでテストに失敗しました：TypeError: [Function] is not a spy or a call to a spy!

Answer 1

ユニットテストの抜粋です：

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) 
})