小编Dry*_*ams的帖子

用户通过登录表单成功登录我的应用程序后.我想检查一下他们是否有个人资料.如果他们这样做,我想将他们发送到新闻页面.如果他们没有一套,我希望它将它们重定向到"设置"页面.我如何使用Vuex做到这一点？

我想有几个选择:

1.负责重定向的组件？(感觉不对)

Login.vue

handleFormSubmit () {
this.$store.dispatch('loginFormSubmit', formData)
    .then(() => {
      // This feels a bit gross
      this.$store.dispatch('getUserProfile')
        .then(() => this.$router.push('/news'))
        .catch(() => this.$router.push('/settings'))
    })
    .catch(() => {
      this.loginError = true
    })
}

我会在行动中承担责任吗？

用户actions.js

export const getUserProfile = ({commit}) => {
  commit(types.USER_PROFILE_REQUEST)
  const options = {
    url: `${API_URL}/profile`,
    method: 'GET'
  }

  return request(options)
    .then((profileSettings) => {
      // Would I change the router to News here??

      commit(types.USER_PROFILE_SUCCESS, profileSettings)
      return Promise.resolve(profileSettings)
    })
    .catch((error) => {
      // …

当我运行Karma / Jasmine测试时，在安装包含<router-link>组件的标头组件之后，控制台中将显示错误日志。一切运行正常，但似乎无法修复显示的错误。错误是：

ERROR LOG: '[Vue warn]: Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option. (found in <Header>)'

我已经做旧了，Vue.use(VueRouter)并且正在跑步"vue-router": "^2.4.0",

任何帮助将非常感激

SiteHeader.html

<header class="site-header">
 <div class="site-header__home-btn">
  <router-link to="home">Home</router-link>
 </div>
 <div class="site-header__info-bar">
  Info bar
 </div>
</header>

SiteHeader.vue

<template src="./SiteHeader.html"></template>
<style scoped lang="sass" src="./SiteHeader.scss"></style>

<script>
export default {
 name: 'site-header'
}
</script>

SiteHeader.spec.js

import Vue from 'vue'
import SiteHeader from '../SiteHeader.vue'

describe('SiteHeader', () => …

我只想测试myAwesome当我的App.vue组件是created(). 这是你要测试的东西吗？我正在使用 Jasmine 进行这些测试。任何帮助都是极好的！

应用程序.js

describe('when app is created()', () => {
  it('should dispatch myAwesomeAction', (done) => {

    const actions = {
      myAwesomeAction() {
        console.log('myAwesomeAction')
        // commit()
      }
    }

    const state = {
      myAwesomeAction: false
    }

    const mutations = {
      LOAD_SUCCESS(state) {
        state.myAwesomeAction = true
      }
    }

    const options = {
      state,
      mutations,
      actions
    }

    const mockStore = new Vuex.Store(options)

    spyOn(mockStore, 'dispatch')

    const vm = new Vue({
      template: '<div><component></component></div>',
      store: mockStore,
      components: {
        'component': …

在我的 Nightwatch 测试中，我有一个 before 每个运行并从 Facebook 中删除一个应用程序。如果应用程序不存在，我只想停止之前的测试。

.waitForElementPresent('#root div.touchable a', 2000, false, function (result) {
  if (result.value === false) {
    browser.saveScreenshot('./test/e2e/img/element-not-there.png')
    browser.end()
  }
})
.doSomethingIfElementIsThere() // not real ;)

即使设置了false参数，这似乎也不起作用。我收到此错误：

ERROR: Unable to locate element: "#root div.touchable a" using: css selector
    at Object.before (/Users/user/projects/project/test/e2e/specs/testy-mc-test-face.js:30:8)
 ? Timed out while waiting for element <#root div.touchable a> to be present for 2500 milliseconds.  - expected "found" but got: "not found"
    at Object.before (/Users/user/projects/project/test/e2e/specs/testy-mc-test-face.js:30:8)

只是想知道如何检查某些东西而不是错误。或者如果元素存在，则继续断言？

谢谢水桶