Как протестировать компонент vue, который содержит дочерний компонент Vuetify v-text-field? - PullRequest
Новая
       19

Как протестировать компонент vue, который содержит дочерний компонент Vuetify v-text-field?

1 голос
/ 30 марта 2019

У меня есть компонент «EditableText», который отображает обычный текст, который при щелчке превращается в компонент vuetify v-text-input (что-то вроде функциональности trello при редактировании заголовка карты). 

<template>
  <div class="editableText">
    <div v-if="!editMode" @click="editMode = true" class="editableText__text" :class="textClass">
      {{ this.value }}
    </div>
    <v-text-field
      v-else
      class="editableText__input no-label"
      :class="textClass"
      :value="value"
      :autofocus="true"
      :height="20"
      :single-line="true"
      :hide-details="true"
      @input="handleInput"
      @blur="editMode = false"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      editMode: false
    }
  },

  props: {
    value: {
      type: String,
      required: true
    },
    textClass: {
      type: String,
      default: ''
    }
  },

  methods: {
    handleInput(value) {
      this.$emit('input', value)
    }
  }
}
</script>

Все мои модульные тесты для этого компонента работают нормально, за исключением случаев, когда я пытаюсь подтвердить, что компонент EditableText генерирует событие ввода, когда дочерний компонент VTextField запускает событие ввода.

(большинство тестов опускаются длядлина) 

import Vue from 'vue'
import { shallowMount } from '@vue/test-utils'
import vuetify from 'vuetify'
import EditableText from '@/components/EditableText'

Vue.use(vuetify) // temporary until vuetify/createLocalVue bug is resolved

const build = options => {
  return shallowMount(EditableText, options)
}

// Default props
let options
beforeEach(() => {
  options = {
    propsData: {
      value: 'Test value'
    }
  }
})

describe('EditableText', () => {
  it('emits an input event when the text input is changed', () => {
    const { VTextField } = Vue.options.components
    const wrapper = build(options)
    wrapper.find('.editableText__text').trigger('click') // need to click text to get VTextField to render
    wrapper.find(VTextField).trigger('input')
    expect(wrapper.emitted('input').length).toBe(1) // wrapper.emitted('input') is undefined
  })
})

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

Это то, что я должен тестировать, и если да, тоКак мне проверить, что компонент EditableText правильно генерирует событие ввода?Я попытался вызвать метод handleInput напрямую, но не смог найти способ сделать это.

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

...