Testing vuex

A297a5edc76d3041eb63ef6b7b4eba42?s=47 Jakub
October 15, 2016

Testing聽vuex

Testing a real world applcation build with vue.js and vuex.
Examples how to test vuex getters, mutations and actions

Presentation Repo on GitHub: https://github.com/apertureless/presentation-vuex-testing

Example Project on GitHub: https://github.com/apertureless/vuex-notes-app

A297a5edc76d3041eb63ef6b7b4eba42?s=128

Jakub

October 15, 2016
Tweet

Transcript

  1. 2.

    Requirements 路 Basic Javascript knowledge 路 Basic understanding on how

    Vue.js works 路 Basic Javascript Testing knowledge
  2. 4.

    路 What is Vuex 路 How does Vuex work 路

    Testing Vuex getters 路 Testing Vuex mutation 路 Testing Vuex actions 路 In a real world example.
  3. 7.

    Vuex is a state management pattern & framework. Inspired by

    facebooks flux pattern and redux implementation of it.
  4. 9.

    Simple Vue App new Vue({ // state data () {

    return { count: 0 } }, // view template: ` <div>{{ count }}</div> `, // actions methods: { increment () { this.count++ } } })
  5. 13.
  6. 15.
  7. 20.

    // getters.spec.js describe('getters', () => { // Mock state const

    state = { notes: [ { text: 'Mock', favorite: false }, { text: 'Mock2', favorite: true }, { text: 'Mock3', favorite: false }, ], activeNote: {} } it('notes', () => { // Get results with mocked state const result = getters.notes(state) // Assign results with state expect(result).to.deep.equal(state.notes) }) })
  8. 22.

    // mutations.js export const mutations = { addNote (state) {

    const newNote = { text: 'Neue Notiz', favorite: false } state.notes.push(newNote) state.activeNote = newNote }, ... }
  9. 23.

    // mutations.spec.js import { mutations } from '../../vuex/mutations' // destructure

    assign mutations const { addNote, editNote, deleteNote } = mutations describe('mutations', () => { it('addNote', () => { // mock state const state = { notes: [] } // apply mutation addNote(state) // assert result expect(state.notes).to.be.an('array') expect(state.notes[0].text).to.equal('Neue Notiz') }) })
  10. 24.

    Testing Actions // actions.js export const addNote = ({ commit

    }) => commit('addNote') export const editNote = ({ commit }, e) => commit('editNote', e.target.value) export const deleteNote = ({ commit }) => commit('deleteNote')
  11. 26.

    const testAction = (action, args, state, expectedMutations, done) => {

    let count = 0 // Mock Commit const commit = (type, payload) => { const mutation = expectedMutations[0] expect(mutation.type).to.equal(type) if (payload) { expect(mutation.payload).to.deep.equal(payload) } count ++ if (count >= expectedMutations.length) { done() } } // call the action with mocked store and arguments action({ commit, state }, ...args) // check if no mutations should have been dispatched if (expectedMutations.length === 0) { expect(count).to.equal(0) done() } }
  12. 27.

    helper.js 路 Mocks a vuex commit 路 Checks the expected

    mutation type with the dispatched 路 Checks payload
  13. 28.

    // actions.spec.js describe('actions', () => { it('addNote', (done) => {

    const state = store.state testAction(actions.addNote, [], state, [ { type: 'addNote' } ], done) }) ....
  14. 32.

    Example action // actions.js import shop from '../api/shop' export const

    getAllProducts = ({ dispatch }) => { dispatch('REQUEST_PRODUCTS') shop.getProducts(products => { dispatch('RECEIVE_PRODUCTS', products) }) }
  15. 33.

    Testing action with inject loader // use require syntax for

    inline loaders. // with inject-loader, this returns a module factory // that allows us to inject mocked dependencies. const actionsInjector = require('inject!./actions') // create the module with our mocks const actions = actionsInjector({ '../api/shop': { getProducts (cb) { setTimeout(() => { cb([ /* mocked response */ ]) }, 100) } } })
  16. 34.

    Testing it describe('actions', () => { it('getAllProducts', done => {

    testAction(actions.getAllProducts, [], {}, [ { type: 'REQUEST_PRODUCTS' }, { type: 'RECEIVE_PRODUCTS', payload: { /* mocked response */ } } ], done) }) })