test(e2e): setup e2e tests

diff --git a/e2e/runner.js b/e2e/runner.js
index d17dee998b119ab1490802e196738415ff0c3b7b..c8de873c2d50f1f639631b6f9b255dbfd9b954db 100644 (file)
--- a/e2e/runner.js
+++ b/e2e/runner.js
@@ -26,8 +26,7 @@ const Nightwatch = require('nightwatch')
 const args = process.argv.slice(2)
 
 // if we are running yarn dev locally, we can pass --dev to avoid launching another server instance
-const server =
-  args.indexOf('--dev') > -1 ? null : require('../../examples/server')
+const server = args.indexOf('--dev') > -1 ? null : require('../examples/server')
 
 // allow running browserstack local
 const isLocal = args.indexOf('--local') > -1

diff --git a/e2e/specs/basic.js b/e2e/specs/basic.js
deleted file mode 100644 (file)
index 28f62c1..0000000
--- a/e2e/specs/basic.js
+++ /dev/null
@@ -1,27 +0,0 @@
-const bsStatus = require('../browserstack-send-status')
-
-module.exports = {
-  ...bsStatus(),
-
-  '@tags': ['history'],
-
-  basic(browser) {
-    browser
-      .url('http://localhost:8080')
-      .waitForElementVisible('#app', 1000)
-      // .assert.count('li', 8)
-
-      .click('li:nth-child(2) a')
-      .assert.urlEquals('http://localhost:8080/documents/%E2%82%ACuro')
-      .assert.containsText('#fullPath', '/documents/%E2%82%ACuro')
-      .assert.containsText('#path', '/documents/%E2%82%ACuro')
-      .assert.containsText('#params', JSON.stringify({ id: '€uro' }, null, 2))
-
-      // check initial visit
-      .url('http://localhost:8080/users/2')
-      .waitForElementVisible('#app', 1000)
-      .assert.containsText('#params', JSON.stringify({ id: '2' }, null, 2))
-
-      .end()
-  },
-}

diff --git a/e2e/specs/encoding.js b/e2e/specs/encoding.js
new file mode 100644 (file)
index 0000000..305f501
--- /dev/null
+++ b/e2e/specs/encoding.js
@@ -0,0 +1,37 @@
+const bsStatus = require('../browserstack-send-status')
+
+const baseURL = 'http://localhost:8080/encoding'
+
+module.exports = {
+  ...bsStatus(),
+
+  '@tags': ['history', 'encoding'],
+
+  /** @type {import('nightwatch').NightwatchTest} */
+  basic(browser) {
+    browser
+      .url(baseURL)
+      .waitForElementVisible('#app', 1000)
+
+      .click('li:nth-child(3) a')
+      .assert.urlEquals(baseURL + '/documents/%E2%82%ACuro')
+      .assert.containsText('#fullPath', '/documents/%E2%82%ACuro')
+      .assert.containsText('#path', '/documents/%E2%82%ACuro')
+      .assert.containsText('#params', JSON.stringify({ id: '€uro' }, null, 2))
+
+      // check initial visit
+      .url(baseURL + '/encoding/documents/%E2%82%ACuro')
+      .waitForElementVisible('#app', 1000)
+      .assert.containsText('#fullPath', '/documents/%E2%82%ACuro')
+      .assert.containsText('#path', '/documents/%E2%82%ACuro')
+    // .assert.containsText('#params', JSON.stringify({ id: '€uro' }, null, 2))
+    // .assert.containsText('#params', JSON.stringify({ id: '€uro' }, null, 2))
+
+    browser
+      .getText('#params', function(res) {
+        this.assert.equal(res.value, JSON.stringify({ id: '€uro' }, null, 2))
+        console.log(res.state)
+      })
+      .end()
+  },
+}

diff --git a/examples/encoding/index.html b/examples/encoding/index.html
index ca1ab4c84201d13f1ce25dc42cb539e45ae35560..9c304ecd0984912735703c5cf3ce48558c290701 100644 (file)
--- a/examples/encoding/index.html
+++ b/examples/encoding/index.html
@@ -12,32 +12,32 @@
     <div id="app">
       <section class="info">
         Name:
-        <pre id="name">{{ $route.name }}</pre>
+        <pre id="name">{{ route.name }}</pre>
       </section>
 
       <section class="info">
         Params:
-        <pre id="params">{{ $route.params }}</pre>
+        <pre id="params">{{ route.params }}</pre>
       </section>
 
       <section class="info">
         Query:
-        <pre id="query">{{ $route.query }}</pre>
+        <pre id="query">{{ route.query }}</pre>
       </section>
 
       <section class="info">
         Hash:
-        <pre id="hash">{{ $route.hash }}</pre>
+        <pre id="hash">{{ route.hash }}</pre>
       </section>
 
       <section class="info">
         FullPath:
-        <pre id="fullPath">{{ $route.fullPath }}</pre>
+        <pre id="fullPath">{{ route.fullPath }}</pre>
       </section>
 
       <section class="info">
         path:
-        <pre id="path">{{ $route.path }}</pre>
+        <pre id="path">{{ route.path }}</pre>
       </section>
 
       <hr />
@@ -63,10 +63,14 @@
           >
         </li>
         <li>
-          <a href="/encoding/n/%E2%82%AC">/n/%E2%82%AC (force reload)</a>
+          <a href="/encoding/documents/%E2%82%AC"
+            >/n/%E2%82%AC (force reload)</a
+          >
         </li>
         <li>
-          <a href="/encoding/n/€">/n/€ (force reload): not valid tho</a>
+          <a href="/encoding/documents/€"
+            >/n/€ (force reload. not valid but should not crash the router)</a
+          >
         </li>
       </ul>
 

diff --git a/examples/encoding/index.ts b/examples/encoding/index.ts
index 9f4fc5297dbd0433d0cec7f150d60a306f1c6d46..a63ccebc3a6c0d0eeb6cbcd2604755311001766d 100644 (file)
--- a/examples/encoding/index.ts
+++ b/examples/encoding/index.ts
@@ -1,6 +1,6 @@
-import { Router, plugin, createHistory } from '../../src'
+import { createRouter, createWebHistory, useRoute } from '../../src'
 import { RouteComponent } from '../../src/types'
-import Vue from 'vue'
+import { createApp } from 'vue'
 
 const component: RouteComponent = {
   template: `<div>A component</div>`,
@@ -11,11 +11,14 @@ const Home: RouteComponent = {
 }
 
 const Document: RouteComponent = {
-  template: `<div>Document: {{ $route.params.id }}</div>`,
+  template: `<div>Document: {{ route.params.id }}</div>`,
+  setup() {
+    return { route: useRoute() }
+  },
 }
 
-const router = new Router({
-  history: createHistory('/' + __dirname),
+const router = createRouter({
+  history: createWebHistory('/' + __dirname),
   routes: [
     { path: '/', component: Home, name: 'home' },
     { path: '/documents/:id', name: 'docs', component: Document },
@@ -23,12 +26,12 @@ const router = new Router({
   ],
 })
 
-// use the router
-Vue.use(plugin)
-
-// @ts-ignore
-window.vm = new Vue({
-  el: '#app',
-  // @ts-ignore
-  router,
+const app = createApp({
+  setup() {
+    const route = useRoute()
+    return { route }
+  },
 })
+app.use(router)
+
+window.vm = app.mount('#app')

diff --git a/examples/global.css b/examples/global.css
index 915be034306b651727f5b353bd04f47e155caf14..6d42c33683dce57dcd4465e3bb145deee0744165 100644 (file)
--- a/examples/global.css
+++ b/examples/global.css
@@ -22,3 +22,10 @@ a {
 a:hover {
   color: #4fc08d;
 }
+
+.router-link-active {
+  color: darkorange;
+}
+.router-link-exact-active {
+  color: red;
+}

diff --git a/examples/hash/index.ts b/examples/hash/index.ts
index 04ddab589d855dd8465a126b3f5a581bc5c1937c..a174b191c2e22d66ff9698d37f9febd4bce2cf1f 100644 (file)
--- a/examples/hash/index.ts
+++ b/examples/hash/index.ts
@@ -1,6 +1,6 @@
-import { Router, plugin, createHashHistory } from '../../src'
+import { createRouter, createWebHistory } from '../../src'
 import { RouteComponent } from '../../src/types'
-import Vue from 'vue'
+import { createApp } from 'vue'
 
 const component: RouteComponent = {
   template: `<div>A component</div>`,
@@ -14,8 +14,8 @@ const Document: RouteComponent = {
   template: `<div>Document: {{ $route.params.id }}</div>`,
 }
 
-const router = new Router({
-  history: createHashHistory('/' + __dirname),
+const router = createRouter({
+  history: createWebHistory('/' + __dirname),
   routes: [
     { path: '/', component: Home, name: 'home' },
     { path: '/documents/:id', name: 'docs', component: Document },
@@ -23,12 +23,7 @@ const router = new Router({
   ],
 })
 
-// use the router
-Vue.use(plugin)
+const app = createApp({})
+app.use(router)
 
-// @ts-ignore
-window.vm = new Vue({
-  el: '#app',
-  // @ts-ignore
-  router,
-})
+window.vm = app.mount('#app')

diff --git a/examples/index.html b/examples/index.html
index 44af7d0b303c1042068490d2de8009ec903d1206..e45bab93c55574bd327a68b731a1946373c9a8a3 100644 (file)
--- a/examples/index.html
+++ b/examples/index.html
@@ -12,7 +12,7 @@
 
       <ul>
         <li v-for="example in examples">
-          <a :href="example">/{{ example }}</a>
+          <a :href="'/' + example">/{{ example }}</a>
         </li>
       </ul>
     </div>

diff --git a/examples/index.ts b/examples/index.ts
index c63a4d32b06081d3c37b1f64af3bcf0ca6e06dae..157c08dd658efa1daae78649032d959237e4e1e6 100644 (file)
--- a/examples/index.ts
+++ b/examples/index.ts
@@ -1,4 +1,4 @@
-import Vue from 'vue'
+import { createApp, ComponentPublicInstance } from 'vue'
 
 const context = require.context('.', true, /^.{2,}\/index\.ts$/)
 const DIR_RE = /^\.\/([^/]+)\//
@@ -11,7 +11,16 @@ context.keys().forEach(path => {
 })
 examples.sort()
 
-new Vue({
-  el: '#app',
-  data: { examples },
+declare global {
+  interface Window {
+    app: typeof app
+    vm: ComponentPublicInstance
+  }
+}
+
+const app = createApp({
+  data: () => ({ examples }),
 })
+
+app.mount('#app')
+window.app = app

diff --git a/examples/server.js b/examples/server.js
new file mode 100644 (file)
index 0000000..5a3bfad
--- /dev/null
+++ b/examples/server.js
@@ -0,0 +1,12 @@
+const webpack = require('webpack')
+const WebpackDevServer = require('webpack-dev-server')
+const webpackConfig = require('./webpack.config')
+
+const compiler = webpack(webpackConfig)
+
+const app = new WebpackDevServer(compiler, webpackConfig.devServer)
+
+const port = process.env.PORT || 8080
+module.exports = app.listen(port, () => {
+  console.log(`Server listening on http://localhost:${port}, Ctrl+C to stop`)
+})

diff --git a/examples/tsconfig.json b/examples/tsconfig.json
index dbdce62e2927e02860a89f7c9ef2685abdda248b..95aceb4d8875dcd9cf30a0280d025b78d10eb4f7 100644 (file)
--- a/examples/tsconfig.json
+++ b/examples/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "include": ["index.ts", "*/*ts"],
+  "include": ["index.ts", "*/*ts", "../src/global.d.ts"],
   "compilerOptions": {
     "target": "es5",
     "module": "commonjs",

diff --git a/examples/webpack.config.js b/examples/webpack.config.js
index 6ce4c6b06f3fcf74ad6d2c9db6fe2fd690b9aff8..545c1340dd0a8ac85119a166d4ed026f57bff961 100644 (file)
--- a/examples/webpack.config.js
+++ b/examples/webpack.config.js
@@ -34,6 +34,7 @@ module.exports = {
       })),
     },
     hot: true,
+    stats: 'minimal',
   },
 
   entry: examples.reduce(
@@ -72,6 +73,13 @@ module.exports = {
     extensions: ['.ts', '.tsx', '.js'],
   },
   plugins: [
+    new webpack.DefinePlugin({
+      __DEV__: JSON.stringify(process.env.NODE_ENV !== 'production'),
+      __BROWSER__: `typeof window !== 'undefined'`,
+      'process.env': {
+        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+      },
+    }),
     ...examples.map(
       name =>
         new HtmlWebpackPlugin({
@@ -85,10 +93,5 @@ module.exports = {
       chunks: ['index'],
       template: resolve(__dirname, 'index.html'),
     }),
-    new webpack.DefinePlugin({
-      'process.env': {
-        NODE_ENV: JSON.stringify(process.env.NODE_ENV),
-      },
-    }),
   ],
 }