Skip to content
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

API: Wrapper #22

Open
wants to merge 10 commits into
base: working
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 2 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é, un nœud virtuel et des méthodes pour les tester.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Un Wrapper est un objet qui contient un composant monté, un nœud virtuel et des méthodes pour les tester.
=>
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.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

c'est une instance de Vue.
=>
c'est une instance de `Vue`.

`element` `HTMLElement`: le nœud principal du DOM du `wrapper`.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

le nœud principal racine du DOM du

`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 par l'instance de Vue `vm` de `Wrapper`.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

contenant des évènements émis
=>
contenant des évènements émis personnalisés


- **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'])
```
12 changes: 6 additions & 6 deletions docs/en/api/wrapper/exists.md
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
# `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 appellé sur un `Wrapper` ou `WrapperArray` vide.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

appellé => appelé


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

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

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

const wrapper = mount(Foo)
expect(wrapper.exists()).toBe(true)
expect(wrapper.find('does-not-exist').exists()).toBe(false)
expect(wrapper.find('existe-pas').exists()).toBe(false)

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Attention, j'ai un doute sur cette traduction : j'ai peur que l'assertion ne fonctionne plus si on traduit 'does-not-exist'

expect(wrapper.findAll('div').exists()).toBe(true)
expect(wrapper.findAll('does-not-exist').exists()).toBe(false)
expect(wrapper.findAll('existe-pas').exists()).toBe(false)

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Attention, j'ai un doute sur cette traduction : j'ai peur que l'assertion ne fonctionne plus si on traduit 'does-not-exist'

```
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` si il ne contient pas une instance de Vue.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

si il ne contient pas une instance de Vue.
=>
s'il ne contient pas une instance de Vue.


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

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

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