Тестирование метода VueJS внутри обещания, которое возвращается из действия vuex

Question

У меня есть компонент Vue, который использует сопоставленное действие из хранилища Vuex, которое возвращает обещание. Когда компонент вызывает сопоставленное действие, и сопоставленное действие разрешается, я вызываю другой метод vue vm.$router.push(), Я хочу утверждать, что push метод вызывается. Вот мой компонент, тест и некоторые вспомогательные методы, которые я создал для добавления компонента с помощью vuex и vue-router.

Вот мой .vue компонент с некоторыми console.logs для отслеживания того, что происходит.

<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>

Вот мой тест. Я использую мокко, карму, чай и jquery-чиа

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 может быть ответ, но это не похоже на работу.

Спасибо за любую помощь.

Answer 1

Нет действительно хорошего способа сделать то, что вы хотите, нажав на кнопку. Более того, я не уверен, что это действительно стоит проверить, нажав кнопку. Если обработчики событий 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')
})