Vue.js vue-router anyway to test the navigation guards?

Admin 1
Viewed 2798

Is there any way to unit test the navigation guards in a router file ?

Could not find any post or link on this topic ... ant tips, trick or feedback welcome..

Here is the router/index.js , and I would like to test the 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
vue-router vue.js unit-testing
1 Answers

I found a way to do it, importing the router and using simply router.push) to navigate. I also need to stub the vueAuthInstance to authenticate or not the request

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')
  })
})
Admin1
Related