WrapperArray

A WrapperArray is an object that contains an array of Wrappers, and methods to test the Wrappers.

Properties

wrappers

array (read-only): the Wrappers contained in the WrapperArray

length

number (read-only): the number of Wrappers contained in the WrapperArray

Methods

at

Returns Wrapper at index passed. Uses zero based numbering (i.e. first item is at index 0). If index is negative, indexing starts from the last element (i.e. last item is at index -1).

  • Arguments:

    • {number} index
  • Returns: {Wrapper}

  • Example:

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('div')).toBe(true)

const lastDiv = divArray.at(-1)
expect(lastDiv.is('div')).toBe(true)

contains

Assert every wrapper in WrapperArray contains selector.

Use any valid selector.

  • Arguments:

    • {string|Component} selector
  • Returns: {boolean}

  • Example:

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

Destroys each Vue Wrapper in WrapperArray.

  • Example:
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

Filter WrapperArray with a predicate function on Wrapper objects.

Behavior of this method is similar to Array.prototype.filter.

  • Arguments:

    • {function} predicate
  • Returns: {WrapperArray}

A new WrapperArray instance containing Wrapper instances that returns true for the predicate function.

  • Example:
import { shallowMount } from '@vue/test-utils'
import Foo from './Foo.vue'

const wrapper = shallowMount(Foo)
const filteredDivArray = wrapper
  .findAll('div')
  .filter(w => !w.classes('filtered'))

is

Assert every Wrapper in WrapperArray DOM node or vm matches selector.

  • Arguments:

    • {string|Component} selector
  • Returns: {boolean}

  • Example:

import { mount } from '@vue/test-utils'
import Foo from './Foo.vue'

const wrapper = mount(Foo)
const divArray = wrapper.findAll('div')
expect(divArray.is('div')).toBe(true)

isEmpty

Assert every Wrapper in WrapperArray does not contain child node.

  • Returns: {boolean}

  • Example:

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

Assert every Wrapper in WrapperArray is Vue instance.

  • Returns: {boolean}

  • Example:

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

This method is an alias of the following code.

wrapperArray.wrappers.forEach(wrapper => wrapper.setChecked(checked))
  • Arguments:

    • {Boolean} checked (default: true)
  • Example:

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

Sets Wrapper vm data on each Wrapper in WrapperArray.

Note every Wrapper must contain a Vue instance.

  • Arguments:

    • {Object} data
  • Example:

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

Sets Wrapper vm methods and forces update on each Wrapper in WrapperArray.

Note every Wrapper must contain a Vue instance.

  • Arguments:

    • {Object} methods
  • Example:

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

Sets Wrapper vm props and forces update on each Wrapper in WrapperArray.

Note every Wrapper must contain a Vue instance.

  • Arguments:

    • {Object} props
  • Example:

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

This method is an alias of the following code.

wrapperArray.wrappers.forEach(wrapper => wrapper.setValue(value))
  • Arguments:

    • {any} value
  • Example:

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

Triggers an event on every Wrapper in the WrapperArray DOM node.

Note every Wrapper must contain a Vue instance.

  • Arguments:

    • {string} eventType required
    • {Object} options optional
  • Example:

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)