test: refactor e2e as integration

diff --git a/__tests__/guards/guardsContext.spec.ts b/__tests__/guards/guardsContext.spec.ts
index 9592c4969907cd88d9eb8e778b5459016c2d8c72..6f25d4d46c55ef5dadb575fc27161ef1c37264d4 100644 (file)
--- a/__tests__/guards/guardsContext.spec.ts
+++ b/__tests__/guards/guardsContext.spec.ts
@@ -43,11 +43,190 @@ describe('beforeRouteLeave', () => {
 
     await router.isReady()
     await router.push('/leave')
-    await router.push('/').catch(() => {})
+    await router.push('/')
     expect(spy).toHaveBeenCalledTimes(1)
   })
 
-  it.todo('invokes with the component context with named views')
-  it.todo('invokes with the component context with nested views')
-  it.todo('invokes with the component context with nested named views')
+  it('invokes with the component context with named views', async () => {
+    expect.assertions(2)
+    const WithLeaveOne = defineComponent({
+      template: `text`,
+      // we use data to check if the context is the right one because saving `this` in a variable logs a few warnings
+      data: () => ({ counter: 0 }),
+      beforeRouteLeave: jest
+        .fn()
+        .mockImplementationOnce(function(this: any, to, from, next) {
+          expect(typeof this.counter).toBe('number')
+          next()
+        }),
+    })
+    const WithLeaveTwo = defineComponent({
+      template: `text`,
+      // we use data to check if the context is the right one because saving `this` in a variable logs a few warnings
+      data: () => ({ counter: 0 }),
+      beforeRouteLeave: jest
+        .fn()
+        .mockImplementationOnce(function(this: any, to, from, next) {
+          expect(typeof this.counter).toBe('number')
+          next()
+        }),
+    })
+
+    const router = createRouter({
+      history: createMemoryHistory(),
+      routes: [
+        { path: '/', component },
+        {
+          path: '/leave',
+          components: {
+            one: WithLeaveOne as any,
+            two: WithLeaveTwo as any,
+          },
+        },
+      ],
+    })
+    const app = createApp({
+      template: `
+      <router-view name="one" />
+      <router-view name="two" />
+      `,
+    })
+    app.use(router)
+    const rootEl = document.createElement('div')
+    document.body.appendChild(rootEl)
+    app.mount(rootEl)
+
+    await router.isReady()
+    await router.push('/leave')
+    await router.push('/')
+  })
+
+  it('invokes with the component context with nested views', async () => {
+    expect.assertions(2)
+    const WithLeaveParent = defineComponent({
+      template: `<router-view/>`,
+      // we use data to check if the context is the right one because saving `this` in a variable logs a few warnings
+      data: () => ({ counter: 0 }),
+      beforeRouteLeave: jest
+        .fn()
+        .mockImplementationOnce(function(this: any, to, from, next) {
+          expect(typeof this.counter).toBe('number')
+          next()
+        }),
+    })
+    const WithLeave = defineComponent({
+      template: `text`,
+      // we use data to check if the context is the right one because saving `this` in a variable logs a few warnings
+      data: () => ({ counter: 0 }),
+      beforeRouteLeave: jest
+        .fn()
+        .mockImplementationOnce(function(this: any, to, from, next) {
+          expect(typeof this.counter).toBe('number')
+          next()
+        }),
+    })
+
+    const router = createRouter({
+      history: createMemoryHistory(),
+      routes: [
+        { path: '/', component },
+        {
+          path: '/leave',
+          component: WithLeaveParent as any,
+          children: [
+            {
+              path: '',
+              component: WithLeave as any,
+            },
+          ],
+        },
+      ],
+    })
+    const app = createApp({
+      template: `
+      <router-view />
+      `,
+    })
+    app.use(router)
+    const rootEl = document.createElement('div')
+    document.body.appendChild(rootEl)
+    app.mount(rootEl)
+
+    await router.isReady()
+    await router.push('/leave')
+    await router.push('/')
+  })
+
+  it('invokes with the component context with nested named views', async () => {
+    expect.assertions(3)
+    const WithLeaveParent = defineComponent({
+      template: `
+      <router-view name="one"/>
+      <router-view name="two"/>
+      `,
+      // we use data to check if the context is the right one because saving `this` in a variable logs a few warnings
+      data: () => ({ counter: 0 }),
+      beforeRouteLeave: jest
+        .fn()
+        .mockImplementationOnce(function(this: any, to, from, next) {
+          expect(typeof this.counter).toBe('number')
+          next()
+        }),
+    })
+    const WithLeaveOne = defineComponent({
+      template: `text`,
+      // we use data to check if the context is the right one because saving `this` in a variable logs a few warnings
+      data: () => ({ counter: 0 }),
+      beforeRouteLeave: jest
+        .fn()
+        .mockImplementationOnce(function(this: any, to, from, next) {
+          expect(typeof this.counter).toBe('number')
+          next()
+        }),
+    })
+    const WithLeaveTwo = defineComponent({
+      template: `text`,
+      // we use data to check if the context is the right one because saving `this` in a variable logs a few warnings
+      data: () => ({ counter: 0 }),
+      beforeRouteLeave: jest
+        .fn()
+        .mockImplementationOnce(function(this: any, to, from, next) {
+          expect(typeof this.counter).toBe('number')
+          next()
+        }),
+    })
+
+    const router = createRouter({
+      history: createMemoryHistory(),
+      routes: [
+        { path: '/', component },
+        {
+          path: '/leave',
+          component: WithLeaveParent as any,
+          children: [
+            {
+              path: '',
+              components: {
+                one: WithLeaveOne as any,
+                two: WithLeaveTwo as any,
+              },
+            },
+          ],
+        },
+      ],
+    })
+    const app = createApp({
+      template: `
+      <router-view />
+      `,
+    })
+    app.use(router)
+    const rootEl = document.createElement('div')
+    document.body.appendChild(rootEl)
+    app.mount(rootEl)
+
+    await router.isReady()
+    await router.push('/leave')
+    await router.push('/')
+  })
 })

diff --git a/e2e/navigation-guards/index.html b/e2e/navigation-guards/index.html
deleted file mode 100644 (file)
index b491103..0000000
--- a/e2e/navigation-guards/index.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-    <title>Vue Router e2e tests - Navigation Guards</title>
-    <!-- TODO: replace with local imports for promises and anything else needed -->
-    <script src="https://polyfill.io/v3/polyfill.min.js?features=default%2Ces2015"></script>
-  </head>
-  <body>
-    <a href="/">&lt;&lt; Back to Homepage</a>
-    <hr />
-
-    <main id="app"></main>
-  </body>
-</html>

diff --git a/e2e/navigation-guards/index.ts b/e2e/navigation-guards/index.ts
deleted file mode 100644 (file)
index 8cb0b9e..0000000
--- a/e2e/navigation-guards/index.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import { createRouter, createWebHistory, onBeforeRouteLeave } from '../../src'
-import { RouteComponent } from '../../src/types'
-import { createApp, ref } from 'vue'
-
-const Home: RouteComponent = {
-  template: `<div>Home</div>`,
-}
-
-const GuardedWithLeave: RouteComponent = {
-  name: 'GuardedWithLeave',
-
-  template: `
-  <div>
-    <p>try to leave</p>
-    <p id="tries">So far, you tried {{ tries }} times</p>
-  </div>
-  `,
-
-  setup() {
-    console.log('setup in cant leave')
-    const tries = ref(0)
-
-    onBeforeRouteLeave(function(to, from, next) {
-      if (window.confirm()) next()
-      else {
-        tries.value++
-        next(false)
-      }
-    })
-    return { tries }
-  },
-}
-
-const router = createRouter({
-  history: createWebHistory('/' + __dirname),
-  routes: [
-    { path: '/', component: Home, name: 'home' },
-    { path: '/cant-leave', component: GuardedWithLeave },
-  ],
-})
-
-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')
-window.r = router

diff --git a/e2e/specs/navigation-guards.js b/e2e/specs/navigation-guards.js
deleted file mode 100644 (file)
index fd1bc34..0000000
--- a/e2e/specs/navigation-guards.js
+++ /dev/null
@@ -1,34 +0,0 @@
-const bsStatus = require('../browserstack-send-status')
-
-const baseURL = 'http://localhost:8080/navigation-guards'
-
-module.exports = {
-  ...bsStatus(),
-
-  /** @type {import('nightwatch').NightwatchTest} */
-  'blocks leaving navigation with onBeforeRouteLeave': function(browser) {
-    browser
-      .url(baseURL)
-      .assert.urlEquals(baseURL + '/')
-      .waitForElementPresent('#app > *', 1000)
-      .click('li:nth-child(2) a')
-      .assert.urlEquals(baseURL + '/cant-leave')
-      .assert.containsText('#tries', '0 times')
-      .click('li:nth-child(1) a')
-      .dismissAlert()
-      .waitFor(100)
-      .assert.urlEquals(baseURL + '/cant-leave')
-      .assert.containsText('#tries', '1 times')
-      .click('li:nth-child(1) a')
-      .dismissAlert()
-      .waitFor(100)
-      .assert.urlEquals(baseURL + '/cant-leave')
-      .assert.containsText('#tries', '2 times')
-      .click('li:nth-child(1) a')
-      .acceptAlert()
-      .waitFor(100)
-      .assert.urlEquals(baseURL + '/')
-
-      .end()
-  },
-}