Skip to content

Commit e52ec65

Browse files
author
Evan You
committed
v-animation test cases
1 parent 4f695cf commit e52ec65

File tree

5 files changed

+111
-32
lines changed

5 files changed

+111
-32
lines changed

‎src/transition.js‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ var transition = module.exports = function (el, stage, cb, compiler) {
4141
}
4242

4343
var transitionId = el.vue_trans,
44-
animation = el.vue_anim
44+
isAnimation = el.vue_anim === ''
4545

4646
if (transitionId) {
4747
return applyTransitionFunctions(
@@ -51,12 +51,12 @@ var transition = module.exports = function (el, stage, cb, compiler) {
5151
transitionId,
5252
compiler
5353
)
54-
} else if (transitionId === '' || animation === '') {
54+
} else if (transitionId === '' || isAnimation) {
5555
return applyTransitionClass(
5656
el,
5757
stage,
5858
changeState,
59-
animation
59+
isAnimation
6060
)
6161
} else {
6262
changeState()
@@ -70,7 +70,7 @@ transition.codes = codes
7070
/**
7171
* Togggle a CSS class to trigger transition
7272
*/
73-
function applyTransitionClass (el, stage, changeState, animation) {
73+
function applyTransitionClass (el, stage, changeState, isAnimation) {
7474

7575
if (!endEvents.trans) {
7676
changeState()
@@ -84,7 +84,6 @@ function applyTransitionClass (el, stage, changeState, animation) {
8484
existingCallback = el.vue_trans_cb,
8585
enterClass = config.enterClass,
8686
leaveClass = config.leaveClass,
87-
isAnimation = animation === '',
8887
endEvent = isAnimation
8988
? endEvents.anim
9089
: endEvents.trans

‎test/functional/fixtures/animation.html‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@
44
display: inline-block;
55
}
66
.v-enter {
7-
-webkit-animation: fadein .5s;
8-
animation: fadein .5s;
7+
-webkit-animation: fadein .2s;
8+
animation: fadein .2s;
99
}
1010
.v-leave {
11-
-webkit-animation: fadeout .5s;
12-
animation: fadeout .5s;
11+
-webkit-animation: fadeout .2s;
12+
animation: fadeout .2s;
1313
}
1414
@keyframes fadein {
1515
0% {
@@ -70,10 +70,4 @@ <h1 v-animation v-if="ok">Hahahah</h1>
7070
ok: true
7171
}
7272
})
73-
setTimeout(function () {
74-
test.ok = !test.ok
75-
setTimeout(function () {
76-
test.ok = !test.ok
77-
}, 100)
78-
}, 100)
7973
</script>

‎test/functional/specs/animation.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
casper.test.begin('CSS Animation', 7, function (test) {
2+
3+
var minWait = 50,
4+
duration = 200
5+
6+
casper
7+
.start('./fixtures/animation.html')
8+
.then(function () {
9+
test.assertElementCount('h1', 1)
10+
test.assertElementCount('h1.v-leave', 0)
11+
})
12+
.thenClick('button')
13+
.wait(minWait, function () {
14+
test.assertElementCount('h1.v-leave', 1)
15+
})
16+
.wait(duration, function () {
17+
test.assertElementCount('h1', 0)
18+
})
19+
.thenClick('button')
20+
.wait(minWait, function () {
21+
test.assertElementCount('h1.v-enter', 1)
22+
})
23+
.wait(duration, function () {
24+
test.assertElementCount('h1', 1)
25+
test.assertElementCount('h1.v-enter', 0)
26+
})
27+
.run(function () {
28+
test.done()
29+
})
30+
31+
})

‎test/functional/specs/transition.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
casper.test.begin('Transition', 25, function (test) {
1+
casper.test.begin('CSS Transition', 25, function (test) {
22

33
var minWait = 50,
44
transDuration = 200

‎test/unit/specs/transition.js‎

Lines changed: 71 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@ describe('UNIT: Transition', function () {
33
var transition = require('vue/src/transition'),
44
config = require('vue/src/config'),
55
codes = transition.codes,
6-
endEvent = sniffTransitionEndEvent(),
6+
endEvents = sniffEndEvents(),
77
enterClass = config.enterClass,
8-
leaveClass = config.leaveClass
8+
leaveClass = config.leaveClass,
9+
nextTick = Vue.nextTick
910

1011
describe('General', function () {
1112

@@ -30,9 +31,9 @@ describe('UNIT: Transition', function () {
3031

3132
})
3233

33-
describe('CSS class transition', function () {
34+
describe('CSS Transitions', function () {
3435

35-
if (!endEvent) { // IE9 only test case
36+
if (!endEvents.trans) { // IE9 only test case
3637

3738
it('should skip if transition is not available', function () {
3839
var c = mockChange(),
@@ -48,7 +49,7 @@ describe('UNIT: Transition', function () {
4849

4950
}
5051

51-
describe('enter', function () {
52+
describe('enter: transition', function () {
5253

5354
var el = mockEl('css'),
5455
c = mockChange(function () {
@@ -61,7 +62,7 @@ describe('UNIT: Transition', function () {
6162
el.vue_trans_cb = function () {
6263
cbCalled = true
6364
}
64-
el.addEventListener(endEvent, el.vue_trans_cb)
65+
el.addEventListener(endEvents.trans, el.vue_trans_cb)
6566

6667
it('should add the class before calling changeState()', function () {
6768
code = transition(el, 1, c.change, compiler)
@@ -70,7 +71,7 @@ describe('UNIT: Transition', function () {
7071

7172
it('should remove unfinished leave callback if exists', function () {
7273
assert.notOk(el.vue_trans_cb)
73-
var e = mockHTMLEvent(endEvent)
74+
var e = mockHTMLEvent(endEvents.trans)
7475
el.dispatchEvent(e)
7576
assert.notOk(cbCalled)
7677
})
@@ -85,7 +86,7 @@ describe('UNIT: Transition', function () {
8586
})
8687

8788
it('should remove the class afterwards', function (done) {
88-
Vue.nextTick(function () {
89+
nextTick(function () {
8990
assert.notOk(el.classList.contains(enterClass))
9091
done()
9192
})
@@ -101,6 +102,50 @@ describe('UNIT: Transition', function () {
101102

102103
})
103104

105+
describe('enter: animation', function () {
106+
107+
var el = mockEl('css'),
108+
c = mockChange(function () {
109+
c.called = true
110+
assert.notOk(el.classList.contains(enterClass))
111+
}),
112+
compiler = mockCompiler(),
113+
code
114+
// mark it to use CSS animation instead of transition
115+
el.vue_anim = ''
116+
117+
before(function () {
118+
document.body.appendChild(el)
119+
})
120+
121+
after(function () {
122+
document.body.removeChild(el)
123+
})
124+
125+
it('should not add enterClass before calling changeState()', function () {
126+
code = transition(el, 1, c.change, compiler)
127+
assert.ok(c.called)
128+
})
129+
130+
it('should add the class on nextTick', function (done) {
131+
nextTick(function () {
132+
assert.ok(el.classList.contains(enterClass))
133+
done()
134+
})
135+
})
136+
137+
it('should remove the class when the animation is done', function (done) {
138+
el.addEventListener(endEvents.anim, function () {
139+
assert.notOk(el.vue_trans_cb)
140+
assert.notOk(el.classList.contains(enterClass))
141+
done()
142+
})
143+
var e = mockHTMLEvent(endEvents.anim)
144+
el.dispatchEvent(e)
145+
})
146+
147+
})
148+
104149
describe('leave', function () {
105150

106151
var el = mockEl('css'),
@@ -112,6 +157,10 @@ describe('UNIT: Transition', function () {
112157
document.body.appendChild(el)
113158
})
114159

160+
after(function () {
161+
document.body.removeChild(el)
162+
})
163+
115164
it('should call change immediately if el is invisible', function () {
116165
var el = mockEl('css'),
117166
c = mockChange(),
@@ -132,14 +181,14 @@ describe('UNIT: Transition', function () {
132181
})
133182

134183
it('should call changeState on transitionend', function () {
135-
var e = mockHTMLEvent(endEvent)
184+
var e = mockHTMLEvent(endEvents.trans)
136185
el.dispatchEvent(e)
137186
assert.ok(c.called)
138187
})
139188

140189
it('should remove the callback after called', function () {
141190
assert.notOk(el.vue_trans_cb)
142-
var e = mockHTMLEvent(endEvent)
191+
var e = mockHTMLEvent(endEvents.trans)
143192
el.dispatchEvent(e)
144193
assert.strictEqual(c.n, 1)
145194
})
@@ -160,7 +209,7 @@ describe('UNIT: Transition', function () {
160209

161210
})
162211

163-
describe('JavaScript transition', function () {
212+
describe('JavaScript Transitions', function () {
164213

165214
it('should skip if correspinding option is not defined', function () {
166215
var c = mockChange(),
@@ -278,19 +327,25 @@ describe('UNIT: Transition', function () {
278327
}
279328
}
280329

281-
function sniffTransitionEndEvent () {
330+
function sniffEndEvents () {
282331
var el = document.createElement('vue'),
283332
defaultEvent = 'transitionend',
284333
events = {
285334
'transition' : defaultEvent,
286-
'MozTransition' : defaultEvent,
287-
'WebkitTransition' : 'webkitTransitionEnd'
288-
}
335+
'mozTransition' : defaultEvent,
336+
'webkitTransition' : 'webkitTransitionEnd'
337+
},
338+
ret = {}
289339
for (var name in events) {
290340
if (el.style[name] !== undefined) {
291-
return events[name]
341+
ret.trans = events[name]
342+
break
292343
}
293344
}
345+
ret.anim = el.style.animation === ''
346+
? 'animationend'
347+
: 'webkitAnimationEnd'
348+
return ret
294349
}
295350

296351
})

0 commit comments

Comments
 (0)