test: add e2e test for vuejs#2561

zrh122 · Mar 30, 2019 · c480f55 · c480f55
1 parent 7f55411
commit c480f55
Show file tree

Hide file tree

Showing 4 changed files with 131 additions and 0 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -25,6 +25,7 @@ <h1>Vue Router Examples</h1>
     <li><a href="auth-flow">Auth Flow</a></li>
     <li><a href="discrete-components">Discrete Components</a></li>
     <li><a href="nested-router">Nested Routers</a></li>
+    <li><a href="navigation-guard-callback">Navigation Guard Callback</a></li>
   </ul>
 </body>
 </html>
diff --git a/examples/navigation-guard-callback/app.js b/examples/navigation-guard-callback/app.js
@@ -0,0 +1,74 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+
+Vue.use(VueRouter)
+
+const Foo = {
+  template: '<div class="current">foo</div>',
+  beforeRouteEnter (to, from, next) {
+    // in-component beforeRouteEnter hook
+    next(vm => {
+      // print log
+      app.logText = 'beforeRouteEnter callback emited'
+    })
+  }
+}
+
+const Bar = { template: '<div class="current">bar</div>' }
+
+const router = new VueRouter({
+  mode: 'history',
+  base: __dirname,
+  routes: [
+    // foo1
+    { path: '/foo1', component: Foo },
+
+    // foo2, same component as foo1
+    { path: '/foo2', component: Foo },
+
+    // bar
+    { path: '/bar', component: Bar }
+  ]
+})
+
+const app = new Vue({
+  data: {
+    applyKeepAlive: false,
+    logText: ''
+  },
+  router,
+  template: `
+    <div id="app">
+      <h1>Navigation Guard Callback</h1>
+      <ul>
+        <li><router-link to="/" id="root">/</router-link></li>
+        <li><router-link to="/foo1" id="foo1">/foo1</router-link></li>
+        <li><router-link to="/foo2" id="foo2">/foo2</router-link></li>
+        <li><router-link to="/bar" id="bar">/bar</router-link></li>
+      </ul>
+      <div v-if="applyKeepAlive" class="keep-alive-wrap">
+        <keep-alive>
+          <router-view class="view"></router-view>
+        </keep-alive>
+      </div>
+      <div v-else>
+        <router-view class="view"></router-view>
+      </div>
+      <div class="log">{{logText}}</div>
+      <div>
+        <button class="btn-apply-keep-alive" @click="toggle">apply keep-alive</button>
+        <button class="btn-clear-log" @click="clear">clear log</button>
+      </div>
+    </div>
+  `,
+  methods: {
+    toggle () {
+      // wrap router-view with keep-alive
+      this.applyKeepAlive = true
+    },
+    clear () {
+      // clear log
+      this.logText = ''
+    }
+  }
+}).$mount('#app')
diff --git a/examples/navigation-guard-callback/index.html b/examples/navigation-guard-callback/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="/global.css">
+<style>
+.log { border: 1px solid #333; margin: 20px 0; min-height: 100px; }
+a.router-link-exact-active{ color: #f66; }
+</style>
+<a href="/">&larr; Examples index</a>
+<div id="app"></div>
+<script src="/__build__/shared.chunk.js"></script>
+<script src="/__build__/navigation-guard-callback.js"></script>
diff --git a/test/e2e/specs/navigation-guard-callback.js b/test/e2e/specs/navigation-guard-callback.js
@@ -0,0 +1,46 @@
+module.exports = {
+  'navigation guard callback': function (browser) {
+    browser
+      .url('http://localhost:8080/navigation-guard-callback/')
+      .waitForElementVisible('#app', 1000)
+      .assert.count('li a', 4)
+
+      .click('.btn-clear-log')
+      .assert.containsText('.log', '')
+      .click('#foo1')
+      .assert.containsText('.current', 'foo')
+      .assert.containsText('.log', 'beforeRouteEnter callback emited')
+
+      .click('#bar')
+      .assert.containsText('.current', 'bar')
+
+      .click('.btn-clear-log')
+      .assert.containsText('.log', '')
+      .click('#foo2')
+      .assert.containsText('.current', 'foo')
+      .assert.containsText('.log', 'beforeRouteEnter callback emited')
+
+      // back to root path
+      .click('#root')
+
+      // apply keep-alive
+      .click('.btn-apply-keep-alive')
+
+      // do the same
+      .click('.btn-clear-log')
+      .assert.containsText('.log', '')
+      .click('#foo1')
+      .assert.containsText('.current', 'foo')
+      .assert.containsText('.log', 'beforeRouteEnter callback emited')
+
+      .click('#bar')
+      .assert.containsText('.current', 'bar')
+
+      .click('.btn-clear-log')
+      .assert.containsText('.log', '')
+      .click('#foo2')
+      .assert.containsText('.current', 'foo')
+      .assert.containsText('.log', 'beforeRouteEnter callback emited')
+      .end()
+  }
+}