test(e2e): test for guards with named views

Author: posva

e2e/guards-instances/index.ts

@@ -93,6 +93,8 @@ function createTestComponent(key: string) {
 }
 
 const Foo = createTestComponent('Foo')
+const One = createTestComponent('One')
+const Two = createTestComponent('Two')
 const Aux = createTestComponent('Aux')
 
 const webHistory = createWebHistory('/' + __dirname)
@@ -108,6 +110,20 @@ const router = createRouter({
       path: '/f/:id',
       component: Foo,
     },
+    {
+      path: '/named-one',
+      components: {
+        default: One,
+        aux: Aux,
+      },
+    },
+    {
+      path: '/named-two',
+      components: {
+        default: Two,
+        aux: Aux,
+      },
+    },
   ],
 })
 
@@ -160,6 +176,9 @@ leaves: {{ state.leave }}
         <li><router-link to="/f/2?bar=foo">/f/2?bar=foo</router-link></li>
         <li><router-link to="/f/2?foo=key">/f/2?foo=key</router-link></li>
         <li><router-link to="/f/2?foo=key2">/f/2?foo=key2</router-link></li>
+        <li><router-link id="update-query" :to="{ query: { n: (Number($route.query.n) || 0) + 1 }}" v-slot="{ route }">{{ route.fullPath }}</router-link></li>
+        <li><router-link to="/named-one">/named-one</router-link></li>
+        <li><router-link to="/named-two">/named-two</router-link></li>
       </ul>
 
       <template v-if="testCase === 'keepalive'">
@@ -188,6 +207,7 @@ leaves: {{ state.leave }}
       </template>
       <template v-else>
         <router-view class="view" />
+        <router-view class="aux-view" name="aux" />
       </template>
 
     </div>

e2e/specs/guards-instances.js

@@ -247,9 +247,39 @@ module.exports = {
   /** @type {import('nightwatch').NightwatchTest} */
   'guards + instances + named views': function (browser) {
     browser
-      .url('http://localhost:8080/guards-instances/')
+      .url('http://localhost:8080/guards-instances/named-one')
       .waitForElementPresent('#app > *', 1000)
 
+    browser
+      .click('li:nth-child(1) a')
+      .expect.element('#logs')
+      .text.to.equal(
+        [
+          `One: enter / - /named-one`,
+          `Aux: enter / - /named-one`,
+          `One: leave /named-one - /`,
+          `Aux: leave /named-one - /`,
+          `One: setup:leave /named-one - /`,
+          `Aux: setup:leave /named-one - /`,
+        ].join('\n')
+      )
+
+    browser
+      .click('li:nth-child(9) a')
+      .click('#resetLogs')
+      .click('li:nth-child(10) a')
+      .expect.element('#logs')
+      .text.to.equal(
+        [
+          `One: leave /named-one - /named-two`,
+          `Aux: leave /named-one - /named-two`,
+          `One: setup:leave /named-one - /named-two`,
+          `Aux: setup:leave /named-one - /named-two`,
+          `Two: enter /named-one - /named-two`,
+          `Aux: enter /named-one - /named-two`,
+        ].join('\n')
+      )
+
     browser.end()
   },
 }