You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
To get a quick taste of using `vue-test-utils`, clone our demo repository with basic setup and install the dependencies:
5
+
Pour avoir un rapide avant-gout de `vue-test-utils`, clonez notre répertoire de démonstration avec l'installation de base puis installez les dépendances :
You will see that the project includes a simple component, `counter.js`:
13
+
Vous allez voir que le projet possède un simple composant, `counter.js`:
14
14
15
15
```js
16
16
// counter.js
@@ -37,80 +37,80 @@ export default {
37
37
}
38
38
```
39
39
40
-
### Mounting Components
40
+
### Montages de composants
41
41
42
-
`vue-test-utils`tests Vue components by mounting them in isolation, mocking the necessary inputs (props, injections and user events) and asserting the outputs (render result, emitted custom events).
42
+
`vue-test-utils`teste les composants Vue en les isolants puis en les montant, il simule les entrées nécessaires (props, injections et évènements utilisateur) et asserte les sorties (le rendu, les évènements émis).
43
43
44
-
Mounted components are returned inside a [Wrapper](./api/wrapper.md), which exposes many convenience methods for manipulating, traversing and querying the underlying Vue component instance.
44
+
Les composants montés sont retournés dans un [Wrapper](./api/wrapper.md), qui expose de nombreuses méthodes pour manipuler, traverser et interroger l'instance du composant Vue en question.
45
45
46
-
You can create wrappers using the `mount` method. Let's create a file called `test.js`:
46
+
Vous pouvez créer des wrappers en utilisant la méthode `mount`. Créons un fichier nommé `test.js`:
47
47
48
48
```js
49
49
// test.js
50
50
51
-
//Import the mount() method from the test utils
52
-
//and the component you want to test
51
+
//Importe la méthode `mount()` depuis test utils
52
+
//et le composant qu'on souhaite tester
53
53
import { mount } from'vue-test-utils'
54
54
importCounterfrom'./counter'
55
55
56
-
//Now mount the component and you have the wrapper
56
+
//On monte le composant et nous voilà avec un wrapper
57
57
constwrapper=mount(Counter)
58
58
59
-
//You can access the actual Vue instance via wrapper.vm
59
+
//On accède à l'instance actuelle de Vue via `wrapper.vm`
60
60
constvm=wrapper.vm
61
61
62
-
//To inspect the wrapper deeper just log it to the console
63
-
//and your adventure with the vue-test-utils begins
62
+
//Pour inspecter le wrapper en profondeur, utilisez console
63
+
//puis votre aventure avec vue-test-utils commence !
64
64
console.log(wrapper)
65
65
```
66
66
67
-
### Test rendered HTML output of the component
67
+
### Tester le contenu du rendu HTML d'un composant
68
68
69
-
Now that we have the wrapper, the first thing we can do is to verify that the rendered HTML output of the component matches what is expected.
69
+
Nous avons maintenant un wrapper, la première chose que l'on peut faire, c'est de vérifier que le contenu du rendu HTML du composant correspond à celui attendu.
70
70
71
71
```js
72
72
import { mount } from'vue-test-utils'
73
73
importCounterfrom'./counter'
74
74
75
75
describe('Counter', () => {
76
-
//Now mount the component and you have the wrapper
76
+
//On monte le composant et nous voilà avec un wrapper
//it's also easy to check for the existence of elements
84
-
it('has a button', () => {
83
+
//c'est aussi très simple de vérifier qu'un élément existe
84
+
it('a un bouton', () => {
85
85
expect(wrapper.contains('button')).toBe(true)
86
86
})
87
87
})
88
88
```
89
89
90
-
Now run the tests with `npm test`. You should see the tests passing.
90
+
On peut maintenant lancer les tests avec `npm test`. Vous devriez voir les tests se lancer et réussir.
91
91
92
-
### Simulating User Interaction
92
+
### Simulation de l'interaction utilisateur
93
93
94
-
Our counter should increment the count when the user clicks the button. To simulate the behavior, we need to first locate the button with`wrapper.find()`, which returns a**wrapper for the button element**. We can then simulate the click by calling`.trigger()`on the button wrapper:
94
+
Notre compteur devrait s'incrémenter quand l'utilisateur clique sur le bouton. Pour simuler ce comportement, on doit tout d'abord localiser le bouton avec`wrapper.find()`, qui retourne un**wrapper pour l'élément bouton**. On peut ensuite simuler un clic en appelant`.trigger()`sur le wrapper du bouton :
95
95
96
96
```js
97
-
it('button click should increment the count', () => {
97
+
it('le clic sur le bouton devrait incrémenter le compteur', () => {
98
98
expect(wrapper.vm.count).toBe(0)
99
99
constbutton=wrapper.find('button')
100
100
button.trigger('click')
101
101
expect(wrapper.vm.count).toBe(1)
102
102
})
103
103
```
104
104
105
-
### What about `nextTick`?
105
+
### Et quid de `nextTick`?
106
106
107
-
Vue batches pending DOM updates and applies them asynchronously to prevent unnecessary re-renders caused by multiple data mutations. This is why in practice we often have to use `Vue.nextTick`to wait until Vue has performed the actual DOM update after we trigger some state change.
107
+
Vue groupe les mises à jour du DOM en attentes puis les appliquent de façon asynchrone pour prévenir d'éventuels multiples rendus causés par de multiples mutations de données. C'est pourquoi en pratique, on a souvent à utiliser `Vue.nextTick`pour attendre que Vue modifie le DOM actuel après avoir lancé quelques changements d'état.
108
108
109
-
To simplify usage, `vue-test-utils`applies all updates synchronously so you don't need to use`Vue.nextTick`to wait for DOM updates in your tests.
109
+
Pour simplifier cela, `vue-test-utils`applique toutes les mises à jour de façon synchrone afin que vous n'ayez pas besoin d'utiliser`Vue.nextTick`pour attendre des mises à jour du DOM dans vos tests.
110
110
111
-
*Note: `nextTick`is still necessary when you need to explictly advance the event loop, for operations such as asynchronous callbacks or promise resolution.*
111
+
*Note: `nextTick`est toujours nécessaire quand vous souhaitez explicitement faire avancer la boucle des évènements, pour des opérations telles que des fonctions de rappel ou des résolutions de promesses.*
112
112
113
-
## What's Next
113
+
## Et après ?
114
114
115
-
-Integrate`vue-test-utils`into your project by [choosing a test runner](./choosing-a-test-runner.md)
116
-
-Learn more about [common techniques when writing tests](./common-tips.md)
115
+
-Intégrez`vue-test-utils`dans votre projet en [choisissant votre lanceur de tests](./choosing-a-test-runner.md)
116
+
-En apprendre plus sur les [techniques et astuces pour écrire des tests](./common-tips.md)
0 commit comments