From 30da0b28e5c92a5690c53c210e3446b6a2886569 Mon Sep 17 00:00:00 2001
From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Thu, 7 May 2020 11:46:16 +0200
Subject: [PATCH] test(e2e): multi app spec

---
 e2e/multi-app/index.html |  4 ++-
 e2e/multi-app/index.ts   | 20 ++++++++---
 e2e/specs/multi-app.js   | 72 ++++++++++++++++++++++++++++++++++++++++
 3 files changed, 91 insertions(+), 5 deletions(-)
 create mode 100644 e2e/specs/multi-app.js

diff --git a/e2e/multi-app/index.html b/e2e/multi-app/index.html
index 4bbdf5d4..08f75886 100644
--- 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 a14926c8..db2400ad 100644
--- 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
index 00000000..a641c27b
--- /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()
+  },
+}
-- 
2.47.3