From 918c75fa87f0de7cabd32557d9f93555cfb270c6 Mon Sep 17 00:00:00 2001 From: Yaty Date: Sun, 15 Oct 2017 00:06:04 +0200 Subject: [PATCH 1/5] =?UTF-8?q?getting-started.md:=20traduction,=20premi?= =?UTF-8?q?=C3=A8re=20it=C3=A9ration?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/en/guides/getting-started.md | 62 +++++++++++++++---------------- 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/docs/en/guides/getting-started.md b/docs/en/guides/getting-started.md index 5c023d6dc..b70e74952 100644 --- a/docs/en/guides/getting-started.md +++ b/docs/en/guides/getting-started.md @@ -1,8 +1,8 @@ -# Getting Started +# Pour commencer -## Setup +## Installation -To get a quick taste of using `vue-test-utils`, clone our demo repository with basic setup and install the dependencies: +Pour avoir un rapide avant goût de `vue-test-utils`, clonez notre répertoire de démontration avec l'installation de base puis installez les dépendances : ``` bash git clone https://github.com/vuejs/vue-test-utils-getting-started @@ -10,7 +10,7 @@ cd vue-test-utils-getting-started npm install ``` -You will see that the project includes a simple component, `counter.js`: +Vous allez voir que le projet possède un simple composant, `counter.js` : ```js // counter.js @@ -37,64 +37,64 @@ export default { } ``` -### Mounting Components +### Montages de composants -`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). +`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). -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. +Les composants montés sont retournés sous un [Wrapper](./api/wrapper.md), qui expose en quantité des méthodes pour manipuler, traverser et interroger l'instance du composant Vue en question. -You can create wrappers using the `mount` method. Let's create a file called `test.js`: +Vous pouvez créer des wrappers en utilisant la méthode `mount`. Créons un fichier nommé `test.js` : ```js // test.js -// Import the mount() method from the test utils -// and the component you want to test +// Importe la méthode mount() depuis test utils +// et le composant qu'on souhaite tester import { mount } from 'vue-test-utils' import Counter from './counter' -// Now mount the component and you have the wrapper +// On monte le composant et nous voilà avec un wrapper const wrapper = mount(Counter) -// You can access the actual Vue instance via wrapper.vm +// On accède à l'instance actuelle de Vue via wrapper.vm const vm = wrapper.vm -// To inspect the wrapper deeper just log it to the console -// and your adventure with the vue-test-utils begins +// Pour inspecter le wrapper en profondeur, utilisez console +// puis l'aventure avec vue-test-utils commence ! console.log(wrapper) ``` -### Test rendered HTML output of the component +### Tester le contenu du rendu HTML d'un composant -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. +Nous avons maintenant un wrapper, la première chose que l'on peut faire et de vérifier que le contenu du rendu HTML du composant correspond à ce qu'il est sensé être. ```js import { mount } from 'vue-test-utils' import Counter from './counter' describe('Counter', () => { - // Now mount the component and you have the wrapper + // On monte le composant et nous voilà avec un wrapper const wrapper = mount(Counter) - it('renders the correct markup', () => { + it('fait le rendu correctement', () => { expect(wrapper.html()).toContain('0') }) - // it's also easy to check for the existence of elements - it('has a button', () => { + // c'est auss très simple de vérifier qu'un élement existe + it('a un bouton', () => { expect(wrapper.contains('button')).toBe(true) }) }) ``` -Now run the tests with `npm test`. You should see the tests passing. +On peut maintenant lancer les tests avec `npm test`. Vous devriez voir les tests se lancer et réussir. -### Simulating User Interaction +### Simuler des interactions utilisateur -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: +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 : ```js -it('button click should increment the count', () => { +it('le clic sur le bouton devrait incrémenter le compteur', () => { expect(wrapper.vm.count).toBe(0) const button = wrapper.find('button') button.trigger('click') @@ -102,15 +102,15 @@ it('button click should increment the count', () => { }) ``` -### What about `nextTick`? +### Et quid de `nextTick` ? -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. +Vue groupe les mises à jour du DOM en attentes puis les appliquent de façon asynchrone pour prévenir d'éventuel multiples rendus causé 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. -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. +Pour simplifier cela, `vue-test-utils` applique toutes les mises à jour de façon synchrone afin que vous n'ayez pas besin d'utiliser `Vue.nextTick` pour attendre des mises à jour du DOM dans vos tests. -*Note: `nextTick` is still necessary when you need to explictly advance the event loop, for operations such as asynchronous callbacks or promise resolution.* +*Note : `nextTick` est encore 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 promise.* -## What's Next +## Et après ? -- Integrate `vue-test-utils` into your project by [choosing a test runner](./choosing-a-test-runner.md) -- Learn more about [common techniques when writing tests](./common-tips.md) +- Intégrer `vue-test-utils` dans votre projet en [choisissant votre lanceur de tests](./choosing-a-test-runner.md) +- En apprendre plus sur les [techniques et astuces pour écrire des tests](./common-tips.md) From 3b31478fd9c20ebe2c4e8ef0cd65a6f17f124c8a Mon Sep 17 00:00:00 2001 From: Yaty Date: Mon, 16 Oct 2017 21:47:19 +0200 Subject: [PATCH 2/5] =?UTF-8?q?Corrections=20suite=20=C3=A0=20la=20review?= =?UTF-8?q?=20de=20Haeresis?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/en/guides/getting-started.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/en/guides/getting-started.md b/docs/en/guides/getting-started.md index b70e74952..68222ea14 100644 --- a/docs/en/guides/getting-started.md +++ b/docs/en/guides/getting-started.md @@ -41,14 +41,14 @@ export default { `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). -Les composants montés sont retournés sous un [Wrapper](./api/wrapper.md), qui expose en quantité des méthodes pour manipuler, traverser et interroger l'instance du composant Vue en question. +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. Vous pouvez créer des wrappers en utilisant la méthode `mount`. Créons un fichier nommé `test.js` : ```js // test.js -// Importe la méthode mount() depuis test utils +// Importe la méthode `mount()` depuis test utils // et le composant qu'on souhaite tester import { mount } from 'vue-test-utils' import Counter from './counter' @@ -56,7 +56,7 @@ import Counter from './counter' // On monte le composant et nous voilà avec un wrapper const wrapper = mount(Counter) -// On accède à l'instance actuelle de Vue via wrapper.vm +// On accède à l'instance actuelle de Vue via `wrapper.vm` const vm = wrapper.vm // Pour inspecter le wrapper en profondeur, utilisez console @@ -66,7 +66,7 @@ console.log(wrapper) ### Tester le contenu du rendu HTML d'un composant -Nous avons maintenant un wrapper, la première chose que l'on peut faire et de vérifier que le contenu du rendu HTML du composant correspond à ce qu'il est sensé être. +Nous avons maintenant un wrapper, la première chose que l'on peut faire est de vérifier que le contenu du rendu HTML du composant correspond à ce qu'il est censé être. ```js import { mount } from 'vue-test-utils' @@ -80,7 +80,7 @@ describe('Counter', () => { expect(wrapper.html()).toContain('0') }) - // c'est auss très simple de vérifier qu'un élement existe + // c'est aussi très simple de vérifier qu'un élement existe it('a un bouton', () => { expect(wrapper.contains('button')).toBe(true) }) @@ -104,11 +104,11 @@ it('le clic sur le bouton devrait incrémenter le compteur', () => { ### Et quid de `nextTick` ? -Vue groupe les mises à jour du DOM en attentes puis les appliquent de façon asynchrone pour prévenir d'éventuel multiples rendus causé 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. +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. -Pour simplifier cela, `vue-test-utils` applique toutes les mises à jour de façon synchrone afin que vous n'ayez pas besin d'utiliser `Vue.nextTick` pour attendre des mises à jour du DOM dans vos tests. +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. -*Note : `nextTick` est encore 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 promise.* +*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.* ## Et après ? From 092b5b7abc024be39e33cc6a12442e337f0f346c Mon Sep 17 00:00:00 2001 From: Yaty Date: Mon, 16 Oct 2017 22:06:52 +0200 Subject: [PATCH 3/5] corrections --- docs/en/guides/getting-started.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/en/guides/getting-started.md b/docs/en/guides/getting-started.md index 68222ea14..4b721d19d 100644 --- a/docs/en/guides/getting-started.md +++ b/docs/en/guides/getting-started.md @@ -39,7 +39,7 @@ export default { ### Montages de composants -`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). +`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). 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. @@ -108,7 +108,7 @@ Vue groupe les mises à jour du DOM en attentes puis les appliquent de façon as 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. -*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.* +*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.* ## Et après ? From 0d4cfb7a8fd9d52b34ed667b1020ef3be7c84265 Mon Sep 17 00:00:00 2001 From: Hugo Da Roit Date: Tue, 17 Oct 2017 21:36:38 +0200 Subject: [PATCH 4/5] corrections --- docs/en/guides/getting-started.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/docs/en/guides/getting-started.md b/docs/en/guides/getting-started.md index 4b721d19d..9fbe6d4fa 100644 --- a/docs/en/guides/getting-started.md +++ b/docs/en/guides/getting-started.md @@ -2,7 +2,7 @@ ## Installation -Pour avoir un rapide avant goût de `vue-test-utils`, clonez notre répertoire de démontration avec l'installation de base puis installez les dépendances : +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 : ``` bash git clone https://github.com/vuejs/vue-test-utils-getting-started @@ -41,7 +41,7 @@ export default { `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). -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. +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. Vous pouvez créer des wrappers en utilisant la méthode `mount`. Créons un fichier nommé `test.js` : @@ -60,13 +60,13 @@ const wrapper = mount(Counter) const vm = wrapper.vm // Pour inspecter le wrapper en profondeur, utilisez console -// puis l'aventure avec vue-test-utils commence ! +// puis votre aventure avec vue-test-utils commence ! console.log(wrapper) ``` ### Tester le contenu du rendu HTML d'un composant -Nous avons maintenant un wrapper, la première chose que l'on peut faire est de vérifier que le contenu du rendu HTML du composant correspond à ce qu'il est censé être. +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. ```js import { mount } from 'vue-test-utils' @@ -80,7 +80,7 @@ describe('Counter', () => { expect(wrapper.html()).toContain('0') }) - // c'est aussi très simple de vérifier qu'un élement existe + // c'est aussi très simple de vérifier qu'un élément existe it('a un bouton', () => { expect(wrapper.contains('button')).toBe(true) }) @@ -89,7 +89,7 @@ describe('Counter', () => { On peut maintenant lancer les tests avec `npm test`. Vous devriez voir les tests se lancer et réussir. -### Simuler des interactions utilisateur +### Simulation de l'interaction utilisateur 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 : @@ -104,7 +104,7 @@ it('le clic sur le bouton devrait incrémenter le compteur', () => { ### Et quid de `nextTick` ? -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. +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. 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. @@ -112,5 +112,5 @@ Pour simplifier cela, `vue-test-utils` applique toutes les mises à jour de faç ## Et après ? -- Intégrer `vue-test-utils` dans votre projet en [choisissant votre lanceur de tests](./choosing-a-test-runner.md) +- Intégrez `vue-test-utils` dans votre projet en [choisissant votre lanceur de tests](./choosing-a-test-runner.md) - En apprendre plus sur les [techniques et astuces pour écrire des tests](./common-tips.md) From 5baefff963ed55cc35e95458197fc3c2132c5c86 Mon Sep 17 00:00:00 2001 From: Hugo Da Roit Date: Wed, 18 Oct 2017 21:14:27 +0200 Subject: [PATCH 5/5] correction --- docs/en/guides/getting-started.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/en/guides/getting-started.md b/docs/en/guides/getting-started.md index 9fbe6d4fa..c007c84f8 100644 --- a/docs/en/guides/getting-started.md +++ b/docs/en/guides/getting-started.md @@ -2,7 +2,7 @@ ## Installation -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 : +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 : ``` bash git clone https://github.com/vuejs/vue-test-utils-getting-started