我正在使用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)
})