test: add transition test

diff --git a/e2e/specs/transitions.js b/e2e/specs/transitions.js
new file mode 100644 (file)
index 0000000..292a950
--- /dev/null
+++ b/e2e/specs/transitions.js
@@ -0,0 +1,48 @@
+const bsStatus = require('../browserstack-send-status')
+
+module.exports = {
+  ...bsStatus(),
+
+  '@tags': ['no-headless'],
+
+  transitions: function(browser) {
+    const TIMEOUT = 2000
+
+    browser
+      .url('http://localhost:8080/transitions/')
+      .waitForElementVisible('#app', 1000)
+
+      .click('li:nth-child(2) a')
+      .assert.cssClassPresent('.view.home', 'fade-leave-active')
+      .waitForElementPresent('.view.parent', TIMEOUT)
+      .assert.cssClassPresent('.view.parent', 'fade-enter-active')
+      .assert.not.cssClassPresent(
+        '.child-view.default',
+        'slide-left-enter-active'
+      )
+      .waitForElementNotPresent('.view.parent.fade-enter-active', TIMEOUT)
+
+      .click('li:nth-child(3) a')
+      .assert.cssClassPresent('.child-view.default', 'slide-left-leave-active')
+      .assert.cssClassPresent('.child-view.foo', 'slide-left-enter-active')
+      .waitForElementNotPresent('.child-view.default', TIMEOUT)
+
+      .click('li:nth-child(4) a')
+      .assert.cssClassPresent('.child-view.foo', 'slide-left-leave-active')
+      .assert.cssClassPresent('.child-view.bar', 'slide-left-enter-active')
+      .waitForElementNotPresent('.child-view.foo', TIMEOUT)
+
+      .click('li:nth-child(2) a')
+      .assert.cssClassPresent('.child-view.bar', 'slide-right-leave-active')
+      .assert.cssClassPresent('.child-view.default', 'slide-right-enter-active')
+      .waitForElementNotPresent('.child-view.bar', TIMEOUT)
+
+      .click('li:nth-child(1) a')
+      .assert.cssClassPresent('.view.parent', 'fade-leave-active')
+      .waitForElementPresent('.view.home', TIMEOUT)
+      .assert.cssClassPresent('.view.home', 'fade-enter-active')
+      .waitForElementNotPresent('.view.home.fade-enter-active', TIMEOUT)
+
+      .end()
+  },
+}

diff --git a/e2e/transitions/index.html b/e2e/transitions/index.html
index 8eaed63bb8559d2b249599167d95349b5e557357..b7bd5e4311709d2cfb7a5fa835826a13e253df1f 100644 (file)
--- a/e2e/transitions/index.html
+++ b/e2e/transitions/index.html
@@ -47,9 +47,11 @@
         <li><router-link to="/parent/foo">/parent/foo</router-link></li>
         <li><router-link to="/parent/bar">/parent/bar</router-link></li>
       </ul>
-      <transition name="fade" mode="out-in">
-        <router-view class="view"></router-view>
-      </transition>
+      <router-view class="view" v-slot="{ Component, props }">
+        <transition name="fade" mode="out-in">
+          <component :is="Component" v-bind="props"></component>
+        </transition>
+      </router-view>
     </div>
   </body>
 </html>

diff --git a/e2e/transitions/index.ts b/e2e/transitions/index.ts
index 2c7288a1a232662cfda01e22b24d3147e980715a..c87bafc26b05d6edeaab36caa2f898cd8dcaa51e 100644 (file)
--- a/e2e/transitions/index.ts
+++ b/e2e/transitions/index.ts
@@ -30,9 +30,11 @@ const Parent: RouteComponent = {
     <div class="parent">
       <h2>Parent</h2>
       {{ transitionName }}
-      <transition :name="transitionName">
-        <router-view class="child-view"></router-view>
-      </transition>
+      <router-view class="child-view" v-slot="{ Component, props }">
+        <transition :name="transitionName">
+          <component :is="Component" v-bind="props" />
+        </transition>
+      </router-view>
     </div>
   `,
 }