Skip to content

Commit 43d251c

Browse files
YatyMachinisteWeb
authored andcommitted
Guide: getting-started.md (#8)
* getting-started.md: traduction, première itération * Corrections suite à la review de Haeresis * corrections * corrections * correction
1 parent d99c45f commit 43d251c

File tree

1 file changed

+31
-31
lines changed

1 file changed

+31
-31
lines changed

docs/en/guides/getting-started.md

+31-31
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
# Getting Started
1+
# Pour commencer
22

3-
## Setup
3+
## Installation
44

5-
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 :
66

77
``` bash
88
git clone https://github.com/vuejs/vue-test-utils-getting-started
99
cd vue-test-utils-getting-started
1010
npm install
1111
```
1212

13-
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` :
1414

1515
```js
1616
// counter.js
@@ -37,80 +37,80 @@ export default {
3737
}
3838
```
3939

40-
### Mounting Components
40+
### Montages de composants
4141

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).
4343

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.
4545

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` :
4747

4848
```js
4949
// test.js
5050

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
5353
import { mount } from 'vue-test-utils'
5454
import Counter from './counter'
5555

56-
// Now mount the component and you have the wrapper
56+
// On monte le composant et nous voilà avec un wrapper
5757
const wrapper = mount(Counter)
5858

59-
// You can access the actual Vue instance via wrapper.vm
59+
// On accède à l'instance actuelle de Vue via `wrapper.vm`
6060
const vm = wrapper.vm
6161

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 !
6464
console.log(wrapper)
6565
```
6666

67-
### Test rendered HTML output of the component
67+
### Tester le contenu du rendu HTML d'un composant
6868

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.
7070

7171
```js
7272
import { mount } from 'vue-test-utils'
7373
import Counter from './counter'
7474

7575
describe('Counter', () => {
76-
// Now mount the component and you have the wrapper
76+
// On monte le composant et nous voilà avec un wrapper
7777
const wrapper = mount(Counter)
7878

79-
it('renders the correct markup', () => {
79+
it('fait le rendu correctement', () => {
8080
expect(wrapper.html()).toContain('<span class="count">0</span>')
8181
})
8282

83-
// 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', () => {
8585
expect(wrapper.contains('button')).toBe(true)
8686
})
8787
})
8888
```
8989

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.
9191

92-
### Simulating User Interaction
92+
### Simulation de l'interaction utilisateur
9393

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 :
9595

9696
```js
97-
it('button click should increment the count', () => {
97+
it('le clic sur le bouton devrait incrémenter le compteur', () => {
9898
expect(wrapper.vm.count).toBe(0)
9999
const button = wrapper.find('button')
100100
button.trigger('click')
101101
expect(wrapper.vm.count).toBe(1)
102102
})
103103
```
104104

105-
### What about `nextTick`?
105+
### Et quid de `nextTick` ?
106106

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.
108108

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.
110110

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.*
112112

113-
## What's Next
113+
## Et après ?
114114

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

Comments
 (0)