Vue.js突變單元測試w sinonjs/lolex爲什麼我的setInterval（）回調函數沒有執行

Question

我想測試我的mutation.js文件;測試正確執行，但看看覆蓋面，有一個功能（勾號（）），因爲它從來沒有被稱爲規範...

注意：我正在使用sinonjs/lolex來模擬傳球時間

mutation.spec.js

import Vue from 'vue' 
import mutations, { tick } from '@/vuex/mutations' 
import * as types from '@/vuex/mutation_types' 

import { WORKING_TIME, RESTING_TIME } from '@/config' 

const lolex = require('lolex') //JS implementation of timer APIs 

describe('mutations',() => { 
    let state 
    let clock 

    beforeEach(() => { 
    clock = lolex.createClock() 
    state = {} 
    Vue.noise = { 
     start:() => {}, 
     stop:() => {}, 
     pause:() => {} 
    } 
    sinon.spy(Vue.noise, 'start') 
    sinon.spy(Vue.noise, 'pause') 
    sinon.spy(Vue.noise, 'stop') 
    }) 
    afterEach(() => { 
    Vue.noise.start.restore() 
    Vue.noise.pause.restore() 
    Vue.noise.stop.restore() 
    }) 

    describe('TOGGLE WORKING->REST->WORKING',() => { 
    it('should switch to REST period after WORKING then back WORKING after RESTING',() => { 
     state.isWorking = true 
     state.soundEnabled = true 

     // IT SHOULD CALL THE TICK() imported method to cover it ! 
     state.interval = clock.setInterval(() => tick(state), 1000) 
     console.log('STATE INTERVAL: ', state.setInterval) 
     // console LOG: 'STATE INTERVAL: ', undefined 

     state.counter = 0 
     mutations[types.START](state) 
     expect(Vue.noise.start).to.have.been.called 
     clock.setTimeout(() => { 
     // should be resting now 
     expect(state.isWorking).to.equal(false) 
     clock.setTimeout(() => { 
      // should be back working now 
      expect(state.isWorking).to.equal(true) 
     }, WORKING_TIME + RESTING_TIME) 
     }, WORKING_TIME) 
    }) 
    }) 
}) 

vuex/mutation.js

import * as types from './mutation_types' 
    import _ from 'underscore' 
    import { WORKING_TIME, RESTING_TIME, KITTEN_TIME } from '../config' 
    import Vue from 'vue' 

    function togglePomodoro (state, toggle) { 
     if (_.isBoolean(toggle) === false) { 
     toggle = !state.isWorking 
     } 
     state.isWorking = toggle 
     if (state.isWorking) { 
     Vue.noise.start() 
     } else { 
     Vue.noise.pause() 
     } 
     state.counter = state.isWorking ? WORKING_TIME : RESTING_TIME 
    } 

    export function tick (state) { 
     console.log('tick called') 
     if (state.counter === 0) { 
     togglePomodoro(state) 
     } 
     state.counter-- 
     if (state.counter % KITTEN_TIME === 0) { 
     state.timestamp = new Date().getTime() 
     } 
    } 

    export default { 
     [types.START] (state) { 
     state.started = true 
     state.paused = false 
     state.stopped = false 
     state.interval = setInterval(() => tick(state), 1000) 
     if (state.isWorking && state.soundEnabled) { 
      Vue.noise.start() 
     } 
     }, 
    } 

Answer 1

使用lolex進行糟糕的書面測試！應寫成以下內容（使用clock.install（）和clock.tick（）：

import Vue from 'vue' 
import mutations from '@/vuex/mutations' 
import * as types from '@/vuex/mutation_types' 

import { WORKING_TIME, RESTING_TIME } from '@/config' 

const lolex = require('lolex') // JavaScript implementation of the timer APIs 

describe('mutations',() => { 
    let state 
    let clock 

    beforeEach(() => { 
    clock = lolex.install() 
    state = {} 
    Vue.noise = { 
     start:() => {}, 
     ... 
     ... 
    } 
    sinon.spy(Vue.noise, 'start') 
    ... 
    ... 
    }) 
    afterEach(() => { 
    Vue.noise.start.restore() 
    ... 
    ... 
    }) 


    describe('TOGGLE WORKING->REST->WORKING',() => { 
    it('should switch to REST period after WORKING then back WORKING after RESTING',() => { 
     state.isWorking = true 
     state.soundEnabled = true 
     state.counter = 0 
     mutations[types.START](state) 
     // console.log('STATE WORKING: ', JSON.stringify(state)) 
     expect(Vue.noise.start).to.have.been.called 
     // should be back working now 
     expect(state.isWorking).to.equal(true) 
     clock.tick(WORKING_TIME * 1000) 
     // console.log('STATE RESTING: ', JSON.stringify(state)) 
     // should be resting now 
     expect(state.isWorking).to.equal(false) 
     clock.tick(RESTING_TIME * 1000) 
     // console.log('STATE WORKING: ', JSON.stringify(state))s 
    }) 
    }) 
})