test(e2e): add hash test

diff --git a/e2e/hash/index.html b/e2e/hash/index.html
index 673c2020575b8630b97b6a410a1e387c08619c1f..6290ca226eacd7fe8cec21b0485ec6d5c7da4cde 100644 (file)
--- a/e2e/hash/index.html
+++ b/e2e/hash/index.html
@@ -13,70 +13,43 @@
     <hr />
 
     <div id="app">
-      <section class="info">
-        Name:
-        <pre id="name">{{ route.name }}</pre>
-      </section>
-
-      <section class="info">
-        Params:
-        <pre id="params">{{ route.params }}</pre>
-      </section>
-
-      <section class="info">
-        Query:
-        <pre id="query">{{ route.query }}</pre>
-      </section>
-
-      <section class="info">
-        Hash:
-        <pre id="hash">{{ route.hash }}</pre>
-      </section>
-
-      <section class="info">
-        FullPath:
-        <pre id="fullPath">{{ route.fullPath }}</pre>
-      </section>
-
-      <section class="info">
-        path:
-        <pre id="path">{{ route.path }}</pre>
-      </section>
-
-      <hr />
-
       <ul>
+        <li><router-link to="/">/</router-link></li>
+        <li><router-link to="/foo">/foo</router-link></li>
+        <li><router-link to="/bar">/bar</router-link></li>
+        <li><router-link :to="{ name: 'encoded' }">/n/é</router-link></li>
+        <li><router-link to="/unicode/é">/unicode/é</router-link></li>
         <li>
-          <router-link to="/">/</router-link>
-        </li>
-        <li>
-          <router-link to="/documents/%E2%82%AC"
-            >/documents/%E2%82%AC</router-link
-          >
-        </li>
-        <li>
-          <router-link :to="{ name: 'docs', params: { id: '€uro' }}"
-            >/documents/€uro (object)</router-link
+          <router-link :to="{ name: 'unicode', params: { id: 'é' }}"
+            >/unicode/é (correctly encoded)</router-link
           >
         </li>
         <li>
-          <router-link
-            :to="{ name: 'home', query: { currency: '€uro', 'é': 'e' }}"
+          <router-link :to="{ path: '/', query: { t: 'é', 'é': 'e' }}"
             >/?currency=€uro&é=e (object)</router-link
           >
         </li>
         <li>
-          <a href="/hash/#/documents/%E2%82%AC"
-            >/documents/%E2%82%AC (force reload)</a
+          <a href="/hash/#/unicode/%E2%82%AC"
+            >/unicode/%E2%82%AC (force reload)</a
           >
         </li>
         <li>
-          <a href="/hash/#/documents/€"
-            >/documents/€ (force reload): not valid tho</a
+          <a href="/hash/#/unicode/€"
+            >/unicode/€ (force reload. not valid but should not crash the
+            router)</a
           >
         </li>
       </ul>
 
+      <p>
+        path: <code id="path">{{ route.path }}</code>
+        <br />
+        query.t: <code id="query-t">{{ route.query.t }}</code>
+        <br />
+        hash: <code id="hash">{{ route.hash }}</code>
+      </p>
+
       <router-view></router-view>
     </div>
   </body>

diff --git a/e2e/hash/index.ts b/e2e/hash/index.ts
index 06b13ca42b9d482e49f87192907c7e407eeda250..a64543dda076a466a033213c1b04b55690fc9351 100644 (file)
--- a/e2e/hash/index.ts
+++ b/e2e/hash/index.ts
@@ -2,28 +2,29 @@ import { createRouter, useRoute, createWebHashHistory } from '../../src'
 import { RouteComponent } from '../../src/types'
 import { createApp } from 'vue'
 
-const component: RouteComponent = {
-  template: `<div>A component</div>`,
-}
-
 const Home: RouteComponent = {
-  template: `<div>Home</div>`,
+  template: `<div>home</div>`,
 }
 
-const Document: RouteComponent = {
+const Foo: RouteComponent = { template: '<div>foo</div>' }
+const Bar: RouteComponent = { template: '<div>bar</div>' }
+
+const Unicode: RouteComponent = {
   setup() {
     const route = useRoute()
     return { route }
   },
-  template: `<div>Document: {{ route.params.id }}</div>`,
+  template: `<div>param: <span id="param">{{ route.params.id }}</span></div>`,
 }
 
 const router = createRouter({
   history: createWebHashHistory('/' + __dirname),
   routes: [
-    { path: '/', component: Home, name: 'home' },
-    { path: '/documents/:id', name: 'docs', component: Document },
-    { path: encodeURI('/n/€'), name: 'euro', component },
+    { path: '/', component: Home },
+    { path: '/foo', component: Foo },
+    { path: '/bar', component: Bar },
+    { path: '/unicode/:id', name: 'unicode', component: Unicode },
+    { path: encodeURI('/n/é'), name: 'encoded', component: Foo },
   ],
 })
 
@@ -35,4 +36,5 @@ const app = createApp({
 })
 app.use(router)
 
+window.r = router
 window.vm = app.mount('#app')

diff --git a/e2e/specs/hash.js b/e2e/specs/hash.js
new file mode 100644 (file)
index 0000000..bb8c89e
--- /dev/null
+++ b/e2e/specs/hash.js
@@ -0,0 +1,59 @@
+const bsStatus = require('../browserstack-send-status')
+
+const baseURL = 'http://localhost:8080/hash/#'
+
+module.exports = {
+  ...bsStatus(),
+
+  '@tags': ['hash', 'encoding'],
+
+  /** @type {import('nightwatch').NightwatchTest} */
+  'navigating to links': function(browser) {
+    browser
+      .url(baseURL)
+      .waitForElementVisible('#app', 1000)
+      .assert.attributeContains('li:nth-child(1) a', 'href', '/hash/#/')
+      .assert.attributeContains('li:nth-child(2) a', 'href', '/hash/#/foo')
+      .assert.attributeContains('li:nth-child(3) a', 'href', '/hash/#/bar')
+      .assert.attributeContains('li:nth-child(4) a', 'href', '/hash/#/n/%C3%A9')
+      .assert.attributeContains(
+        'li:nth-child(5) a',
+        'href',
+        '/hash/#/unicode/%C3%A9'
+      )
+      .click('li:nth-child(3) a')
+      .assert.urlEquals(baseURL + '/bar')
+      .click('li:nth-child(2) a')
+      .assert.urlEquals(baseURL + '/foo')
+      .click('li:nth-child(4) a')
+      .assert.urlEquals(baseURL + '/n/%C3%A9')
+      .assert.containsText('#path', '/n/%C3%A9')
+
+      // the correctly encoded version
+      .click('li:nth-child(6) a')
+      .assert.urlEquals(baseURL + '/unicode/%C3%A9')
+      .assert.containsText('#path', '/unicode/%C3%A9')
+      .assert.containsText('#param', 'é')
+      // the unencoded version, no check for the url because changes based on browser
+      .click('li:nth-child(5) a')
+      .assert.containsText('#param', 'é')
+
+      .end()
+  },
+
+  /** @type {import('nightwatch').NightwatchTest} */
+  'encoding on initial navigation': function(browser) {
+    browser
+      .url(baseURL + '/unicode/é')
+      // navigation to unencoded value
+      // depending on the browser the value will be encoded or not
+      .assert.containsText('#param', 'é')
+      .url(baseURL + '/unicode/%C3%A9')
+      // navigation to unencoded value
+      .assert.urlEquals(baseURL + '/unicode/%C3%A9')
+      .assert.containsText('#path', '/unicode/%C3%A9')
+      .assert.containsText('#param', 'é')
+
+      .end()
+  },
+}