WrapperArray

Um WrapperArray é um objeto que contém um array de Wrappers (envolvedores), e métodos para testar os Wrappers (envolvedores).

Propriedades

wrappers (envolvedores)

Um array (somente-leitura): os Wrappers contidos dentro do WrapperArray

length (comprimento)

Um number (somente-leitura): o número de Wrappers contidos dentro do WrapperArray

Métodos

O método at

Retorna o Wrapper (envolvedor) no índice passado. Usa numeração baseada em zero (exemplo. o primeiro item está no índice 0). Se o índice for negativo, a indexação começa com o último elemento (exemplo. o último item está no índice -1).

• Argumentos:

  • {number} index

• Retorna: {Wrapper}

• Exemplo:

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)

O método contains

Afirma que todo wrapper (envolvedor) dentro do WrapperArray contém o seletor.

Use qualquer seletor válido.

• Argumentos:

  • {string|Component} selector

• Returna: {boolean}

• Exemplo:

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)

O método destroy

Destrói cada Wrapper (envolvedor) de Vue dentro do WrapperArray.

• Exemplo:

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)

O método exists

Afirma que WrapperArray existe.

Retorna false se for chamado em um WrapperArray sem objetos Wrapper (envolvedor), ou se qualquer um deles não existir.

• Retorna: {boolean}

• Exemplo:

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

const wrapper = mount(Foo)
expect(wrapper.findAll('div').exists()).toBe(true)
expect(wrapper.findAll('does-not-exist').exists()).toBe(false)

O método filter

Filtra o WrapperArray com uma função atribuída sobre objetos Wrapper (envoledor).

O comportamento deste método é similar ao Array.prototype.filter.

• Argumentos:

  • {function} predicate

• Retorna: {WrapperArray}

Uma nova instância de WrapperArray contendo instâncias de Wrapper que torna true para a função atribuída.

• Exemplo:

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

O método is

Afirma que todo Wrapper dentro do nó do DOM de WrapperArrayou vm corresponde a um seletor.

• Argumentos:

  • {string|Component} selector

• Retorna: {boolean}

• Exemplo:

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)

O método isEmpty

Aviso de Depreciação

O isEmpty está depreciado e será removido nos futuros lançamentos.

Considere um correspondente personalizado tais como aqueles fornecidos dentro do jest-dom.

Sempre que estiver usando com findComponent acesse o elemento do DOM com findComponent(Comp).element

Afirma que todo Wrapper dentro do WrapperArray não contém nó filho.

• Retorna: {boolean}

• Exemplo:

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)

O método isVueInstance

Aviso de Depreciação

O método isVueInstance está depreciado e será removido nos futuros lançamentos.

Testes que dependem da afirmação do método isVueInstance fornecem pouco ou nenhum valor. Nós sugerimos substituir eles por afirmações resolutas.

Para manter esses testes, uma substituição válida para o método isVueInstance() é uma afirmação de veracidade (truthy) do wrapper.find(...).vm.

Afirma que todo Wrapper (envolvedor) dentro do WrapperArray é uma instância de Vue.

• Retorna: {boolean}

• Exemplo:

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)

O método setChecked

Este método é um apelido do seguinte código.

wrapperArray.wrappers.forEach(wrapper => wrapper.setChecked(checked))

• Argumentos:

  • {Boolean} checked (default: true)

• Exemplo:

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

test('setChecked demo', async () => {
  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).toEqual(false)
  expect(wrapper.vm.t2).toEqual('')
  await wrapperArray.setChecked()
  expect(wrapper.vm.t1).toEqual(true)
  expect(wrapper.vm.t2).toEqual('foo')
})

O método setData

Define os dados do vm do Wrapper (envolvedor) em cada Wrapper (envolvedor) dentro do WrapperArray.

Note que todo Wrapper deve conter uma instância de Vue.

• Argumentos:

  • {Object} data

• Exemplo:

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

test('setData demo', async () => {
  const wrapper = mount(Foo)
  const barArray = wrapper.findAll(Bar)
  await barArray.setData({ foo: 'bar' })
  expect(barArray.at(0).vm.foo).toBe('bar')
})

O método setMethods

Aviso de Depreciação

O método setMethods está depreciado e será removido nos futuros lançamentos.

Não há um caminho claro para substituir setMethods, porque ele depende muito da sua utilização prévia. Ele guia facilmente para testes escamosos que dependem da implementação de detalhes, o que é desencorajado.

Nós sugerimos que repense aqueles testes.

Para forjar um método complexo extraia ele do componente e teste ele em quarentena. Para afirmar que um método for chamado, use o seu executor de teste para vigiar ele.

Define os métodos do vm do Wrapper (envolvedor) e força a atualização de cada Wrapper dentro do WrapperArray.

Note que todo Wrapper deve conter uma instância de Vue.

• Argumentos:

  • {Object} methods

• Exemplo:

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)

O método setProps

Define as propriedades do vm do Wrapper (envolvedor) e força a atualização de cada Wrapper dentro do WrapperArray.

Note que todo Wrapper deve conter uma instância de Vue.

• Argumentos:

  • {Object} props

• Exemplo:

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

test('setProps demo', async () => {
  const wrapper = mount(Foo)
  const barArray = wrapper.findAll(Bar)
  await barArray.setProps({ foo: 'bar' })
  expect(barArray.at(0).vm.foo).toBe('bar')
})

o método setValue

Este método é um apelido do seguinte código.

wrapperArray.wrappers.forEach(wrapper => wrapper.setValue(value))

• Argumentos:

  • {any} value

• Exemplo:

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>`
})

test('setValue demo', async () => {
  const wrapperArray = wrapper.findAll('.foo')
  expect(wrapper.vm.t1).toEqual('')
  expect(wrapper.vm.t2).toEqual('')
  await wrapperArray.setValue('foo')
  expect(wrapper.vm.t1).toEqual('foo')
  expect(wrapper.vm.t2).toEqual('foo')
})

O método trigger

Aciona um evento em todo Wrapper (envolvedor) dentro do WrapperArray de nó do DOM.

Note que todo Wrapper deve conter uma instância de Vue.

• Argumentos:

  • {string} eventType obrigatório
  • {Object} options opcional

• Exemplo:

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

test('trigger demo', async () => {
  const clickHandler = sinon.stub()
  const wrapper = mount(Foo, {
    propsData: { clickHandler }
  })

  const divArray = wrapper.findAll('div')
  await divArray.trigger('click')
  expect(clickHandler.called).toBe(true)
})