单元测试Vuetify.js在v-dialog中的表单验证不起作用

时间:2018-04-09 23:08:17

标签: validation vue.js vuetify.js

我正在使用Vue(2.5.2)+ Vuetify.js(1.0.13")+ vue-test-utils(1.0.0-beta.13) 我想在v-dialog中使用表单验证。 在使用npm run dev的浏览器中,它看起来效果很好。 但在单元测试中,'添加'通过,但是在对话框中添加测试'没有通过。 如何在v-dialog中测试表单?

上传测试代码 https://github.com/dokechin/sample

组件

<template>
  <div class="hello">
    <v-form v-model="valid1" ref="form">
      <v-text-field id="name1" :rules="nameRules" v-model="name" required></v-text-field>
    </v-form>
    <v-btn id="new" @click.stop="dialog = true" slot="activator">new</v-btn>
    <v-dialog v-model="dialog" max-width="500px">
      <v-form v-model="valid2" ref="form">
        <v-text-field id="name2" :rules="nameRules" v-model="name" required></v-text-field>
      </v-form>
    </v-dialog>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      dialog: false,
      valid1: false,
      valid2: false,
      name1: '',
      name2: '',
      nameRules: [
        (v) => !!v || 'empty'
      ]
    }
  }
}
</script>

测试代码是

  it('adds', async () => {
    // build component
    const wrapper = mount(HelloWorld, {localVue})
    expect(wrapper.vm.valid1).toBe(false)
    const input = wrapper.find('input#name1')
    input.trigger('focus')
    await wrapper.vm.$nextTick()
    input.element.value = 'TARO'
    input.trigger('input')
    await wrapper.vm.$nextTick()
    input.trigger('blur')
    await wrapper.vm.$nextTick()
    expect(wrapper.vm.valid2).toBe(true)
  })
  it('adds in dialog', async () => {
    // build component
    const wrapper = mount(HelloWorld, {localVue})
    expect(wrapper.vm.dialog).toBe(false)
    wrapper.find('button#new').trigger('click')
    await wrapper.vm.$nextTick()
    expect(wrapper.vm.dialog).toBe(true)
    expect(wrapper.vm.valid2).toBe(false)
    const input = wrapper.find('input#name2')
    input.trigger('focus')
    await wrapper.vm.$nextTick()
    input.element.value = 'HANAKO'
    input.trigger('input')
    await wrapper.vm.$nextTick()
    input.trigger('blur')
    await wrapper.vm.$nextTick()
    expect(wrapper.vm.valid2).toBe(true)
  })

0 个答案:

没有答案