]> git.ipfire.org Git - thirdparty/vuejs/router.git/commitdiff
projects / thirdparty / vuejs / router.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 757a7c9)
test: onBeforeRouteLeave (#161)
authorAustin Akers <austin.akers5@gmail.com>
Tue, 7 Apr 2020 09:45:41 +0000 (04:45 -0500)
committerGitHub <noreply@github.com>
Tue, 7 Apr 2020 09:45:41 +0000 (11:45 +0200)
[ci skip]

e2e/navigation-guards/GuardedWithLeave.vue [new file with mode: 0644] patch | blob
e2e/navigation-guards/index.html [new file with mode: 0644] patch | blob
e2e/navigation-guards/index.ts [new file with mode: 0644] patch | blob
e2e/specs/navigation-guards.js [new file with mode: 0644] patch | blob
e2e/webpack.config.js patch | blob | blame | history

diff --git a/e2e/navigation-guards/GuardedWithLeave.vue b/e2e/navigation-guards/GuardedWithLeave.vue
new file mode 100644 (file)
index 0000000..0cf1007
--- /dev/null
+++ b/e2e/navigation-guards/GuardedWithLeave.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <p>try to leave</p>
+    <p id="tries">So far, you tried {{ tries }} times</p>
+  </div>
+</template>
+
+<script>
+// @ts-check
+import { defineComponent, ref } from 'vue'
+import { onBeforeRouteLeave } from '../../src'
+
+export default defineComponent({
+  name: 'GuardedWithLeave',
+
+  setup() {
+    console.log('setup in cant leave')
+    const tries = ref(0)
+
+    onBeforeRouteLeave(function(to, from, next) {
+      if (window.confirm()) next()
+      else {
+        tries.value++
+        next(false)
+      }
+    })
+    return { tries }
+  },
+})
+</script>
diff --git a/e2e/navigation-guards/index.html b/e2e/navigation-guards/index.html
new file mode 100644 (file)
index 0000000..81847f6
--- /dev/null
+++ b/e2e/navigation-guards/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Vue Router e2e tests - Navigation Guards</title>
+    <!-- TODO: replace with local imports for promises and anything else needed -->
+    <script src="https://polyfill.io/v3/polyfill.min.js?features=default%2Ces2015"></script>
+  </head>
+  <body>
+    <a href="/">&lt;&lt; Back to Homepage</a>
+    <hr />
+
+    <div id="app">
+      <ul>
+        <li>
+          <router-link to="/">/</router-link>
+        </li>
+        <li>
+          <router-link to="/cant-leave">/cant-leave</router-link>
+        </li>
+      </ul>
+
+      <router-view></router-view>
+    </div>
+  </body>
+</html>
diff --git a/e2e/navigation-guards/index.ts b/e2e/navigation-guards/index.ts
new file mode 100644 (file)
index 0000000..64b08bc
--- /dev/null
+++ b/e2e/navigation-guards/index.ts
@@ -0,0 +1,38 @@
+import { createRouter, createWebHistory, useRoute } from '../../src'
+import { RouteComponent } from '../../src/types'
+import { createApp } from 'vue'
+import GuardedWithLeave from './GuardedWithLeave'
+
+// const component: RouteComponent = {
+//   template: `<div>A component</div>`,
+// }
+
+const Home: RouteComponent = {
+  template: `<div>Home</div>`,
+}
+
+// const Document: RouteComponent = {
+//   template: `<div>Document: {{ route.params.id }}</div>`,
+//   setup() {
+//     return { route: useRoute() }
+//   },
+// }
+
+const router = createRouter({
+  history: createWebHistory('/' + __dirname),
+  routes: [
+    { path: '/', component: Home, name: 'home' },
+    { path: '/cant-leave', component: GuardedWithLeave },
+  ],
+})
+
+const app = createApp({
+  setup() {
+    const route = useRoute()
+    return { route }
+  },
+})
+app.use(router)
+
+window.vm = app.mount('#app')
+window.r = router
diff --git a/e2e/specs/navigation-guards.js b/e2e/specs/navigation-guards.js
new file mode 100644 (file)
index 0000000..ae454c9
--- /dev/null
+++ b/e2e/specs/navigation-guards.js
@@ -0,0 +1,34 @@
+const bsStatus = require('../browserstack-send-status')
+
+const baseURL = 'http://localhost:8080/navigation-guards'
+
+module.exports = {
+  ...bsStatus(),
+
+  /** @type {import('nightwatch').NightwatchTest} */
+  'blocks leaving navigation with onBeforeRouteLeave': function(browser) {
+    browser
+      .url(baseURL)
+      .assert.urlEquals(baseURL + '/')
+      .waitForElementVisible('#app', 1000)
+      .click('li:nth-child(2) a')
+      .assert.urlEquals(baseURL + '/cant-leave')
+      .assert.containsText('#tries', '0 times')
+      .click('li:nth-child(1) a')
+      .dismissAlert()
+      .waitFor(100)
+      .assert.urlEquals(baseURL + '/cant-leave')
+      .assert.containsText('#tries', '1 times')
+      .click('li:nth-child(1) a')
+      .dismissAlert()
+      .waitFor(100)
+      .assert.urlEquals(baseURL + '/cant-leave')
+      .assert.containsText('#tries', '2 times')
+      .click('li:nth-child(1) a')
+      .acceptAlert()
+      .waitFor(100)
+      .assert.urlEquals(baseURL + '/')
+
+      .end()
+  },
+}
diff --git a/e2e/webpack.config.js b/e2e/webpack.config.js
index 88ba9d08c2c7adb6e8ad9bb729b08cbc7f78fad2..60a9441e98714d33502bba0216e0ef2c8344584b 100644 (file)
--- a/e2e/webpack.config.js
+++ b/e2e/webpack.config.js
@@ -3,6 +3,7 @@ const fs = require('fs')
 const { resolve, join } = require('path')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const webpack = require('webpack')
+const { VueLoaderPlugin } = require('vue-loader')
 
 /** @type {string[]} */
 let examples = []
@@ -58,6 +59,10 @@ const config = (env = {}) => ({
         test: /\.ts$/,
         use: 'ts-loader',
       },
+      {
+        test: /\.vue$/,
+        use: 'vue-loader',
+      },
       {
         test: /\.css$/,
         use: ['style-loader', 'css-loader'],
@@ -70,9 +75,10 @@ const config = (env = {}) => ({
       'vue-router': join(__dirname, '..', 'src'),
     },
     // Add `.ts` and `.tsx` as a resolvable extension.
-    extensions: ['.ts', '.tsx', '.js'],
+    extensions: ['.ts', '.tsx', '.js', '.vue'],
   },
   plugins: [
+    new VueLoaderPlugin(),
     new webpack.DefinePlugin({
       __DEV__: JSON.stringify(process.env.NODE_ENV !== 'production'),
       __BROWSER__: `typeof window !== 'undefined'`,
Mirror of https://github.com/vuejs/router.git