vuex 작업에서 반환되는 약속 내부의 VueJS 메서드 테스트

vuex 작업에서 반환되는 약속 내부의 VueJS 메서드 테스트

Vue 구성 요소는 vuex 스토어의 매핑된 작업을 사용하여 약속을 반환합니다.구성 요소가 매핑된 작업을 호출하고 매핑된 작업이 해결되면 다른 vue 메서드를 호출합니다.vm.$router.push()나는 주장하고 싶습니다.push메서드가 호출됩니다.다음은 구성 요소, 테스트 및 구성 요소를 vuex 및 vue-router로 보충하기 위해 만든 몇 가지 도우미 메서드입니다.

여기 내꺼.vue콘솔이 있는 구성 요소입니다. 진행 상황을 추적할 수 있습니다.

<template>
  <div>
    <button @click="promise" class="click-promise">Promise</button>
  </div>
</template>

<script>
  import { mapActions } from 'vuex'

  export default {
  methods: {
    ...mapActions(['promiseAction']),
    promise(){
      const vm = this
      vm.$router.push('/some/route')
      console.log('before promiseAction')
      console.log(vm.promiseAction())
      return vm.promiseAction().then(function (response) {
        console.log('inside promiseAction')
        vm.$router.push('/some/other/route')
      })
    }
  }
}
</script>

여기 제 시험이 있습니다.모카, 카르마, 차이, 그리고 제쿼리치아를 사용하고 있습니다.

import Testing from '@/components/Testing'

describe('Testing.vue', () => {
  const mount = componentHelper(Testing)

  it.only('assert something in a promise returned from an action', () => {
    const promise = new Promise(resolve => resolve('success'))
    const promiseAction = stubAction('promiseAction').returns(promise)
    const vm = mount()
    const routerPush = sinon.spy(vm.$router, 'push')

    $('.click-promise').click()
    expect(promiseAction).to.have.been.called
    expect(routerPush).to.have.been.calledWith('/some/route') //this passes

    return vm.$nextTick(() => {
      console.log('inside nextTick')
      expect(routerPush).to.have.been.calledWith('/some/other/routes') //this never happens
    })
  })
})

그리고 여기 제 도우미 파일이 있습니다.이것이 100% 필요한 것인지는 모르겠지만, 이 게시물에 모든 것을 포함시키고 싶었습니다.

import Vue from 'vue'
import Vuex from 'vuex'
import VueRouter from 'vue-router'
Vue.use(Vuex)
Vue.use(VueRouter)

let div

beforeEach(() => {
  // create a dom element for the component to mount to
  div = document.createElement('div')
  document.body.appendChild(div)
})

afterEach(() => {
  // clean up the document nodes after each test
  Array.prototype.forEach.call(document.querySelectorAll('body *:not([type="text/javascript"])'), node => {
    node.parentNode.removeChild(node)
  })
})

// stub out a store config object
const storeConfig = {
  actions: {}
}

/**
 * Set up a function that will attach the mock store to the component
 * and mount the component to the test div element
 *
 * Use like this:
 * const mount = componentHelper(YourComponent)
 * do some setup
 * call mount() to instantiate the mocked component
 *
 * @param component
 * @returns {function()}
 */
window.componentHelper = function (component) {
  const router = new VueRouter({})
    return () => {
    // 1. attaches the stubbed store to the component
    component.store = new Vuex.Store(storeConfig)
    component.router = router
    // 2. mounts the component to the dom element
    // 3. returns the vue instance
    return new Vue(component).$mount(div)
  }
}

/**
 * Creates an action to be added to the fake store
 * returns a sinon stub which can be asserted against
 * @param actionName
 */
window.stubAction = (actionName) => {
  // 1. create a stub
  const stub = sinon.stub()
  // 2. create the action function that will be placed in the store and add it to the store
  storeConfig.actions[actionName] = function (context, ...args) {
    // 3. when this action is called it will call the stub
    // return the stub so you can assert against the stubbed return value
    // example: stubAction('fakeAction').returns('xyz')
    return stub(...args)
    }
  // 4. return the stub that was placed in the return of the action for assertions
  return stub
}

이 테스트를 실행하면 이렇게 됩니다.

LOG LOG: 'before promiseAction'
LOG LOG: Promise{_c: [], _a: undefined, _s: 1, _d: true, _v: 'success', _h: 0, _n: true}

  Testing.vue
    ✓ assert something in a promise returned from an action

PhantomJS 2.1.1 (Linux 0.0.0): Executed 1 of 4 SUCCESS (0.045 secs / 0.018 secs)
TOTAL: 1 SUCCESS


=============================== Coverage summary ===============================
Statements   : 31.58% ( 6/19 )
Branches     : 100% ( 0/0 )
Functions    : 0% ( 0/2 )
Lines        : 31.58% ( 6/19 )
================================================================================
LOG LOG: 'inside nextTick'
ERROR LOG: '[Vue warn]: Error in nextTick: "AssertionError: expected push to have been called with arguments /some/other/routes
/some/route /some/other/routes "

(found in <Root>)'
ERROR LOG: AssertionError{message: 'expected push to have been called with arguments /some/other/routes
/some/route /some/other/routes ', showDiff: false, actual: push, expected: undefined, stack: undefined, line: 210, sourceURL: 'http://localhost:9877/absolute/home/doug/Code/projects/vue-testing-sandbox/node_modules/chai/chai.js?ab7cf506d9d77c111c878b1e10b7f25348630760'}
LOG LOG: 'inside promiseAction'

보시다시피 테스트는 통과했지만 약속 내부의 코드는 테스트가 완료될 때까지 실행되지 않습니다.나는 이 섹션에 대해 말하고 있습니다.

return vm.promiseAction().then(function (response) {
    console.log('inside promiseAction')
    vm.$router.push('/some/other/route')
  })

약속 기능도 로그아웃했습니다.console.log(vm.promiseAction())그리고 당신이 기대하는 것을 볼 수 있습니다.

어떻게 하면 약속을 기다리는 시험을 볼 수 있을까요?내 생각에는 말이지…nextTick답일 수도 있지만, 효과가 없는 것 같습니다.

도와주셔서 감사합니다.

단추를 클릭하여 원하는 작업을 수행할 수 있는 좋은 방법은 없습니다.게다가, 저는 버튼을 클릭해서 그것을 테스트할 가치가 있는지조차 확신할 수 없습니다.Vue의 이벤트 핸들러가 제대로 작동하지 않으면 더 큰 문제가 발생합니다.

대신에 그냥 전화를 걸어보는 게 좋을 것 같아요.promise방법을 선택하고 해당 방법에서 반환된 약속의 성공 콜백에서 테스트를 실행합니다.

//execute the handler
const test = vm.promise()

// test that the pre-async actions occured
expect(promiseAction).to.have.been.called
expect(routerPush).to.have.been.calledWith('/some/route')

// test the post-async action occurred
return test.then(() => {
  expect(routerPush).to.have.been.calledWith('/some/other/routes')
})

언급URL : https://stackoverflow.com/questions/45652621/testing-vuejs-method-inside-of-a-promise-which-is-returned-from-a-vuex-action