From b1c679eb2dae6264f190d7da0eb115184bf353e5 Mon Sep 17 00:00:00 2001 From: Eduardo San Martin Morote Date: Thu, 7 May 2020 11:31:18 +0200 Subject: [PATCH] test(e2e): add multi app --- e2e/multi-app/index.html | 33 +++++++++++++++++ e2e/multi-app/index.ts | 76 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 109 insertions(+) create mode 100644 e2e/multi-app/index.html create mode 100644 e2e/multi-app/index.ts diff --git a/e2e/multi-app/index.html b/e2e/multi-app/index.html new file mode 100644 index 00000000..4bbdf5d4 --- /dev/null +++ b/e2e/multi-app/index.html @@ -0,0 +1,33 @@ + + + + + + + Vue Router e2e tests - Multi app + + + + + << Back to Homepage +
+ + + + + +
+ + + + + +
+ + popstate count: + +
+
+
+ + diff --git a/e2e/multi-app/index.ts b/e2e/multi-app/index.ts new file mode 100644 index 00000000..a14926c8 --- /dev/null +++ b/e2e/multi-app/index.ts @@ -0,0 +1,76 @@ +import { createRouter, createWebHistory } from '../../src' +import { RouteComponent } from '../../src/types' +import { createApp, ref, watchEffect } from 'vue' + +const Home: RouteComponent = { + template: `
Home
`, +} + +const User: RouteComponent = { + template: `
User: {{ $route.params.id }}
`, +} + +// path popstate listeners to track the call count +let activePopStateListeners = ref(0) +const countDiv = document.getElementById('count')! + +watchEffect(() => { + countDiv.innerHTML = '' + activePopStateListeners.value +}) + +const originalAddEventListener = window.addEventListener +const originalRemoveEventListener = window.removeEventListener +window.addEventListener = function (name: string, handler: any) { + if (name === 'popstate') { + activePopStateListeners.value++ + } + return originalAddEventListener.call(this, name, handler) +} +window.removeEventListener = function (name: string, handler: any) { + if (name === 'popstate') { + activePopStateListeners.value-- + } + return originalRemoveEventListener.call(this, name, handler) +} +const router = createRouter({ + history: createWebHistory('/' + __dirname), + routes: [ + { path: '/', component: Home }, + { path: '/users/:id', component: User }, + ], +}) + +let looper = [1, 2, 3] + +let apps = looper.map(i => + createApp({ + template: ` +
+ + + +
+ `, + }) +) + +looper.forEach((n, i) => { + let mountBtn = document.getElementById('mount' + n)! + let unmountBtn = document.getElementById('unmount' + n)! + + let app = apps[i] + + app.use(router) + + mountBtn.addEventListener('click', () => { + app.mount('#app-' + n) + }) + + unmountBtn.addEventListener('click', () => { + app.unmount('#app-' + n) + }) +}) -- 2.47.3