VueJs Testing: bound-to-template method

HTML

<link rel="stylesheet" href="//cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.css">
<script src="//cdn.rawgit.com/jquery/jquery/2.1.4/dist/jquery.min.js"></script>
<script src="//cdn.rawgit.com/Automattic/expect.js/0.3.1/index.js"></script>
<script src="//cdn.rawgit.com/mochajs/mocha/2.2.5/mocha.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/sinon.js/4.0.2/sinon.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
  <div id="mocha"></div>

JavaScript

let Ctor = Vue.component('counter', {
  template: `<div>
  <button id="increment-btn" @click="increment">Increment!</button>
  <button id="increment2-btn" @click="increment2">increment2!</button>
  <h4>{{counter}}</h4>
</div>`,
  data: () => {return {counter: 0}},
  methods: {
    increment() {
      this.counter++
    },
    increment2() {
    	this.doIncrement()
    },
    doIncrement() {
    	this.counter++
    }
  }
})

mocha.setup('bdd')


describe('Sinon & Vue event handlers', () => {
  it('increment the counter', () => {
    const vm = new Ctor().$mount()

    vm.$el.querySelector('#increment-btn').click()

    expect(vm.counter)
    .to.equal(1)
  })

 it('increment the counter 2', () => {
    const vm = new Ctor().$mount()
		sinon.useFakeTimers()
    sinon.spy(vm, 'increment')

    vm.$el.querySelector('#increment-btn').click()

    // callCount property added by sinon to return
    // number of times the method was called
    expect(vm.increment.callCount)
    .to.equal(1)
  })

  it('increment the counter 2', () => {
    const vm = new Ctor().$mount()

    sinon.spy(vm, 'doIncrement')

		vm.$el.querySelector('#increment2-btn').click()

    expect(vm.doIncrement.callCount)
    .to.equal(1)
  })

})

mocha.checkLeaks()
mocha.globals(['jQuery'])
mocha.run()