Skip to content

API: Wrapper #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 10 commits into
base: working
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions docs/en/api/wrapper/README.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
# `Wrapper`

<p><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/vue-test-utils" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>Vue Test Utils is a wrapper based API.</p>
`vue-test-utils` est une API basée sur un `wrapper`.

A `Wrapper` is an object that contains a mounted component or vnode and methods to test the component or vnode.
Un `Wrapper` est un objet qui contient un composant monté ou un nœud virtuel et des méthodes pour les tester.

- **Properties:**
- **Propriétés :**

`vm` `Component`: this is the `Vue` instance. You can access all the [instance methods and properties of a vm](https://vuejs.org/v2/api/#Instance-Properties) with `wrapper.vm`. This only exists on Vue component wrappers
`element` `HTMLElement`: the root DOM node of the wrapper
`options` `Object`: Object containing Vue Test Utils options passed to `mount` or `shallow`
`options.attachedToDom` `Boolean`: True if `attachToDom` was passed to `mount` or `shallow`
`vm` `Component`: c'est une instance de `Vue`. Vous pouvez accéder à toutes les [méthodes et propriétés de l'instance](https://vuejs.org/v2/api/#Instance-Properties) avec `wrapper.vm`. Cela existe uniquement sur les `wrappers` de composants Vue.
`element` `HTMLElement`: le nœud racine du DOM du `wrapper`.
`options` `Object`: objet contenant les options de `vue-test-utils` passées à `mount` ou `shallow`.
`options.attachedToDom` `Boolean`: `true` si `attachToDom` est passé à `mount` ou `shallow`.

- **Methods:**
- **Méthodes :**

There is a detailed list of methods in the wrapper section of the docs.
Il y a une liste détaillé des méthodes dans la section `wrapper` de la documentation.
12 changes: 6 additions & 6 deletions docs/en/api/wrapper/contains.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
# `contains(selector)`

<p><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/vue-test-utils" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>Assert `Wrapper` contains an element or component matching [selector](../selectors.md).</p>
Asserte que `Wrapper` contient un élément ou un composant correspondant au [sélecteur](../selectors.md).

- **Arguments:**
- `{string|Component} selector`
- **Paramètres :**
- `{string|Component} selector : un sélecteur`

- **Returns:** `{boolean}`
- **Retourne :** `{boolean}`

- **Example:**
- **Exemple :**

```js
import { mount } from '@vue/test-utils'
Expand All @@ -19,4 +19,4 @@ expect(wrapper.contains('p')).toBe(true)
expect(wrapper.contains(Bar)).toBe(true)
```

- **See also:** [selectors](../selectors.md)
- **Voir aussi :** [sélecteurs](../selectors.md)
14 changes: 7 additions & 7 deletions docs/en/api/wrapper/emitted.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# `emitted()`

<p><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/vue-test-utils" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>Return an object containing custom events emitted by the `Wrapper` `vm`.</p>
Retourne un objet contenant des évènements émis par l'instance de Vue `vm` du `Wrapper`.

- **Returns:** `{ [name: string]: Array<Array<any>> }`
- **Retourne :** `{ [name: string]: Array<Array<any>> }`

- **Example:**
- **Exemple :**

```js
import { mount } from '@vue/test-utils'
Expand All @@ -15,19 +15,19 @@ wrapper.vm.$emit('foo')
wrapper.vm.$emit('foo', 123)

/*
wrapper.emitted() returns the following object:
wrapper.emitted() retourne l'objet suivant :
{
foo: [[], [123]]
}
*/

// assert event has been emitted
// asserte que l'évènement est émis
expect(wrapper.emitted().foo).toBeTruthy()

// assert event count
// asserte que l'évènement est compté
expect(wrapper.emitted().foo.length).toBe(2)

// assert event payload
// asserte le contenu de l'évènement
expect(wrapper.emitted().foo[1]).toEqual([123])
```

Expand Down
10 changes: 5 additions & 5 deletions docs/en/api/wrapper/emittedByOrder.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# `emittedByOrder()`

<p><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/vue-test-utils" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>Return an Array containing custom events emitted by the `Wrapper` `vm`.</p>
Retourne un tableau contenant des évènements émis personnalisés par l'instance de Vue `vm` de `Wrapper`.

- **Returns:** `Array<{ name: string, args: Array<any> }>`
- **Retourne :** `Array<{ name: string, args: Array<any> }>`

- **Example:**
- **Exemple :**

```js
import { mount } from '@vue/test-utils'
Expand All @@ -15,13 +15,13 @@ wrapper.vm.$emit('foo')
wrapper.vm.$emit('bar', 123)

/*
wrapper.emittedByOrder() returns the following Array:
wrapper.emittedByOrder() retourne le tableau suivant :
[
{ name: 'foo', args: [] },
{ name: 'bar', args: [123] }
]
*/

// assert event emit order
// asserte l'ordre des émissions
expect(wrapper.emittedByOrder().map(e => e.name)).toEqual(['foo', 'bar'])
```
8 changes: 4 additions & 4 deletions docs/en/api/wrapper/exists.md
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
# `exists()`

<p><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/vue-test-utils" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>Assert `Wrapper` or `WrapperArray` exists.</p>
Asserte que `Wrapper` ou `WrapperArray` existent.

Returns false if called on an empty `Wrapper` or `WrapperArray`.
Retourne `false` si appelé sur un `Wrapper` ou `WrapperArray` vide.

- **Returns:** `{boolean}`
- **Retourne :** `{boolean}`

- **Example:**
- **Exemple :**

```js
import { mount } from '@vue/test-utils'
Expand Down
14 changes: 7 additions & 7 deletions docs/en/api/wrapper/find.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
# `find(selector)`

<p><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/vue-test-utils" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>Returns [`Wrapper`](README.md) of first DOM node or Vue component matching selector.</p>
Retourne un [`Wrapper`](README.md) du premier nœud du DOM ou le composant Vue correspondant au sélecteur.

Use any valid [selector](../selectors.md).
Utilise n'importe quels [sélecteurs valides](../selectors.md).

- **Arguments:**
- `{string|Component} selector`
- **Paramètres **
- `{string|Component} selector : un sélecteur`

- **Returns:** `{Wrapper}`
- **Retourne :** `{Wrapper}`

- **Example:**
- **Exemple :**

```js
import { mount } from '@vue/test-utils'
Expand All @@ -23,4 +23,4 @@ const bar = wrapper.find(Bar)
expect(bar.is(Bar)).toBe(true)
```

- **See also:** [Wrapper](README.md)
- **Voir aussi :** [Wrapper](README.md)
14 changes: 7 additions & 7 deletions docs/en/api/wrapper/findAll.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
# `findAll(selector)`

<p><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/vue-test-utils" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>Returns a [`WrapperArray`](../wrapper-array/README.md).</p>
Retourne un [`WrapperArray`](../wrapper-array/README.md) de [Wrappers](README.md).

Use any valid [selector](../selectors.md).
Utilise n'importe quels [sélecteurs valides](../selectors.md).

- **Arguments:**
- `{string|Component} selector`
- **Paramètres :**
- `{string|Component} selector : un sélecteur`

- **Returns:** `{WrapperArray}`
- **Retourne :** `{WrapperArray}`

- **Example:**
- **Exemple :**

```js
import { mount } from '@vue/test-utils'
Expand All @@ -23,4 +23,4 @@ const bar = wrapper.findAll(Bar).at(0)
expect(bar.is(Bar)).toBe(true)
```

- **See also:** [Wrapper](README.md)
- **Voir aussi :** [Wrapper](README.md)
16 changes: 8 additions & 8 deletions docs/en/api/wrapper/hasAttribute.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
# hasAttribute(attribute, value)

<p><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/vue-test-utils" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>Assert `Wrapper` DOM node has attribute matching value.</p>
Asserte que le DOM du `Wrapper` a l'attribut avec la valeur correspondate.

Returns `true` if `Wrapper` DOM node contains attribute with matching value.
Retourne `true` si le nœud du DOM du `Wrapper` contient un attribut avec la bonne valeur.

- **Arguments:**
- **Paramètres :**
- `{string} attribute`
- `{string} value`

- **Returns:** `{boolean}`
- **Retourne :** `{boolean}`

- **Example:**
- **Exemple :**

```js
import { mount } from 'vue-test-utils'
Expand All @@ -21,9 +21,9 @@ const wrapper = mount(Foo)
expect(wrapper.hasAttribute('id', 'foo')).toBe(true)
```

- **Alternative:**
- **Alternative :**

You could get the attribute from the `Wrapper.element` to have a value based assertion:
Vous pouvez récuperer l'attribut depuis `Wrapper.element` pour avoir une assertion basée sur une valeur.

```js
import { mount } from 'vue-test-utils'
Expand All @@ -34,4 +34,4 @@ const wrapper = mount(Foo)
expect(wrapper.element.getAttribute('id')).toBe('foo')
```

This makes for a more informative assertion error.
Cela produit une erreur d'assertion plus informative.
10 changes: 5 additions & 5 deletions docs/en/api/wrapper/hasClass.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
# hasClass(className)

<p><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/vue-test-utils" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>Assert `Wrapper` DOM node has class contains `className`.</p>
Asserte que le DOM du `Wrapper` contient une classe nommé `className`.

Returns `true` if `Wrapper` DOM node contains the class.
Retourne `true` si le nœud du DOM du `Wrapper` contient la classe.

- **Arguments:**
- **Paramètres :**
- `{string} className`

- **Returns:** `{boolean}`
- **Retourne :** `{boolean}`

- **Example:**
- **Exemple :**

```js
import { mount } from 'vue-test-utils'
Expand Down
12 changes: 6 additions & 6 deletions docs/en/api/wrapper/hasProp.md
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
# hasProp(prop, value)

<p><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/vue-test-utils" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>Assert `Wrapper` `vm` has `prop` matching `value`.</p>
Asserte que l'instance de Vue `vm` du `Wrapper` contient une `prop` de valeur `value`.

Returns `true` if `Wrapper` `vm` has `prop` matching `value`.
Retourne `true` si l'instance de Vue `vm` du `Wrapper` contient une `prop` de valeur `value`.


**Note: the Wrapper must contain a Vue instance.**
**Note : le Wrapper doit posséder une instance de Vue.**

- **Arguments:**
- **Paramètres :**
- `{string} prop`
- `{any} value`

- **Returns:** `{boolean}`
- **Retourne :** `{boolean}`

- **Example:**
- **Exemple :**

```js
import { mount } from 'vue-test-utils'
Expand Down
12 changes: 6 additions & 6 deletions docs/en/api/wrapper/hasStyle.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
# hasStyle(style, value)

<p><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/vue-test-utils" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>Assert `Wrapper` DOM node has style matching value.</p>
Asserte que le DOM du `Wrapper` contient un style avec une certaine valeur.

Returns `true` if `Wrapper` DOM node has `style` matching `value`.
Retourne `true` si le nœud du DOM du `Wrapper` contient un `style` correspondant à `value`.

**Note will only detect inline styles when running in `jsdom`.**
**Note : cela va uniquement détecter les styles `inlines` quand ils fonctionnent avec `jsdom`.**

- **Arguments:**
- **Paramètres :**
- `{string} style`
- `{string} value`

- **Returns:** `{boolean}`
- **Retourne :** `{boolean}`

- **Example:**
- **Exemple :**

```js
import { mount } from 'vue-test-utils'
Expand Down
6 changes: 3 additions & 3 deletions docs/en/api/wrapper/html.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# `html()`

<p><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/vue-test-utils" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>Returns HTML of `Wrapper` DOM node as a string.</p>
Retourne l'HTML du DOM du `Wrapper` en string.

- **Returns:** `{string}`
- **Retourne :** `{string}`

- **Example:**
- **Exemple :**

```js
import { mount } from '@vue/test-utils'
Expand Down
10 changes: 5 additions & 5 deletions docs/en/api/wrapper/is.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
# `is(selector)`

<p><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/vue-test-utils" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>Assert `Wrapper` DOM node or `vm` matches [selector](../selectors.md).</p>
Asserte que le DOM du `Wrapper` ou que l'instance de Vue `vm` correspond au [sélecteur](../selectors.md).

- **Arguments:**
- `{string|Component} selector`
- **Paramètres :**
- `{string|Component} selector : un sélecteur`

- **Returns:** `{boolean}`
- **Retourne :** `{boolean}`

- **Example:**
- **Exemple :**

```js
import { mount } from '@vue/test-utils'
Expand Down
6 changes: 3 additions & 3 deletions docs/en/api/wrapper/isEmpty.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# `isEmpty()`

<p><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/vue-test-utils" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>Assert `Wrapper` does not contain child node.</p>
Asserte que le `Wrapper` ne contient pas de nœuds enfants.

- **Returns:** `{boolean}`
- **Retourne :** `{boolean}`

- **Example:**
- **Exemple :**

```js
import { mount } from '@vue/test-utils'
Expand Down
6 changes: 3 additions & 3 deletions docs/en/api/wrapper/isVueInstance.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# `isVueInstance()`

<p><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/vue-test-utils" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>Assert `Wrapper` is Vue instance.</p>
Asserte que `Wrapper` contient une instance de Vue.

- **Returns:** `{boolean}`
- **Retourne :** `{boolean}`

- **Example:**
- **Exemple :**

```js
import { mount } from '@vue/test-utils'
Expand Down
6 changes: 3 additions & 3 deletions docs/en/api/wrapper/name.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# `name()`

<p><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/vue-test-utils" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>Returns component name if `Wrapper` contains a Vue instance, or the tag name of `Wrapper` DOM node if `Wrapper` does not contain a Vue instance.</p>
Retourne le nom du composant si le `Wrapper` contient une instance de Vue. Il retourne le nom de la balise du nœud du DOM du `Wrapper` s'il ne contient pas une instance de Vue.

- **Returns:** `{string}`
- **Retourne :** `{string}`

- **Example:**
- **Exemple :**

```js
import { mount } from '@vue/test-utils'
Expand Down
10 changes: 5 additions & 5 deletions docs/en/api/wrapper/setData.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
# `setData(data)`

<p><strong>⚠Cette page est actuellement en cours de traduction française. Vous pouvez repasser plus tard ou <a href="https://github.com/vuejs-fr/vue-test-utils" target="_blank">participer à la traduction</a> de celle-ci dès maintenant !</strong></p><p>Sets `Wrapper` `vm` data and forces update.</p>
Assigne les données de l'instance de Vue `vm` du `Wrapper` `vm` et force la mise à jour.

**Note the Wrapper must contain a Vue instance.**
**Note : le `Wrapper` doit contenir une instance de Vue.**

- **Arguments:**
- `{Object} data`
- **Paramètres :**
- `{Object} data : données`

- **Example:**
- **Exemple :**

```js
import { mount } from '@vue/test-utils'
Expand Down
Loading