test(e2e): refactor to extend with named views

diff --git a/e2e/guards-instances/index.ts b/e2e/guards-instances/index.ts
index 09054518250c97cc643bb5c8442faaa231080a0d..70aa4afcb9619624de4e58e312b8e427b8ce6eec 100644 (file)
--- a/e2e/guards-instances/index.ts
+++ b/e2e/guards-instances/index.ts
@@ -41,50 +41,59 @@ const state = reactive({
   leave: 0,
 })
 
-const Foo = defineComponent({
-  template: `
-    <div>
-    foo
-    <p id="enterCbs">{{ enterCallback }}</p>
-    <p id="update">{{ selfUpdates }}</p>
-    <p id="leave">{{ selfLeaves }}</p>
+/**
+ * creates a component that logs the guards
+ * @param name
+ */
+function createTestComponent(key: string) {
+  return defineComponent({
+    template: `
+    <div :id="key">
+    {{ key }}
+    <p class="enterCbs">{{ enterCallback }}</p>
+    <p class="update">{{ selfUpdates }}</p>
+    <p class="leave">{{ selfLeaves }}</p>
     </div>
   `,
-  data: () => ({ key: 'Foo', enterCallback: 0, selfUpdates: 0, selfLeaves: 0 }),
-  // mounted() {
-  //   console.log('mounted Foo')
-  // },
-  beforeRouteEnter(to, from, next) {
-    state.enter++
-    logs.value.push(`enter ${from.path} - ${to.path}`)
-    next(vm => {
-      // @ts-ignore
-      vm.enterCallback++
-    })
-  },
-  beforeRouteUpdate(to, from) {
-    if (!this || this.key !== 'Foo') throw new Error('no this')
-    state.update++
-    this.selfUpdates++
-    logs.value.push(`update ${from.path} - ${to.path}`)
-  },
-  beforeRouteLeave(to, from) {
-    if (!this || this.key !== 'Foo') throw new Error('no this')
-    state.leave++
-    this.selfLeaves++
-    logs.value.push(`leave ${from.path} - ${to.path}`)
-  },
+    data: () => ({ key, enterCallback: 0, selfUpdates: 0, selfLeaves: 0 }),
+    // mounted() {
+    //   console.log('mounted Foo')
+    // },
+    beforeRouteEnter(to, from, next) {
+      state.enter++
+      logs.value.push(`${key}: enter ${from.path} - ${to.path}`)
+      next(vm => {
+        // @ts-ignore
+        vm.enterCallback++
+      })
+    },
+    beforeRouteUpdate(to, from) {
+      if (!this || this.key !== key) throw new Error('no this')
+      state.update++
+      this.selfUpdates++
+      logs.value.push(`${key}: update ${from.path} - ${to.path}`)
+    },
+    beforeRouteLeave(to, from) {
+      if (!this || this.key !== key) throw new Error('no this')
+      state.leave++
+      this.selfLeaves++
+      logs.value.push(`${key}: leave ${from.path} - ${to.path}`)
+    },
 
-  setup() {
-    onBeforeRouteUpdate((to, from) => {
-      logs.value.push(`setup:update ${from.path} - ${to.path}`)
-    })
-    onBeforeRouteLeave((to, from) => {
-      logs.value.push(`setup:leave ${from.path} - ${to.path}`)
-    })
-    return {}
-  },
-})
+    setup() {
+      onBeforeRouteUpdate((to, from) => {
+        logs.value.push(`${key}: setup:update ${from.path} - ${to.path}`)
+      })
+      onBeforeRouteLeave((to, from) => {
+        logs.value.push(`${key}: setup:leave ${from.path} - ${to.path}`)
+      })
+      return {}
+    },
+  })
+}
+
+const Foo = createTestComponent('Foo')
+const Aux = createTestComponent('Aux')
 
 const webHistory = createWebHistory('/' + __dirname)
 const router = createRouter({

diff --git a/e2e/specs/guards-instances.js b/e2e/specs/guards-instances.js
index ae3bcccb90ea2ce428bee3e704a122092ffbe171..4f66ca0a0b9c7cbca2699d002ab2d1508c3308c4 100644 (file)
--- a/e2e/specs/guards-instances.js
+++ b/e2e/specs/guards-instances.js
@@ -1,41 +1,41 @@
 const bsStatus = require('../browserstack-send-status')
 
-function testCase(browser) {
+function testCase(browser, name) {
   return browser
     .click('li:nth-child(2) a')
-    .assert.containsText('#enterCbs', '1')
-    .assert.containsText('#update', '0')
-    .assert.containsText('#leave', '0')
+    .assert.containsText(`#${name} .enterCbs`, '1')
+    .assert.containsText(`#${name} .update`, '0')
+    .assert.containsText(`#${name} .leave`, '0')
     .click('li:nth-child(3) a')
-    .assert.containsText('#enterCbs', '2')
-    .assert.containsText('#update', '0')
-    .assert.containsText('#leave', '1')
+    .assert.containsText(`#${name} .enterCbs`, '2')
+    .assert.containsText(`#${name} .update`, '0')
+    .assert.containsText(`#${name} .leave`, '1')
     .click('li:nth-child(4) a')
-    .assert.containsText('#enterCbs', '2')
-    .assert.containsText('#update', '1')
-    .assert.containsText('#leave', '1')
+    .assert.containsText(`#${name} .enterCbs`, '2')
+    .assert.containsText(`#${name} .update`, '1')
+    .assert.containsText(`#${name} .leave`, '1')
     .click('li:nth-child(5) a')
-    .assert.containsText('#enterCbs', '2')
-    .assert.containsText('#update', '2')
-    .assert.containsText('#leave', '1')
+    .assert.containsText(`#${name} .enterCbs`, '2')
+    .assert.containsText(`#${name} .update`, '2')
+    .assert.containsText(`#${name} .leave`, '1')
     .click('li:nth-child(2) a')
-    .assert.containsText('#enterCbs', '3')
-    .assert.containsText('#update', '2')
-    .assert.containsText('#leave', '2')
+    .assert.containsText(`#${name} .enterCbs`, '3')
+    .assert.containsText(`#${name} .update`, '2')
+    .assert.containsText(`#${name} .leave`, '2')
     .expect.element('#logs')
     .text.to.equal(
       [
-        'enter / - /foo',
-        'leave /foo - /f/1',
-        'setup:leave /foo - /f/1',
-        'enter /foo - /f/1',
-        'update /f/1 - /f/2',
-        'setup:update /f/1 - /f/2',
-        'update /f/2 - /f/2',
-        'setup:update /f/2 - /f/2',
-        'leave /f/2 - /foo',
-        'setup:leave /f/2 - /foo',
-        'enter /f/2 - /foo',
+        `${name}: enter / - /foo`,
+        `${name}: leave /foo - /f/1`,
+        `${name}: setup:leave /foo - /f/1`,
+        `${name}: enter /foo - /f/1`,
+        `${name}: update /f/1 - /f/2`,
+        `${name}: setup:update /f/1 - /f/2`,
+        `${name}: update /f/2 - /f/2`,
+        `${name}: setup:update /f/2 - /f/2`,
+        `${name}: leave /f/2 - /foo`,
+        `${name}: setup:leave /f/2 - /foo`,
+        `${name}: enter /f/2 - /foo`,
       ].join('\n')
     )
 }
@@ -47,19 +47,20 @@ module.exports = {
 
   /** @type {import('nightwatch').NightwatchTest} */
   'guards instances': function (browser) {
+    const name = 'Foo'
     browser
       .url('http://localhost:8080/guards-instances/')
       .waitForElementPresent('#app > *', 1000)
 
       .click('#test-normal')
 
-    testCase(browser)
+    testCase(browser, name)
 
     browser
       .click('li:nth-child(1) a')
       // the enters are reset when leaving a reused component
       .click('li:nth-child(2) a')
-      .assert.containsText('#enterCbs', '1')
+      .assert.containsText(`#${name} .enterCbs`, '1')
 
     browser.end()
   },
@@ -72,33 +73,34 @@ module.exports = {
 
       .click('#test-transition')
 
-    testCase(browser)
+    testCase(browser, 'Foo')
 
     browser.end()
   },
 
   /** @type {import('nightwatch').NightwatchTest} */
   'guards instances keep alive': function (browser) {
+    const name = 'Foo'
     browser
       .url('http://localhost:8080/guards-instances/')
       .waitForElementPresent('#app > *', 1000)
 
       .click('#test-keepalive')
 
-    testCase(browser)
+    testCase(browser, name)
 
     browser
       .click('li:nth-child(1) a')
       // keep alive keeps the correct instance
       .click('li:nth-child(2) a')
-      .expect.element('#enterCbs')
+      .expect.element(`#${name} .enterCbs`)
       .text.equals('4')
     browser
       .click('li:nth-child(1) a')
       .click('li:nth-child(2) a')
-      .assert.containsText('#enterCbs', '5')
+      .assert.containsText(`#${name} .enterCbs`, '5')
       .click('li:nth-child(3) a')
-      .assert.containsText('#enterCbs', '6')
+      .assert.containsText(`#${name} .enterCbs`, '6')
       // leave the update view and enter it again
       .click('li:nth-child(1) a')
       .click('li:nth-child(3) a')
@@ -108,10 +110,10 @@ module.exports = {
       .expect.element('#logs')
       .text.to.equal(
         [
-          'update /f/1 - /f/2',
-          'setup:update /f/1 - /f/2',
-          'leave /f/2 - /',
-          'setup:leave /f/2 - /',
+          `${name}: update /f/1 - /f/2`,
+          `${name}: setup:update /f/1 - /f/2`,
+          `${name}: leave /f/2 - /`,
+          `${name}: setup:leave /f/2 - /`,
         ].join('\n')
       )
 
@@ -120,113 +122,134 @@ module.exports = {
 
   /** @type {import('nightwatch').NightwatchTest} */
   'guards instances keyed': function (browser) {
+    const name = 'Foo'
     browser
       .url('http://localhost:8080/guards-instances/')
       .waitForElementPresent('#app > *', 1000)
 
       .click('#test-keyed')
 
-    testCase(browser)
+    testCase(browser, name)
 
     browser
       .click('li:nth-child(5) a')
       // the query is used as a key resetting the enter count
       .click('li:nth-child(6) a')
-      .assert.containsText('#enterCbs', '0')
+      .assert.containsText(`#${name} .enterCbs`, '0')
       // changing both the route and mounting the component
       .click('li:nth-child(2) a')
-      .assert.containsText('#enterCbs', '1')
+      .assert.containsText(`#${name} .enterCbs`, '1')
       .click('li:nth-child(6) a')
-      .assert.containsText('#enterCbs', '1')
-      .assert.containsText('#update', '0')
-      .assert.containsText('#leave', '0')
+      .assert.containsText(`#${name} .enterCbs`, '1')
+      .assert.containsText(`#${name} .update`, '0')
+      .assert.containsText(`#${name} .leave`, '0')
       .click('li:nth-child(2) a')
-      .assert.containsText('#enterCbs', '1')
-      .assert.containsText('#update', '0')
-      .assert.containsText('#leave', '0')
+      .assert.containsText(`#${name} .enterCbs`, '1')
+      .assert.containsText(`#${name} .update`, '0')
+      .assert.containsText(`#${name} .leave`, '0')
       .click('li:nth-child(6) a')
-      .assert.containsText('#update', '0')
-      .assert.containsText('#leave', '0')
+      .assert.containsText(`#${name} .update`, '0')
+      .assert.containsText(`#${name} .leave`, '0')
       .click('#resetLogs')
       .click('li:nth-child(7) a')
-      .assert.containsText('#enterCbs', '0')
-      .assert.containsText('#update', '0')
-      .assert.containsText('#leave', '0')
+      .assert.containsText(`#${name} .enterCbs`, '0')
+      .assert.containsText(`#${name} .update`, '0')
+      .assert.containsText(`#${name} .leave`, '0')
       .expect.element('#logs')
       .text.to.equal(
-        ['update /f/2 - /f/2', 'setup:update /f/2 - /f/2'].join('\n')
+        [
+          // lol
+          `${name}: update /f/2 - /f/2`,
+          `${name}: setup:update /f/2 - /f/2`,
+        ].join('\n')
       )
-    browser.click('li:nth-child(6) a').assert.containsText('#enterCbs', '0')
+    browser
+      .click('li:nth-child(6) a')
+      .assert.containsText(`#${name} .enterCbs`, '0')
 
     browser.end()
   },
 
   /** @type {import('nightwatch').NightwatchTest} */
   'guards instances keepalive keyed': function (browser) {
+    const name = 'Foo'
     browser
       .url('http://localhost:8080/guards-instances/')
       .waitForElementPresent('#app > *', 1000)
 
       .click('#test-keepalivekeyed')
 
-    testCase(browser)
+    testCase(browser, name)
 
     browser
       .click('li:nth-child(1) a')
       // keep alive keeps the correct instance
       .click('li:nth-child(2) a')
-      .assert.containsText('#enterCbs', '4')
+      .assert.containsText(`#${name} .enterCbs`, '4')
       .click('li:nth-child(1) a')
       .click('li:nth-child(2) a')
-      .assert.containsText('#enterCbs', '5')
+      .assert.containsText(`#${name} .enterCbs`, '5')
       .click('li:nth-child(3) a')
-      .assert.containsText('#enterCbs', '6')
+      .assert.containsText(`#${name} .enterCbs`, '6')
 
       .click('li:nth-child(5) a')
       // the query is used as a key resetting the enter count
       .click('li:nth-child(6) a')
-      .assert.containsText('#enterCbs', '0')
-      .assert.containsText('#update', '0')
-      .assert.containsText('#leave', '0')
+      .assert.containsText(`#${name} .enterCbs`, '0')
+      .assert.containsText(`#${name} .update`, '0')
+      .assert.containsText(`#${name} .leave`, '0')
       .click('li:nth-child(1) a')
       .click('li:nth-child(6) a')
-      .assert.containsText('#enterCbs', '1')
-      .assert.containsText('#update', '0')
-      .assert.containsText('#leave', '1')
+      .assert.containsText(`#${name} .enterCbs`, '1')
+      .assert.containsText(`#${name} .update`, '0')
+      .assert.containsText(`#${name} .leave`, '1')
       .click('li:nth-child(5) a')
-      .assert.containsText('#enterCbs', '6')
+      .assert.containsText(`#${name} .enterCbs`, '6')
       // on reused instance
       .click('li:nth-child(2) a')
       .click('li:nth-child(6) a')
-      .assert.containsText('#enterCbs', '2')
-      .assert.containsText('#update', '1')
-      .assert.containsText('#leave', '1')
+      .assert.containsText(`#${name} .enterCbs`, '2')
+      .assert.containsText(`#${name} .update`, '1')
+      .assert.containsText(`#${name} .leave`, '1')
       .click('#resetLogs')
       .click('li:nth-child(7) a')
-      .assert.containsText('#enterCbs', '0')
+      .assert.containsText(`#${name} .enterCbs`, '0')
       // the previous instance was updated but not this one
-      .assert.containsText('#update', '0')
-      .assert.containsText('#leave', '0')
+      .assert.containsText(`#${name} .update`, '0')
+      .assert.containsText(`#${name} .leave`, '0')
       .expect.element('#logs')
       // should only trigger active guards
       .text.to.equal(
-        ['update /f/2 - /f/2', 'setup:update /f/2 - /f/2'].join('\n')
+        [
+          // foo
+          `${name}: update /f/2 - /f/2`,
+          `${name}: setup:update /f/2 - /f/2`,
+        ].join('\n')
       )
     browser
       .click('li:nth-child(6) a')
-      .assert.containsText('#enterCbs', '2')
-      .assert.containsText('#update', '2')
-      .assert.containsText('#leave', '1')
+      .assert.containsText(`#${name} .enterCbs`, '2')
+      .assert.containsText(`#${name} .update`, '2')
+      .assert.containsText(`#${name} .leave`, '1')
       .expect.element('#logs')
       .text.to.equal(
         [
-          'update /f/2 - /f/2',
-          'setup:update /f/2 - /f/2',
-          'update /f/2 - /f/2',
-          'setup:update /f/2 - /f/2',
+          `${name}: update /f/2 - /f/2`,
+          `${name}: setup:update /f/2 - /f/2`,
+          `${name}: update /f/2 - /f/2`,
+          `${name}: setup:update /f/2 - /f/2`,
         ].join('\n')
       )
 
     browser.end()
   },
+
+  /** @type {import('nightwatch').NightwatchTest} */
+  'guards + instances + named views': function (browser) {
+    browser
+      .url('http://localhost:8080/guards-instances/')
+      .waitForElementPresent('#app > *', 1000)
+
+    browser.end()
+  },
 }