test(e2e): multi app spec

diff --git a/e2e/multi-app/index.html b/e2e/multi-app/index.html
index 4bbdf5d48f19b64e823bd5ab1898d500f9b1086a..08f75886ebd7bd10e1f05f9e367218215611e820 100644 (file)
--- a/e2e/multi-app/index.html
+++ b/e2e/multi-app/index.html
@@ -24,7 +24,9 @@
 
     <hr />
 
-    popstate count: <span id="count"></span>
+    popstate count: <span id="popcount"></span>
+    <br />
+    guard call count: <span id="guardcount"></span>
 
     <div id="app-1"></div>
     <div id="app-2"></div>

diff --git a/e2e/multi-app/index.ts b/e2e/multi-app/index.ts
index a14926c88c56cff10b71a26e30c130abbcc7b37c..db2400ad4cb57db775dc08f2f43ae9ee9cabc75e 100644 (file)
--- a/e2e/multi-app/index.ts
+++ b/e2e/multi-app/index.ts
@@ -3,19 +3,25 @@ import { RouteComponent } from '../../src/types'
 import { createApp, ref, watchEffect } from 'vue'
 
 const Home: RouteComponent = {
-  template: `<div>Home</div>`,
+  template: `<div class="home">Home</div>`,
 }
 
 const User: RouteComponent = {
-  template: `<div>User: {{ $route.params.id }}</div>`,
+  template: `<div class="user">User {{ $route.params.id }}</div>`,
 }
 
 // path popstate listeners to track the call count
 let activePopStateListeners = ref(0)
-const countDiv = document.getElementById('count')!
+let guardCallCount = ref(0)
+const popCountDiv = document.getElementById('popcount')!
+const guardCountDiv = document.getElementById('guardcount')!
 
 watchEffect(() => {
-  countDiv.innerHTML = '' + activePopStateListeners.value
+  popCountDiv.innerHTML = '' + activePopStateListeners.value
+})
+
+watchEffect(() => {
+  guardCountDiv.innerHTML = '' + guardCallCount.value
 })
 
 const originalAddEventListener = window.addEventListener
@@ -32,6 +38,7 @@ window.removeEventListener = function (name: string, handler: any) {
   }
   return originalRemoveEventListener.call(this, name, handler)
 }
+
 const router = createRouter({
   history: createWebHistory('/' + __dirname),
   routes: [
@@ -40,6 +47,11 @@ const router = createRouter({
   ],
 })
 
+router.beforeEach((to, from, next) => {
+  guardCallCount.value++
+  next()
+})
+
 let looper = [1, 2, 3]
 
 let apps = looper.map(i =>

diff --git a/e2e/specs/multi-app.js b/e2e/specs/multi-app.js
new file mode 100644 (file)
index 0000000..a641c27
--- /dev/null
+++ b/e2e/specs/multi-app.js
@@ -0,0 +1,72 @@
+const bsStatus = require('../browserstack-send-status')
+
+const baseURL = 'http://localhost:8080/multi-app'
+
+module.exports = {
+  ...bsStatus(),
+
+  '@tags': ['history'],
+
+  /** @type {import('nightwatch').NightwatchTest} */
+  'supports multiple apps mounted at the same time': function (browser) {
+    browser
+      .url(baseURL)
+      .assert.urlEquals(baseURL + '/')
+      .assert.containsText('#popcount', '1')
+      // TODO:
+      // .assert.containsText('#guardcount', '1')
+
+      // mount multiple apps and expect to have one listener only
+      .click('#mount1')
+      .click('#mount2')
+      .click('#mount3')
+      .waitForElementPresent('#app-1 > *', 1000)
+      .waitForElementPresent('#app-2 > *', 1000)
+      .waitForElementPresent('#app-3 > *', 1000)
+
+      // they should all be displaying the home page
+      .assert.containsText('#app-1 .home', 'Home')
+      .assert.cssClassPresent(
+        '#app-1 li:nth-child(1) a',
+        'router-link-exact-active'
+      )
+      .assert.not.cssClassPresent(
+        '#app-1 li:nth-child(2) a',
+        'router-link-active'
+      )
+
+      .assert.containsText('#app-2 .home', 'Home')
+      .assert.cssClassPresent(
+        '#app-2 li:nth-child(1) a',
+        'router-link-exact-active'
+      )
+      .assert.not.cssClassPresent(
+        '#app-2 li:nth-child(2) a',
+        'router-link-active'
+      )
+
+      .assert.containsText('#app-3 .home', 'Home')
+      .assert.cssClassPresent(
+        '#app-3 li:nth-child(1) a',
+        'router-link-exact-active'
+      )
+      .assert.not.cssClassPresent(
+        '#app-3 li:nth-child(2) a',
+        'router-link-active'
+      )
+
+      // navigation on app 1
+      .click('#app-1 li:nth-child(2) a')
+      .assert.containsText('#app-1 .user', 'User 1')
+      .assert.containsText('#app-2 .user', 'User 1')
+      .assert.containsText('#app-3 .user', 'User 1')
+
+      // navigation on app 2
+      .click('#app-2 li:nth-child(3) a')
+      .assert.containsText('#app-1 .user', 'User 2')
+      .assert.containsText('#app-2 .user', 'User 2')
+      .assert.containsText('#app-3 .user', 'User 2')
+
+      .end()
+  },
+}