jeudi 4 août 2016

how to test vue component passing method

I have a Vue component modal which has onClose prop passed by its parent. When click ok button, the onClose method will be triggered. The code is as below:

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

// start app
new Vue({
  el: '#app',
  methods: {
    close() {
        alert('close')
    }
  }
})
<script src="http://ift.tt/2aMv1Uk"></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 think the unit test for modal component should define spy on close method, so the test should be as below:

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

The test failed with error: TypeError: [Function] is not a spy or a call to a spy!

Aucun commentaire:

Enregistrer un commentaire