vuex/test/test.js

import { expect } from 'chai'
import Vue from 'vue'
import Vuex from '../src'
import * as util from '../src/util'

Vue.use(Vuex)

const TEST = 'TEST'

describe('Vuex', () => {
  it('direct dispatch', () => {
    const store = new Vuex.Store({
      state: {
        a: 1
      },
      mutations: {
        [TEST] (state, n) {
          state.a += n
        }
      }
    })
    store.dispatch(TEST, 2)
    expect(store.state.a).to.equal(3)
  })

  it('simple action', function () {
    const store = new Vuex.Store({
      state: {
        a: 1
      },
      actions: {
        test: TEST
      },
      getters: {
        getA (state) {
          return state.a
        }
      },
      mutations: {
        [TEST] (state, n) {
          state.a += n
        }
      }
    })
    store.actions.test(2)
    expect(store.state.a).to.equal(3)
    expect(store.getters.getA()).to.equal(3)
  })

  it('async action', function (done) {
    const TEST = 'TEST'
    const store = new Vuex.Store({
      state: {
        a: 1,
        timeout: 10
      },
      actions: {
        test: ({ dispatch, state }, n) => {
          setTimeout(() => {
            dispatch(TEST, n)
          }, state.timeout)
        }
      },
      mutations: {
        [TEST] (state, n) {
          state.a += n
        }
      }
    })
    store.actions.test(2)
    setTimeout(() => {
      expect(store.state.a).to.equal(3)
      done()
    }, store.state.timeout)
  })

  it('array option syntax', function () {
    const TEST2 = 'TEST2'
    const store = new Vuex.Store({
      state: {
        a: 1,
        b: 1,
        c: 1
      },
      actions: [{ test: TEST }, { test2: TEST2 }],
      mutations: [
        {
          [TEST] (state, n) {
            state.a += n
          }
        },
        // allow multiple handlers for the same mutation type
        {
          [TEST] (state, n) {
            state.b += n
          },
          [TEST2] (state, n) {
            state.c += n
          }
        }
      ],
      getters: [
        {
          getA (state) {
            return state.a
          }
        },
        {
          getB (state) {
            return state.b
          },

          getC (state) {
            return state.c
          }
        }
      ]
    })
    store.actions.test(2)
    expect(store.state.a).to.equal(3)
    expect(store.state.b).to.equal(3)
    expect(store.state.c).to.equal(1)
    expect(store.getters.getA()).to.equal(3)
    expect(store.getters.getB()).to.equal(3)
    expect(store.getters.getC()).to.equal(1)
    store.actions.test2(2)
    expect(store.state.c).to.equal(3)
  })

  it('hot reload', function () {
    const store = new Vuex.Store({
      state: {
        a: 1,
        b: 2
      },
      actions: {
        test: TEST
      },
      mutations: {
        [TEST] (state, n) {
          state.a += n
        }
      },
      getters: {
        getA (state) {
          return state.b
        }
      }
    })
    const test = store.actions.test
    test(2)
    expect(store.state.a).to.equal(3)
    expect(store.getters.getA()).to.equal(2)
    store.hotUpdate({
      actions: {
        test: ({ dispatch }, n) => dispatch(TEST, n + 1)
      },
      mutations: {
        [TEST] (state, n) {
          state.a = n
        }
      },
      getters: {
        getA (state) {
          return state.a
        }
      }
    })
    test(999)
    expect(store.state.a).to.equal(1000)
    expect(store.getters.getA()).to.equal(1000)
  })

  it('middleware', function () {
    let initState
    const mutations = []
    const store = new Vuex.Store({
      state: {
        a: 1
      },
      actions: {
        test: TEST
      },
      mutations: {
        [TEST] (state, n) {
          state.a += n
        }
      },
      middlewares: [
        {
          onInit (state) {
            initState = state
          },
          onMutation (mut, state) {
            expect(state).to.equal(store.state)
            mutations.push(mut)
          }
        }
      ]
    })
    expect(initState).to.equal(store.state)
    store.actions.test(2)
    expect(mutations.length).to.equal(1)
    expect(mutations[0].type).to.equal(TEST)
    expect(mutations[0].payload[0]).to.equal(2)
  })

  it('middleware with snapshot', function () {
    let initState
    const mutations = []
    const store = new Vuex.Store({
      state: {
        a: 1
      },
      actions: {
        test: TEST
      },
      mutations: {
        [TEST] (state, n) {
          state.a += n
        }
      },
      middlewares: [
        {
          snapshot: true,
          onInit (state) {
            initState = state
          },
          onMutation (mutation, nextState, prevState) {
            mutations.push({
              mutation,
              nextState,
              prevState
            })
          }
        }
      ]
    })
    expect(initState).not.to.equal(store.state)
    expect(initState.a).to.equal(1)
    store.actions.test(2)
    expect(mutations.length).to.equal(1)
    expect(mutations[0].mutation.type).to.equal(TEST)
    expect(mutations[0].mutation.payload[0]).to.equal(2)
    expect(mutations[0].nextState).not.to.equal(store.state)
    expect(mutations[0].prevState.a).to.equal(1)
    expect(mutations[0].nextState.a).to.equal(3)
  })

  it('strict mode: warn mutations outside of handlers', function () {
    const store = new Vuex.Store({
      state: {
        a: 1
      },
      actions: {
        test: ({ dispatch, state }) => {
          state.a++
        }
      },
      strict: true
    })
    expect(() => {
      store.actions.test(2)
    }).to.throw(/Do not mutate vuex store state outside mutation handlers/)
  })
})