')
14 | const wrapper = mountingMethod(compiled)
15 | expect(wrapper.get('.does-exist')).toBeTruthy()
16 | })
17 | })
18 |
--------------------------------------------------------------------------------
/docs/fr/api/wrapper-array/isEmpty.md:
--------------------------------------------------------------------------------
1 | ## isEmpty
2 |
3 | ::: Avertissement de déprédation
4 | `isEmpty` est dépréciée et sera supprimée dans les prochaines versions.
5 |
6 | Pensez à un matcheur personnalisé comme ceux fournis dans [jest-dom](https://github.com/testing-library/jest-dom#tobeempty).
7 |
8 | En cas d'utilisation avec findComponent, accédez à l'élément DOM avec findComponent(Comp).element
9 | :::
10 |
11 | Affirmer que chaque `Wrapper` dans `WrapperArray` ne contient pas de nœud enfant.
12 |
13 | - **Retours:** `{boolean}`
14 |
15 | - **Exemple:**
16 |
17 | ```js
18 | import { mount } from '@vue/test-utils'
19 | import Foo from './Foo.vue'
20 |
21 | const wrapper = mount(Foo)
22 | const divArray = wrapper.findAll('div')
23 | expect(divArray.isEmpty()).toBe(true)
24 | ```
25 |
--------------------------------------------------------------------------------
/packages/create-instance/add-mocks.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | import $$Vue from 'vue'
3 | import { warn, keys } from 'shared/util'
4 |
5 | export default function addMocks(
6 | _Vue: Component,
7 | mockedProperties: Object | false = {}
8 | ): void {
9 | if (mockedProperties === false) {
10 | return
11 | }
12 | keys(mockedProperties).forEach(key => {
13 | try {
14 | // $FlowIgnore
15 | _Vue.prototype[key] = mockedProperties[key]
16 | } catch (e) {
17 | warn(
18 | `could not overwrite property ${key}, this is ` +
19 | `usually caused by a plugin that has added ` +
20 | `the property as a read-only value`
21 | )
22 | }
23 | // $FlowIgnore
24 | $$Vue.util.defineReactive(_Vue, key, mockedProperties[key])
25 | })
26 | }
27 |
--------------------------------------------------------------------------------
/docs/ru/api/wrapper-array/filter.md:
--------------------------------------------------------------------------------
1 | ## filter(predicate)
2 |
3 | Фильтр `WrapperArray` с функцией предиката на объектах `Wrapper`.
4 |
5 | Поведение этого метода похоже на [Array.prototype.filter](https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/filter).
6 |
7 | - **Аргументы:**
8 |
9 | - `{function} predicate`
10 |
11 | - **Возвращает:** `{WrapperArray}`
12 |
13 | Новый экземпляр `WrapperArray`, содержащий экземпляры `Wrapper`, которые возвращают true для функции предиката.
14 |
15 | - **Пример:**
16 |
17 | ```js
18 | import { shallowMount } from '@vue/test-utils'
19 | import Foo from './Foo.vue'
20 |
21 | const wrapper = shallowMount(Foo)
22 | const filteredDivArray = wrapper
23 | .findAll('div')
24 | .filter(w => !w.classes('filtered'))
25 | ```
26 |
--------------------------------------------------------------------------------
/packages/shared/consts.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import semver from 'semver'
3 |
4 | export const NAME_SELECTOR = 'NAME_SELECTOR'
5 | export const COMPONENT_SELECTOR = 'COMPONENT_SELECTOR'
6 | export const REF_SELECTOR = 'REF_SELECTOR'
7 | export const DOM_SELECTOR = 'DOM_SELECTOR'
8 | export const INVALID_SELECTOR = 'INVALID_SELECTOR'
9 |
10 | export const VUE_VERSION = Number(
11 | `${Vue.version.split('.')[0]}.${Vue.version.split('.')[1]}`
12 | )
13 |
14 | export const FUNCTIONAL_OPTIONS =
15 | VUE_VERSION >= 2.5 ? 'fnOptions' : 'functionalOptions'
16 |
17 | export const BEFORE_RENDER_LIFECYCLE_HOOK = semver.gt(Vue.version, '2.1.8')
18 | ? 'beforeCreate'
19 | : 'beforeMount'
20 |
21 | export const CREATE_ELEMENT_ALIAS = semver.gt(Vue.version, '2.1.5')
22 | ? '_c'
23 | : '_h'
24 |
--------------------------------------------------------------------------------
/packages/test-utils/src/components/RouterLinkStub.js:
--------------------------------------------------------------------------------
1 | // @flow
2 | const toTypes: Array
= [String, Object]
3 | const eventTypes: Array = [String, Array]
4 |
5 | export default {
6 | name: 'RouterLinkStub',
7 | props: {
8 | to: {
9 | type: toTypes,
10 | required: true
11 | },
12 | tag: {
13 | type: String,
14 | default: 'a'
15 | },
16 | exact: Boolean,
17 | exactPath: Boolean,
18 | append: Boolean,
19 | replace: Boolean,
20 | activeClass: String,
21 | exactActiveClass: String,
22 | exactPathActiveClass: String,
23 | event: {
24 | type: eventTypes,
25 | default: 'click'
26 | }
27 | },
28 | render(h: Function) {
29 | return h(this.tag, undefined, this.$slots.default)
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/docs/fr/api/wrapper-array/at.md:
--------------------------------------------------------------------------------
1 | ## at
2 |
3 | Retourne le `Wrapper` à `index` passé. Utilise une numérotation basée sur les zéros (c'est-à-dire que le premier élément est à l'index 0).
4 | Si `index` est négatif, l'indexation commence à partir du dernier élément (c'est-à-dire que le premier élément est à l'index -1).
5 |
6 | - **Arguments:**
7 |
8 | - `{number} index`
9 |
10 | - **Retours:** `{Wrapper}`
11 |
12 | - **Exemple:**
13 |
14 | ```js
15 | import { shallowMount } from '@vue/test-utils'
16 | import Foo from './Foo.vue'
17 |
18 | const wrapper = shallowMount(Foo)
19 | const divArray = wrapper.findAll('div')
20 |
21 | const secondDiv = divArray.at(1)
22 | expect(secondDiv.is('div')).toBe(true)
23 |
24 | const lastDiv = divArray.at(-1)
25 | expect(lastDiv.is('div')).toBe(true)
26 | ```
27 |
--------------------------------------------------------------------------------
/docs/fr/api/wrapper/setSelected.md:
--------------------------------------------------------------------------------
1 | ## setSelected
2 |
3 | Sélectionne un élément d'option et met à jour les données liées au `v-model`.
4 |
5 | - **Exemple:**
6 |
7 | ```js
8 | import { mount } from '@vue/test-utils'
9 | import Foo from './Foo.vue'
10 |
11 | const wrapper = mount(Foo)
12 | const options = wrapper.find('select').findAll('option')
13 |
14 | options.at(1).setSelected()
15 | ```
16 |
17 | - **Note:**
18 |
19 | Lorsque vous essayez de mettre la valeur à l'état via `v-model` par `option.element.selected = true ; parentSelect.trigger('input')`, `v-model` n'est pas déclenché. Le `v-model` est déclenché par l'événement `change`.
20 |
21 | `option.setSelected()` est un alias du code suivant.
22 |
23 | ```js
24 | option.element.selected = true
25 | parentSelect.trigger('change')
26 | ```
27 |
--------------------------------------------------------------------------------
/docs/zh/api/wrapper/setSelected.md:
--------------------------------------------------------------------------------
1 | ## setSelected
2 |
3 | 选择一个 option 元素并更新 `v-model` 绑定的数据。
4 |
5 | - **示例：**
6 |
7 | ```js
8 | import { mount } from '@vue/test-utils'
9 | import Foo from './Foo.vue'
10 |
11 | test('setSelected demo', async () => {
12 | const wrapper = mount(Foo)
13 | const options = wrapper.find('select').findAll('option')
14 |
15 | await options.at(1).setSelected()
16 |
17 | expect(wrapper.find('option:checked').element.value).toBe('bar')
18 | })
19 | ```
20 |
21 | - **注意：**
22 |
23 | 当你尝试通过 `option.element.selected = true; parentSelect.trigger('input')` 经由 `v-model` 向 state 设置值的时候，`v-model` 不会被触发。`v-model` 是被 `change` 事件触发的。
24 |
25 | `option.setSelected()` 是接下来这段代码的别名。
26 |
27 | ```js
28 | option.element.selected = true
29 | parentSelect.trigger('change')
30 | ```
31 |
--------------------------------------------------------------------------------
/docs/ru/api/wrapper-array/isVisible.md:
--------------------------------------------------------------------------------
1 | ## isVisible()
2 |
3 | Утверждает, что каждый `Wrapper` в `WrapperArray` виден.
4 |
5 | Возвращает `false`, если по крайней мере для одного из элементов какой-либо предок имеет стили `display: none`, `visibility: hidden`, `opacity: 0`, аттрибут `hidden` или находится в свёрнутом элементе ``.
6 |
7 | Это можно использовать для проверки, что компонент скрыт с помощью `v-show`.
8 |
9 | - **Возвращает:** `{boolean}`
10 |
11 | - **Пример:**
12 |
13 | ```js
14 | import { mount } from '@vue/test-utils'
15 | import Foo from './Foo.vue'
16 |
17 | const wrapper = mount(Foo)
18 | expect(wrapper.isVisible()).toBe(true)
19 | expect(wrapper.findAll('.is-not-visible').isVisible()).toBe(false)
20 | expect(wrapper.findAll('.is-visible').isVisible()).toBe(true)
21 | ```
22 |
--------------------------------------------------------------------------------
/docs/api/wrapper-array/trigger.md:
--------------------------------------------------------------------------------
1 | ## trigger
2 |
3 | Triggers an [event](../../guides/dom-events.md#trigger-events) on every `Wrapper` in the `WrapperArray` DOM node.
4 |
5 | **Note every `Wrapper` must contain a Vue instance.**
6 |
7 | - **Arguments:**
8 |
9 | - `{string} eventType` **required**
10 | - `{Object} options` **optional**
11 |
12 | - **Example:**
13 |
14 | ```js
15 | import { mount } from '@vue/test-utils'
16 | import sinon from 'sinon'
17 | import Foo from './Foo.vue'
18 |
19 | test('trigger demo', async () => {
20 | const clickHandler = sinon.stub()
21 | const wrapper = mount(Foo, {
22 | propsData: { clickHandler }
23 | })
24 |
25 | const divArray = wrapper.findAll('div')
26 | await divArray.trigger('click')
27 | expect(clickHandler.called).toBe(true)
28 | })
29 | ```
30 |
--------------------------------------------------------------------------------
/docs/fr/api/wrapper/findComponent.md:
--------------------------------------------------------------------------------
1 | ## findComponent
2 |
3 | Retourne le `wrapper` du premier composant Vue correspondant.
4 |
5 | - **Arguments:**
6 |
7 | - `{Component|ref|name} selector`
8 |
9 | - **Retours:** `{Wrapper}`
10 |
11 | - **Exemple:**
12 |
13 | ```js
14 | import { mount } from '@vue/test-utils'
15 | import Foo from './Foo.vue'
16 | import Bar from './Bar.vue'
17 |
18 | const wrapper = mount(Foo)
19 |
20 | const bar = wrapper.findComponent(Bar) // => trouve Bar par instance de composant
21 | expect(bar.exists()).toBe(true)
22 | const barByName = wrapper.findComponent({ name: 'bar' }) // => trouve Bar par `name`
23 | expect(barByName.exists()).toBe(true)
24 | const barRef = wrapper.findComponent({ ref: 'bar' }) // => trouve Bar par `ref`
25 | expect(barRef.exists()).toBe(true)
26 | ```
27 |
--------------------------------------------------------------------------------
/docs/pt/api/wrapper/isVueInstance.md:
--------------------------------------------------------------------------------
1 | ## O método isVueInstance
2 |
3 | ::: warning Aviso de Depreciação
4 | O método `isVueInstance` está depreciado e será removido nos futuros lançamentos.
5 |
6 | Testes que dependem da afirmação do método `isVueInstance` fornecem pouco ou nenhum valor. Nós sugerimos substituir eles por afirmações resolutas.
7 |
8 | Para manter esses testes, uma substituição válida para o método `isVueInstance()` é uma afirmação de veracidade (truthy) do `wrapper.find(...).vm`.
9 | :::
10 |
11 | Afirma que o `Wrapper` é uma instância de Vue.
12 |
13 | - **Retorna:** `{boolean}`
14 |
15 | - **Exemplo:**
16 |
17 | ```js
18 | import { mount } from '@vue/test-utils'
19 | import Foo from './Foo.vue'
20 |
21 | const wrapper = mount(Foo)
22 | expect(wrapper.isVueInstance()).toBe(true)
23 | ```
24 |
--------------------------------------------------------------------------------
/docs/pt/api/wrapper-array/isEmpty.md:
--------------------------------------------------------------------------------
1 | ## O método isEmpty
2 |
3 | ::: warning Aviso de Depreciação
4 | O `isEmpty` está depreciado e será removido nos futuros lançamentos.
5 |
6 | Considere um correspondente personalizado tais como aqueles fornecidos dentro do [jest-dom](https://github.com/testing-library/jest-dom#tobeempty).
7 |
8 | Sempre que estiver usando com `findComponent` acesse o elemento do DOM com `findComponent(Comp).element`
9 | :::
10 |
11 | Afirma que todo `Wrapper` dentro do `WrapperArray` não contém nó filho.
12 |
13 | - **Retorna:** `{boolean}`
14 |
15 | - **Exemplo:**
16 |
17 | ```js
18 | import { mount } from '@vue/test-utils'
19 | import Foo from './Foo.vue'
20 |
21 | const wrapper = mount(Foo)
22 | const divArray = wrapper.findAll('div')
23 | expect(divArray.isEmpty()).toBe(true)
24 | ```
25 |
--------------------------------------------------------------------------------
/docs/pt/api/wrapper-array/isVisible.md:
--------------------------------------------------------------------------------
1 | ## O método isVisible
2 |
3 | Afirma que todo `Wrapper` (envolvedor) dentro do `WrapperArray` está visível.
4 |
5 | Retorna `false` se pelo menos elemento ancestral tiver o estilo `display: none`, `visibility: hidden`, `opacity: 0`, estiver localizado dentro tag `` colapsada ou tiver o atributo `hidden`.
6 |
7 | Isto pode ser usado para afirmar que o componente está oculto pelo `v-show`.
8 |
9 | - **Retorna:** `{boolean}`
10 |
11 | - **Exemplo:**
12 |
13 | ```js
14 | import { mount } from '@vue/test-utils'
15 | import Foo from './Foo.vue'
16 |
17 | const wrapper = mount(Foo)
18 | expect(wrapper.isVisible()).toBe(true)
19 | expect(wrapper.findAll('.is-not-visible').isVisible()).toBe(false)
20 | expect(wrapper.findAll('.is-visible').isVisible()).toBe(true)
21 | ```
22 |
--------------------------------------------------------------------------------
/docs/ru/api/wrapper-array/trigger.md:
--------------------------------------------------------------------------------
1 | ## trigger(eventType [, options ])
2 |
3 | Генерирует событие на каждом `Wrapper` в `WrapperArray` DOM-узле.
4 |
5 | **Обратите внимание, что каждый `Wrapper` должен содержать экземпляр Vue.**
6 |
7 | - **Принимает:**
8 |
9 | - `{string} eventType` **обязательный**
10 | - `{Object} options` **опциональный**
11 |
12 | - **Пример:**
13 |
14 | ```js
15 | import { mount } from '@vue/test-utils'
16 | import sinon from 'sinon'
17 | import Foo from './Foo.vue'
18 |
19 | test('trigger demo', async () => {
20 | const clickHandler = sinon.stub()
21 | const wrapper = mount(Foo, {
22 | propsData: { clickHandler }
23 | })
24 |
25 | const divArray = wrapper.findAll('div')
26 | await divArray.trigger('click')
27 | expect(clickHandler.called).toBe(true)
28 | })
29 | ```
30 |
--------------------------------------------------------------------------------
/test/specs/wrapper/text.spec.js:
--------------------------------------------------------------------------------
1 | import { compileToFunctions } from 'vue-template-compiler'
2 | import { describeWithShallowAndMount } from '~resources/utils'
3 |
4 | describeWithShallowAndMount('text', mountingMethod => {
5 | it('returns text content of wrapper node', () => {
6 | const text = 'test text prop'
7 | const compiled = compileToFunctions(`${text}
`)
8 | const wrapper = mountingMethod(compiled)
9 |
10 | expect(wrapper.text()).toEqual(text)
11 | })
12 |
13 | it('returns trimmed text content of wrapper node', () => {
14 | const text = 'test text prop'
15 | const compiled = compileToFunctions(`
16 |
17 | ${text}
18 |
`)
19 | const wrapper = mountingMethod(compiled)
20 |
21 | expect(wrapper.text()).toEqual(text)
22 | })
23 | })
24 |
--------------------------------------------------------------------------------
/docs/api/wrapper/findAllComponents.md:
--------------------------------------------------------------------------------
1 | ## findAllComponents
2 |
3 | Returns a [`WrapperArray`](../wrapper-array/) of all matching Vue components.
4 |
5 | - **Arguments:**
6 |
7 | - `selector` Use any valid [selector](../selectors.md)
8 |
9 | - **Returns:** `{WrapperArray}`
10 |
11 | - **Example:**
12 |
13 | ```js
14 | import { mount } from '@vue/test-utils'
15 | import Foo from './Foo.vue'
16 | import Bar from './Bar.vue'
17 |
18 | const wrapper = mount(Foo)
19 | const bar = wrapper.findAllComponents(Bar).at(0)
20 | expect(bar.exists()).toBeTruthy()
21 | const bars = wrapper.findAllComponents(Bar)
22 | expect(bars).toHaveLength(1)
23 | ```
24 |
25 | ::: warning Usage with CSS selectors
26 | Using `findAllComponents` with CSS selector is subject to same limitations as [findComponent](./findComponent.md)
27 | :::
28 |
--------------------------------------------------------------------------------
/docs/api/wrapper-array/isVueInstance.md:
--------------------------------------------------------------------------------
1 | ## isVueInstance
2 |
3 | ::: warning Deprecation warning
4 | `isVueInstance` is deprecated and will be removed in future releases.
5 |
6 | Tests relying on the `isVueInstance` assertion provide little to no value. We suggest replacing them with purposeful assertions.
7 |
8 | To keep these tests, a valid replacement for `isVueInstance()` is a truthy assertion of `wrapper.find(...).vm`.
9 | :::
10 |
11 | Assert every `Wrapper` in `WrapperArray` is Vue instance.
12 |
13 | - **Returns:** `{boolean}`
14 |
15 | - **Example:**
16 |
17 | ```js
18 | import { mount } from '@vue/test-utils'
19 | import Foo from './Foo.vue'
20 | import Bar from './Bar.vue'
21 |
22 | const wrapper = mount(Foo)
23 | const barArray = wrapper.findAll(Bar)
24 | expect(barArray.isVueInstance()).toBe(true)
25 | ```
26 |
--------------------------------------------------------------------------------
/docs/zh/api/wrapper/overview.md:
--------------------------------------------------------------------------------
1 | ## overview
2 |
3 | ::: warning 废弃警告
4 | `overview` 已经被废弃并会在未来的发布中被移除。
5 | :::
6 |
7 | 打印一个简单的 `Wrapper` 的总览。
8 |
9 | - **示例：**
10 |
11 | ```js
12 | import { mount } from '@vue/test-utils'
13 | import Component from './Component.vue'
14 |
15 | const wrapper = mount(Component)
16 | wrapper.overview()
17 |
18 | // Console output
19 | /*
20 | Wrapper (Visible):
21 |
22 | Html:
23 |
24 |
My name is Tess Ting
25 |
}>`
12 |
13 | - **Example:**
14 |
15 | ```js
16 | import { mount } from '@vue/test-utils'
17 |
18 | const wrapper = mount(Component)
19 |
20 | wrapper.vm.$emit('foo')
21 | wrapper.vm.$emit('bar', 123)
22 |
23 | /*
24 | wrapper.emittedByOrder() returns the following Array:
25 | [
26 | { name: 'foo', args: [] },
27 | { name: 'bar', args: [123] }
28 | ]
29 | */
30 |
31 | // assert event emit order
32 | expect(wrapper.emittedByOrder().map(e => e.name)).toEqual(['foo', 'bar'])
33 | ```
34 |
--------------------------------------------------------------------------------
/docs/pt/api/wrapper-array/trigger.md:
--------------------------------------------------------------------------------
1 | ## O método trigger
2 |
3 | Aciona um [evento](../../guides/dom-events.md#trigger-events) em todo `Wrapper` (envolvedor) dentro do `WrapperArray` de nó do DOM.
4 |
5 | **Note que todo `Wrapper` deve conter uma instância de Vue.**
6 |
7 | - **Argumentos:**
8 |
9 | - `{string} eventType` **obrigatório**
10 | - `{Object} options` **opcional**
11 |
12 | - **Exemplo:**
13 |
14 | ```js
15 | import { mount } from '@vue/test-utils'
16 | import sinon from 'sinon'
17 | import Foo from './Foo.vue'
18 |
19 | test('trigger demo', async () => {
20 | const clickHandler = sinon.stub()
21 | const wrapper = mount(Foo, {
22 | propsData: { clickHandler }
23 | })
24 |
25 | const divArray = wrapper.findAll('div')
26 | await divArray.trigger('click')
27 | expect(clickHandler.called).toBe(true)
28 | })
29 | ```
30 |
--------------------------------------------------------------------------------
/test/specs/mounting-options/data.spec.js:
--------------------------------------------------------------------------------
1 | import { describeWithShallowAndMount } from '~resources/utils'
2 |
3 | describeWithShallowAndMount('options.data', mountingMethod => {
4 | const TestComponent = {
5 | data: () => ({ foo: 1, bar: 2 }),
6 | template: '
'
7 | }
8 |
9 | it('correctly merges component data and data passed to mount', () => {
10 | const wrapper = mountingMethod(TestComponent, { data: () => ({ foo: 3 }) })
11 |
12 | expect(wrapper.vm.foo).toBe(3)
13 | expect(wrapper.vm.bar).toBe(2)
14 | })
15 |
16 | it('does not fail when data is extracted to local variable', () => {
17 | const defaultData = { foo: 3 }
18 |
19 | const wrapper = mountingMethod(TestComponent, { data: () => defaultData })
20 |
21 | expect(wrapper.vm.foo).toBe(3)
22 | expect(wrapper.vm.bar).toBe(2)
23 | })
24 | })
25 |
--------------------------------------------------------------------------------
/docs/ru/api/wrapper/find.md:
--------------------------------------------------------------------------------
1 | ## find(selector)
2 |
3 | Возвращает `Wrapper` первого DOM-узла или компонента Vue, соответствующего селектору.
4 |
5 | Используйте любой корректный [селектор](../selectors.md).
6 |
7 | - **Принимает:**
8 |
9 | - `{string|Component} selector`
10 |
11 | - **Возвращает:** `{Wrapper}`
12 |
13 | - **Пример:**
14 |
15 | ```js
16 | import { mount } from '@vue/test-utils'
17 | import Foo from './Foo.vue'
18 | import Bar from './Bar.vue'
19 |
20 | const wrapper = mount(Foo)
21 |
22 | const div = wrapper.find('div')
23 | expect(div.is('div')).toBe(true)
24 |
25 | const bar = wrapper.find(Bar)
26 | expect(bar.is(Bar)).toBe(true)
27 |
28 | const barByName = wrapper.find({ name: 'bar' })
29 | expect(barByName.is(Bar)).toBe(true)
30 |
31 | const fooRef = wrapper.find({ ref: 'foo' })
32 | expect(fooRef.is(Foo)).toBe(true)
33 | ```
34 |
--------------------------------------------------------------------------------
/test/specs/wrapper-array/setSelected.spec.js:
--------------------------------------------------------------------------------
1 | import { describeWithShallowAndMount } from '~resources/utils'
2 |
3 | describeWithShallowAndMount('setSelected', mountingMethod => {
4 | it('sets value to the option elements', () => {
5 | const wrapperArray = mountingMethod({
6 | template: `
7 |
8 |
9 |
12 |
13 |
16 |
`
17 | }).findAll('.foo')
18 | const fn = () => wrapperArray.setSelected()
19 | const message =
20 | '[vue-test-utils]: setSelected must be called on a single wrapper, use at(i) to access a wrapper'
21 | expect(fn).toThrow(message)
22 | })
23 | })
24 |
--------------------------------------------------------------------------------
/docs/api/wrapper/contains.md:
--------------------------------------------------------------------------------
1 | ## contains
2 |
3 | ::: warning Deprecation warning
4 | Using `contains` is deprecated and will be removed in future releases. Use [`find`](./find.md) for DOM nodes (using `querySelector` syntax), [`findComponent`](./findComponent.md) for components, or [`wrapper.get`](./get.md) instead.
5 | :::
6 |
7 | Assert `Wrapper` contains an element or component matching [selector](../selectors.md).
8 |
9 | - **Arguments:**
10 |
11 | - `{string|Component} selector`
12 |
13 | - **Returns:** `{boolean}`
14 |
15 | - **Example:**
16 |
17 | ```js
18 | import { mount } from '@vue/test-utils'
19 | import Foo from './Foo.vue'
20 | import Bar from './Bar.vue'
21 |
22 | const wrapper = mount(Foo)
23 | expect(wrapper.contains('p')).toBe(true)
24 | expect(wrapper.contains(Bar)).toBe(true)
25 | ```
26 |
27 | - **See also:** [selectors](../selectors.md)
28 |
--------------------------------------------------------------------------------
/test/resources/components/component-with-watch.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | {{ prop1 }}
4 | {{ prop2 }}
5 |
6 |
7 |
8 |
42 |
--------------------------------------------------------------------------------
/docs/pt/api/wrapper/findAllComponents.md:
--------------------------------------------------------------------------------
1 | ## O método findAllComponents
2 |
3 | Retorna um [`WrapperArray`](../wrapper-array/) de todos componentes de Vue correspondentes.
4 |
5 | - **Argumentos:**
6 |
7 | - O `selector` usa qualquer [seletor](../selectors.md) válido
8 |
9 | - **Retorna:** `{WrapperArray}`
10 |
11 | - **Exemplo:**
12 |
13 | ```js
14 | import { mount } from '@vue/test-utils'
15 | import Foo from './Foo.vue'
16 | import Bar from './Bar.vue'
17 |
18 | const wrapper = mount(Foo)
19 | const bar = wrapper.findAllComponents(Bar).at(0)
20 | expect(bar.exists()).toBeTruthy()
21 | const bars = wrapper.findAllComponents(Bar)
22 | expect(bars).toHaveLength(1)
23 | ```
24 |
25 | ::: warning Uso com seletores de CSS
26 | Ao usar o `findAllComponents` com o seletor de CSS está sujeito as mesmas limitações do [findComponent](api/wrapper/findComponent.md)
27 | :::
28 |
--------------------------------------------------------------------------------
/test/setup/karma.setup.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Since running in the browser, polyfill missing functionality with core-js,
3 | * as well as include the regenerator runtime.
4 | * Please see https://babeljs.io/docs/en/babel-polyfill and https://github.com/zloirock/core-js for more details
5 | */
6 | import 'core-js'
7 | import 'regenerator-runtime/runtime'
8 |
9 | import jest from 'jest-mock'
10 | import expect from 'expect'
11 |
12 | // Add Jest API to the global scope / browser window
13 | // Jasmine will be used as the test runner while leveraging Jest's expect/assertion and mock/stubbing libraries
14 | window.test = window.it
15 | window.test.each = inputs => (testName, test) =>
16 | inputs.forEach(args => window.it(testName, () => test(...args)))
17 | window.test.todo = window.test.skip = () => {
18 | return undefined
19 | }
20 |
21 | window.jest = jest
22 | window.expect = expect
23 |
--------------------------------------------------------------------------------
/docs/.vuepress/public/vueschool.css:
--------------------------------------------------------------------------------
1 | .vueschool {
2 | background-color: #e7ecf3;
3 | padding: 1em 1.25em;
4 | border-radius: 2px;
5 | color: #486491;
6 | position: relative;
7 | display: flex;
8 | }
9 |
10 | .vueschool a {
11 | color: #486491 !important;
12 | position: relative;
13 | padding-left: 36px;
14 | }
15 |
16 | .vueschool a:before {
17 | content: '';
18 | position: absolute;
19 | display: block;
20 | width: 30px;
21 | height: 30px;
22 | top: calc(50% - 15px);
23 | left: -4px;
24 | border-radius: 50%;
25 | background-color: #73abfe;
26 | }
27 |
28 | .vueschool a:after {
29 | content: '';
30 | position: absolute;
31 | display: block;
32 | width: 0;
33 | height: 0;
34 | top: calc(50% - 5px);
35 | left: 8px;
36 | border-top: 5px solid transparent;
37 | border-bottom: 5px solid transparent;
38 | border-left: 8px solid #fff;
39 | }
40 |
--------------------------------------------------------------------------------
/docs/fr/api/enableAutoDestroy.md:
--------------------------------------------------------------------------------
1 | ## enableAutoDestroy(hook)
2 |
3 | - **Arguments:**
4 |
5 | - `{Function} hook`
6 |
7 | - **Usage:**
8 |
9 | `enableAutoDestroy` détruira toutes les instances de `Wrapper` en utilisant la fonction de hook passée (par exemple [`afterEach`](https://jestjs.io/docs/en/api#aftereachfn-timeout)). Après avoir appelé la méthode, vous pouvez revenir au comportement par défaut en appelant la méthode `resetAutoDestroyState`.
10 |
11 | ```js
12 | import { enableAutoDestroy, mount } from '@vue/test-utils'
13 | import Foo from './Foo.vue'
14 |
15 | // appelle wrapper.destroy() après chaque test
16 | enableAutoDestroy(afterEach)
17 |
18 | describe('Foo', () => {
19 | it('renders a div', () => {
20 | const wrapper = mount(Foo)
21 | expect(wrapper.contains('div')).toBe(true)
22 | // pas besoin d'appeler wrapper.destroy() ici
23 | })
24 | })
25 | ```
26 |
--------------------------------------------------------------------------------
/docs/api/wrapper/overview.md:
--------------------------------------------------------------------------------
1 | ## overview
2 |
3 | ::: warning Deprecation warning
4 | `overview` is deprecated and will be removed in future releases.
5 | :::
6 |
7 | Prints a simple overview of the `Wrapper`.
8 |
9 | - **Example:**
10 |
11 | ```js
12 | import { mount } from '@vue/test-utils'
13 | import Component from './Component.vue'
14 |
15 | const wrapper = mount(Component)
16 | wrapper.overview()
17 |
18 | // Console output
19 | /*
20 | Wrapper (Visible):
21 |
22 | Html:
23 |
24 |
My name is Tess Ting
25 |
27 |
`
30 | })
31 |
32 | const wrapperArray = wrapper.findAll('.foo')
33 | expect(wrapper.vm.t1).toEqual('')
34 | expect(wrapper.vm.t2).toEqual('')
35 | wrapperArray.setValue('foo')
36 | expect(wrapper.vm.t1).toEqual('foo')
37 | expect(wrapper.vm.t2).toEqual('foo')
38 | ```
39 |
--------------------------------------------------------------------------------
/docs/fr/api/wrapper/overview.md:
--------------------------------------------------------------------------------
1 | ## overview
2 |
3 | ::: warning Avertissement de déprédation
4 | `overview` est dépréciée et sera supprimée dans les prochaines versions.
5 | :::
6 |
7 | Affiche un simple aperçu du `Wrapper`.
8 |
9 | - **Exemple:**
10 |
11 | ```js
12 | import { mount } from '@vue/test-utils'
13 | import Component from './Component.vue'
14 |
15 | const wrapper = mount(Component)
16 | wrapper.overview()
17 |
18 | // Console output
19 | /*
20 | Wrapper (Visible):
21 |
22 | Html:
23 |
24 |
My name is Tess Ting
25 |
}>`
13 |
14 | - **Exemplo:**
15 |
16 | ```js
17 | import { mount } from '@vue/test-utils'
18 |
19 | const wrapper = mount(Component)
20 |
21 | wrapper.vm.$emit('foo')
22 | wrapper.vm.$emit('bar', 123)
23 |
24 | /*
25 | wrapper.emittedByOrder() retorna o seguinte `Array`:
26 | [
27 | { name: 'foo', args: [] },
28 | { name: 'bar', args: [123] }
29 | ]
30 | */
31 |
32 | // afirma que o evento emite a ordem
33 | expect(wrapper.emittedByOrder().map(e => e.name)).toEqual(['foo', 'bar'])
34 | ```
35 |
--------------------------------------------------------------------------------
/docs/zh/api/wrapper/find.md:
--------------------------------------------------------------------------------
1 | ## find
2 |
3 | ::: warning 废弃警告
4 | 使用 `find` 搜索组件的方式已经被废弃并会被移除。请换用 [`findComponent`](./findComponent.md)。
5 | :::
6 |
7 | 返回匹配选择器的第一个 DOM 节点或 Vue 组件的 `Wrapper`。
8 |
9 | 可以使用任何有效的 DOM 选择器 (使用 `querySelector` 语法)。
10 |
11 | - **参数：**
12 |
13 | - `{string} selector`
14 |
15 | - **返回值：**`{Wrapper}`
16 |
17 | - **示例：**
18 |
19 | ```js
20 | import { mount } from '@vue/test-utils'
21 | import Foo from './Foo.vue'
22 | import Bar from './Bar.vue'
23 |
24 | const wrapper = mount(Foo)
25 |
26 | const div = wrapper.find('div')
27 | expect(div.exists()).toBe(true)
28 |
29 | const byId = wrapper.find('#bar')
30 | expect(byId.element.id).toBe('bar')
31 | ```
32 |
33 | - **注意：**
34 |
35 | - 你可以链式调用 `find`：
36 |
37 | ```js
38 | const button = wrapper.find({ ref: 'testButton' })
39 | expect(button.find('.icon').exists()).toBe(true)
40 | ```
41 |
42 | - **延伸阅读：**[get](./get.md)
43 |
--------------------------------------------------------------------------------
/docs/fr/api/wrapper/emittedByOrder.md:
--------------------------------------------------------------------------------
1 | ## emittedByOrder
2 |
3 | ::: warning Avertissement de déprédation
4 | Le terme `emittedByOrder` est obsolète et sera supprimé dans les prochaines versions.
5 |
6 | Utilisez plutôt `wrapper.emitted`.
7 | :::
8 |
9 | Retourne un tableau contenant des événements personnalisés émis par le `Wrapper` `vm` .
10 |
11 | - **Retours:** `Array<{ name: string, args: Array }>`
12 |
13 | - **Exemple:**
14 |
15 | ```js
16 | import { mount } from '@vue/test-utils'
17 |
18 | const wrapper = mount(Component)
19 |
20 | wrapper.vm.$emit('foo')
21 | wrapper.vm.$emit('bar', 123)
22 |
23 | /*
24 | wrapper.emittedByOrder() renvoie le tableau suivant :
25 | [
26 | { name: 'foo', args: [] },
27 | { name: 'bar', args: [123] }
28 | ]
29 | */
30 |
31 | // Faire valoir l'ordre d'émission d'événement
32 | expect(wrapper.emittedByOrder().map(e => e.name)).toEqual(['foo', 'bar'])
33 | ```
34 |
--------------------------------------------------------------------------------
/docs/ja/api/wrapper/find.md:
--------------------------------------------------------------------------------
1 | ## find(selector)
2 |
3 | ::: warning Deprecation warning
4 | コンポーネントの検索に `find` を使用することは非推奨となり、削除される予定です。代わりに `findComponent` を使用してください。
5 | :::
6 |
7 | 最初の DOM ノードの Wrapper、またはセレクタで一致した Vue コンポーネントを返します。
8 |
9 | 有効な[セレクタ](../selectors.md)を使用してください。
10 |
11 | - **引数:**
12 |
13 | - `{string|Component} selector`
14 |
15 | - **戻り値:** `{Wrapper}`
16 |
17 | - **例:**
18 |
19 | ```js
20 | import { mount } from '@vue/test-utils'
21 | import Foo from './Foo.vue'
22 | import Bar from './Bar.vue'
23 |
24 | const wrapper = mount(Foo)
25 |
26 | const div = wrapper.find('div')
27 | expect(div.is('div')).toBe(true)
28 |
29 | const bar = wrapper.find(Bar)
30 | expect(bar.is(Bar)).toBe(true)
31 |
32 | const barByName = wrapper.find({ name: 'bar' })
33 | expect(barByName.is(Bar)).toBe(true)
34 |
35 | const fooRef = wrapper.find({ ref: 'foo' })
36 | expect(fooRef.is(Foo)).toBe(true)
37 | ```
38 |
--------------------------------------------------------------------------------
/docs/zh/api/wrapper/setMethods.md:
--------------------------------------------------------------------------------
1 | ## setMethods
2 |
3 | ::: warning 废弃警告
4 | `setMethods` 已经被废弃并会在未来的发布中被移除。
5 |
6 | 这里没有明确的路径替换 `setMethods`，因为这取决于你之前的用法。这很容易导致依赖实现细节的琐碎的测试，而这是[不推荐的](https://github.com/vuejs/rfcs/blob/668866fa71d70322f6a7689e88554ab27d349f9c/active-rfcs/0000-vtu-api.md#setmethods)。
7 |
8 | 我们建议重新考虑那些测试。
9 |
10 | 如果是为了存根一个复杂方法，可将其从组件中提取出来并单独测试。如果是为了断言一个方法被调用，可使用你的测试运行器窥探它。
11 | :::
12 |
13 | 设置 `Wrapper` `vm` 的方法并强制更新。
14 |
15 | **注意：该包裹器必须包含一个 Vue 示例。**
16 |
17 | - **参数：**
18 |
19 | - `{Object} methods`
20 |
21 | - **示例：**
22 |
23 | ```js
24 | import { mount } from '@vue/test-utils'
25 | import sinon from 'sinon'
26 | import Foo from './Foo.vue'
27 |
28 | const wrapper = mount(Foo)
29 | const clickMethodStub = sinon.stub()
30 |
31 | wrapper.setMethods({ clickMethod: clickMethodStub })
32 | wrapper.find('button').trigger('click')
33 | expect(clickMethodStub.called).toBe(true)
34 | ```
35 |
--------------------------------------------------------------------------------
/docs/pt/api/wrapper/overview.md:
--------------------------------------------------------------------------------
1 | ## O método overview
2 |
3 | ::: warning Aviso de Depreciação
4 | O método está depreciado e será removido nos futuros lançamentos.
5 | :::
6 |
7 | Imprime um simples resumo do `Wrapper` (envolvedor).
8 |
9 | - **Exemplo:**
10 |
11 | ```js
12 | import { mount } from '@vue/test-utils'
13 | import Component from './Component.vue'
14 |
15 | const wrapper = mount(Component)
16 | wrapper.overview()
17 |
18 | // Saída da consola
19 | /*
20 | Wrapper (Visible):
21 |
22 | Html:
23 |
24 |
My name is Tess Ting
25 |
27 |
`
30 | })
31 |
32 | test('setValue demo', async () => {
33 | const wrapperArray = wrapper.findAll('.foo')
34 | expect(wrapper.vm.t1).toEqual('')
35 | expect(wrapper.vm.t2).toEqual('')
36 | await wrapperArray.setValue('foo')
37 | expect(wrapper.vm.t1).toEqual('foo')
38 | expect(wrapper.vm.t2).toEqual('foo')
39 | })
40 | ```
41 |
--------------------------------------------------------------------------------
/docs/zh/api/wrapper/setChecked.md:
--------------------------------------------------------------------------------
1 | ## setChecked
2 |
3 | 设置 checkbox 或 radio 类 `{{ val() }}
`
21 | }
22 |
23 | const wrapper = mountingMethod(TestComponent, {
24 | methods: {
25 | val() {
26 | return 'methodFromOptions'
27 | }
28 | }
29 | })
30 |
31 | expect(wrapper.html()).toContain('methodFromOptions')
32 | })
33 | })
34 |
--------------------------------------------------------------------------------
/docs/fr/api/wrapper/contains.md:
--------------------------------------------------------------------------------
1 | ## contains
2 |
3 | ::: warning Avertissement de déprédation
4 | L'utilisation de `contains` est déconseillée et sera supprimée dans les prochaines versions. Utilisez [`find`](./find.md) pour les nœuds DOM (en utilisant la syntaxe `querySelector`), [`findComponent`](./findComponent.md) pour les composants, ou [`wrapper.get`](./get.md) à la place.
5 | :::
6 |
7 | Affirmer que le `Wrapper` contient un élément ou un composant correspondant [selector](../selectors.md).
8 |
9 | - **Arguments:**
10 |
11 | - `{string|Component} selector`
12 |
13 | - **Retours:** `{boolean}`
14 |
15 | - **Exemple:**
16 |
17 | ```js
18 | import { mount } from '@vue/test-utils'
19 | import Foo from './Foo.vue'
20 | import Bar from './Bar.vue'
21 |
22 | const wrapper = mount(Foo)
23 | expect(wrapper.contains('p')).toBe(true)
24 | expect(wrapper.contains(Bar)).toBe(true)
25 | ```
26 |
27 | - **Voir aussi :** [selectors](../selectors.md)
28 |
--------------------------------------------------------------------------------
/docs/ja/api/wrapper-array/setValue.md:
--------------------------------------------------------------------------------
1 | ## setValue(value)
2 |
3 | このメソッドは以下のコードのエイリアスです。
4 |
5 | ```js
6 | wrapperArray.wrappers.forEach(wrapper => wrapper.setValue(value))
7 | ```
8 |
9 | - **引数:**
10 |
11 | - `{any} value`
12 |
13 | - **例:**
14 |
15 | ```js
16 | import { mount } from '@vue/test-utils'
17 |
18 | const wrapper = mount({
19 | data() {
20 | return {
21 | t1: '',
22 | t2: ''
23 | }
24 | },
25 | template: `
26 |
27 |
`
30 | })
31 |
32 | test('setValue demo', async () => {
33 | const wrapperArray = wrapper.findAll('.foo')
34 | expect(wrapper.vm.t1).toEqual('')
35 | expect(wrapper.vm.t2).toEqual('')
36 | await wrapperArray.setValue('foo')
37 | expect(wrapper.vm.t1).toEqual('foo')
38 | expect(wrapper.vm.t2).toEqual('foo')
39 | })
40 | ```
41 |
--------------------------------------------------------------------------------
/test/specs/wrapper-array/overview.spec.js:
--------------------------------------------------------------------------------
1 | import { describeWithShallowAndMount } from '~resources/utils'
2 | import { compileToFunctions } from 'vue-template-compiler'
3 | import 'packages/test-utils/src'
4 |
5 | describeWithShallowAndMount('overview', mountingMethod => {
6 | it('throws error if wrapper array contains no items', () => {
7 | const wrapper = mountingMethod(compileToFunctions('
'))
8 | const message = '[vue-test-utils]: overview() cannot be called on 0 items'
9 |
10 | expect(() => wrapper.findAll('p').overview()).toThrow(message)
11 | })
12 |
13 | it('throws error when called on a WrapperArray', () => {
14 | const wrapper = mountingMethod(compileToFunctions(''))
15 | const message =
16 | '[vue-test-utils]: overview() must be called on a single wrapper, use at(i) to access a wrapper'
17 |
18 | expect(() => wrapper.findAll('div').overview()).toThrow(message)
19 | })
20 | })
21 |
--------------------------------------------------------------------------------
/test/specs/wrapper/exists.spec.js:
--------------------------------------------------------------------------------
1 | import { compileToFunctions } from 'vue-template-compiler'
2 | import { describeWithShallowAndMount } from '~resources/utils'
3 |
4 | describeWithShallowAndMount('exists', mountingMethod => {
5 | it('returns true if called on Wrapper', () => {
6 | const compiled = compileToFunctions('
')
7 | const wrapper = mountingMethod(compiled)
8 | expect(wrapper.exists()).toEqual(true)
9 | })
10 |
11 | it('returns false if Wrapper is destroyed', () => {
12 | const compiled = compileToFunctions('
')
13 | const wrapper = mountingMethod(compiled)
14 | wrapper.destroy()
15 | expect(wrapper.exists()).toEqual(false)
16 | })
17 |
18 | it('returns false if called on an ErrorWrapper', () => {
19 | const compiled = compileToFunctions('
')
20 | const wrapper = mountingMethod(compiled)
21 | expect(wrapper.find('does-not-exist').exists()).toEqual(false)
22 | })
23 | })
24 |
--------------------------------------------------------------------------------
/docs/zh/api/wrapper/getComponent.md:
--------------------------------------------------------------------------------
1 | ## getComponent
2 |
3 | 和 [findComponent](./findComponent.md) 工作起来一样，但是如果未匹配到给定的选择器时会抛出错误。当搜索一个可能不存在的元素时你应该使用 `findComponent`。当获取一个应该存在的元素时你应该使用这个方法，并且如果没有找到的话它会提供一则友好的错误信息。
4 |
5 | ```js
6 | import { mount } from '@vue/test-utils'
7 | import Foo from './Foo.vue'
8 | import Bar from './Bar.vue'
9 |
10 | const wrapper = mount(Foo)
11 |
12 | // 和 `wrapper.findComponent` 相似。
13 | // 如果 `getComponent` 没有找到任何元素将会抛出一个而错误。`findComponent` 则不会做任何事。
14 | expect(wrapper.getComponent(Bar)) // => gets Bar by component instance
15 | expect(wrapper.getComponent({ name: 'bar' })) // => gets Bar by `name`
16 | expect(wrapper.getComponent({ ref: 'bar' })) // => gets Bar by `ref`
17 |
18 | expect(() => wrapper.getComponent({ name: 'does-not-exist' }))
19 | .to.throw()
20 | .with.property(
21 | 'message',
22 | "Unable to get a component named 'does-not-exist' within: the actual DOM here...
"
23 | )
24 | ```
25 |
--------------------------------------------------------------------------------