title: Mocha Chai test case not calling VueJS method on button click
body: <p>Been struggling with this for a while now, I'm trying to test that a VueJS method is called when a button is clicked. For some reason the test case keeps failing, throwing the following error.</p>
  
  <pre><code>AssertionError: expected loadURL to have been called at least once, but it was never called
  </code></pre>
  
  <p>I've tried various different ways of setting up this test case and I can't for the life of me figure out why it's not passing.</p>
  
  <p>Here's my code right now</p>
  
  <p><strong><em>VUEJS CODE</em></strong></p>
  
  <pre><code>&lt;template&gt;
    &lt;v-app dark&gt;
      &lt;v-toolbar class="toolbar" app&gt;
        &lt;v-toolbar-title class="headline text-uppercase"&gt;
          &lt;span&gt;PARTY&lt;/span&gt;
          &lt;span class="font-weight-light"&gt;QUEUE&lt;/span&gt;
        &lt;/v-toolbar-title&gt;
        &lt;v-spacer&gt;&lt;/v-spacer&gt;
        &lt;v-text-field
          placeholder="Enter a YouTube URL"
          v-model="youtubeURL"
          @keypress.native.enter="loadURL()"
        &gt;&lt;/v-text-field&gt;
        &lt;v-btn class="add-to-queue" v-on:click="loadURL()" :loading="isLoading"&gt;Add To Queue&lt;/v-btn&gt;
        &lt;v-spacer&gt;&lt;/v-spacer&gt;
        &lt;v-btn
          flat
          href="https://github.com/vuetifyjs/vuetify/releases/latest"
          target="_blank"
        &gt;
          &lt;span class="mr-2"&gt;Latest Release&lt;/span&gt;
        &lt;/v-btn&gt;
      &lt;/v-toolbar&gt;
  
      &lt;v-content&gt;
        &lt;Home class="home"&gt;&lt;/Home&gt;
      &lt;/v-content&gt;
    &lt;/v-app&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import Home from './components/Home'
  export default {
    name: 'App',
    components: {
      Home
    },
    data () {
      return {
        youtubeURL: '',
        isLoading: false
      }
    },
    methods: {
      loadURL () {
        this.isLoading = true
        var youtubeEmbedTemplate = 'https://www.youtube.com/embed/'
        var youtubeVideoID = this.youtubeURL.substring(32,43)
        var autoplay = '?autoplay=1'
        var topOfQueue = youtubeEmbedTemplate.concat(youtubeVideoID.concat(autoplay))
        this.$store.commit('setTopOfQueue', {
          TopOfQueue: topOfQueue
        })
        this.isLoading = false
        this.youtubeURL = ''
      }
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong><em>TEST CASES</em></strong></p>
  
  <pre><code>import { expect } from 'chai'
  import { shallowMount, createLocalVue } from '@vue/test-utils'
  import Vuex from 'vuex'
  import App from '@/App.vue'
  import sinon from 'sinon'
  
  var chai = require("chai");
  var sinonChai = require("sinon-chai");
  const localVue = createLocalVue()
  
  chai.use(sinonChai);
  localVue.use(Vuex)
  
  describe('App.vue', () =&gt; {
    let wrapper
    let store
    let subject
  
    beforeEach(() =&gt; {
      store = new Vuex.Store({
        state: {}
      })
      wrapper = shallowMount(App, { store, localVue })
      subject = wrapper.vm
    })
  
    describe('when the add to queue button is clicked', () =&gt; {
      it('calls the loadURL method', () =&gt; {
        sinon.spy(subject, 'loadURL')
        wrapper.find('.add-to-queue').trigger('click')
        expect(subject.loadURL).to.have.been.called
      })
    })
  })
  </code></pre>
  
  <p>Any help at all would be greatly appreciated!</p>