test(e2e): use 2s on CI, 0.5s on dev

Author: posva

e2e/transitions/index.html

@@ -11,15 +11,15 @@
     <style>
       .fade-enter-active,
       .fade-leave-active {
-        transition: opacity 1.5s ease;
+        transition: opacity 2s ease;
       }
       .fade-enter-from,
       .fade-leave-active {
         opacity: 0;
       }
       .child-view {
         position: absolute;
-        transition: all 1.5s cubic-bezier(0.55, 0, 0.1, 1);
+        transition: all 2s cubic-bezier(0.55, 0, 0.1, 1);
       }
       .slide-left-enter-from,
       .slide-right-leave-active {

e2e/transitions/index.ts

@@ -11,6 +11,23 @@ const Home: RouteComponent = {
   `,
 }
 
+// override existing style on dev with shorter times
+if (!__CI__) {
+  const transitionDuration = '0.5s'
+  const styleEl = document.createElement('style')
+  styleEl.innerHTML = `
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity ${transitionDuration} ease;
+}
+.child-view {
+  position: absolute;
+  transition: all ${transitionDuration} cubic-bezier(0.55, 0, 0.1, 1);
+}
+`
+  document.head.append(styleEl)
+}
+
 const Parent: RouteComponent = {
   data() {
     return {

e2e/webpack.config.js

@@ -75,6 +75,7 @@ const config = (env = {}) => ({
   plugins: [
     new webpack.DefinePlugin({
       __DEV__: JSON.stringify(process.env.NODE_ENV !== 'production'),
+      __CI__: JSON.stringify(process.env.CI || false),
       __BROWSER__: 'true',
       'process.env': {
         NODE_ENV: JSON.stringify(process.env.NODE_ENV),

src/global.d.ts

@@ -1,3 +1,4 @@
 // Global compile-time constants
 declare var __DEV__: boolean
 declare var __BROWSER__: boolean
+declare var __CI__: boolean