Skip to content

Commit b785a44

Browse files
committed
Traduction de unit-testing.md
Signed-off-by: Bruno Lesieur <bruno.lesieur@gmail.com>
1 parent 8a7120e commit b785a44

File tree

1 file changed

+38
-38
lines changed

1 file changed

+38
-38
lines changed

src/v2/guide/unit-testing.md

Lines changed: 38 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
---
2-
title: Unit Testing (En)
2+
title: Tests unitaires
33
type: guide
44
order: 23
55
---
66

7-
## Setup and Tooling
7+
## Outils et mise en place
88

9-
<p class="tip">**Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vuejs.org).**</p><p>Anything compatible with a module-based build system will work, but if you're looking for a specific recommendation, try the [Karma](http://karma-runner.github.io) test runner. It has a lot of community plugins, including support for [webpack](https://github.com/webpack/karma-webpack) and [Browserify](https://github.com/Nikku/karma-browserify). For detailed setup, please refer to each project's respective documentation, though these example Karma configurations for [webpack](https://github.com/vuejs-templates/webpack/blob/master/template/test/unit/karma.conf.js) and [Browserify](https://github.com/vuejs-templates/browserify/blob/master/template/karma.conf.js) may help you get started.</p>
9+
N'importe quoi de compatible avec un module basé sur un système de build va fonctionner. Mais si vous hésitez sur le choix d'un outil en particulier, essayez le lanceur de tests [Karma](http://karma-runner.github.io). Il y a beaucoup de plugins communautaires, incluant le support de [webpack](https://github.com/webpack/karma-webpack) et [Browserify](https://github.com/Nikku/karma-browserify). Pour une mise en place détaillée, référez-vous à la documentation respective de chaque projet. Ces exemples de configuration de Karma pour [webpack](https://github.com/vuejs-templates/webpack/blob/master/template/test/unit/karma.conf.js) et [Browserify](https://github.com/vuejs-templates/browserify/blob/master/template/karma.conf.js) pourront vous aider à démarrer.
1010

11-
## Simple Assertions
11+
## De simples assertions
1212

13-
In terms of code structure for testing, you don't have to do anything special in your components to make them testable. Just export the raw options:
13+
En terme de structure de test de code, vous n'avez rien de spécial à faire dans vos composants pour les rendre testables. Exportez simplement son objet d'options :
1414

1515
``` html
1616
<template>
@@ -21,57 +21,57 @@ In terms of code structure for testing, you don't have to do anything special in
2121
export default {
2222
data () {
2323
return {
24-
message: 'hello!'
24+
message: 'bonjour !'
2525
}
2626
},
2727
created () {
28-
this.message = 'bye!'
28+
this.message = 'au revoir !'
2929
}
3030
}
3131
</script>
3232
```
3333

34-
When you test that component, all you have to do is import the object along with Vue to make many common assertions:
34+
Quand vous testez ce composant, tout ce que vous avez à faire est d'importer l'objet d'options avec un objet Vue pour faire des assertions communes :
3535

3636
``` js
37-
// Import Vue and the component being tested
37+
// Importer Vue et le composant à tester
3838
import Vue from 'vue'
3939
import MyComponent from 'path/to/MyComponent.vue'
4040

41-
// Here are some Jasmine 2.0 tests, though you can
42-
// use any test runner / assertion library combo you prefer
41+
// Ici nous avons plusieurs tests avec Jasmine 2.0, cependant vous pouvez utiliser
42+
// n'importe quel combo de lanceur de tests / bibliothèque d'assertions que vous préférez
4343
describe('MyComponent', () => {
44-
// Inspect the raw component options
45-
it('has a created hook', () => {
44+
// Inspecter l'objet d'options du composant
45+
it('a le hook `created`', () => {
4646
expect(typeof MyComponent.created).toBe('function')
4747
})
4848

49-
// Evaluate the results of functions in
50-
// the raw component options
51-
it('sets the correct default data', () => {
49+
// Évaluer les résultats des fonctions dans
50+
// l'objet d'options du composant
51+
it('contient les données par défaut', () => {
5252
expect(typeof MyComponent.data).toBe('function')
5353
const defaultData = MyComponent.data()
54-
expect(defaultData.message).toBe('hello!')
54+
expect(defaultData.message).toBe('bonjour !')
5555
})
5656

57-
// Inspect the component instance on mount
58-
it('correctly sets the message when created', () => {
57+
// Inspecter l'instance au montage du composant
58+
it('affecte correctement les messages à la création', () => {
5959
const vm = new Vue(MyComponent).$mount()
60-
expect(vm.message).toBe('bye!')
60+
expect(vm.message).toBe('au revoir !')
6161
})
6262

63-
// Mount an instance and inspect the render output
64-
it('renders the correct message', () => {
63+
// Monter une instance et inspecter le résultat en sortie
64+
it('rend le message correcte', () => {
6565
const Ctor = Vue.extend(MyComponent)
6666
const vm = new Ctor().$mount()
67-
expect(vm.$el.textContent).toBe('bye!')
67+
expect(vm.$el.textContent).toBe('au revoir !')
6868
})
6969
})
7070
```
7171

72-
## Writing Testable Components
72+
## Écrire des composants testables
7373

74-
A lot of component's render output are primarily determined by the props they receive. In fact, if a component's render output solely depends on its props, it becomes quite straightforward to test, similar to asserting the return value of a pure function with different arguments. Take a contrived example:
74+
Beaucoup de sortie de rendu de composants sont principalement déterminées selon les props que les composants reçoivent. En fait, si une sortie de rendu de composant dépend uniquement de ses props, il devient très rapide de le tester. Exactement de la même manière qu'on ferrait des assertions sur la valeur de retour d'une fonction standard avec différents arguments. Voici un exemple :
7575

7676
``` html
7777
<template>
@@ -85,48 +85,48 @@ A lot of component's render output are primarily determined by the props they re
8585
</script>
8686
```
8787

88-
You can assert its render output with different props using the `propsData` option:
88+
Vous pouvez faire des assertions sur le rendu en sortie avec différentes props en utilisant l'option `propsData` :
8989

9090
``` js
9191
import Vue from 'vue'
9292
import MyComponent from './MyComponent.vue'
9393

94-
// helper function that mounts and returns the rendered text
94+
// Fonction utilitaire qui monte et retourne le texte rendu
9595
function getRenderedText (Component, propsData) {
9696
const Ctor = Vue.extend(Component)
9797
const vm = new Ctor({ propsData: propsData }).$mount()
9898
return vm.$el.textContent
9999
}
100100

101101
describe('MyComponent', () => {
102-
it('renders correctly with different props', () => {
102+
it('rendre correctement le message avec différentes props', () => {
103103
expect(getRenderedText(MyComponent, {
104-
msg: 'Hello'
105-
})).toBe('Hello')
104+
msg: 'Bonjour'
105+
})).toBe('Bonjour')
106106

107107
expect(getRenderedText(MyComponent, {
108-
msg: 'Bye'
109-
})).toBe('Bye')
108+
msg: 'Au revoir'
109+
})).toBe('Au revoir')
110110
})
111111
})
112112
```
113113

114-
## Asserting Asynchronous Updates
114+
## Assertions de mise à jour asynchrones
115115

116-
Since Vue [performs DOM updates asynchronously](reactivity.html#Async-Update-Queue), assertions on DOM updates resulting from state change will have to be made in a `Vue.nextTick` callback:
116+
Parce que Vue [fait les mises à jour du DOM de manière asynchrone](reactivity.html#File-d’attente-de-mise-a-jour-asynchrone), les assertions sur les mises à jour du DOM dû à un changement d'état doivent être faites dans une fonction de rappel `Vue.nextTick` :
117117

118118
``` js
119-
// Inspect the generated HTML after a state update
120-
it('updates the rendered message when vm.message updates', done => {
119+
// Inspecter le HTML généré après une mise à jour d'état
120+
it('mettre à jour le message rendu quand `vm.message` est mis à jour', done => {
121121
const vm = new Vue(MyComponent).$mount()
122122
vm.message = 'foo'
123123

124-
// wait a "tick" after state change before asserting DOM updates
124+
// attendre une boucle (« tick ») après le changement d'état avant de faire l'assertion des mises à jour du DOM
125125
Vue.nextTick(() => {
126126
expect(vm.$el.textContent).toBe('foo')
127127
done()
128128
})
129129
})
130130
```
131131

132-
We are planning to work on a collection of common test helpers that makes it even simpler to render components with different constraints (e.g. shallow rendering that ignores child components) and assert their output.
132+
Nous avons planifié de travailler sur une collection de fonctions utilitaires de tests communs pour rendre encore plus simple les tests de composant de rendu avec différentes contraintes (par ex. des rendus peu profonds ignorant les composants enfants) et faire des assertions de leur sortie.

0 commit comments

Comments
 (0)