test: encoding in params and path

diff --git a/__tests__/HistoryMock.ts b/__tests__/HistoryMock.ts
index 357022f28a54778c6d5d52a51417111b1a95e285..f70f433edd064618b3a78dc73a6c20142b4b296f 100644 (file)
--- a/__tests__/HistoryMock.ts
+++ b/__tests__/HistoryMock.ts
@@ -4,8 +4,8 @@ import { AbstractHistory } from '../src/history/abstract'
 export class HistoryMock extends AbstractHistory {
   constructor(start: string | HistoryLocationNormalized = START) {
     super()
-    this.location =
+    const location =
       typeof start === 'string' ? this.utils.normalizeLocation(start) : start
-    this.queue = [this.location]
+    this.queue = [location]
   }
 }

diff --git a/__tests__/url-encoding.spec.js b/__tests__/url-encoding.spec.js
new file mode 100644 (file)
index 0000000..05d118e
--- /dev/null
+++ b/__tests__/url-encoding.spec.js
@@ -0,0 +1,52 @@
+// @ts-check
+require('./helper')
+const expect = require('expect')
+const { Router } = require('../src/router')
+const { createDom, components, tick, HistoryMock } = require('./utils')
+
+/** @type {import('../src/types').RouteRecord[]} */
+const routes = [
+  { path: '/%25', name: 'home', component: components.Home },
+  { path: '/to-p/:p', redirect: to => `/p/${to.params.p}` },
+  { path: '/p/:p', component: components.Bar },
+]
+
+function createHistory(initialUrl) {
+  return new HistoryMock(initialUrl)
+}
+
+describe('URL Encoding', () => {
+  beforeAll(() => {
+    createDom()
+  })
+
+  describe('initial navigation', () => {
+    it('decodes path', async () => {
+      const history = createHistory('/%25')
+      const router = new Router({ history, routes })
+      await router.doInitialNavigation()
+      expect(router.currentRoute).toEqual(
+        expect.objectContaining({
+          name: 'home',
+          fullPath: '/%25',
+          path: '/%25',
+        })
+      )
+    })
+
+    it('decodes params in path', async () => {
+      // /p/€
+      const history = createHistory('/p/%E2%82%AC')
+      const router = new Router({ history, routes })
+      await router.doInitialNavigation()
+      expect(router.currentRoute).toEqual(
+        expect.objectContaining({
+          name: undefined,
+          fullPath: encodeURI('/p/€'),
+          params: { p: '€' },
+          path: encodeURI('/p/€'),
+        })
+      )
+    })
+  })
+})

diff --git a/explorations/html5.html b/explorations/html5.html
index 2dd2944f7082b013380adec42da01f8c46548307..8dbf5b9bdac97a2982f0e61b52bb1c0aa0fa37ec 100644 (file)
--- a/explorations/html5.html
+++ b/explorations/html5.html
@@ -52,6 +52,11 @@
             >/docs/€uro (object)</router-link
           >
         </li>
+        <li>
+          <router-link :to="{ name: 'home', query: { currency: '€uro' }}"
+            >/currency=€uro (object)</router-link
+          >
+        </li>
         <li>
           <router-link to="/n/€">/n/€</router-link>
         </li>

diff --git a/explorations/html5.ts b/explorations/html5.ts
index 57e801289ea885280b62b95be14aa6a27cf73b94..68f35685080cb2295bfc6f8a424f5352bedd5bab 100644 (file)
--- a/explorations/html5.ts
+++ b/explorations/html5.ts
@@ -92,10 +92,10 @@ const hist = new HTML5History()
 const router = new Router({
   history: hist,
   routes: [
-    { path: '/', component: Home },
+    { path: '/', component: Home, name: 'home' },
     { path: '/users/:id', name: 'user', component: User },
     { path: '/documents/:id', name: 'docs', component: User },
-    { path: '/n/€', name: 'euro', component },
+    { path: encodeURI('/n/€'), name: 'euro', component },
     { path: '/n/:n', name: 'increment', component },
     { path: '/multiple/:a/:b', name: 'multiple', component },
     { path: '/long-:n', name: 'long', component: LongView },