From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Wed, 15 Apr 2020 08:18:20 +0000 (+0200)
Subject: test: add transition test
X-Git-Tag: v4.0.0-alpha.6~22
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=84b382b778877063f7f2ac16bbba6afd4617e1d1;p=thirdparty%2Fvuejs%2Frouter.git

test: add transition test
---

diff --git a/e2e/specs/transitions.js b/e2e/specs/transitions.js
new file mode 100644
index 00000000..292a9500
--- /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 8eaed63b..b7bd5e43 100644
--- 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 2c7288a1..c87bafc2 100644
--- 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>
   `,
 }