Vues.jsユニットテストの突然変異は：突然変異なぜ機能

Question

の完全なテストが、私は理解していないことはできません：ダニ（状態）機能がテストされていないスコープ...フィードバックが

mutations.spec.js

を歓迎します、私のテストコードの行が表示されることはありませんログに

import Vue from 'vue' 
    import mutations from '@/vuex/mutations' 
    import * as types from '@/vuex/mutation_types' 
    import { WORKING_TIME, RESTING_TIME, KITTEN_TIME } from '@/config' 

    describe('mutations',() => { 
     var state 

     beforeEach(() => { 
     state = {} 
     // we don't need to test the plugin's functionality 
     // let's mock Vue noise plugin to be able to listen on its methods 
     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('START',() => { 
     it('should set all the properties correcly after start',() => { 
      // ensure that all the state properties are undefined 
      // before calling the start method 
      expect(state.started).to.be.undefined 
      expect(state.stopped).to.be.undefined 
      expect(state.paused).to.be.undefined 
      expect(state.interval).to.be.undefined 
      expect(state.counter).to.be.undefined 
      // call the start method 
      mutations[types.START](state) 
      // check that all the properties were correctly set 
      expect(state.started).to.be.true 
      expect(state.stopped).to.be.false 
      expect(state.paused).to.be.false 
     }) 
     it('should call Vue.noise.start method if both state.isWorking and state.soundEnabled are true',() => { 
      state.isWorking = true 
      state.soundEnabled = true 
      mutations[types.START](state) 
      expect(Vue.noise.start).to.have.been.called 
     }) 
     it('should not call Vue.noise.start method if state.isWorking is true',() => { 
      state.isWorking = false 
      state.soundEnabled = true 
      mutations[types.START](state) 
      expect(Vue.noise.start).to.not.have.been.called 
     }) 
     it('should not call Vue.noise.start method if state.soundEnabled is true',() => { 
      state.isWorking = true 
      state.soundEnabled = false 
      mutations[types.START](state) 
      expect(Vue.noise.start).to.not.have.been.called 
     }) 
     }) 
    }) 

...

console.log('TICK: ', state.counter) // <= NEVER DISPLAYED 

にconsole.log

yves$ npm run unit 

    > pomodoro@1.0.0 unit /Users/yves/Developments/pomodoro 
    > cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run 

    [karma]: Karma v1.7.1 server started at http://0.0.0.0:9876/ 
    [launcher]: Launching browser ChromeHeadless with unlimited concurrency 
    [launcher]: Starting browser ChromeHeadless 
    [HeadlessChrome 0.0.0 (Mac OS X 10.12.6)]: Connected on socket lqjww0M5006nHAlqAAAA with id 17876235 
    LOG LOG: 'START mutation' 
    LOG LOG: 'GOING TO SET INTERVAL W TICK' 
    LOG LOG: 'STATE INTERVAL IS NOW: ', 5 

    mutations 
     START 
      ✓ should set all the properties correcly after start 
    LOG LOG: 'START mutation' 
    LOG LOG: 'GOING TO SET INTERVAL W TICK' 
    >>> should be displayed here 
    LOG LOG: 'STATE INTERVAL IS NOW: ', 6 
      ✓ should call Vue.noise.start method if both state.isWorking and state.soundEnabled are true 
    LOG LOG: 'START mutation' 
    LOG LOG: 'GOING TO SET INTERVAL W TICK' 
    >>> should be displayed here 
    LOG LOG: 'STATE INTERVAL IS NOW: ', 7 
      ✓ should not call Vue.noise.start method if state.isWorking is true 
    LOG LOG: 'START mutation' 
    LOG LOG: 'GOING TO SET INTERVAL W TICK' 
    >>> should be displayed here 
    LOG LOG: 'STATE INTERVAL IS NOW: ', 8 
      ✓ should not call Vue.noise.start method if state.soundEnabled is true 

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) { 
     console.log('TOGGLEPomodoro: ', toggle) 
     if (_.isBoolean(toggle) === false) { 
     toggle = !state.isWorking 
     } 
     state.isWorking = toggle 
     console.log('state.isWorking: ', toggle) 
     if (state.isWorking) { 
     Vue.noise.start() 
     } else { 
     Vue.noise.pause() 
     } 
     state.counter = state.isWorking ? WORKING_TIME : RESTING_TIME 
    } 

    function tick (state) { 
     console.log('TICK: ', state.counter) // <= NEVER DISPLAYED 
     if (state.counter === 0) { 
     togglePomodoro(state) 
     } 
     state.counter-- 
     if (state.counter % KITTEN_TIME === 0) { 
     state.timestamp = new Date().getTime() 
     } 
    } 

    export default { 
     [types.START] (state) { 
     console.log('START mutation') 
     state.started = true 
     state.paused = false 
     state.stopped = false 
     console.log('GOING TO SET INTERVAL W TICK') 
     state.interval = setInterval(() => tick(state), 1000) // HOW CAN I CHECK IT ? 
     console.log('STATE INTERVAL IS NOW: ', state.interval) 
     if (state.isWorking && state.soundEnabled) { 
      Vue.noise.start() 
     } 
     } 
    } 

Answer 1

ソリューションは偽物にlolexパッケージ（タイマーのAPIのJavaScript実装）私のspecファイル内

npm install --save-dev lolex 

、その後を使用することですタイマー機能 1 - lolexを使用

var lolex = require('lolex') 

2 -

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

    beforeEach(() => { 
    clock = lolex.createClock() 
    state = {} 
    .... 

3クロックを生成 - ワーキングからスイッチをテスト - > 10秒 後休息期間（時間休止、作業突然変異にインポートconfig.jsのファイルで定義されています。 js。テスト目的のために短縮する必要があります...特定のconfig.test.jsファイルを定義することは可能でしょうか？）

clock.setTimeout（コールバック、遅延） mutation.jsの関数が呼び出され...それは

describe('TOGGLE WORKING->REST',() => { 
    it('should switch to REST period after 5 sec',() => { 
     state.isWorking = true 
     state.soundEnabled = true 
     state.interval = clock.setInterval(() => tick(state), 1000) 
     mutations[types.START](state) 
     expect(Vue.noise.start).to.have.been.called 
     state.counter = 0 
     // delay clock 
     clock.setTimeout(() => { 
     expect(state.isWorking).to.equal(false) 
     }, 5000) 
    }) 
    }) 

4の前にインポート/エクスポートされなければならない - 残りからスイッチをテスト - （タイムアウト前）（click.tickを使用して、>作業期間）に直前に状態を「作業中」から「休憩」に変更してください。

it('should switch back to WORK period after 10 sec',() => { 
    state.isWorking = true 
    state.soundEnabled = true 
    state.interval = clock.setInterval(() => tick(state), 1000) 
    mutations[types.START](state) 
    expect(Vue.noise.start).to.have.been.called 
    state.counter = 0 
    clock.tick(5000) // switch to REST period 
    // delay clock 
    clock.setTimeout(() => { 
     expect(state.isWorking).to.equal(false) 
    }, 5000) 
    }) 

etvoilà...ありがとうlolex ..