WrapperArray

WrapperArray — это объект, содержащий массив Wrappers и методы для тестирования Wrappers.

Свойства

wrappers

array (только для чтения): array: массив Wrappers содержащихся в WrapperArray

length

number (только для чтения): array: массив Wrappers содержащихся в WrapperArray

Методы

at(index)

Возвращает Wrapper по указанному индексу index. Используется нумерация с нуля (т.е. первый элемент имеет индекс 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)

Проверка, что каждая обёртка (Wrapper) в 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()

Уничтожает каждый Wrapper Vue в WrapperArray.

  • Пример:
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)

Фильтр WrapperArray с функцией предиката на объектах Wrapper.

Поведение этого метода похоже на Array.prototype.filter.

  • Аргументы:

    • {function} predicate
  • Возвращает: {WrapperArray}

Новый экземпляр WrapperArray, содержащий экземпляры Wrapper, которые возвращают true для функции предиката.

  • Пример:
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(selector)

Проверка, что каждый Wrapper в WrapperArray 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()

Проверка, что каждый Wrapper в WrapperArray не содержит дочерних узлов.

  • Возвращает: {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()

Проверка, что каждый Wrapper в WrapperArray является экземпляром 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)

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

Устанавливает данные Wrapper vm на каждом Wrapper в WrapperArray.

Обратите внимание, что каждый Wrapper должен содержать экземпляр 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)

Устанавливает методы Wrapper vm и выполняет принудительное обновление каждого Wrapper в WrapperArray.

Обратите внимание, что каждый Wrapper должен содержать экземпляр 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)

Устанавливает входные параметры Wrapper vm и выполняет принудительное обновление каждого Wrapper в WrapperArray.

Обратите внимание, что каждый Wrapper должен содержать экземпляр 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)

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(eventType [, options ])

Генерирует событие на каждом Wrapper в WrapperArray DOM-узле.

Обратите внимание, что каждый Wrapper должен содержать экземпляр 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)