WrapperArray

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

Properties

wrappers

array: the Wrappers contained in the WrapperArray

length

number: the number of Wrappers contained in the WrapperArray

Methods

at(index)

Returns Wrapper at index passed. Uses zero based numbering (i.e. first item is at index 0).

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

contains(selector)

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(predicate)

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.hasClass('filtered'))

is(selector)

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.find('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)

setData(data)

Sets Wrappervm 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(methods)

Sets Wrappervm 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(props)

Sets Wrappervm 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')

trigger(eventType [, options ])

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

Note every Wrapper must contain a Vue instance.

  • Arguments:

    • {string} eventTyperequired
    • {Object} optionsoptional
  • 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)