vuex-help

<!DOCTYPE HTML> <html lang="fr" > <head> <meta charset="UTF-8"> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Tests · Vuex</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="description" content=""> <meta name="generator" content="GitBook 3.2.3"> <link rel="stylesheet" href="../gitbook/style.css"> <link rel="stylesheet" href="../gitbook/gitbook-plugin-prism/prism.css"> <link rel="stylesheet" href="../gitbook/gitbook-plugin-search/search.css"> <link rel="stylesheet" href="../gitbook/gitbook-plugin-theme-vuejs/vue.css"> <meta name="HandheldFriendly" content="true"/> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="apple-touch-icon-precomposed" sizes="152x152" href="../gitbook/images/apple-touch-icon-precomposed-152.png"> <link rel="shortcut icon" href="../gitbook/images/favicon.ico" type="image/x-icon"> <link rel="next" href="hot-reload.html" /> <link rel="prev" href="forms.html" /> </head> <body> <div class="book"> <div class="book-summary"> <div id="book-search-input" role="search"> <input type="text" placeholder="Tapez pour rechercher" /> </div> <nav role="navigation"> <script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=vuejs" id="_carbonads_js"></script> <ul class="summary"> <li class="chapter " data-level="1.1" data-path="./"> <a href="./"> Introduction </a> </li> <li class="chapter " data-level="1.2" > <a target="_blank" href="https://github.com/vuejs/vuex/releases"> Notes de version </a> </li> <li class="chapter " data-level="1.3" data-path="installation.html"> <a href="installation.html"> Installation </a> </li> <li class="chapter " data-level="1.4" data-path="intro.html"> <a href="intro.html"> Vuex, qu'est-ce que c'est ? </a> </li> <li class="chapter " data-level="1.5" data-path="getting-started.html"> <a href="getting-started.html"> Pour commencer </a> </li> <li class="chapter " data-level="1.6" data-path="core-concepts.html"> <a href="core-concepts.html"> Concepts de base </a> <ul class="articles"> <li class="chapter " data-level="1.6.1" data-path="state.html"> <a href="state.html"> État </a> </li> <li class="chapter " data-level="1.6.2" data-path="getters.html"> <a href="getters.html"> Accesseurs </a> </li> <li class="chapter " data-level="1.6.3" data-path="mutations.html"> <a href="mutations.html"> Mutations </a> </li> <li class="chapter " data-level="1.6.4" data-path="actions.html"> <a href="actions.html"> Actions </a> </li> <li class="chapter " data-level="1.6.5" data-path="modules.html"> <a href="modules.html"> Modules </a> </li> </ul> </li> <li class="chapter " data-level="1.7" data-path="structure.html"> <a href="structure.html"> Structure d'une application </a> </li> <li class="chapter " data-level="1.8" data-path="plugins.html"> <a href="plugins.html"> Plugins </a> </li> <li class="chapter " data-level="1.9" data-path="strict.html"> <a href="strict.html"> Mode strict </a> </li> <li class="chapter " data-level="1.10" data-path="forms.html"> <a href="forms.html"> Gestion des formulaires </a> </li> <li class="chapter active" data-level="1.11" data-path="testing.html"> <a href="testing.html"> Tests </a> </li> <li class="chapter " data-level="1.12" data-path="hot-reload.html"> <a href="hot-reload.html"> Rechargement à chaud </a> </li> <li class="chapter " data-level="1.13" data-path="api.html"> <a href="api.html"> Documentation de l'API </a> </li> <li class="divider"></li> <li> <a href="https://www.gitbook.com" target="blank" class="gitbook-link"> Publié avec GitBook </a> </li> </ul> </nav> </div> <div class="book-body"> <div class="body-inner"> <div class="book-header" role="navigation">  <h1> <a href="." >Tests</a> </h1> </div> <div class="page-wrapper" tabindex="-1" role="main"> <div class="page-inner"> <div id="book-search-results"> <div class="search-noresults"> <section class="normal markdown-section"> <h1 id="tests">Tests</h1> Les parties principales que l'on veut couvrir par des tests unitaires avec Vuex sont les mutations et les actions. <h3 id="tester-les-mutations">Tester les mutations</h3> Les mutations sont très simples à tester, puisque ce sont de simples fonctions qui se basent uniquement sur leurs arguments. Une astuce est que si vous utilisez les modules ES2015 et mettez vos mutations dans votre fichier <code>store.js</code>, en plus de l'export par défaut, vous pouvez également exporter vos mutations avec un export nommé : <pre class="language-"><code class="lang-js">const state = { ... } // exporter `mutations` en tant qu'export nommé export const mutations = { ... } export default new Vuex.Store({ state, mutations }) </code></pre> Exemple de test de mutation utilisant Mocha + Chai (vous pouvez utiliser n'importe quel framework/bibliothèque d'assertion selon vos préférences) : <pre class="language-"><code class="lang-js">// mutations.js export const mutations = { increment: state => state.count++ } </code></pre> <pre class="language-"><code class="lang-js">// mutations.spec.js import { expect } from 'chai' import { mutations } from './store' // assignement de `mutations` par déstructuration const { increment } = mutations describe('mutations', () => { it('INCREMENT', () => { // état simulé const state = { count: 0 } // appliquer la mutation increment(state) // tester le résultat expect(state.count).to.equal(1) }) }) </code></pre> <h3 id="tester-les-actions">Tester les actions</h3> 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 <a href="https://github.com/plasticine/inject-loader" target="_blank">inject-loader</a> pour regrouper nos fichiers de test. Exemple de test d'une action asynchrone : <pre class="language-"><code class="lang-js">// actions.js import shop from '../api/shop' export const getAllProducts = ({ commit }) => { commit('REQUEST_PRODUCTS') shop.getProducts(products => { commit('RECEIVE_PRODUCTS', products) }) } </code></pre> <pre class="language-"><code class="lang-js">// actions.spec.js // 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' const actionsInjector = require('inject-loader!./actions') // créer un module avec nos simulations const actions = actionsInjector({ '../api/shop': { getProducts (cb) { setTimeout(() => { cb([ /* réponse simulée */ ]) }, 100) } } }) // fonction utilitaire pour tester des actions avec les mutations attendues const testAction = (action, args, state, expectedMutations, done) => { let count = 0 // acter une simulation const commit = (type, payload) => { const mutation = expectedMutations[count] try { expect(mutation.type).to.equal(type) if (payload) { expect(mutation.payload).to.deep.equal(payload) } } catch (error) { done(error) } count++ if (count >= expectedMutations.length) { done() } } // appeler l'action avec le store simulé et les arguments action({ commit, state }, ...args) // vérifier qu'aucune mutation n'ait été propagée if (expectedMutations.length === 0) { expect(count).to.equal(0) done() } } describe('actions', () => { it('getAllProducts', done => { testAction(actions.getAllProducts, [], {}, [ { type: 'REQUEST_PRODUCTS' }, { type: 'RECEIVE_PRODUCTS', payload: { /* mocked response */ } } ], done) }) }) </code></pre> <h3 id="tester-les-accesseurs">Tester les accesseurs</h3> 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 accesseur : <pre class="language-"><code class="lang-js">// getters.js export const getters = { filteredProducts (state, { filterCategory }) { return state.products.filter(product => { return product.category === filterCategory }) } } </code></pre> <pre class="language-"><code class="lang-js">// getters.spec.js import { expect } from 'chai' import { getters } from './getters' describe('getters', () => { it('filteredProducts', () => { // état simulé const state = { products: [ { id: 1, title: 'Apple', category: 'fruit' }, { id: 2, title: 'Orange', category: 'fruit' }, { id: 3, title: 'Carrot', category: 'vegetable' } ] } // accesseur simulé const filterCategory = 'fruit' // obtenir le résultat depuis l'accesseur const result = getters.filteredProducts(state, { filterCategory }) // tester le résultat expect(result).to.deep.equal([ { id: 1, title: 'Apple', category: 'fruit' }, { id: 2, title: 'Orange', category: 'fruit' } ]) }) }) </code></pre> <h3 id="lancer-les-tests">Lancer les tests</h3> 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 <code>mocha-loader</code> ou Karma + <code>karma-webpack</code> afin d'effectuer les tests dans des vrais navigateurs. <h4 id="lancer-dans-nodejs">Lancer dans Node.js</h4> Créez la configuration webpack suivante (ainsi que le fichier <a href="https://babeljs.io/docs/usage/babelrc/" target="_blank"><code>.babelrc</code></a> qui correspond) : <pre class="language-"><code class="lang-js">// webpack.config.js module.exports = { entry: './test.js', output: { path: __dirname, filename: 'test-bundle.js' }, module: { loaders: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ } ] } } </code></pre> Puis : <pre class="language-"><code class="lang-bash">webpack mocha test-bundle.js </code></pre> <h4 id="lancer-dans-un-navigateur">Lancer dans un navigateur</h4> <ol> <li>Installez <code>mocha-loader</code>.</li> <li>Changez l'option <code>entry</code> de la configuration webpack ci-dessus pour <code>'mocha-loader!babel-loader!./test.js'</code>.</li> <li>Démarrez <code>webpack-dev-server</code> en utilisant la configuration.</li> <li>Rendez-vous avec votre navigateur sur <code>localhost:8080/webpack-dev-server/test-bundle</code>.</li> </ol> <h4 id="lancer-dans-un-navigateur-avec-karma--karma-webpack">Lancer dans un navigateur avec Karma + karma-webpack</h4> Consultez la procédure sur la <a href="https://vue-loader.vuejs.org/en/workflow/testing.html" target="_blank">documentation vue-loader</a>. </section> </div> <div class="search-results"> <div class="has-results"> <h1 class="search-results-title"> results matching ""</h1> <ul class="search-results-list"></ul> </div> <div class="no-results"> <h1 class="search-results-title">No results matching ""</h1> </div> </div> </div> </div> </div> <script src="//m.servedby-buysellads.com/monetization.js" type="text/javascript"></script> <div class="bsa-cpc"></div> <script> (function(){ if(typeof _bsa !== 'undefined' && _bsa) { _bsa.init('default', 'CKYD62QM', 'placement:vuejsorg', { target: '.bsa-cpc', align: 'horizontal', disable_css: 'true' }); } })(); </script> </div> <a href="forms.html" class="navigation navigation-prev " aria-label="Previous page: Gestion des formulaires"> </a> <a href="hot-reload.html" class="navigation navigation-next " aria-label="Next page: Rechargement à chaud"> </a> </div> <script> var gitbook = gitbook || []; gitbook.push(function() { gitbook.page.hasChanged({"page":{"title":"Tests","level":"1.11","depth":1,"next":{"title":"Rechargement à chaud","level":"1.12","depth":1,"path":"hot-reload.md","ref":"hot-reload.md","articles":[]},"previous":{"title":"Gestion des formulaires","level":"1.10","depth":1,"path":"forms.md","ref":"forms.md","articles":[]},"dir":"ltr"},"config":{"plugins":["edit-link","prism","-highlight","github","-highlight","github"],"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"pluginsConfig":{"prism":{},"github":{"url":"https://github.com/vuejs/vuex/"},"livereload":{},"search":{},"theme-vuejs":{},"lunr":{"maxIndexSize":1000000,"ignoreSpecialCharacters":false},"sharing":{"facebook":false,"twitter":false,"google":false,"weibo":false,"instapaper":false,"vk":false,"all":["facebook","google","twitter","weibo","instapaper"]},"edit-link":{"label":"Éditer cette page","base":"https://github.com/vuejs/vuex/tree/dev/docs"},"theme-default":{"styles":{"website":"styles/website.css","pdf":"styles/pdf.css","epub":"styles/epub.css","mobi":"styles/mobi.css","ebook":"styles/ebook.css","print":"styles/print.css"},"showLevel":false}},"theme":"default","pdf":{"pageNumbers":true,"fontSize":12,"fontFamily":"Arial","paperSize":"a4","chapterMark":"pagebreak","pageBreaksBefore":"/","margin":{"right":62,"left":62,"top":56,"bottom":56}},"structure":{"langs":"LANGS.md","readme":"README.md","glossary":"GLOSSARY.md","summary":"SUMMARY.md"},"variables":{},"title":"Vuex","language":"fr","links":{"sharing":{"facebook":false,"twitter":false}},"gitbook":"2.x.x"},"file":{"path":"testing.md","mtime":"2018-02-17T07:20:49.000Z","type":"markdown"},"gitbook":{"version":"3.2.3","time":"2018-03-02T20:43:43.208Z"},"basePath":".","book":{"language":"fr"}}); }); </script> </div> <script src="../gitbook/gitbook.js"></script> <script src="../gitbook/theme.js"></script> <script src="../gitbook/gitbook-plugin-edit-link/plugin.js"></script> <script src="../gitbook/gitbook-plugin-github/plugin.js"></script> <script src="../gitbook/gitbook-plugin-livereload/plugin.js"></script> <script src="../gitbook/gitbook-plugin-search/search-engine.js"></script> <script src="../gitbook/gitbook-plugin-search/search.js"></script> <script src="../gitbook/gitbook-plugin-lunr/lunr.min.js"></script> <script src="../gitbook/gitbook-plugin-lunr/search-lunr.js"></script> <script src="../gitbook/gitbook-plugin-sharing/buttons.js"></script> </body> </html>