Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://vuex.vuejs.org/guide/testing.html below:

Testing | Vuex

The main parts we want to unit test in Vuex are mutations and actions.

Mutations are very straightforward to test, because they are just functions that completely rely on their arguments. One trick is that if you are using ES2015 modules and put your mutations inside your store.js file, in addition to the default export, you should also export the mutations as a named export:

const state = { ... }


export const mutations = { ... }

export default createStore({
  state,
  mutations
})

Example testing a mutation using Mocha + Chai (you can use any framework/assertion libraries you like):

export const mutations = {
  increment: state => state.count++
}

import { expect } from 'chai'
import { mutations } from './store'


const { increment } = mutations

describe('mutations', () => {
  it('INCREMENT', () => {
    
    const state = { count: 0 }
    
    increment(state)
    
    expect(state.count).to.equal(1)
  })
})

Actions can be a bit more tricky because they may call out to external APIs. When testing actions, we usually need to do some level of mocking - for example, we can abstract the API calls into a service and mock that service inside our tests. In order to easily mock dependencies, we can use webpack and inject-loader to bundle our test files.

Example testing an async action:

import shop from '../api/shop'

export const getAllProducts = ({ commit }) => {
  commit('REQUEST_PRODUCTS')
  shop.getProducts(products => {
    commit('RECEIVE_PRODUCTS', products)
  })
}

import { expect } from 'chai'
const actionsInjector = require('inject-loader!./actions')


const actions = actionsInjector({
  '../api/shop': {
    getProducts (cb) {
      setTimeout(() => {
        cb([  ])
      }, 100)
    }
  }
})


const testAction = (action, payload, state, expectedMutations, done) => {
  let count = 0

  
  const commit = (type, payload) => {
    const mutation = expectedMutations[count]

    try {
      expect(type).to.equal(mutation.type)
      expect(payload).to.deep.equal(mutation.payload)
    } catch (error) {
      done(error)
    }

    count++
    if (count >= expectedMutations.length) {
      done()
    }
  }

  
  action({ commit, state }, payload)

  
  if (expectedMutations.length === 0) {
    expect(count).to.equal(0)
    done()
  }
}

describe('actions', () => {
  it('getAllProducts', done => {
    testAction(actions.getAllProducts, null, {}, [
      { type: 'REQUEST_PRODUCTS' },
      { type: 'RECEIVE_PRODUCTS', payload: {  } }
    ], done)
  })
})

If you have spies available in your testing environment (for example via Sinon.JS), you can use them instead of the testAction helper:

describe('actions', () => {
  it('getAllProducts', () => {
    const commit = sinon.spy()
    const state = {}

    actions.getAllProducts({ commit, state })

    expect(commit.args).to.deep.equal([
      ['REQUEST_PRODUCTS'],
      ['RECEIVE_PRODUCTS', {  }]
    ])
  })
})

If your getters have complicated computation, it is worth testing them. Getters are also very straightforward to test for the same reason as mutations.

Example testing a getter:

export const getters = {
  filteredProducts (state, { filterCategory }) {
    return state.products.filter(product => {
      return product.category === filterCategory
    })
  }
}

import { expect } from 'chai'
import { getters } from './getters'

describe('getters', () => {
  it('filteredProducts', () => {
    
    const state = {
      products: [
        { id: 1, title: 'Apple', category: 'fruit' },
        { id: 2, title: 'Orange', category: 'fruit' },
        { id: 3, title: 'Carrot', category: 'vegetable' }
      ]
    }
    
    const filterCategory = 'fruit'

    
    const result = getters.filteredProducts(state, { filterCategory })

    
    expect(result).to.deep.equal([
      { id: 1, title: 'Apple', category: 'fruit' },
      { id: 2, title: 'Orange', category: 'fruit' }
    ])
  })
})

If your mutations and actions are written properly, the tests should have no direct dependency on Browser APIs after proper mocking. Thus you can simply bundle the tests with webpack and run it directly in Node. Alternatively, you can use mocha-loader or Karma + karma-webpack to run the tests in real browsers.

Create the following webpack config (together with proper .babelrc):

module.exports = {
  entry: './test.js',
  output: {
    path: __dirname,
    filename: 'test-bundle.js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      }
    ]
  }
}

Then:

webpack
mocha test-bundle.js

1. Install mocha-loader.
2. Change the entry from the webpack config above to 'mocha-loader!babel-loader!./test.js'.
3. Start webpack-dev-server using the config.
4. Go to localhost:8080/webpack-dev-server/test-bundle.

Consult the setup in vue-loader documentation.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4