Question

有没有办法对路由器文件中的导航警卫进行单元测试？

无法在此主题上找到任何帖子或链接...蚂蚁提示，技巧或反馈欢迎..

这是router / index.js，我想测试一下router.beforeEach（）

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Home from '@/pages/HomePage'
    import Login from '@/pages/LoginPage'
    import ShoppingLists from '@/pages/ShoppingListsPage'

    import vueAuthInstance from '../services/auth.js'

    Vue.use(VueRouter)

    const router = new VueRouter({
      mode: 'history',
      routes: [
        {
          path: '/',
          name: 'home',
          component: Home,
          meta: { auth: false, title: 'Home' }
        },
        {
          path: '/login',
          name: 'login',
          component: Login,
          meta: { auth: false, title: 'Login' }
        },
        {
          path: '/shoppinglists',
          name: 'shoppinglists',
          component: ShoppingLists,
          meta: { auth: true, title: 'Shopping Lists' }
        },
        {
          path: '/logout',
          name: 'logout'
        }
      ]
    })

    router.beforeEach(function (to, from, next) {
      if (to.meta && to.meta.title) {
        document.title = to.meta.title
      }
      if (to.meta && to.meta.auth !== undefined) {
        if (to.meta.auth) {
          if (vueAuthInstance.isAuthenticated()) {
            next()
          } else {
            router.push({ name: 'login' })
          }
        } else {
          next()
        }
      } else {
        next()
      }
    })

    export default router

Answer 1

我找到了一种方法，导入路由器并使用简单的router.push）进行导航。我还需要存根vueAuthInstance来验证或不验证请求

    import VueRouter from 'vue-router'
    import Vue from 'vue'

    import sinon from 'sinon'

    import router from '@/router/index'
    import vueAuthInstance from '@/services/auth.js'

    Vue.use(VueRouter)

    describe('Router', () => {
      let sandbox

      beforeEach(() => {
        sandbox = sinon.sandbox.create()
        router
      })
      afterEach(() => {
        sandbox.restore()
      })

      it('should be in history mode', () => {
        sandbox.stub(vueAuthInstance, 'isAuthenticated').returns(false)
        expect(router.mode).to.eql('history')
      })

      it('should be able to navigate without authentication', () => {
        sandbox.stub(vueAuthInstance, 'isAuthenticated').returns(false)
        router.push('/')
        expect(router.history.current.path).to.eql('/')
        expect(router.getMatchedComponents('/')[0].name).to.eql('HomePage')
        router.push('/login')
        expect(router.history.current.path).to.eql('/login')
        expect(router.getMatchedComponents('/login')[0].name).to.eql('LoginPage')
      })

      it('should not be able to navigate to protected page when not authenticated', () => {
        sandbox.stub(vueAuthInstance, 'isAuthenticated').returns(false)
        router.push('/shoppinglists')
        expect(router.history.current.path).to.eql('/login')
        expect(router.getMatchedComponents('/login')[0].name).to.eql('LoginPage')
      })

      it('should be able to navigate to protected page when authenticated', () => {
        sandbox.stub(vueAuthInstance, 'isAuthenticated').returns(true)
        router.push('/shoppinglists')
        expect(router.history.current.path).to.eql('/shoppinglists')
        expect(router.getMatchedComponents('/shoppinglists')[0].name).to.eql('ShoppingListPage')
      })

      it('should be able to navigate to unprotected page when authenticated', () => {
        sandbox.stub(vueAuthInstance, 'isAuthenticated').returns(true)
        router.push('/home')
        expect(router.history.current.path).to.eql('/home')
        expect(router.getMatchedComponents('/')[0].name).to.eql('HomePage')
      })
    })

Vue.js vue-router无论如何要测试导航卫士？

1 个答案: