|
@@ -1,6 +1,6 @@
|
|
# Tests
|
|
# Tests
|
|
|
|
|
|
-Les parties principales que l'on veut couvrir par des tests unitaires en Vuex sont les mutations et les actions.
|
|
|
|
|
|
+Les parties principales que l'on veut couvrir par des tests unitaires avec Vuex sont les mutations et les actions.
|
|
|
|
|
|
### Tester les mutations
|
|
### Tester les mutations
|
|
|
|
|
|
@@ -9,7 +9,7 @@ Les mutations sont très simples à tester, puisque ce sont de simples fonctions
|
|
``` js
|
|
``` js
|
|
const state = { ... }
|
|
const state = { ... }
|
|
|
|
|
|
-// export mutations as a named export
|
|
|
|
|
|
+// exporter les mutations en tant qu'export nommé
|
|
export const mutations = { ... }
|
|
export const mutations = { ... }
|
|
|
|
|
|
export default new Vuex.Store({
|
|
export default new Vuex.Store({
|
|
@@ -18,7 +18,7 @@ export default new Vuex.Store({
|
|
})
|
|
})
|
|
```
|
|
```
|
|
|
|
|
|
-Exemple de test de mutation utilisant Mocha + Chai (vous pouvez utiliser n'importe quel framework/bibliothèque d'assertion selon votre préférence) :
|
|
|
|
|
|
+Exemple de test de mutation utilisant Mocha + Chai (vous pouvez utiliser n'importe quel framework/bibliothèque d'assertion selon vos préférences) :
|
|
|
|
|
|
``` js
|
|
``` js
|
|
// mutations.js
|
|
// mutations.js
|
|
@@ -32,16 +32,16 @@ export const mutations = {
|
|
import { expect } from 'chai'
|
|
import { expect } from 'chai'
|
|
import { mutations } from './store'
|
|
import { mutations } from './store'
|
|
|
|
|
|
-// destructure assign mutations
|
|
|
|
|
|
+// assignement des mutations par déstructuration
|
|
const { increment } = mutations
|
|
const { increment } = mutations
|
|
|
|
|
|
describe('mutations', () => {
|
|
describe('mutations', () => {
|
|
it('INCREMENT', () => {
|
|
it('INCREMENT', () => {
|
|
- // mock state
|
|
|
|
|
|
+ // état simulé
|
|
const state = { count: 0 }
|
|
const state = { count: 0 }
|
|
- // apply mutation
|
|
|
|
|
|
+ // appliquer la mutation
|
|
increment(state)
|
|
increment(state)
|
|
- // assert result
|
|
|
|
|
|
+ // tester le résultat
|
|
expect(state.count).to.equal(1)
|
|
expect(state.count).to.equal(1)
|
|
})
|
|
})
|
|
})
|
|
})
|
|
@@ -49,7 +49,7 @@ describe('mutations', () => {
|
|
|
|
|
|
### Tester les actions
|
|
### Tester les actions
|
|
|
|
|
|
-Les actions sont un peu plus compliquées car elles peuvent faire appel à des APIs externes. Lorsque l'on teste des actions, on a souvent besoin de faire du mocking — par exemple, on peut abstraire l'appel API dans un service et mocker ce service dans nos tests. Afin de mocker facilement les dépendances, on peut utiliser webpack et [inject-loader](https://github.com/plasticine/inject-loader) pour regrouper nos fichiers de test.
|
|
|
|
|
|
+Les actions sont un peu plus compliquées car elles peuvent faire appel à des APIs externes. Lorsque l'on teste des actions, on a souvent besoin de faire plusieurs niveaux de simulation. Par exemple, on peut abstraire l'appel API dans un service et simuler ce service dans nos tests. Afin de simuler facilement les dépendances, on peut utiliser webpack et [inject-loader](https://github.com/plasticine/inject-loader) pour regrouper nos fichiers de test.
|
|
|
|
|
|
Exemple de test d'une action asynchrone :
|
|
Exemple de test d'une action asynchrone :
|
|
|
|
|
|
@@ -68,28 +68,28 @@ export const getAllProducts = ({ commit }) => {
|
|
``` js
|
|
``` js
|
|
// actions.spec.js
|
|
// actions.spec.js
|
|
|
|
|
|
-// use require syntax for inline loaders.
|
|
|
|
-// with inject-loader, this returns a module factory
|
|
|
|
-// that allows us to inject mocked dependencies.
|
|
|
|
|
|
+// utilisation de la syntaxe `require` pour les loaders.
|
|
|
|
+// avec inject-loader, cela retourne un module de fabrique
|
|
|
|
+// cela nous permet d'injecter les dépendances simulées.
|
|
import { expect } from 'chai'
|
|
import { expect } from 'chai'
|
|
-const actionsInjector = require('inject!./actions')
|
|
|
|
|
|
+const actionsInjector = require('inject-loader!./actions')
|
|
|
|
|
|
-// create the module with our mocks
|
|
|
|
|
|
+// créer un module avec nos simulations
|
|
const actions = actionsInjector({
|
|
const actions = actionsInjector({
|
|
'../api/shop': {
|
|
'../api/shop': {
|
|
getProducts (cb) {
|
|
getProducts (cb) {
|
|
setTimeout(() => {
|
|
setTimeout(() => {
|
|
- cb([ /* mocked response */ ])
|
|
|
|
|
|
+ cb([ /* réponse simulée */ ])
|
|
}, 100)
|
|
}, 100)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
})
|
|
|
|
|
|
-// helper for testing action with expected mutations
|
|
|
|
|
|
+// fonction utilitaire pour tester des actions avec les mutations attendues
|
|
const testAction = (action, args, state, expectedMutations, done) => {
|
|
const testAction = (action, args, state, expectedMutations, done) => {
|
|
let count = 0
|
|
let count = 0
|
|
|
|
|
|
- // mock commit
|
|
|
|
|
|
+ // acter une simulation
|
|
const commit = (type, payload) => {
|
|
const commit = (type, payload) => {
|
|
const mutation = expectedMutations[count]
|
|
const mutation = expectedMutations[count]
|
|
|
|
|
|
@@ -108,10 +108,10 @@ const testAction = (action, args, state, expectedMutations, done) => {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
- // call the action with mocked store and arguments
|
|
|
|
|
|
+ // appeler l'action avec le store simulé et les arguments
|
|
action({ commit, state }, ...args)
|
|
action({ commit, state }, ...args)
|
|
|
|
|
|
- // check if no mutations should have been dispatched
|
|
|
|
|
|
+ // vérifier qu'aucune mutations n'ai été propagée
|
|
if (expectedMutations.length === 0) {
|
|
if (expectedMutations.length === 0) {
|
|
expect(count).to.equal(0)
|
|
expect(count).to.equal(0)
|
|
done()
|
|
done()
|
|
@@ -128,11 +128,11 @@ describe('actions', () => {
|
|
})
|
|
})
|
|
```
|
|
```
|
|
|
|
|
|
-### Tester les getters
|
|
|
|
|
|
+### Tester les accesseurs
|
|
|
|
|
|
-Si vos getters font des calculs compliqués, il peut être judicieux de les tester. Les getters sont également très simples à tester, pour les mêmes raisons que les mutations.
|
|
|
|
|
|
+Si vos accesseurs font des calculs compliqués, il peut être judicieux de les tester. Les accesseurs sont également très simples à tester, pour les mêmes raisons que les mutations.
|
|
|
|
|
|
-Exemple de test d'un getter :
|
|
|
|
|
|
+Exemple de test d'un accesseur :
|
|
|
|
|
|
``` js
|
|
``` js
|
|
// getters.js
|
|
// getters.js
|
|
@@ -152,7 +152,7 @@ import { getters } from './getters'
|
|
|
|
|
|
describe('getters', () => {
|
|
describe('getters', () => {
|
|
it('filteredProducts', () => {
|
|
it('filteredProducts', () => {
|
|
- // mock state
|
|
|
|
|
|
+ // état simulé
|
|
const state = {
|
|
const state = {
|
|
products: [
|
|
products: [
|
|
{ id: 1, title: 'Apple', category: 'fruit' },
|
|
{ id: 1, title: 'Apple', category: 'fruit' },
|
|
@@ -160,13 +160,13 @@ describe('getters', () => {
|
|
{ id: 3, title: 'Carrot', category: 'vegetable' }
|
|
{ id: 3, title: 'Carrot', category: 'vegetable' }
|
|
]
|
|
]
|
|
}
|
|
}
|
|
- // mock getter
|
|
|
|
|
|
+ // accesseur simulé
|
|
const filterCategory = 'fruit'
|
|
const filterCategory = 'fruit'
|
|
|
|
|
|
- // get the result from the getter
|
|
|
|
|
|
+ // obterir le résultat depuis l'accesseur
|
|
const result = getters.filteredProducts(state, { filterCategory })
|
|
const result = getters.filteredProducts(state, { filterCategory })
|
|
|
|
|
|
- // assert the result
|
|
|
|
|
|
+ // tester le résultat
|
|
expect(result).to.deep.equal([
|
|
expect(result).to.deep.equal([
|
|
{ id: 1, title: 'Apple', category: 'fruit' },
|
|
{ id: 1, title: 'Apple', category: 'fruit' },
|
|
{ id: 2, title: 'Orange', category: 'fruit' }
|
|
{ id: 2, title: 'Orange', category: 'fruit' }
|
|
@@ -177,9 +177,9 @@ describe('getters', () => {
|
|
|
|
|
|
### Lancer les tests
|
|
### Lancer les tests
|
|
|
|
|
|
-Si vos mutations et actions sont écrites comme il se doit, les tests ne devraient pas avoir de dépendance directe sur les APIs navigateur après un mocking préalable. Cela signifie que vous pouvez simplement regrouper les tests avec webpack et les lancer directement dans Node. De façon alternative, vous pouvez utiliser `mocha-loader` ou Karma + `karma-webpack` afin d'effectuer les tests dans des vrais navigateurs.
|
|
|
|
|
|
+Si vos mutations et actions sont écrites comme il se doit, les tests ne devraient pas avoir de dépendance directe sur les APIs navigateur après une simulation préalable. Cela signifie que vous pouvez simplement regrouper les tests avec webpack et les lancer directement dans Node.js. De façon alternative, vous pouvez utiliser `mocha-loader` ou Karma + `karma-webpack` afin d'effectuer les tests dans des vrais navigateurs.
|
|
|
|
|
|
-#### Lancer dans Node
|
|
|
|
|
|
+#### Lancer dans Node.js
|
|
|
|
|
|
Créez la configuration webpack suivante (ainsi que le fichier [`.babelrc`](https://babeljs.io/docs/usage/babelrc/) qui correspond) :
|
|
Créez la configuration webpack suivante (ainsi que le fichier [`.babelrc`](https://babeljs.io/docs/usage/babelrc/) qui correspond) :
|
|
|
|
|
|
@@ -212,10 +212,10 @@ mocha test-bundle.js
|
|
|
|
|
|
#### Lancer dans un navigateur
|
|
#### Lancer dans un navigateur
|
|
|
|
|
|
-1. Installez `mocha-loader`
|
|
|
|
-2. Changez l'option `entry` de la configuration webpack ci-dessus pour `'mocha!babel!./test.js'`.
|
|
|
|
|
|
+1. Installez `mocha-loader`.
|
|
|
|
+2. Changez l'option `entry` de la configuration webpack ci-dessus pour `'mocha-loader!babel-loader!./test.js'`.
|
|
3. Démarrez `webpack-dev-server` en utilisant cette configuration.
|
|
3. Démarrez `webpack-dev-server` en utilisant cette configuration.
|
|
-4. Pointez votre navigateur sur `localhost:8080/webpack-dev-server/test-bundle`.
|
|
|
|
|
|
+4. Rendez-vous avec votre navigateur sur `localhost:8080/webpack-dev-server/test-bundle`.
|
|
|
|
|
|
#### Lancer dans un navigateur avec Karma + karma-webpack
|
|
#### Lancer dans un navigateur avec Karma + karma-webpack
|
|
|
|
|