From d41524a434f6e255142e515953cf034491e8f8d7 Mon Sep 17 00:00:00 2001
From: Bart Ledoux <ledouxb@gmail.com>
Date: Sat, 7 Apr 2018 12:07:43 -0500
Subject: [PATCH 1/5] traduction du tutoriel des tests unitaires.
---
.../cookbook/unit-testing-vue-components.md | 124 +++++++++---------
1 file changed, 62 insertions(+), 62 deletions(-)
diff --git a/src/v2/cookbook/unit-testing-vue-components.md b/src/v2/cookbook/unit-testing-vue-components.md
index 39d5096348..07430a7c30 100644
--- a/src/v2/cookbook/unit-testing-vue-components.md
+++ b/src/v2/cookbook/unit-testing-vue-components.md
@@ -1,14 +1,14 @@
---
-title: Unit Testing Vue Components (EN)
+title: Test Unitaire des Composants Vue
type: cookbook
order: 6
---
-## Base Example
+## Exemple simple
-<p>Cette page est en cours de traduction. Pour nous aider, vous pouvez participer sur <a href="https://github.com/vuejs-fr/vuejs.org" target="_blank">le dépôt GitHub dédié de Vuejs-FR</a>.</p><p>Unit testing is a fundamental part of software development. Unit tests execute the smallest units of code in isolation, in order to increase ease of adding new features and track down bugs. Vue's [single-file components](../guide/single-file-components.html) make it straight forward to write unit tests for components in isolation. This lets you develop new features with confidence you are not breaking existing ones, and helps other developers understand what your component does.</p>
+<p>Les tests unitaires sont une étape fondamentale du développement de logiciel. Ces tests permettent d'exécuter chaque unité de code isolée du reste du logiciel. Ils facilitent l'ajout de nouvelles fonctionnalités, la détection et la réparation de bugs. Les [composants monofichiers](../guide/single-file-components.html) de Vue rendent ce processus de test relativement facile. Tester notre code nous permettra d'ajouter des fonctionnalités sans risquer de casser l'existant. Nous pourrons en plus mieux expliquer ce que le composant est censé faire.</p>
-This simple example tests whether some text is rendered:
+Cet exemple simple vérifie qu'un texte est affiché:
```html
<template>
@@ -35,7 +35,7 @@ export default {
computed: {
error () {
return this.username.trim().length < 7
- ? 'Please enter a longer username'
+ ? 'Entrez un nom plus long SVP'
: ''
}
}
@@ -66,39 +66,39 @@ test('Foo', () => {
})
```
-The above code snippet shows how to test whether an error message is rendered based on the length of the username. It demonstrates the general idea of unit testing Vue components: render the component, and assert that the markup matches the state of the component.
+Le code ci-dessus montre comment tester l'apparition d'un message d'erreur si le username n'est pas assez long. Il nous donne une idée de ce en quoi consistent les tests unitaires de composants VueJs: On render le composant, on lui fournit des données, puis on vérifie que le rendu correspond au données.
-## Why test?
+## Pourquoi tester?
-Component unit tests have lots of benefits:
+Quelques-un des avantages à tester ses composants:
-- Provide documentation on how the component should behave
-- Save time over testing manually
-- Reduce bugs in new features
-- Improve design
-- Facilitate refactoring
+- Les tests documentent comment le composant doit fonctionner
+- Ils évitent d'avoir à re-tester manuellement après chaque changement du code
+- Ils réduisent le risque de régression quand on ajoute des fonctionnalités
+- Ils améliorent l'architecture du code
+- Ils facilitent le refactoring
-Automated testing allows large teams of developers to maintain complex codebases.
+Dans les équipes ou les développeurs sont nombreux, les tests automatiques permettent de maintenir une codebase volumineuse à moindre effort.
-#### Getting started
+#### Pour commencer
-[Vue Test Utils](https://github.com/vuejs/vue-test-utils) is the official library for unit testing Vue components. The [vue-cli](https://github.com/vuejs/vue-cli) `webpack` template comes with either Karma or Jest, both well supported test runners, and there are some [guides](https://vue-test-utils.vuejs.org/en/guides/) in the Vue Test Utils documentation.
+Le package officiel pour tester les composant Vue est [Vue Test Utils](https://github.com/vuejs/vue-test-utils). Le template `webpack` pour [vue-cli](https://github.com/vuejs/vue-cli) contient soit Karma soit Jest. Ces deux test runners sont très bien supportés par VueJs. On peut trouver quelques [guides](https://vue-test-utils.vuejs.org/fr/guides/) dans la documentation des Vue Test Utils.
-## Real-World Example
+## Exemple concret
-Unit tests should be:
+Un bon test unitaire se doit d'être:
-- Fast to run
-- Easy to understand
-- Only test a _single unit of work_
+- Court à l'exécution
+- Facile à comprendre
+- Tester un seul comportement à la fois
-Let's continue building on the previous example, while introducing the idea of a <a href="https://en.wikipedia.org/wiki/Factory_(object-oriented_programming)">factory function</a> to make our test more compact and readable. The component should:
+Reprenons l'exemple précédent, et ajoutons y le concept de <a href="https://en.wikipedia.org/wiki/Factory_(object-oriented_programming)">factory function</a> pour rendre nos tests plus compacts et plus clairs. Le composant devra donc:
-- show a 'Welcome to the Vue.js cookbook' greeting.
-- prompt the user to enter their username
-- display an error if the entered username is less than seven letters
+- Afficher un message 'Bienvenue sur le tutoriel VueJs'.
+- Demander a l'utilisateur son username
+- Afficher une erreur si le username fait moins de 7 caractères
-Let's take a look at the component code first:
+Voyons d'abord le code du composant:
```html
<template>
@@ -106,12 +106,12 @@ Let's take a look at the component code first:
<div class="message">
{{ message }}
</div>
- Enter your username: <input v-model="username">
+ Entrez un username: <input v-model="username">
<div
v-if="error"
class="error"
>
- Please enter a username with at least seven letters.
+ Choisissez un username de plus de 7 characteres.
</div>
</div>
</template>
@@ -122,7 +122,7 @@ export default {
data () {
return {
- message: 'Welcome to the Vue.js cookbook',
+ message: 'Bienvenue sur le tutoriel VueJs',
username: ''
}
},
@@ -136,13 +136,13 @@ export default {
</script>
```
-The things that we should test are:
+Ce que l'on doit tester:
-- is the `message` rendered?
-- if `error` is `true`, `<div class="error">` should be present
-- if `error` is `false`, `<div class="error">` should not be present
+- le `message` est il affiché?
+- si `error` est `true`, `<div class="error">` devrait être visible
+- si `error` est `false`, `<div class="error">` ne devrait pas être présent
-And our first attempt at test:
+Et enfin la version naïve de nos tests
```js
import { shallow } from '@vue/test-utils'
@@ -156,32 +156,32 @@ describe('Foo', () => {
}
})
- // see if the message renders
+ // Vérifions que le message est affiché
expect(wrapper.find('.message').text()).toEqual('Hello World')
- // assert the error is rendered
+ // Testons que l'erreur est bien renderée
expect(wrapper.find('.error').exists()).toBeTruthy()
- // update the `username` and assert error is longer rendered
+ // changeons le `username` et verifions que l'erreur a disparu
wrapper.setData({ username: 'Lachlan' })
expect(wrapper.find('.error').exists()).toBeFalsy()
})
})
```
-There are some problems with the above:
+Ce premier test n'est pas parfait. On peut y voir plusieurs problèmes:
-- a single test is making assertions about different things
-- difficult to tell the different states the component can be in, and what should be rendered
+- Un seul test vérifie plusieurs comportements
+- Difficile de distinguer different statuts et ce qui devrait être affiché
-The below example improves the test by:
+L'exemple ci-dessous rend ce test un peu meilleur:
-- only making one assertion per `it` block
-- having short, clear test descriptions
-- providing only the minimum data requires for the test
-- refactoring duplicated logic (creating the `wrapper` and setting the `username` variable) into a factory function
+- ne fait qu'un seul test par `it`
+- a une description claire et concise de chaque test
+- ne fournit que le minimum de données nécessaires au test
+- rassemble le code dupliqué (création du `wrapper` et mise à jour du `username`) dans une fonction `factory`
-*Updated test*:
+*Test amelioré*:
```js
import { shallow } from '@vue/test-utils'
import Foo from './Foo'
@@ -219,32 +219,32 @@ describe('Foo', () => {
})
```
-Points to note:
+À noter:
-At the top, we declare the factory function which merges the `values` object into `data` and returns a new `wrapper` instance. This way, we don't need to duplicate `const wrapper = shallow(Foo)` in every test. Another great benefit to this is when more complex components with a method or computed property you might want to mock or stub in every test, you only need to declare it once.
+Au début du code, on déclare la fonction `factory` qui prend l'objet `values` et en construit le `data` pour renvoyer une nouvelle instance de `wrapper`. Du coup, plus besoin de dupliquer `const wrapper = shallow(Foo)` dans chaque test. Un autre avantage important: Quand des composants plus complexes vont devoir être testés, le `mock` ou le `stub` d'une méthode ou d'une propriété calculée pourront facilement être mutualisés dans cette `factory`.
-## Additional Context
+## Pour aller plus loin
-The above test is fairly simple, but in practice Vue components often have other behaviors you want to test, such as:
+Le test précédent est assez simple. En pratique on souhaitera souvent vérifier d'autres comportements comme :
-- making API calls
-- committing or dispatching mutations or actions with a `Vuex` store
-- testing interaction
+- appeler une API
+- faire des `commit` ou des `dispatch` de mutations ou d'actions a un store `Vuex`
+- tester l'interactivité
-There are more complete examples showing such tests in the Vue Test Utils [guides](https://vue-test-utils.vuejs.org/en/guides/).
+Plusieurs d'exemples illustrant ce genre de tests sont disponibles dans les [guides](https://vue-test-utils.vuejs.org/fr/guides/) de Vue Test Utils.
-Vue Test Utils and the enormous JavaScript ecosystem provides plenty of tooling to facilitate almost 100% test coverage. Unit tests are only one part of the testing pyramid, though. Some other types of tests include e2e (end to end) tests, and snapshot tests. Unit tests are the smallest and most simple of tests - they make assertions on the smallest units of work, isolating each part of a single component.
+Vue Test Utils et le gigantesque ecosystème JavaScript fournissant plein d’outils facilitant une couverture de test proche de 100%. Mais les tests unitaires ne sont qu’une partie de la pyramide de tests. On peut y inclure des tests d’intégration (e2e ou end to end), et du snapshot testing. Les tests unitaires sont les plus petits et les plus simples des tests - Ils vérifient les plus petites unités de travail, isolant ainsi chaque partie d’un même composant.
-Snapshot tests save the markup of your Vue component, and compare to the new one generated each time the test runs. If something changes, the developer is notified, and can decide if the change was intentional (the component was updated) or accidental (the component is behaving incorrectly).
+Le snapshot testing permet de sauvegarder le rendu HTML d’un composant Vue, et de le comparer au rendu généré chaque fois que les tests passent. Si quelque chose change dans le rendu, le développeur est averti et peut décider si le changement est intentionnel (le composant a été mis à jour) ou involontaire (le composant ne se comporte pas comme prévu).
-End to end tests ensure a number of components interact well together. They are more high level. Some examples might be testing if a user can sign up, log in, and update their username. These are slower to run than unit tests or snapshot tests.
+Les tests d’intégration testent l’interaction de plusieurs composants. Il s’agit de tests plus haut niveau. Par exemple tester si un utilisateur peut s’enregistrer se logger et changer son `username`. Ils peuvent être plus lent et plus long a exécuter que les tests unitaires ou snapshot.
-Unit tests are most useful during development, either to help a developer think about how to design a component, or refactor an existing component, and are often run every time code is changed.
+Les tests unitaires sont souvent utilisés lors du développement, soit pour aider le développeur à concevoir l’architecture d’un composant, soit pour l’aider a refactorer un composant existant. Ils sont souvent exécutés après chaque changement du code.
-Higher level tests, such as end to end tests, run much slower. These usually run pre-deploy, to ensure each part of the system is working together correctly.
+Les test de plus haut niveau comme les tests d’intégration son plus lent a l’exécution. Ces tests sont plutôt lancés avant de déployer une mise à jour en production, pour s’assurer que chaque partie du logiciel fonctionne correctement.
-More information about testing Vue components can be found in [Testing Vue.js Applications](https://www.manning.com/books/testing-vuejs-applications) by core team member [Edd Yerburgh](https://eddyerburgh.me/).
+Plus d’info sur comment tester des composants VueJs dans le livre de [Edd Yerburgh](https://eddyerburgh.me/) membre de la core team de VueJs : [Testing Vue.js Applications](https://www.manning.com/books/testing-vuejs-applications) (en anglais).
-## When To Avoid This Pattern
+## Quand éviter ce pattern
-Unit testing is an important part of any serious application. At first, when the vision of an application is not clear, unit testing might slow down development, but once a vision is established and real users will be interacting with the application, unit tests (and other types of automated tests) are absolutely essential to ensure the codebase is maintainable and scalable.
+Les tests unitaires sont une part importante de toute application sérieuse. Au début, quand l’application commence et que la vision complète n’est pas très claire, les tests unitaires peuvent ralentir un peu le développement, mais une fois l’architecture établie et que des utilisateurs réels utilisent l’application, les tests unitaires (et tous types de tests automatiques) sont essentiel à la stabilité et la scalabilité.
\ No newline at end of file
From fc914e5b90570f5afec5caea1115f341edf0e820 Mon Sep 17 00:00:00 2001
From: Bart Ledoux <ledouxb@me.com>
Date: Thu, 12 Apr 2018 07:22:55 -0500
Subject: [PATCH 2/5] ajout des espaces devant deux points
---
.../cookbook/unit-testing-vue-components.md | 24 +++++++++----------
1 file changed, 12 insertions(+), 12 deletions(-)
diff --git a/src/v2/cookbook/unit-testing-vue-components.md b/src/v2/cookbook/unit-testing-vue-components.md
index 07430a7c30..d6496dcdc8 100644
--- a/src/v2/cookbook/unit-testing-vue-components.md
+++ b/src/v2/cookbook/unit-testing-vue-components.md
@@ -8,7 +8,7 @@ order: 6
<p>Les tests unitaires sont une étape fondamentale du développement de logiciel. Ces tests permettent d'exécuter chaque unité de code isolée du reste du logiciel. Ils facilitent l'ajout de nouvelles fonctionnalités, la détection et la réparation de bugs. Les [composants monofichiers](../guide/single-file-components.html) de Vue rendent ce processus de test relativement facile. Tester notre code nous permettra d'ajouter des fonctionnalités sans risquer de casser l'existant. Nous pourrons en plus mieux expliquer ce que le composant est censé faire.</p>
-Cet exemple simple vérifie qu'un texte est affiché:
+Cet exemple simple vérifie qu'un texte est affiché :
```html
<template>
@@ -66,11 +66,11 @@ test('Foo', () => {
})
```
-Le code ci-dessus montre comment tester l'apparition d'un message d'erreur si le username n'est pas assez long. Il nous donne une idée de ce en quoi consistent les tests unitaires de composants VueJs: On render le composant, on lui fournit des données, puis on vérifie que le rendu correspond au données.
+Le code ci-dessus montre comment tester l'apparition d'un message d'erreur si le username n'est pas assez long. Il nous donne une idée de ce en quoi consistent les tests unitaires de composants VueJs : On render le composant, on lui fournit des données, puis on vérifie que le rendu correspond au données.
## Pourquoi tester?
-Quelques-un des avantages à tester ses composants:
+Quelques-un des avantages à tester ses composants :
- Les tests documentent comment le composant doit fonctionner
- Ils évitent d'avoir à re-tester manuellement après chaque changement du code
@@ -86,19 +86,19 @@ Le package officiel pour tester les composant Vue est [Vue Test Utils](https://g
## Exemple concret
-Un bon test unitaire se doit d'être:
+Un bon test unitaire se doit d'être :
- Court à l'exécution
- Facile à comprendre
- Tester un seul comportement à la fois
-Reprenons l'exemple précédent, et ajoutons y le concept de <a href="https://en.wikipedia.org/wiki/Factory_(object-oriented_programming)">factory function</a> pour rendre nos tests plus compacts et plus clairs. Le composant devra donc:
+Reprenons l'exemple précédent, et ajoutons y le concept de <a href="https://en.wikipedia.org/wiki/Factory_(object-oriented_programming)">factory function</a> pour rendre nos tests plus compacts et plus clairs. Le composant devra donc :
- Afficher un message 'Bienvenue sur le tutoriel VueJs'.
- Demander a l'utilisateur son username
- Afficher une erreur si le username fait moins de 7 caractères
-Voyons d'abord le code du composant:
+Voyons d'abord le code du composant :
```html
<template>
@@ -106,7 +106,7 @@ Voyons d'abord le code du composant:
<div class="message">
{{ message }}
</div>
- Entrez un username: <input v-model="username">
+ Entrez un username : <input v-model="username">
<div
v-if="error"
class="error"
@@ -136,7 +136,7 @@ export default {
</script>
```
-Ce que l'on doit tester:
+Ce que l'on doit tester :
- le `message` est il affiché?
- si `error` est `true`, `<div class="error">` devrait être visible
@@ -169,19 +169,19 @@ describe('Foo', () => {
})
```
-Ce premier test n'est pas parfait. On peut y voir plusieurs problèmes:
+Ce premier test n'est pas parfait. On peut y voir plusieurs problèmes :
- Un seul test vérifie plusieurs comportements
- Difficile de distinguer different statuts et ce qui devrait être affiché
-L'exemple ci-dessous rend ce test un peu meilleur:
+L'exemple ci-dessous rend ce test un peu meilleur :
- ne fait qu'un seul test par `it`
- a une description claire et concise de chaque test
- ne fournit que le minimum de données nécessaires au test
- rassemble le code dupliqué (création du `wrapper` et mise à jour du `username`) dans une fonction `factory`
-*Test amelioré*:
+*Test amelioré* :
```js
import { shallow } from '@vue/test-utils'
import Foo from './Foo'
@@ -219,7 +219,7 @@ describe('Foo', () => {
})
```
-À noter:
+À noter :
Au début du code, on déclare la fonction `factory` qui prend l'objet `values` et en construit le `data` pour renvoyer une nouvelle instance de `wrapper`. Du coup, plus besoin de dupliquer `const wrapper = shallow(Foo)` dans chaque test. Un autre avantage important: Quand des composants plus complexes vont devoir être testés, le `mock` ou le `stub` d'une méthode ou d'une propriété calculée pourront facilement être mutualisés dans cette `factory`.
From f276570a9a0e4450b676725d6859304c4f9a6c3d Mon Sep 17 00:00:00 2001
From: Bart Ledoux <ledouxb@me.com>
Date: Thu, 12 Apr 2018 19:47:36 -0500
Subject: [PATCH 3/5] quelques fixes suite a la premiere revue
---
src/v2/cookbook/unit-testing-vue-components.md | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/v2/cookbook/unit-testing-vue-components.md b/src/v2/cookbook/unit-testing-vue-components.md
index d6496dcdc8..78e5c3ec29 100644
--- a/src/v2/cookbook/unit-testing-vue-components.md
+++ b/src/v2/cookbook/unit-testing-vue-components.md
@@ -35,7 +35,7 @@ export default {
computed: {
error () {
return this.username.trim().length < 7
- ? 'Entrez un nom plus long SVP'
+ ? 'Veuillez entrez un nom plus long'
: ''
}
}
@@ -88,14 +88,14 @@ Le package officiel pour tester les composant Vue est [Vue Test Utils](https://g
Un bon test unitaire se doit d'être :
-- Court à l'exécution
+- Rapide à l'exécution
- Facile à comprendre
-- Tester un seul comportement à la fois
+- Tester un _seul comportement à la fois_
Reprenons l'exemple précédent, et ajoutons y le concept de <a href="https://en.wikipedia.org/wiki/Factory_(object-oriented_programming)">factory function</a> pour rendre nos tests plus compacts et plus clairs. Le composant devra donc :
- Afficher un message 'Bienvenue sur le tutoriel VueJs'.
-- Demander a l'utilisateur son username
+- Demander à l'utilisateur son username
- Afficher une erreur si le username fait moins de 7 caractères
Voyons d'abord le code du composant :
From 2481cc4074b48f46bb7d2747202c6b580848c5da Mon Sep 17 00:00:00 2001
From: Bart Ledoux <ledouxb@me.com>
Date: Sun, 22 Apr 2018 18:47:00 -0500
Subject: [PATCH 4/5] Rephasage du premier paragraphe
---
src/v2/cookbook/unit-testing-vue-components.md | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/v2/cookbook/unit-testing-vue-components.md b/src/v2/cookbook/unit-testing-vue-components.md
index 78e5c3ec29..e45336ee92 100644
--- a/src/v2/cookbook/unit-testing-vue-components.md
+++ b/src/v2/cookbook/unit-testing-vue-components.md
@@ -4,9 +4,9 @@ type: cookbook
order: 6
---
-## Exemple simple
+## Exemple de base
-<p>Les tests unitaires sont une étape fondamentale du développement de logiciel. Ces tests permettent d'exécuter chaque unité de code isolée du reste du logiciel. Ils facilitent l'ajout de nouvelles fonctionnalités, la détection et la réparation de bugs. Les [composants monofichiers](../guide/single-file-components.html) de Vue rendent ce processus de test relativement facile. Tester notre code nous permettra d'ajouter des fonctionnalités sans risquer de casser l'existant. Nous pourrons en plus mieux expliquer ce que le composant est censé faire.</p>
+<p>Les tests unitaires sont une étape fondamentale du développement de logiciel. Ces tests permettent d'exécuter chaque unité de code isolée du reste du logiciel. Ils facilitent l'ajout de nouvelles fonctionnalités, la détection et la correction de bugs. Les [composants monofichiers](../guide/single-file-components.html) de Vue rendent ce processus de test relativement facile. Cela vous permet d'ajouter des fonctionnalités sans risquer de casser l'existant. De plus, cela aide les autres développeurs à comprendre votre composant.</p>
Cet exemple simple vérifie qu'un texte est affiché :
From c394a7597a819a04605e0cb1fac5ecbe1e3418e6 Mon Sep 17 00:00:00 2001
From: Bart Ledoux <ledouxb@me.com>
Date: Mon, 28 May 2018 16:31:26 -0500
Subject: [PATCH 5/5] use @forresst comments
---
.../cookbook/unit-testing-vue-components.md | 171 +++++++++---------
1 file changed, 87 insertions(+), 84 deletions(-)
diff --git a/src/v2/cookbook/unit-testing-vue-components.md b/src/v2/cookbook/unit-testing-vue-components.md
index 6fe9814893..7597762dec 100644
--- a/src/v2/cookbook/unit-testing-vue-components.md
+++ b/src/v2/cookbook/unit-testing-vue-components.md
@@ -14,7 +14,7 @@ Cet exemple simple vérifie qu'un texte est affiché :
<template>
<div>
<input v-model="username">
- <div
+ <div
v-if="error"
class="error"
>
@@ -44,26 +44,26 @@ export default {
```
```js
-import { shallow } from '@vue/test-utils'
+import { shallow } from "@vue/test-utils";
-test('Foo', () => {
+test("Foo", () => {
// render the component
- const wrapper = shallow(Hello)
+ const wrapper = shallow(Hello);
// should not allow for `username` less than 7 characters, excludes whitespace
- wrapper.setData({ username: ' '.repeat(7) })
+ wrapper.setData({ username: " ".repeat(7) });
// assert the error is rendered
- expect(wrapper.find('.error').exists()).toBe(true)
+ expect(wrapper.find(".error").exists()).toBe(true);
// update the name to be long enough
wrapper.setData({
- username: 'Lachlan'
- })
+ username: "Lachlan"
+ });
// assert the error has gone away
- expect(wrapper.find('.error').exists()).toBe(false)
-})
+ expect(wrapper.find(".error").exists()).toBe(false);
+});
```
Le code ci-dessus montre comment tester l'apparition d'un message d'erreur si le username n'est pas assez long. Il nous donne une idée de ce en quoi consistent les tests unitaires de composants VueJs : On render le composant, on lui fournit des données, puis on vérifie que le rendu correspond au données.
@@ -72,31 +72,31 @@ Le code ci-dessus montre comment tester l'apparition d'un message d'erreur si le
Quelques-un des avantages à tester ses composants :
-- Les tests documentent comment le composant doit fonctionner
-- Ils évitent d'avoir à re-tester manuellement après chaque changement du code
-- Ils réduisent le risque de régression quand on ajoute des fonctionnalités
-- Ils améliorent l'architecture du code
-- Ils facilitent le refactoring
+* Les tests documentent comment le composant doit fonctionner
+* Ils évitent d'avoir à re-tester manuellement après chaque changement du code
+* Ils réduisent le risque de régression quand on ajoute des fonctionnalités
+* Ils améliorent l'architecture du code
+* Ils facilitent le refactoring
-Dans les équipes ou les développeurs sont nombreux, les tests automatiques permettent de maintenir une codebase volumineuse à moindre effort.
+Dans les équipes où les développeurs sont nombreux, les tests automatiques permettent de maintenir une codebase volumineuse à moindre effort.
#### Pour commencer
-Le package officiel pour tester les composant Vue est [Vue Test Utils](https://github.com/vuejs/vue-test-utils). Le template `webpack` pour [vue-cli](https://github.com/vuejs/vue-cli) contient soit Karma soit Jest. Ces deux test runners sont très bien supportés par VueJs. On peut trouver quelques [guides](https://vue-test-utils.vuejs.org/fr/guides/) dans la documentation des Vue Test Utils.
+Le package officiel pour tester les composants Vue est [Vue Test Utils](https://github.com/vuejs/vue-test-utils). Le template `webpack` pour [vue-cli](https://github.com/vuejs/vue-cli) contient soit Karma soit Jest. Ces deux test runners sont très bien supportés par VueJs. On peut trouver quelques [guides](https://vue-test-utils.vuejs.org/fr/guides/) dans la documentation de Vue Test Utils.
## Exemple concret
Un bon test unitaire se doit d'être :
-- Rapide à l'exécution
-- Facile à comprendre
-- Tester un _seul comportement à la fois_
+* Rapide à l'exécution
+* Facile à comprendre
+* Tester un _seul comportement à la fois_
Reprenons l'exemple précédent, et ajoutons y le concept de <a href="https://en.wikipedia.org/wiki/Factory_(object-oriented_programming)">factory function</a> pour rendre nos tests plus compacts et plus clairs. Le composant devra donc :
-- Afficher un message 'Bienvenue sur le tutoriel VueJs'.
-- Demander à l'utilisateur son username
-- Afficher une erreur si le username fait moins de 7 caractères
+* Afficher un message 'Bienvenue sur le tutoriel VueJs'.
+* Demander à l'utilisateur son username
+* Afficher une erreur si le username fait moins de 7 caractères
Voyons d'abord le code du composant :
@@ -107,7 +107,7 @@ Voyons d'abord le code du composant :
{{ message }}
</div>
Entrez un username : <input v-model="username">
- <div
+ <div
v-if="error"
class="error"
>
@@ -138,85 +138,88 @@ export default {
Ce que l'on doit tester :
-- le `message` est il affiché?
-- si `error` est `true`, `<div class="error">` devrait être visible
-- si `error` est `false`, `<div class="error">` ne devrait pas être présent
+* le `message` est il affiché?
+* si `error` est `true`, `<div class="error">` devrait être visible
+* si `error` est `false`, `<div class="error">` ne devrait pas être présent
Et enfin la version naïve de nos tests
```js
-import { shallow } from '@vue/test-utils'
-
-describe('Foo', () => {
- it('renders a message and responds correctly to user input', () => {
- const wrapper = shallow(Foo, {
- data: {
- message: 'Hello World',
- username: ''
- }
- })
-
- // Vérifions que le message est affiché
- expect(wrapper.find('.message').text()).toEqual('Hello World')
-
- // Testons que l'erreur est bien renderée
- expect(wrapper.find('.error').exists()).toBeTruthy()
-
- // Changeons le `username` et vérifions que l'érreur a disparu
- wrapper.setData({ username: 'Lachlan' })
- expect(wrapper.find('.error').exists()).toBeFalsy()
- })
-})
+import { shallow } from "@vue/test-utils";
+
+describe("Foo", () => {
+ it("renders a message and responds correctly to user input", () => {
+ const wrapper = shallow(Foo, {
+ data: {
+ message: "Hello World",
+ username: ""
+ }
+ });
+
+ // Vérifions que le message est affiché
+ expect(wrapper.find(".message").text()).toEqual("Hello World");
+
+ // Testons que l'erreur est bien renderée
+ expect(wrapper.find(".error").exists()).toBeTruthy();
+
+ // Changeons le `username` et vérifions que l'érreur a disparu
+ wrapper.setData({ username: "Lachlan" });
+ expect(wrapper.find(".error").exists()).toBeFalsy();
+ });
+});
```
-Ce premier test n'est pas parfait. On peut y voir plusieurs problèmes :
+Ce premier test n'est pas parfait. On peut y voir plusieurs problèmes :
-- Un seul test vérifie plusieurs comportements
-- Difficile de distinguer different statuts et ce qui devrait être affiché
+* Un seul test vérifie plusieurs comportements
+* Difficile de distinguer different statuts et ce qui devrait être affiché
L'exemple ci-dessous rend ce test un peu meilleur :
-- ne fait qu'un seul test par `it`
-- a une description claire et concise de chaque test
-- ne fournit que le minimum de données nécessaires au test
-- rassemble le code dupliqué (création du `wrapper` et mise à jour du `username`) dans une fonction `factory`
+* ne fait qu'un seul test par `it`
+* a une description claire et concise de chaque test
+* ne fournit que le minimum de données nécessaires au test
+* rassemble le code dupliqué (création du `wrapper` et mise à jour du `username`) dans une fonction `factory`
+
+_Test amelioré_ :
-*Test amelioré* :
```js
-import { shallow } from '@vue/test-utils'
-import Foo from './Foo'
+import { shallow } from "@vue/test-utils";
+import Foo from "./Foo";
const factory = (values = {}) => {
return shallow(Foo, {
- data: { ...values }
- })
-}
+ data: { ...values }
+ });
+};
-describe('Foo', () => {
- it('renders a welcome message', () => {
- const wrapper = factory()
+describe("Foo", () => {
+ it("renders a welcome message", () => {
+ const wrapper = factory();
- expect(wrapper.find('.message').text()).toEqual("Welcome to the Vue.js cookbook")
- })
+ expect(wrapper.find(".message").text()).toEqual(
+ "Welcome to the Vue.js cookbook"
+ );
+ });
- it('renders an error when username is less than 7 characters', () => {
- const wrapper = factory({ username: '' })
+ it("renders an error when username is less than 7 characters", () => {
+ const wrapper = factory({ username: "" });
- expect(wrapper.find('.error').exists()).toBeTruthy()
- })
+ expect(wrapper.find(".error").exists()).toBeTruthy();
+ });
- it('renders an error when username is whitespace', () => {
- const wrapper = factory({ username: ' '.repeat(7) })
+ it("renders an error when username is whitespace", () => {
+ const wrapper = factory({ username: " ".repeat(7) });
- expect(wrapper.find('.error').exists()).toBeTruthy()
- })
+ expect(wrapper.find(".error").exists()).toBeTruthy();
+ });
- it('does not render an error when username is 7 characters or more', () => {
- const wrapper = factory({ username: 'Lachlan' })
+ it("does not render an error when username is 7 characters or more", () => {
+ const wrapper = factory({ username: "Lachlan" });
- expect(wrapper.find('.error').exists()).toBeFalsy()
- })
-})
+ expect(wrapper.find(".error").exists()).toBeFalsy();
+ });
+});
```
À noter :
@@ -227,9 +230,9 @@ Au début du code, on déclare la fonction `factory` qui prend l'objet `values`
Le test précédent est assez simple. En pratique on souhaitera souvent vérifier d'autres comportements comme :
-- appeler une API
-- faire des `commit` ou des `dispatch` de mutations ou d'actions a un store `Vuex`
-- tester l'interactivité
+* appeler une API
+* faire des `commit` ou des `dispatch` de mutations ou d'actions a un store `Vuex`
+* tester l'interactivité
Plusieurs d'exemples illustrant ce genre de tests sont disponibles dans les [guides](https://vue-test-utils.vuejs.org/fr/guides/) de Vue Test Utils.
@@ -247,4 +250,4 @@ Plus d’info sur comment tester des composants VueJs dans le livre de [Edd Yerb
## Quand éviter ce pattern
-Les tests unitaires sont une part importante de toute application sérieuse. Au début, quand l’application commence et que la vision complète n’est pas très claire, les tests unitaires peuvent ralentir un peu le développement, mais une fois l’architecture établie et que des utilisateurs réels utilisent l’application, les tests unitaires (et tous types de tests automatiques) sont essentiel à la stabilité et la scalabilité.
\ No newline at end of file
+Les tests unitaires sont une part importante de toute application sérieuse. Au début, quand l’application commence et que la vision complète n’est pas très claire, les tests unitaires peuvent ralentir un peu le développement, mais une fois l’architecture établie et que des utilisateurs réels utilisent l’application, les tests unitaires (et tous types de tests automatiques) sont essentiel à la stabilité et la scalabilité.