v-animation test cases

src/transition.js

@@ -41,7 +41,7 @@ var transition = module.exports = function (el, stage, cb, compiler) {
     }
 
     var transitionId = el.vue_trans,
-        animation = el.vue_anim
+        isAnimation = el.vue_anim === ''
 
     if (transitionId) {
         return applyTransitionFunctions(
@@ -51,12 +51,12 @@ var transition = module.exports = function (el, stage, cb, compiler) {
             transitionId,
             compiler
         )
-    } else if (transitionId === '' || animation === '') {
+    } else if (transitionId === '' || isAnimation) {
         return applyTransitionClass(
             el,
             stage,
             changeState,
-            animation
+            isAnimation
         )
     } else {
         changeState()
@@ -70,7 +70,7 @@ transition.codes = codes
 /**
  *  Togggle a CSS class to trigger transition
  */
-function applyTransitionClass (el, stage, changeState, animation) {
+function applyTransitionClass (el, stage, changeState, isAnimation) {
 
     if (!endEvents.trans) {
         changeState()
@@ -84,7 +84,6 @@ function applyTransitionClass (el, stage, changeState, animation) {
         existingCallback = el.vue_trans_cb,
         enterClass       = config.enterClass,
         leaveClass       = config.leaveClass,
-        isAnimation      = animation === '',
         endEvent = isAnimation
             ? endEvents.anim
             : endEvents.trans

test/functional/fixtures/animation.html

@@ -4,12 +4,12 @@
         display: inline-block;
     }
     .v-enter {
-        -webkit-animation: fadein .5s;
-        animation: fadein .5s;
+        -webkit-animation: fadein .2s;
+        animation: fadein .2s;
     }
     .v-leave {
-        -webkit-animation: fadeout .5s;
-        animation: fadeout .5s;
+        -webkit-animation: fadeout .2s;
+        animation: fadeout .2s;
     }
     @keyframes fadein {
         0% {
@@ -70,10 +70,4 @@
             ok: true
         }
     })
-    setTimeout(function () {
-        test.ok = !test.ok
-        setTimeout(function () {
-            test.ok = !test.ok
-        }, 100)
-    }, 100)
 </script>

test/functional/specs/animation.js

@@ -0,0 +1,31 @@
+casper.test.begin('CSS Animation', 7, function (test) {
+
+    var minWait = 50,
+        duration = 200
+    
+    casper
+    .start('./fixtures/animation.html')
+    .then(function () {
+        test.assertElementCount('h1', 1)
+        test.assertElementCount('h1.v-leave', 0)
+    })
+    .thenClick('button')
+    .wait(minWait, function () {
+        test.assertElementCount('h1.v-leave', 1)
+    })
+    .wait(duration, function () {
+        test.assertElementCount('h1', 0)
+    })
+    .thenClick('button')
+    .wait(minWait, function () {
+        test.assertElementCount('h1.v-enter', 1)
+    })
+    .wait(duration, function () {
+        test.assertElementCount('h1', 1)
+        test.assertElementCount('h1.v-enter', 0)
+    })
+    .run(function () {
+        test.done()
+    })
+
+})

test/functional/specs/transition.js

@@ -1,4 +1,4 @@
-casper.test.begin('Transition', 25, function (test) {
+casper.test.begin('CSS Transition', 25, function (test) {
 
     var minWait = 50,
         transDuration = 200

test/unit/specs/transition.js

@@ -3,9 +3,10 @@ describe('UNIT: Transition', function () {
     var transition = require('vue/src/transition'),
         config     = require('vue/src/config'),
         codes      = transition.codes,
-        endEvent   = sniffTransitionEndEvent(),
+        endEvents  = sniffEndEvents(),
         enterClass = config.enterClass,
-        leaveClass = config.leaveClass
+        leaveClass = config.leaveClass,
+        nextTick   = Vue.nextTick
 
     describe('General', function () {
         
@@ -30,9 +31,9 @@ describe('UNIT: Transition', function () {
 
     })
 
-    describe('CSS class transition', function () {
+    describe('CSS Transitions', function () {
 
-        if (!endEvent) { // IE9 only test case
+        if (!endEvents.trans) { // IE9 only test case
 
             it('should skip if transition is not available', function () {
                 var c = mockChange(),
@@ -48,7 +49,7 @@ describe('UNIT: Transition', function () {
 
         }
 
-        describe('enter', function () {
+        describe('enter: transition', function () {
 
             var el = mockEl('css'),
                 c = mockChange(function () {
@@ -61,7 +62,7 @@ describe('UNIT: Transition', function () {
             el.vue_trans_cb = function () {
                 cbCalled = true
             }
-            el.addEventListener(endEvent, el.vue_trans_cb)
+            el.addEventListener(endEvents.trans, el.vue_trans_cb)
 
             it('should add the class before calling changeState()', function () {
                 code = transition(el, 1, c.change, compiler)
@@ -70,7 +71,7 @@ describe('UNIT: Transition', function () {
 
             it('should remove unfinished leave callback if exists', function () {
                 assert.notOk(el.vue_trans_cb)
-                var e = mockHTMLEvent(endEvent)
+                var e = mockHTMLEvent(endEvents.trans)
                 el.dispatchEvent(e)
                 assert.notOk(cbCalled)
             })
@@ -85,7 +86,7 @@ describe('UNIT: Transition', function () {
             })
 
             it('should remove the class afterwards', function (done) {
-                Vue.nextTick(function () {
+                nextTick(function () {
                     assert.notOk(el.classList.contains(enterClass))
                     done()
                 })
@@ -101,6 +102,50 @@ describe('UNIT: Transition', function () {
 
         })
 
+        describe('enter: animation', function () {
+            
+            var el = mockEl('css'),
+                c = mockChange(function () {
+                    c.called = true
+                    assert.notOk(el.classList.contains(enterClass))
+                }),
+                compiler = mockCompiler(),
+                code
+            // mark it to use CSS animation instead of transition
+            el.vue_anim = ''
+
+            before(function () {
+                document.body.appendChild(el)
+            })
+
+            after(function () {
+                document.body.removeChild(el)
+            })
+
+            it('should not add enterClass before calling changeState()', function () {
+                code = transition(el, 1, c.change, compiler)
+                assert.ok(c.called)
+            })
+
+            it('should add the class on nextTick', function (done) {
+                nextTick(function () {
+                    assert.ok(el.classList.contains(enterClass))
+                    done()
+                })
+            })
+
+            it('should remove the class when the animation is done', function (done) {
+                el.addEventListener(endEvents.anim, function () {
+                    assert.notOk(el.vue_trans_cb)
+                    assert.notOk(el.classList.contains(enterClass))
+                    done()
+                })
+                var e = mockHTMLEvent(endEvents.anim)
+                el.dispatchEvent(e)
+            })
+
+        })
+
         describe('leave', function () {
 
             var el = mockEl('css'),
@@ -112,6 +157,10 @@ describe('UNIT: Transition', function () {
                 document.body.appendChild(el)
             })
 
+            after(function () {
+                document.body.removeChild(el)
+            })
+
             it('should call change immediately if el is invisible', function () {
                 var el = mockEl('css'),
                     c = mockChange(),
@@ -132,14 +181,14 @@ describe('UNIT: Transition', function () {
             })
 
             it('should call changeState on transitionend', function () {
-                var e = mockHTMLEvent(endEvent)
+                var e = mockHTMLEvent(endEvents.trans)
                 el.dispatchEvent(e)
                 assert.ok(c.called)
             })
 
             it('should remove the callback after called', function () {
                 assert.notOk(el.vue_trans_cb)
-                var e = mockHTMLEvent(endEvent)
+                var e = mockHTMLEvent(endEvents.trans)
                 el.dispatchEvent(e)
                 assert.strictEqual(c.n, 1)
             })
@@ -160,7 +209,7 @@ describe('UNIT: Transition', function () {
 
     })
 
-    describe('JavaScript transition', function () {
+    describe('JavaScript Transitions', function () {
 
         it('should skip if correspinding option is not defined', function () {
             var c = mockChange(),
@@ -278,19 +327,25 @@ describe('UNIT: Transition', function () {
         }
     }
 
-    function sniffTransitionEndEvent () {
+    function sniffEndEvents () {
         var el = document.createElement('vue'),
             defaultEvent = 'transitionend',
             events = {
                 'transition'       : defaultEvent,
-                'MozTransition'    : defaultEvent,
-                'WebkitTransition' : 'webkitTransitionEnd'
-            }
+                'mozTransition'    : defaultEvent,
+                'webkitTransition' : 'webkitTransitionEnd'
+            },
+            ret = {}
         for (var name in events) {
             if (el.style[name] !== undefined) {
-                return events[name]
+                ret.trans = events[name]
+                break
             }
         }
+        ret.anim = el.style.animation === ''
+            ? 'animationend'
+            : 'webkitAnimationEnd'
+        return ret
     }
 
 })