feat: better wording for navigation redirected failure

Author: posva

examples/router-errors/app.js

@@ -17,6 +17,8 @@ const router = new VueRouter({
   ]
 })
 
+window.router = router
+
 router.beforeEach((to, from, next) => {
   console.log('from', from.fullPath)
   console.log('going to', to.fullPath)

src/history/errors.js

@@ -10,7 +10,9 @@ export function createNavigationRedirectedError (from, to) {
     from,
     to,
     NavigationFailureType.redirected,
-    `Redirected from "${from.fullPath}" to "${stringifyRoute(to)}" via a navigation guard.`
+    `Redirected when going from "${from.fullPath}" to "${stringifyRoute(
+      to
+    )}" via a navigation guard.`
   )
 }
 
@@ -28,7 +30,9 @@ export function createNavigationCancelledError (from, to) {
     from,
     to,
     NavigationFailureType.cancelled,
-    `Navigation cancelled from "${from.fullPath}" to "${to.fullPath}" with a new navigation.`
+    `Navigation cancelled from "${from.fullPath}" to "${
+      to.fullPath
+    }" with a new navigation.`
   )
 }
 
@@ -37,7 +41,9 @@ export function createNavigationAbortedError (from, to) {
     from,
     to,
     NavigationFailureType.aborted,
-    `Navigation aborted from "${from.fullPath}" to "${to.fullPath}" via a navigation guard.`
+    `Navigation aborted from "${from.fullPath}" to "${
+      to.fullPath
+    }" via a navigation guard.`
   )
 }
 

test/unit/specs/error-handling.spec.js

@@ -8,20 +8,25 @@ describe('error handling', () => {
   it('onReady errors', done => {
     const router = new VueRouter()
     const err = new Error('foo')
-    router.beforeEach(() => { throw err })
-    router.onError(() => { })
+    router.beforeEach(() => {
+      throw err
+    })
+    router.onError(() => {})
 
     const onReady = jasmine.createSpy('ready')
     const onError = jasmine.createSpy('error')
     const onPromiseReject = jasmine.createSpy('promise reject')
     router.onReady(onReady, onError)
 
-    router.push('/').catch(onPromiseReject).finally(() => {
-      expect(onReady).not.toHaveBeenCalled()
-      expect(onError).toHaveBeenCalledWith(err)
-      expect(onPromiseReject).toHaveBeenCalled()
-      done()
-    })
+    router
+      .push('/')
+      .catch(onPromiseReject)
+      .finally(() => {
+        expect(onReady).not.toHaveBeenCalled()
+        expect(onError).toHaveBeenCalledWith(err)
+        expect(onPromiseReject).toHaveBeenCalled()
+        done()
+      })
   })
 
   it('navigation errors', done => {
@@ -32,13 +37,18 @@ describe('error handling', () => {
     router.onError(spy)
 
     router.push('/')
-    router.beforeEach(() => { throw err })
-
-    router.push('/foo').catch(spy1).finally(() => {
-      expect(spy).toHaveBeenCalledWith(err)
-      expect(spy1).toHaveBeenCalled()
-      done()
+    router.beforeEach(() => {
+      throw err
     })
+
+    router
+      .push('/foo')
+      .catch(spy1)
+      .finally(() => {
+        expect(spy).toHaveBeenCalledWith(err)
+        expect(spy1).toHaveBeenCalled()
+        done()
+      })
   })
 
   it('NavigationDuplicated error', done => {
@@ -65,17 +75,15 @@ describe('error handling', () => {
     router.push('/')
   })
 
-  it('NavigationCancelled error for nested async navigation', (done) => {
+  it('NavigationCancelled error for nested async navigation', done => {
     const component = {
       template: `<img />`,
       beforeRouteEnter (to, from, next) {
         setTimeout(() => next(), 100)
       }
     }
     const router = new VueRouter({
-      routes: [
-        { path: '/a', component }
-      ]
+      routes: [{ path: '/a', component }]
     })
 
     router.push('/a').catch(err => {
@@ -96,14 +104,18 @@ describe('error handling', () => {
 
     router.push('/foo?redirect=/').catch(err => {
       expect(err.type).toBe(NavigationFailureType.redirected)
+      expect(err.from.path).toBe('/')
+      expect(err.to.path).toBe('/foo')
       done()
     })
   })
 
   it('NavigationAborted error', done => {
     const router = new VueRouter()
 
-    router.beforeEach((to, from, next) => { next(false) })
+    router.beforeEach((to, from, next) => {
+      next(false)
+    })
 
     router.push('/foo').catch(err => {
       expect(err.type).toBe(NavigationFailureType.aborted)
@@ -115,24 +127,27 @@ describe('error handling', () => {
     spyOn(console, 'warn')
     const err = new Error('foo')
     const spy1 = jasmine.createSpy('error')
-    const spy2 = jasmine.createSpy('errpr')
+    const spy2 = jasmine.createSpy('error')
     const spy3 = jasmine.createSpy('promise reject')
-    const Comp = () => { throw err }
+    const Comp = () => {
+      throw err
+    }
     const router = new VueRouter({
-      routes: [
-        { path: '/', component: Comp }
-      ]
+      routes: [{ path: '/', component: Comp }]
     })
 
     router.onError(spy1)
-    router.onReady(() => { }, spy2)
-
-    router.push('/').catch(spy3).finally(() => {
-      expect(spy1).toHaveBeenCalledWith(err)
-      expect(spy2).toHaveBeenCalledWith(err)
-      expect(spy3).toHaveBeenCalled()
-      expect(console.warn).toHaveBeenCalledTimes(1)
-      done()
-    })
+    router.onReady(() => {}, spy2)
+
+    router
+      .push('/')
+      .catch(spy3)
+      .finally(() => {
+        expect(spy1).toHaveBeenCalledWith(err)
+        expect(spy2).toHaveBeenCalledWith(err)
+        expect(spy3).toHaveBeenCalled()
+        expect(console.warn).toHaveBeenCalledTimes(1)
+        done()
+      })
   })
 })