Add tests for beforeRouteUpdate next callback

Author: thatguystone

examples/navigation-guards/app.js

@@ -33,7 +33,7 @@ const Baz = {
   },
   template: `
     <div>
-      <p>baz ({{ saved ? 'saved' : 'not saved' }})<p>
+      <p>baz ({{ saved ? 'saved' : 'not saved' }})</p>
       <button @click="saved = true">save</button>
     </div>
   `,
@@ -46,7 +46,7 @@ const Baz = {
   }
 }
 
-// Baz implements an in-component beforeRouteEnter hook
+// Qux implements an in-component beforeRouteEnter hook
 const Qux = {
   data () {
     return {
@@ -87,6 +87,57 @@ const Quux = {
   }
 }
 
+// Nested implements an in-component beforeRouteUpdate hook that uses
+// next(vm => {})
+const Nested = {
+  data () {
+    return {
+      calls: 0,
+      updates: 0
+    }
+  },
+  template: `
+    <div>
+      <p>
+        nested calls:{{ calls }} updates:{{ updates }}
+      </p>
+      <router-view></router-view>
+    </div>
+  `,
+  beforeRouteUpdate (to, from, next) {
+    // calls is incremented every time anything navigates, even if the
+    // navigation is canceled by a child component.
+    this.calls++
+
+    next(vm => {
+      // updates is only incremented once all children confirm and complete
+      // navigation. If any children load data async, then this will not be
+      // called until all children have called next() themselves. If any child
+      // cancels navigation, then this will never be called.
+      vm.updates++
+    })
+  }
+}
+
+// Buux implements a cancelable beforeRouteUpdate hook
+const Buux = {
+  data () {
+    return {
+      prevId: 0
+    }
+  },
+  template: `<div>buux id:{{ $route.params.id }} prevId:{{ prevId }}</div>`,
+  beforeRouteUpdate (to, from, next) {
+    if (window.confirm(`Navigate to ${to.path}?`)) {
+      next(vm => {
+        vm.prevId = from.params.id
+      })
+    } else {
+      next(false)
+    }
+  }
+}
+
 const router = new VueRouter({
   mode: 'history',
   base: __dirname,
@@ -114,7 +165,14 @@ const router = new VueRouter({
     } },
 
     // in-component beforeRouteUpdate hook
-    { path: '/quux/:id', component: Quux }
+    { path: '/quux/:id', component: Quux },
+    { path: '/nested', component: Nested,
+      children: [
+        { path: '', component: Home },
+        { path: 'qux', component: Qux },
+        { path: 'buux/:id', component: Buux }
+      ]
+    }
   ]
 })
 
@@ -140,6 +198,10 @@ new Vue({
         <li><router-link to="/qux-async">/qux-async</router-link></li>
         <li><router-link to="/quux/1">/quux/1</router-link></li>
         <li><router-link to="/quux/2">/quux/2</router-link></li>
+        <li><router-link to="/nested">/nested</router-link></li>
+        <li><router-link to="/nested/qux">/nested/qux</router-link></li>
+        <li><router-link to="/nested/buux/1">/nested/buux/1</router-link></li>
+        <li><router-link to="/nested/buux/2">/nested/buux/2</router-link></li>
       </ul>
       <router-view class="view"></router-view>
     </div>

test/e2e/specs/navigation-guards.js

@@ -8,7 +8,7 @@ module.exports = {
     browser
     .url('http://localhost:8080/navigation-guards/')
       .waitForElementVisible('#app', 1000)
-      .assert.count('li a', 8)
+      .assert.count('li a', 12)
       .assert.containsText('.view', 'home')
 
       .click('li:nth-child(2) a')
@@ -130,6 +130,32 @@ module.exports = {
     .click('li:nth-child(7) a')
       .assert.urlEquals('http://localhost:8080/navigation-guards/quux/1')
       .assert.containsText('.view', 'id:1 prevId:2')
-      .end()
+    .click('li:nth-child(9) a')
+      .assert.urlEquals('http://localhost:8080/navigation-guards/nested')
+      .assert.containsText('.view', 'nested calls:0 updates:0')
+    .click('li:nth-child(10) a')
+      .assert.containsText('.view', 'nested calls:1 updates:0')
+      .waitFor(300)
+      .assert.urlEquals('http://localhost:8080/navigation-guards/nested/qux')
+      .assert.containsText('.view', 'nested calls:1 updates:1')
+      .assert.containsText('.view', 'Qux')
+    .click('li:nth-child(11) a')
+      .assert.urlEquals('http://localhost:8080/navigation-guards/nested/buux/1')
+      .assert.containsText('.view', 'nested calls:2 updates:2')
+      .assert.containsText('.view', 'buux id:1 prevId:0')
+    .click('li:nth-child(12) a')
+      .dismissAlert()
+      .assert.urlEquals('http://localhost:8080/navigation-guards/nested/buux/1')
+      .assert.containsText('.view', 'nested calls:3 updates:2')
+      .assert.containsText('.view', 'buux id:1 prevId:0')
+    .click('li:nth-child(12) a')
+      .acceptAlert()
+      .assert.urlEquals('http://localhost:8080/navigation-guards/nested/buux/2')
+      .assert.containsText('.view', 'nested calls:4 updates:3')
+      .assert.containsText('.view', 'buux id:2 prevId:1')
+    .click('li:nth-child(9) a')
+      .assert.urlEquals('http://localhost:8080/navigation-guards/nested')
+      .assert.containsText('.view', 'nested calls:5 updates:4')
+    .end()
   }
 }