adjust explicit transition duration tests

test/unit/features/transition/transition.spec.js

@@ -6,7 +6,7 @@ import { nextFrame } from 'web/runtime/transition-util'
 if (!isIE9) {
   describe('Transition basic', () => {
     const { duration, buffer } = injectStyles()
-    const explicitDuration = 100
+    const explicitDuration = duration * 2
 
     let el
     beforeEach(() => {
@@ -877,231 +877,233 @@ if (!isIE9) {
       expect(`<transition> can only be used on a single element`).toHaveBeenWarned()
     })
 
-    it('explicit transition total duration', done => {
-      const vm = new Vue({
-        template: `
-          <div>
-            <transition :duration="${explicitDuration}">
-              <div v-if="ok" class="test">foo</div>
-            </transition>
-          </div>
-        `,
-        data: { ok: true }
-      }).$mount(el)
-
-      vm.ok = false
-
-      waitForUpdate(() => {
-        expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')
-      }).thenWaitFor(nextFrame).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
-      }).thenWaitFor(explicitDuration - buffer).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
-      }).thenWaitFor(buffer * 2).then(() => {
-        expect(vm.$el.children.length).toBe(0)
-        vm.ok = true
-      }).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')
-      }).thenWaitFor(nextFrame).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')
-      }).thenWaitFor(explicitDuration - buffer).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')
-      }).thenWaitFor(buffer * 2).then(() => {
-        expect(vm.$el.children[0].className).toBe('test')
-      }).then(done)
-    })
-
-    it('explicit transition enter duration and auto leave duration', done => {
-      const vm = new Vue({
-        template: `
-          <div>
-            <transition :duration="{ enter: ${explicitDuration} }">
-              <div v-if="ok" class="test">foo</div>
-            </transition>
-          </div>
-        `,
-        data: { ok: true }
-      }).$mount(el)
-
-      vm.ok = false
-
-      waitForUpdate(() => {
-        expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')
-      }).thenWaitFor(nextFrame).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
-      }).thenWaitFor(duration - buffer).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
-      }).thenWaitFor(buffer * 2).then(() => {
-        expect(vm.$el.children.length).toBe(0)
-        vm.ok = true
-      }).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')
-      }).thenWaitFor(nextFrame).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')
-      }).thenWaitFor(explicitDuration - buffer).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')
-      }).thenWaitFor(buffer * 2).then(() => {
-        expect(vm.$el.children[0].className).toBe('test')
-      }).then(done)
-    })
-
-    it('explicit transition leave duration and auto enter duration', done => {
-      const vm = new Vue({
-        template: `
-          <div>
-            <transition :duration="{ leave: ${explicitDuration} }">
-              <div v-if="ok" class="test">foo</div>
-            </transition>
-          </div>
-        `,
-        data: { ok: true }
-      }).$mount(el)
-
-      vm.ok = false
+    describe('explicit durations -', () => {
+      it('single value', done => {
+        const vm = new Vue({
+          template: `
+            <div>
+              <transition :duration="${explicitDuration}">
+                <div v-if="ok" class="test">foo</div>
+              </transition>
+            </div>
+          `,
+          data: { ok: true }
+        }).$mount(el)
 
-      waitForUpdate(() => {
-        expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')
-      }).thenWaitFor(nextFrame).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
-      }).thenWaitFor(explicitDuration - buffer).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
-      }).thenWaitFor(buffer * 2).then(() => {
-        expect(vm.$el.children.length).toBe(0)
-        vm.ok = true
-      }).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')
-      }).thenWaitFor(nextFrame).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')
-      }).thenWaitFor(duration - buffer).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')
-      }).thenWaitFor(buffer * 2).then(() => {
-        expect(vm.$el.children[0].className).toBe('test')
-      }).then(done)
-    })
+        vm.ok = false
 
-    it('explicit transition separate enter and leave duration', done => {
-      const enter = 100
-      const leave = 200
+        waitForUpdate(() => {
+          expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')
+        }).thenWaitFor(nextFrame).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
+        }).thenWaitFor(explicitDuration - buffer).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
+        }).thenWaitFor(buffer * 2).then(() => {
+          expect(vm.$el.children.length).toBe(0)
+          vm.ok = true
+        }).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')
+        }).thenWaitFor(nextFrame).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')
+        }).thenWaitFor(explicitDuration - buffer).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')
+        }).thenWaitFor(buffer * 2).then(() => {
+          expect(vm.$el.children[0].className).toBe('test')
+        }).then(done)
+      })
+
+      it('enter and auto leave', done => {
+        const vm = new Vue({
+          template: `
+            <div>
+              <transition :duration="{ enter: ${explicitDuration} }">
+                <div v-if="ok" class="test">foo</div>
+              </transition>
+            </div>
+          `,
+          data: { ok: true }
+        }).$mount(el)
 
-      const vm = new Vue({
-        template: `
-          <div>
-            <transition :duration="{ enter: ${enter}, leave: ${leave} }">
-              <div v-if="ok" class="test">foo</div>
-            </transition>
-          </div>
-        `,
-        data: { ok: true }
-      }).$mount(el)
+        vm.ok = false
 
-      vm.ok = false
+        waitForUpdate(() => {
+          expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')
+        }).thenWaitFor(nextFrame).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
+        }).thenWaitFor(duration - buffer).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
+        }).thenWaitFor(buffer * 2).then(() => {
+          expect(vm.$el.children.length).toBe(0)
+          vm.ok = true
+        }).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')
+        }).thenWaitFor(nextFrame).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')
+        }).thenWaitFor(explicitDuration - buffer).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')
+        }).thenWaitFor(buffer * 2).then(() => {
+          expect(vm.$el.children[0].className).toBe('test')
+        }).then(done)
+      })
+
+      it('leave and auto enter', done => {
+        const vm = new Vue({
+          template: `
+            <div>
+              <transition :duration="{ leave: ${explicitDuration} }">
+                <div v-if="ok" class="test">foo</div>
+              </transition>
+            </div>
+          `,
+          data: { ok: true }
+        }).$mount(el)
 
-      waitForUpdate(() => {
-        expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')
-      }).thenWaitFor(nextFrame).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
-      }).thenWaitFor(leave - buffer).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
-      }).thenWaitFor(buffer * 2).then(() => {
-        expect(vm.$el.children.length).toBe(0)
-        vm.ok = true
-      }).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')
-      }).thenWaitFor(nextFrame).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')
-      }).thenWaitFor(enter - buffer).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')
-      }).thenWaitFor(buffer * 2).then(() => {
-        expect(vm.$el.children[0].className).toBe('test')
-      }).then(done)
-    })
+        vm.ok = false
 
-    it('explicit transition enter and leave duration + duration change', done => {
-      const enter1 = 200
-      const enter2 = 100
-      const leave1 = 50
-      const leave2 = 300
+        waitForUpdate(() => {
+          expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')
+        }).thenWaitFor(nextFrame).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
+        }).thenWaitFor(explicitDuration - buffer).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
+        }).thenWaitFor(buffer * 2).then(() => {
+          expect(vm.$el.children.length).toBe(0)
+          vm.ok = true
+        }).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')
+        }).thenWaitFor(nextFrame).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')
+        }).thenWaitFor(duration - buffer).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')
+        }).thenWaitFor(buffer * 2).then(() => {
+          expect(vm.$el.children[0].className).toBe('test')
+        }).then(done)
+      })
+
+      it('separate enter and leave', done => {
+        const enter = explicitDuration
+        const leave = explicitDuration * 2
+
+        const vm = new Vue({
+          template: `
+            <div>
+              <transition :duration="{ enter: ${enter}, leave: ${leave} }">
+                <div v-if="ok" class="test">foo</div>
+              </transition>
+            </div>
+          `,
+          data: { ok: true }
+        }).$mount(el)
 
-      const vm = new Vue({
-        template: `
-          <div>
-            <transition :duration="{ enter: enter, leave: leave }">
-              <div v-if="ok" class="test">foo</div>
-            </transition>
-          </div>
-        `,
-        data: {
-          ok: true,
-          enter: enter1,
-          leave: leave1
-        }
-      }).$mount(el)
+        vm.ok = false
 
-      vm.ok = false
+        waitForUpdate(() => {
+          expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')
+        }).thenWaitFor(nextFrame).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
+        }).thenWaitFor(leave - buffer).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
+        }).thenWaitFor(buffer * 2).then(() => {
+          expect(vm.$el.children.length).toBe(0)
+          vm.ok = true
+        }).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')
+        }).thenWaitFor(nextFrame).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')
+        }).thenWaitFor(enter - buffer).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')
+        }).thenWaitFor(buffer * 2).then(() => {
+          expect(vm.$el.children[0].className).toBe('test')
+        }).then(done)
+      })
+
+      it('enter and leave + duration change', done => {
+        const enter1 = explicitDuration * 2
+        const enter2 = explicitDuration
+        const leave1 = explicitDuration * 0.5
+        const leave2 = explicitDuration * 3
+
+        const vm = new Vue({
+          template: `
+            <div>
+              <transition :duration="{ enter: enter, leave: leave }">
+                <div v-if="ok" class="test">foo</div>
+              </transition>
+            </div>
+          `,
+          data: {
+            ok: true,
+            enter: enter1,
+            leave: leave1
+          }
+        }).$mount(el)
 
-      waitForUpdate(() => {
-        expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')
-      }).thenWaitFor(nextFrame).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
-      }).thenWaitFor(leave1 - buffer).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
-      }).thenWaitFor(buffer * 2).then(() => {
-        expect(vm.$el.children.length).toBe(0)
-        vm.ok = true
-      }).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')
-      }).thenWaitFor(nextFrame).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')
-      }).thenWaitFor(enter1 - buffer).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')
-      }).thenWaitFor(buffer * 2).then(() => {
-        expect(vm.$el.children[0].className).toBe('test')
-        vm.enter = enter2
-        vm.leave = leave2
-      }).then(() => {
         vm.ok = false
-      }).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')
-      }).thenWaitFor(nextFrame).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
-      }).thenWaitFor(leave2 - buffer).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
-      }).thenWaitFor(buffer * 2).then(() => {
-        expect(vm.$el.children.length).toBe(0)
-        vm.ok = true
-      }).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')
-      }).thenWaitFor(nextFrame).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')
-      }).thenWaitFor(enter2 - buffer).then(() => {
-        expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')
-      }).thenWaitFor(buffer * 2).then(() => {
-        expect(vm.$el.children[0].className).toBe('test')
-      }).then(done)
-    })
 
-    it('warn invalid explicit durations', done => {
-      const vm = new Vue({
-        template: `
-          <div>
-            <transition :duration="{ enter: NaN, leave: 'foo' }">
-              <div v-if="ok" class="test">foo</div>
-            </transition>
-          </div>
-        `,
-        data: {
-          ok: true
-        }
-      }).$mount(el)
+        waitForUpdate(() => {
+          expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')
+        }).thenWaitFor(nextFrame).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
+        }).thenWaitFor(leave1 - buffer).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
+        }).thenWaitFor(buffer * 2).then(() => {
+          expect(vm.$el.children.length).toBe(0)
+          vm.ok = true
+        }).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')
+        }).thenWaitFor(nextFrame).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')
+        }).thenWaitFor(enter1 - buffer).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')
+        }).thenWaitFor(buffer * 2).then(() => {
+          expect(vm.$el.children[0].className).toBe('test')
+          vm.enter = enter2
+          vm.leave = leave2
+        }).then(() => {
+          vm.ok = false
+        }).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-leave v-leave-active')
+        }).thenWaitFor(nextFrame).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
+        }).thenWaitFor(leave2 - buffer).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-leave-active v-leave-to')
+        }).thenWaitFor(buffer * 2).then(() => {
+          expect(vm.$el.children.length).toBe(0)
+          vm.ok = true
+        }).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-enter v-enter-active')
+        }).thenWaitFor(nextFrame).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')
+        }).thenWaitFor(enter2 - buffer).then(() => {
+          expect(vm.$el.children[0].className).toBe('test v-enter-active v-enter-to')
+        }).thenWaitFor(buffer * 2).then(() => {
+          expect(vm.$el.children[0].className).toBe('test')
+        }).then(done)
+      })
+
+      it('warn invalid durations', done => {
+        const vm = new Vue({
+          template: `
+            <div>
+              <transition :duration="{ enter: NaN, leave: 'foo' }">
+                <div v-if="ok" class="test">foo</div>
+              </transition>
+            </div>
+          `,
+          data: {
+            ok: true
+          }
+        }).$mount(el)
 
-      vm.ok = false
-      waitForUpdate(() => {
-        expect(`<transition> explicit leave duration is not a valid number - got "foo"`).toHaveBeenWarned()
-      }).thenWaitFor(duration + buffer).then(() => {
-        vm.ok = true
-      }).then(() => {
-        expect(`<transition> explicit enter duration is NaN`).toHaveBeenWarned()
-      }).then(done)
+        vm.ok = false
+        waitForUpdate(() => {
+          expect(`<transition> explicit leave duration is not a valid number - got "foo"`).toHaveBeenWarned()
+        }).thenWaitFor(duration + buffer).then(() => {
+          vm.ok = true
+        }).then(() => {
+          expect(`<transition> explicit enter duration is NaN`).toHaveBeenWarned()
+        }).then(done)
+      })
     })
   })
 }