Как вызвать v-autocomplete «входное» событие с помощью утилит vue test? - PullRequest
Новая
       44

Как вызвать v-autocomplete «входное» событие с помощью утилит vue test?

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

Я пытаюсь вызвать событие «input» компонента Vuetify v-autocomplete внутри модульного теста.Из того, что я могу сказать, модульный тест очень похож на тот, который парни Vuetify используют , но по какой-то причине метод mock никогда не вызывается.

Заводской метод просто возвращаетЭкземпляр компонента сделан через mount и добавляет локальный экземпляр store, vue и vueLoading.

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

Версия Vuetify: 1.4.3

Компонент 

<template>
  <v-autocomplete
    :items="options"
    :value="selectedId"
    :label="label || $t('user.filter')"
    :dark="dark"
    :class="fieldClass"
    :menu-props="{ contentClass }"
    :loading="$loading.isLoading('fetch users')"
    item-text="email"
    item-value="id"
    name="search_by_user"
    hide-details
    single-line
    clearable
    @input="updateValue($event)"
    @click.native="fetchUsers"
  />
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  props: {
    value: {
      type: String,
      required: false,
      default: null
    },
    label: {
      type: String,
      required: false,
      default: null
    },
    dark: {
      type: Boolean,
      required: false,
      default: true
    },
    fieldClass: {
      type: String,
      required: false,
      default: 'select-user-search'
    },
    contentClass: {
      type: String,
      required: false,
      default: 'user-search'
    },
    blankItem: {
      type: Object,
      required: false,
      default: null
    }
  },
  data () {
    return {
      selectedId: this.value
    }
  },
  computed: {
    ...mapGetters(['users']),
    options () { return this.blankItem ? [this.blankItem].concat(this.users) : this.users }
  },
  created () {
    if (this.value) this.fetchUsers()
  },
  methods: {
    fetchUsers () {
      if (this.users.length) return

      this.$store.dispatch('FETCH_USERS', {
        fields: ['id', 'email'],
        filter: { active: 'true' }
      })
    },
    updateValue (value) {
      this.selectedId = value
      this.$emit('input', value)
    }
  }
}
</script>

<style>
  .select-user-search {
    overflow: hidden;
    padding-bottom: 1px;
  }

  .select-user-search .v-select__selections {
    overflow: hidden;
  }

  .select-user-search .v-select__selection {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>

Модульный тест 

import { mount, shallowMount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import VueLoading from 'vuex-loading'
import Vuetify from 'vuetify'
import UserSearch from 'manager/components/user/search.vue'

const factory = (values, shallow = true) => {
  if (!shallow) {
    return mount(UserSearch, { ...values })
  }
  return shallowMount(UserSearch, { ...values })
}

const localVue = createLocalVue()

localVue.use(Vuex)
localVue.use(VueLoading)
localVue.use(Vuetify)

describe('UserSearch', () => {
  let actions, getters, store, vueLoading

  beforeEach(() => {
    actions = {
      FETCH_USERS: jest.fn()
    }

    getters = {
      users: () => []
    }

    vueLoading = new VueLoading({ useVuex: true })

    store = new Vuex.Store({
      actions,
      getters
    })
  })

  it('calls "updateValue" method when input triggered', async () => {
    const methods = {
      updateValue: jest.fn()
    }

    const wrapper = factory({ methods, store, localVue, vueLoading }, false)
    const input = wrapper.find('input')

    input.element.value = 'value'
    input.trigger('input')

    await wrapper.vm.$nextTick()

    expect(methods['updateValue']).toBeCalledWith('value')
  })
})
...