Тест Mocha Chai не вызывает метод VueJS при нажатии кнопки - PullRequest
Новая
       11

Тест Mocha Chai не вызывает метод VueJS при нажатии кнопки

0 голосов
/ 02 марта 2019

Некоторое время я боролся с этим, я пытаюсь проверить, что метод VueJS вызывается при нажатии кнопки.По какой-то причине тестовый пример продолжает терпеть неудачу, выдавая следующую ошибку: 

AssertionError: expected loadURL to have been called at least once, but it was never called

Я пробовал различные способы настройки этого тестового примера, и я не могу до конца жизни понять, почему этоне проходя.

Вот мой код прямо сейчас

КОД VUEJS 

<template>
  <v-app dark>
    <v-toolbar class="toolbar" app>
      <v-toolbar-title class="headline text-uppercase">
        <span>PARTY</span>
        <span class="font-weight-light">QUEUE</span>
      </v-toolbar-title>
      <v-spacer></v-spacer>
      <v-text-field
        placeholder="Enter a YouTube URL"
        v-model="youtubeURL"
        @keypress.native.enter="loadURL()"
      ></v-text-field>
      <v-btn class="add-to-queue" v-on:click="loadURL()" :loading="isLoading">Add To Queue</v-btn>
      <v-spacer></v-spacer>
      <v-btn
        flat
        href="https://github.com/vuetifyjs/vuetify/releases/latest"
        target="_blank"
      >
        <span class="mr-2">Latest Release</span>
      </v-btn>
    </v-toolbar>

    <v-content>
      <Home class="home"></Home>
    </v-content>
  </v-app>
</template>

<script>
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 = ''
    }
  }
}
</script>

ТЕСТСЛУЧАИ 

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', () => {
  let wrapper
  let store
  let subject

  beforeEach(() => {
    store = new Vuex.Store({
      state: {}
    })
    wrapper = shallowMount(App, { store, localVue })
    subject = wrapper.vm
  })

  describe('when the add to queue button is clicked', () => {
    it('calls the loadURL method', () => {
      sinon.spy(subject, 'loadURL')
      wrapper.find('.add-to-queue').trigger('click')
      expect(subject.loadURL).to.have.been.called
    })
  })
})

Любая помощь будет принята с благодарностью!

1 Ответ

0 голосов
/ 02 марта 2019

Нашел решение, заменил 

wrapper.find('.add-to-queue').trigger('click')

на 

wrapper.find('.add-to-queue').vm.$emit('click')
...