test: modify e2e tests to work on safari

diff --git a/e2e/encoding/index.html b/e2e/encoding/index.html
index bacb08f7d4dbfb7c6572d0225bc6a016bab4e412..be7a0f21561274df20bd262fef21fd4142ce04a3 100644 (file)
--- a/e2e/encoding/index.html
+++ b/e2e/encoding/index.html
@@ -12,71 +12,6 @@
     <a href="/">&lt;&lt; Back to Homepage</a>
     <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="/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
-          >
-        </li>
-        <li>
-          <router-link
-            :to="{ name: 'home', query: { currency: '€uro', 'é': 'e' }}"
-            >/?currency=€uro&é=e (object)</router-link
-          >
-        </li>
-        <li>
-          <a href="/encoding/documents/%E2%82%AC"
-            >/documents/%E2%82%AC (force reload)</a
-          >
-        </li>
-        <li>
-          <a href="/encoding/documents/€"
-            >/documents/€ (force reload. not valid but should not crash the
-            router)</a
-          >
-        </li>
-      </ul>
-
-      <router-view></router-view>
-    </div>
+    <main id="app"></main>
   </body>
 </html>

diff --git a/e2e/encoding/index.ts b/e2e/encoding/index.ts
index a442d06fc2af866c930b1f5ee1bcb410e5a32cdd..7d454e32f9ae11622d158965edc47067f84a2e84 100644 (file)
--- a/e2e/encoding/index.ts
+++ b/e2e/encoding/index.ts
@@ -31,6 +31,75 @@ const app = createApp({
     const route = useRoute()
     return { route }
   },
+
+  template: `
+    <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="/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
+          >
+        </li>
+        <li>
+          <router-link
+            :to="{ name: 'home', query: { currency: '€uro', 'é': 'e' }}"
+            >/?currency=€uro&é=e (object)</router-link
+          >
+        </li>
+        <li>
+          <a href="/encoding/documents/%E2%82%AC"
+            >/documents/%E2%82%AC (force reload)</a
+          >
+        </li>
+        <li>
+          <a href="/encoding/documents/€"
+            >/documents/€ (force reload. not valid but should not crash the
+            router)</a
+          >
+        </li>
+      </ul>
+
+      <router-view></router-view>
+    </div>
+  `,
 })
 app.use(router)
 

diff --git a/e2e/hash/index.html b/e2e/hash/index.html
index 6290ca226eacd7fe8cec21b0485ec6d5c7da4cde..4d3e4f15381ddbd09933ab94af4982bf97d0578b 100644 (file)
--- a/e2e/hash/index.html
+++ b/e2e/hash/index.html
@@ -12,45 +12,6 @@
     <a href="/">&lt;&lt; Back to Homepage</a>
     <hr />
 
-    <div id="app">
-      <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="{ name: 'unicode', params: { id: 'é' }}"
-            >/unicode/é (correctly encoded)</router-link
-          >
-        </li>
-        <li>
-          <router-link :to="{ path: '/', query: { t: 'é', 'é': 'e' }}"
-            >/?currency=€uro&é=e (object)</router-link
-          >
-        </li>
-        <li>
-          <a href="/hash/#/unicode/%E2%82%AC"
-            >/unicode/%E2%82%AC (force reload)</a
-          >
-        </li>
-        <li>
-          <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>
+    <main id="app"></main>
   </body>
 </html>

diff --git a/e2e/hash/index.ts b/e2e/hash/index.ts
index a64543dda076a466a033213c1b04b55690fc9351..8de3d1add81309ed54c5bd5b221cc2229094ac3a 100644 (file)
--- a/e2e/hash/index.ts
+++ b/e2e/hash/index.ts
@@ -33,6 +33,49 @@ const app = createApp({
     const route = useRoute()
     return { route }
   },
+
+  template: `
+    <div id="app">
+      <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="{ name: 'unicode', params: { id: 'é' }}"
+            >/unicode/é (correctly encoded)</router-link
+          >
+        </li>
+        <li>
+          <router-link :to="{ path: '/', query: { t: 'é', 'é': 'e' }}"
+            >/?currency=€uro&é=e (object)</router-link
+          >
+        </li>
+        <li>
+          <a href="/hash/#/unicode/%E2%82%AC"
+            >/unicode/%E2%82%AC (force reload)</a
+          >
+        </li>
+        <li>
+          <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>
+  `,
 })
 app.use(router)
 

diff --git a/e2e/modal/index.html b/e2e/modal/index.html
index 3a9434d9f9b6f933f81fffa70299c2c08c8ade0f..e08a2bffb2814a278ad420d951ea6c880e374729 100644 (file)
--- a/e2e/modal/index.html
+++ b/e2e/modal/index.html
@@ -41,8 +41,6 @@
     <a href="/">&lt;&lt; Back to Homepage</a>
     <hr />
 
-    <div id="app">
-      <component :is="ViewComponent"></component>
-    </div>
+    <main id="app"></main>
   </body>
 </html>

diff --git a/e2e/modal/index.ts b/e2e/modal/index.ts
index 96e3fb8dad19c1dcb4b20160b61fc1dd84abf61c..278343e4cb682e624ca1a67857b0c1ccfead5d4a 100644 (file)
--- a/e2e/modal/index.ts
+++ b/e2e/modal/index.ts
@@ -141,6 +141,12 @@ const app = createApp({
 
     return { route, ViewComponent, historyState, ...toRefs(route) }
   },
+
+  template: `
+    <div id="app">
+      <component :is="ViewComponent"></component>
+    </div>
+  `,
 })
 app.use(router)
 

diff --git a/e2e/navigation-guards/index.html b/e2e/navigation-guards/index.html
index 81847f620993f9b0e2827f9fb342621eda0aa19e..b491103966dc4d17d1d6ac47f2afb9cfca6618f6 100644 (file)
--- a/e2e/navigation-guards/index.html
+++ b/e2e/navigation-guards/index.html
@@ -12,17 +12,6 @@
     <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>
+    <main id="app"></main>
   </body>
 </html>

diff --git a/e2e/navigation-guards/index.ts b/e2e/navigation-guards/index.ts
index 6fca240e0aa315d8e3e009fe1746f2be06a8a4ad..8cb0b9e6e4065f7b0750c28b7c39096a0f75e480 100644 (file)
--- a/e2e/navigation-guards/index.ts
+++ b/e2e/navigation-guards/index.ts
@@ -39,7 +39,22 @@ const router = createRouter({
   ],
 })
 
-const app = createApp({})
+const app = createApp({
+  template: `
+  <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>
+     `,
+})
 app.use(router)
 
 window.vm = app.mount('#app')

diff --git a/e2e/scroll-behavior/index.html b/e2e/scroll-behavior/index.html
index 5bcc7f5333687530b9b87fc87bc9e07cce3c1549..5c3c6b59d06872073e6a0b918b38f2b80264f001 100644 (file)
--- a/e2e/scroll-behavior/index.html
+++ b/e2e/scroll-behavior/index.html
@@ -28,24 +28,6 @@
     <a href="/">&lt;&lt; Back to Homepage</a>
     <hr />
 
-    <div id="app">
-      <h1>Scroll Behavior</h1>
-      <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="/bar#anchor">/bar#anchor</router-link></li>
-        <li><router-link to="/bar#anchor2">/bar#anchor2</router-link></li>
-        <li><router-link to="/bar#1number">/bar#1number</router-link></li>
-      </ul>
-      <transition
-        name="fade"
-        mode="out-in"
-        @before-enter="flushWaiter"
-        @before-leave="setupWaiter"
-      >
-        <router-view class="view"></router-view>
-      </transition>
-    </div>
+    <main id="app"></main>
   </body>
 </html>

diff --git a/e2e/scroll-behavior/index.ts b/e2e/scroll-behavior/index.ts
index ff5863bae33bf545583415036cce6b3c3f565849..798ee603386747ff7e74499dfac543dd0e7fe77a 100644 (file)
--- a/e2e/scroll-behavior/index.ts
+++ b/e2e/scroll-behavior/index.ts
@@ -78,6 +78,30 @@ const app = createApp({
       setupWaiter: scrollWaiter.add,
     }
   },
+
+  template: `
+    <div id="app">
+      <h1>Scroll Behavior</h1>
+      <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="/bar#anchor">/bar#anchor</router-link></li>
+        <li><router-link to="/bar#anchor2">/bar#anchor2</router-link></li>
+        <li><router-link to="/bar#1number">/bar#1number</router-link></li>
+      </ul>
+      <router-view class="view" v-slot="{ Component, props }">
+        <transition
+          name="fade"
+          mode="out-in"
+          @before-enter="flushWaiter"
+          @before-leave="setupWaiter"
+        >
+          <component :is="Component" v-bind="props"></component>
+        </transition>
+      </router-view>
+    </div>
+  `,
 })
 app.use(router)
 

diff --git a/e2e/scroll-behavior/scrollWaiter.ts b/e2e/scroll-behavior/scrollWaiter.ts
index 056b42c06ebab7393f5959a764b145b45a77f077..c8d5e746f3f631b1d3e77a927a862f7cee39d1bf 100644 (file)
--- a/e2e/scroll-behavior/scrollWaiter.ts
+++ b/e2e/scroll-behavior/scrollWaiter.ts
@@ -4,7 +4,7 @@ function createScrollWaiter() {
 
   function add() {
     promise = new Promise(r => {
-      resolve = resolve
+      resolve = r
     })
   }
 

diff --git a/e2e/specs/encoding.js b/e2e/specs/encoding.js
index b6a6d1d31f7e4abbd4e7fc3e77dfe0413384dc80..2b1d134f134628f72dc7b6ab9dbff4056b1fbc0d 100644 (file)
--- a/e2e/specs/encoding.js
+++ b/e2e/specs/encoding.js
@@ -11,9 +11,8 @@ module.exports = {
   'encodes values': function(browser) {
     browser
       .url(baseURL)
-      // TODO: move this test to a different spec
       .assert.urlEquals(baseURL + '/')
-      .waitForElementVisible('#app', 1000)
+      .waitForElementPresent('#app > *', 1000)
 
       .click('li:nth-child(3) a')
       .assert.urlEquals(baseURL + '/documents/%E2%82%ACuro')
@@ -23,11 +22,18 @@ module.exports = {
 
       // check initial visit
       .url(baseURL + '/documents/%E2%82%ACuro')
-      .waitForElementVisible('#app', 1000)
+      .waitForElementPresent('#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))
 
+      // TODO: invalid in safari, tests on those where this is valid
+      // .url(baseURL + '/unicode/€uro')
+      // .waitForElementPresent('#app > *', 1000)
+      // navigation to unencoded value
+      // depending on the browser the value will be encoded or not
+      // .assert.containsText('#params', JSON.stringify({ id: '€uro' }, null, 2))
+
       .end()
   },
 }

diff --git a/e2e/specs/hash.js b/e2e/specs/hash.js
index bb8c89e9a6fc75654b0b080d40e69022ddbc48c7..1cbd70388c570ef84893e4bc43c0e25c74219194 100644 (file)
--- a/e2e/specs/hash.js
+++ b/e2e/specs/hash.js
@@ -11,7 +11,7 @@ module.exports = {
   'navigating to links': function(browser) {
     browser
       .url(baseURL)
-      .waitForElementVisible('#app', 1000)
+      .waitForElementPresent('#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')
@@ -44,16 +44,18 @@ module.exports = {
   /** @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', 'é')
 
+      // TODO: invalid in safari, tests on those where this is valid
+      // .url(baseURL + '/unicode/é')
+      // navigation to unencoded value
+      // depending on the browser the value will be encoded or not
+      // .assert.containsText('#param', 'é')
+
       .end()
   },
 }

diff --git a/e2e/specs/modal.js b/e2e/specs/modal.js
index 6b21853b4e092e24676cc94e8738fe8f63a484b9..76cac67a8002378aaf9f1754ff29e9861e534815 100644 (file)
--- a/e2e/specs/modal.js
+++ b/e2e/specs/modal.js
@@ -11,7 +11,7 @@ module.exports = {
   'changes the url': function(browser) {
     browser
       .url(baseURL)
-      .waitForElementVisible('#app', 1000)
+      .waitForElementPresent('#app > *', 1000)
       .assert.containsText('h1', 'Home')
       .assert.not.visible('dialog')
 
@@ -27,7 +27,7 @@ module.exports = {
   'can close and reopen the modal through history'(browser) {
     browser
       .url(baseURL)
-      .waitForElementVisible('#app', 1000)
+      .waitForElementPresent('#app > *', 1000)
       .assert.containsText('h1', 'Home')
 
       .click('li:nth-child(2) button')
@@ -52,7 +52,7 @@ module.exports = {
   'can keep the modal when reloading'(browser) {
     browser
       .url(baseURL)
-      .waitForElementVisible('#app', 1000)
+      .waitForElementPresent('#app > *', 1000)
       .assert.containsText('h1', 'Home')
 
       .click('li:nth-child(2) button')
@@ -73,7 +73,7 @@ module.exports = {
   'can pass through the modal and then back'(browser) {
     browser
       .url(baseURL)
-      .waitForElementVisible('#app', 1000)
+      .waitForElementPresent('#app > *', 1000)
       .assert.containsText('h1', 'Home')
       .assert.not.visible('dialog')
 
@@ -132,7 +132,7 @@ module.exports = {
   'can navigate away from the modal then come back'(browser) {
     browser
       .url(baseURL)
-      .waitForElementVisible('#app', 1000)
+      .waitForElementPresent('#app > *', 1000)
       .assert.containsText('h1', 'Home')
 
       .click('li:nth-child(2) button')

diff --git a/e2e/specs/navigation-guards.js b/e2e/specs/navigation-guards.js
index ae454c9251a3ef26e601f68eae02a58f9fd4c5bb..fd1bc346abeb0205e8c43ae89cecc912ea761483 100644 (file)
--- a/e2e/specs/navigation-guards.js
+++ b/e2e/specs/navigation-guards.js
@@ -10,7 +10,7 @@ module.exports = {
     browser
       .url(baseURL)
       .assert.urlEquals(baseURL + '/')
-      .waitForElementVisible('#app', 1000)
+      .waitForElementPresent('#app > *', 1000)
       .click('li:nth-child(2) a')
       .assert.urlEquals(baseURL + '/cant-leave')
       .assert.containsText('#tries', '0 times')

diff --git a/e2e/specs/scroll-behavior.js b/e2e/specs/scroll-behavior.js
index 167da492490253c44317946a3aecff3e10e17ee7..20d98854c591b1f13a2b5c65f8a300cfcce78992 100644 (file)
--- a/e2e/specs/scroll-behavior.js
+++ b/e2e/specs/scroll-behavior.js
@@ -13,7 +13,7 @@ module.exports = {
 
     browser
       .url('http://localhost:8080/scroll-behavior/')
-      .waitForElementVisible('#app', 1000)
+      .waitForElementPresent('#app > *', 1000)
       .assert.count('li a', 6)
       .assert.containsText('.view', 'home')
 

diff --git a/e2e/specs/transitions.js b/e2e/specs/transitions.js
index 292a9500ceeb44867a2bc47cb52fe35a8344015d..1a9af54e6d979ac982534d03193a72d5a491dff0 100644 (file)
--- a/e2e/specs/transitions.js
+++ b/e2e/specs/transitions.js
@@ -10,7 +10,7 @@ module.exports = {
 
     browser
       .url('http://localhost:8080/transitions/')
-      .waitForElementVisible('#app', 1000)
+      .waitForElementPresent('#app > *', 1000)
 
       .click('li:nth-child(2) a')
       .assert.cssClassPresent('.view.home', 'fade-leave-active')

diff --git a/e2e/transitions/index.html b/e2e/transitions/index.html
index b7bd5e4311709d2cfb7a5fa835826a13e253df1f..c94babbd054e42912350b17016310ff4e3a58345 100644 (file)
--- a/e2e/transitions/index.html
+++ b/e2e/transitions/index.html
@@ -39,19 +39,6 @@
     <a href="/">&lt;&lt; Back to Homepage</a>
     <hr />
 
-    <div id="app">
-      <h1>Transitions</h1>
-      <ul>
-        <li><router-link to="/">/</router-link></li>
-        <li><router-link to="/parent">/parent</router-link></li>
-        <li><router-link to="/parent/foo">/parent/foo</router-link></li>
-        <li><router-link to="/parent/bar">/parent/bar</router-link></li>
-      </ul>
-      <router-view class="view" v-slot="{ Component, props }">
-        <transition name="fade" mode="out-in">
-          <component :is="Component" v-bind="props"></component>
-        </transition>
-      </router-view>
-    </div>
+    <main id="app"></main>
   </body>
 </html>

diff --git a/e2e/transitions/index.ts b/e2e/transitions/index.ts
index c87bafc26b05d6edeaab36caa2f898cd8dcaa51e..1074dad0762dfdd78b0b517ab937fffb79414ccf 100644 (file)
--- a/e2e/transitions/index.ts
+++ b/e2e/transitions/index.ts
@@ -68,6 +68,23 @@ const app = createApp({
       route: useRoute(),
     }
   },
+
+  template: `
+    <div id="app">
+      <h1>Transitions</h1>
+      <ul>
+        <li><router-link to="/">/</router-link></li>
+        <li><router-link to="/parent">/parent</router-link></li>
+        <li><router-link to="/parent/foo">/parent/foo</router-link></li>
+        <li><router-link to="/parent/bar">/parent/bar</router-link></li>
+      </ul>
+      <router-view class="view" v-slot="{ Component, props }">
+        <transition name="fade" mode="out-in">
+          <component :is="Component" v-bind="props"></component>
+        </transition>
+      </router-view>
+    </div>
+  `,
 })
 app.use(router)