WrapperArray
一个 WrapperArray
是一个包含 Wrapper
数组以及 Wrapper
的测试方法等对象。
属性
wrappers
array
: 包含在 WrapperArray
内的 Wrappers
length
number
(只读):该 WrapperArray
中包含的 Wrapper
的数量。
方法
at(index)
返回第 index
个传入的 Wrapper
。数字从 0 开始计数 (比如第一个项目的索引值是 0)。
参数:
{number} index
返回值:
{Wrapper}
示例:
import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'
const wrapper = shallowMount(Foo)
const divArray = wrapper.findAll('div')
const secondDiv = divArray.at(1)
expect(secondDiv.is('p')).toBe(true)
contains(selector)
断言 WrapperArray
的每个包裹器都包含选择器。
可使用任何有效的选择器。
参数:
{string|Component} selector
返回值:
{boolean}
示例:
import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'
import Bar from './Bar.vue'
const wrapper = shallowMount(Foo)
const divArray = wrapper.findAll('div')
expect(divArray.contains('p')).toBe(true)
expect(divArray.contains(Bar)).toBe(true)
destroy()
销毁 WrapperArray
中的每个 Vue Wrapper
。
- 示例:
import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'
const wrapper = mount(Foo)
const divArray = wrapper.findAll('div')
expect(divArray.contains('p')).toBe(true)
divArray.destroy()
expect(divArray.contains('p')).toBe(false)
filter(predicate)
用一个针对 Wrapper
的断言函数过滤 WrapperArray
。
该方法的行为和 Array.prototype.filter 相同。
参数:
{function} predicate
返回值:
{WrapperArray}
一个新的 WrapperArray
实例,该实例包含了经过断言函数处理后返回真值的 Wrapper
实例。
- 示例:
import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'
const wrapper = shallowMount(Foo)
const filteredDivArray = wrapper
.findAll('div')
.filter(w => !w.hasClass('filtered'))
is(selector)
断言 WrapperArray
的每个 Wrapper
的 DOM 节点或 vm
匹配选择器。
参数:
{string|Component} selector
返回值:
{boolean}
示例:
import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'
const wrapper = mount(Foo)
const divArray = wrapper.find('div')
expect(divArray.is('div')).toBe(true)
isEmpty()
断言 WrapperArray
的每个 Wrapper
都不包含子节点。
返回值:
{boolean}
示例:
import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'
const wrapper = mount(Foo)
const divArray = wrapper.findAll('div')
expect(divArray.isEmpty()).toBe(true)
isVueInstance()
断言 WrapperArray
的每个 Wrapper
都是 Vue 实例。
返回值:
{boolean}
示例:
import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'
import Bar from './Bar.vue'
const wrapper = mount(Foo)
const barArray = wrapper.findAll(Bar)
expect(barArray.isVueInstance()).toBe(true)
setChecked(checked)
该方法是接下来这段代码的别名:
wrapperArray.wrappers.forEach(wrapper => wrapper.setChecked(checked))
参数:
{Boolean} checked (default: true)
示例:
import { mount } from '@vue/test-utils'
const wrapper = mount({
data() {
return {
t1: false,
t2: ''
}
},
template: `
<div>
<input type="checkbox" name="t1" class="foo" v-model="t1" />
<input type="radio" name="t2" class="foo" value="foo" v-model="t2"/>
<input type="radio" name="t2" class="bar" value="bar" v-model="t2"/>
</div>`
})
const wrapperArray = wrapper.findAll('.foo')
expect(wrapper.vm.t1).to.equal(false)
expect(wrapper.vm.t2).to.equal('')
wrapperArray.setChecked()
expect(wrapper.vm.t1).to.equal(true)
expect(wrapper.vm.t2).to.equal('foo')
setData(data)
为 WrapperArray
的每个 Wrapper
vm
都设置数据。
注意:该包裹器必须包含一个 Vue 实例。
参数:
{Object} data
示例:
import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'
import Bar from './Bar.vue'
const wrapper = mount(Foo)
const barArray = wrapper.findAll(Bar)
barArray.setData({ foo: 'bar' })
expect(barArray.at(0).vm.foo).toBe('bar')
setMethods(methods)
为 WrapperArray
的每个 Wrapper
vm
都设置方法并强行更新。
注意:该包裹器必须包含一个 Vue 实例。
参数:
{Object} methods
示例:
import { mount } from '@vue/test-utils'
import sinon from 'sinon'
import Foo from './Foo.vue'
import Bar from './Bar.vue'
const wrapper = mount(Foo)
const barArray = wrapper.findAll(Bar)
const clickMethodStub = sinon.stub()
barArray.setMethods({ clickMethod: clickMethodStub })
barArray.at(0).trigger('click')
expect(clickMethodStub.called).toBe(true)
setProps(props)
为 WrapperArray
的每个 Wrapper
vm
都设置 prop 并强行更新。
注意:该包裹器必须包含一个 Vue 实例。
参数:
{Object} props
示例:
import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'
import Bar from './Bar.vue'
const wrapper = mount(Foo)
const barArray = wrapper.findAll(Bar)
barArray.setProps({ foo: 'bar' })
expect(barArray.at(0).vm.foo).toBe('bar')
setValue(value)
该方法是接下来这段代码的别名:
wrapperArray.wrappers.forEach(wrapper => wrapper.setValue(value))
参数:
{any} value
示例:
import { mount } from '@vue/test-utils'
const wrapper = mount({
data() {
return {
t1: '',
t2: ''
}
},
template: `
<div>
<input type="text" name="t1" class="foo" v-model="t1" />
<input type="text" name="t2" class="foo" v-model="t2"/>
</div>`
})
const wrapperArray = wrapper.findAll('.foo')
expect(wrapper.vm.t1).to.equal('')
expect(wrapper.vm.t2).to.equal('')
wrapperArray.setValue('foo')
expect(wrapper.vm.t1).to.equal('foo')
expect(wrapper.vm.t2).to.equal('foo')
trigger(eventType [, options ])
为 WrapperArray
的每个 Wrapper
DOM 节点都触发一个事件。
注意:该包裹器必须包含一个 Vue 实例。
参数:
{string} eventType
必填{Object} options
可选
示例:
import { mount } from '@vue/test-utils'
import sinon from 'sinon'
import Foo from './Foo.vue'
const clickHandler = sinon.stub()
const wrapper = mount(Foo, {
propsData: { clickHandler }
})
const divArray = wrapper.findAll('div')
divArray.trigger('click')
expect(clickHandler.called).toBe(true)