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
Copy file name to clipboardExpand all lines: docs/en/guides/getting-started.md
+8-8Lines changed: 8 additions & 8 deletions
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3
## Installation
4
4
5
-
Pour avoir un rapide avantgoût de `vue-test-utils`, clonez notre répertoire de démontration avec l'installation de base puis installez les dépendances :
5
+
Pour avoir un rapide avant-goût de `vue-test-utils`, clonez notre répertoire de démonstration avec l'installation de base puis installez les dépendances :
`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
-
Les composants montés sont retournés dans un [Wrapper](./api/wrapper.md), qui expose en quantité des méthodes pour manipuler, traverser et interroger l'instance du composant Vue en question.
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
46
Vous pouvez créer des wrappers en utilisant la méthode `mount`. Créons un fichier nommé `test.js` :
// Pour inspecter le wrapper en profondeur, utilisez console
63
-
// puis l'aventure avec vue-test-utils commence !
63
+
// puis votre aventure avec vue-test-utils commence !
64
64
console.log(wrapper)
65
65
```
66
66
67
67
### Tester le contenu du rendu HTML d'un composant
68
68
69
-
Nous avons maintenant un wrapper, la première chose que l'on peut faireest de vérifier que le contenu du rendu HTML du composant correspond à ce qu'il est censé être.
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.
// c'est aussi très simple de vérifier qu'un élement existe
83
+
// c'est aussi très simple de vérifier qu'un élément existe
84
84
it('a un bouton', () => {
85
85
expect(wrapper.contains('button')).toBe(true)
86
86
})
@@ -89,7 +89,7 @@ describe('Counter', () => {
89
89
90
90
On peut maintenant lancer les tests avec `npm test`. Vous devriez voir les tests se lancer et réussir.
91
91
92
-
### Simuler des interactions utilisateur
92
+
### Simulation de l'interaction utilisateur
93
93
94
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
@@ -104,13 +104,13 @@ it('le clic sur le bouton devrait incrémenter le compteur', () => {
104
104
105
105
### Et quid de `nextTick` ?
106
106
107
-
Vue groupe les mises à jour du DOM en attentes puis les appliquent de façon asynchrone pour prévenir d'éventuel 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.
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
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
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
113
## Et après ?
114
114
115
-
-Intégrer`vue-test-utils` dans votre projet en [choisissant votre lanceur de tests](./choosing-a-test-runner.md)
115
+
-Intégrez`vue-test-utils` dans votre projet en [choisissant votre lanceur de tests](./choosing-a-test-runner.md)
116
116
- En apprendre plus sur les [techniques et astuces pour écrire des tests](./common-tips.md)
0 commit comments