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/using-with-vuex.md
+37-38
Original file line number
Diff line number
Diff line change
@@ -1,12 +1,12 @@
1
-
# Using with Vuex
1
+
# Utiliser avec Vuex
2
2
3
-
In this guide, we'll see how to test Vuex in components with`vue-test-utils`.
3
+
Dans ce guide, nous allons voir comment tester Vuex dans des composants grâce à`vue-test-utils`.
4
4
5
-
## Mocking Actions
5
+
## Simuler des actions
6
6
7
-
Let’s look at some code.
7
+
Regardons un peu de code !
8
8
9
-
This is the component we want to test. It calls Vuex actions.
9
+
Ci-dessous, le composant que nous voulons tester. Il fait appel à des actions Vuex.
10
10
11
11
```html
12
12
<template>
@@ -35,13 +35,13 @@ export default{
35
35
</script>
36
36
```
37
37
38
-
For the purposes of this test, we don’t care what the actions do, or what the store looks like. We just need to know that these actions are being fired when they should, and that they are fired with the expected value.
38
+
Pour les objectifs de ce test, on se fiche de ce que les actions font, ou à ce quoi le store ressemble. On doit juste savoir si ces actions sont lancées lorsqu'elles sont supposées l'être, et ce, avec les valeurs attendues.
39
39
40
-
To test this, we need to pass a mock store to Vue when we shallow our component.
40
+
Pour tester cela, on doit passer un store fictif à Vue lorsque l'on isole notre composant.
41
41
42
-
Instead of passing the store to the base Vue constructor, we can pass it to a - [localVue](../api/options.md#localvue). A localVue is a scoped Vue constructor that we can make changes to without affecting the global Vue constructor.
42
+
Au lieu de passer le store au constructeur de base de Vue, on peut le passer à - [`localVue`](../api/options.md#localvue). Un `localVue` est un constructeur à portée limitée de Vue sur lequel on peut effectuer des changements sans avoir à affecter le constructeur global.
What’s happening here? First we tell Vue to use Vuex with the `Vue.use` method. This is just a wrapper around`Vue.use`.
94
+
Que se passe-t-il ici ? Premièrement, on indique à Vue d'utiliser Vuex avec la méthode `use`. C'est tout simplement une surcouche de`Vue.use`.
95
95
96
-
We then make a mock store by calling new `Vuex.store` with our mock values. We only pass it the actions, since that’s all we care about.
96
+
On va ensuite créer un store fictif en appelant `new Vuex.Store` avec nos propres valeurs. À noter que l'on indique uniquement nos actions, car on ne s'intéresse qu'à elles.
97
97
98
-
The actions are [jest mock functions](https://facebook.github.io/jest/docs/en/mock-functions.html). These mock functions give us methods to assert whether the actions were called or not.
98
+
Les actions sont des [fonctions de simulations de Jest](https://facebook.github.io/jest/docs/en/mock-functions.html). Ces fonctions nous donnent accès à des méthodes afin de réaliser des assertions si l'action a été appelée ou non.
99
99
100
-
We can then assert in our tests that the action stub was called when expected.
100
+
On peut ensuite s'assurer dans nos tests que les actions ont été appelées au bon moment.
101
101
102
-
Now the way we define the store might look a bit foreign to you.
102
+
La manière dont on définit le store peut vous paraitre un peu étrange.
103
103
104
-
We’re using`beforeEach`to ensure we have a clean store before each test. `beforeEach`is a mocha hook that’s called before each test. In our test, we are reassigning the store variables value. If we didn’t do this, the mock functions would need to be automatically reset. It also lets us change the state in our tests, without it affecting later tests.
104
+
On utilise`beforeEach`pour s'assurer que nous avons un store propre avant chaque test. `beforeEach`est un hook de Mocha qui est appelé avant chaque test. Dans nos tests, on réassigne des valeurs aux variables du store. Si on ne le fait pas, les fonctions de simulations auraient besoin d'être automatiquement réinitialisées. Cela nous laisse la possibilité de changer l'état dans nos tests, sans avoir à affecter les prochains.
105
105
106
-
The most important thing to note in this test is that**we create a mock Vuex store and then pass it to vue-test-utils**.
106
+
La chose la plus importante à noter dans ce test est que**l'on crée une simulation d'un store Vuex, qui est ensuite passé à vue-test-utils**.
107
107
108
-
Great, so now we can mock actions, let’s look at mocking getters.
108
+
Génial, on peut désormais simuler des actions. Allons avoir comment simuler des accesseurs !
109
109
110
-
## Mocking Getters
110
+
## Simuler des accesseurs
111
111
112
112
113
113
```html
@@ -130,9 +130,9 @@ export default{
130
130
</script>
131
131
```
132
132
133
-
This is a fairly simple component. It renders the result of the getters `clicks`and`inputValue`. Again, we don’t really care about what those getters returns – just that the result of them is being rendered correctly.
133
+
C'est un composant relativement simple. Il affiche le résultat des accesseurs `clicks`et`inputValue`. Encore une fois, on se fiche de savoir ce que ces accesseurs retournent. On souhaite juste savoir si les résultats sont affichés correctement.
This test is similar to our actions test. We create a mock store before each test, pass it as an option when we call`shallow`, and assert that the value returned by our mock getters is being rendered.
174
+
Ce test est similaire à notre test sur les actions. On créer un store fictif avant chaque test, on le passe ensuite comme une option lorsque l'on appelle`shallow`. Pour finir, on asserte que la valeur retournée par nos accesseurs fictifs est bien affichée.
175
175
176
-
This is great, but what if we want to check our getters are returning the correct part of our state?
176
+
C'est génial, mais comment faisons-nous pour vérifier que nos accesseurs retournent correctement les parties de l'état ?
177
177
178
-
## Mocking with Modules
178
+
## Simulation avec des modules
179
179
180
-
[Modules](https://vuex.vuejs.org/en/modules.html)are useful for separating out our store into manageable chunks. They also export getters. We can use these in our tests.
180
+
Les [modules](https://vuex.vuejs.org/en/modules.html)sont utiles pour séparer un store en plusieurs morceaux. Ils exportent des accesseurs que l'on peut utiliser dans nos tests.
0 commit comments