Skip to content

Commit a740802

Browse files
author
Evan You
committed
unit tests for transitions
1 parent 257781c commit a740802

File tree

13 files changed

+469
-98
lines changed

13 files changed

+469
-98
lines changed

‎src/transition.js

Lines changed: 54 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,29 @@
11
var config = require('./config'),
2-
endEvent = sniffTransitionEndEvent()
2+
endEvent = sniffTransitionEndEvent(),
3+
codes = {
4+
CSS_E : 1,
5+
CSS_L : 2,
6+
JS_E : 3,
7+
JS_L : 4,
8+
CSS_SKIP : -1,
9+
JS_SKIP : -2,
10+
JS_SKIP_E : -3,
11+
JS_SKIP_L : -4,
12+
INIT : -5,
13+
SKIP : -6
14+
}
315

416
/**
517
* stage:
6-
* 1 = enter
7-
* 2 = leave
18+
* 1 = enter
19+
* 2 = leave
820
*/
9-
module.exports = function (el, stage, changeState, compiler) {
21+
var transition = module.exports = function (el, stage, changeState, compiler) {
1022

11-
if (compiler.init) return changeState()
23+
if (compiler.init) {
24+
changeState()
25+
return codes.INIT
26+
}
1227

1328
// in sd-repeat, the transition directives
1429
// might not have been processed yet
@@ -20,33 +35,37 @@ module.exports = function (el, stage, changeState, compiler) {
2035
el.getAttribute(config.transClassAttr)
2136

2237
if (transitionFunctionId) {
23-
applyTransitionFunctions(
38+
return applyTransitionFunctions(
2439
el,
2540
stage,
2641
changeState,
2742
transitionFunctionId,
2843
compiler
2944
)
3045
} else if (transitionClass) {
31-
applyTransitionClass(
46+
return applyTransitionClass(
3247
el,
3348
stage,
3449
changeState,
3550
transitionClass
3651
)
3752
} else {
38-
return changeState()
53+
changeState()
54+
return codes.SKIP
3955
}
4056

4157
}
4258

59+
transition.codes = codes
60+
4361
/**
4462
* Togggle a CSS class to trigger transition
4563
*/
4664
function applyTransitionClass (el, stage, changeState, className) {
4765

48-
if (!endEvent || !className) {
49-
return changeState()
66+
if (!endEvent) {
67+
changeState()
68+
return codes.CSS_SKIP
5069
}
5170

5271
var classList = el.classList,
@@ -69,21 +88,25 @@ function applyTransitionClass (el, stage, changeState, className) {
6988
var forceLayout = el.clientHeight
7089
// trigger transition
7190
classList.remove(className)
91+
return codes.CSS_E
7292

7393
} else { // leave
7494

7595
// trigger hide transition
7696
classList.add(className)
77-
var onEnd = function () {
78-
el.removeEventListener(endEvent, onEnd)
79-
el.sd_trans_cb = null
80-
// actually remove node here
81-
changeState()
82-
classList.remove(className)
97+
var onEnd = function (e) {
98+
if (e.target === el) {
99+
el.removeEventListener(endEvent, onEnd)
100+
el.sd_trans_cb = null
101+
// actually remove node here
102+
changeState()
103+
classList.remove(className)
104+
}
83105
}
84106
// attach transition end listener
85107
el.addEventListener(endEvent, onEnd)
86108
el.sd_trans_cb = onEnd
109+
return codes.CSS_L
87110

88111
}
89112

@@ -93,26 +116,36 @@ function applyTransitionFunctions (el, stage, changeState, functionId, compiler)
93116

94117
var funcs = compiler.getOption('transitions', functionId)
95118
if (!funcs) {
96-
return changeState()
119+
changeState()
120+
return codes.JS_SKIP
97121
}
98122

99123
var enter = funcs.enter,
100124
leave = funcs.leave
101-
125+
102126
if (stage > 0) { // enter
103-
if (typeof enter !== 'function') return changeState()
127+
if (typeof enter !== 'function') {
128+
changeState()
129+
return codes.JS_SKIP_E
130+
}
104131
enter(el, changeState)
132+
return codes.JS_E
105133
} else { // leave
106-
if (typeof leave !== 'function') return changeState()
134+
if (typeof leave !== 'function') {
135+
changeState()
136+
return codes.JS_SKIP_L
137+
}
107138
leave(el, changeState)
139+
return codes.JS_L
108140
}
141+
109142
}
110143

111144
/**
112145
* Sniff proper transition end event name
113146
*/
114147
function sniffTransitionEndEvent () {
115-
var el = document.createElement('div'),
148+
var el = document.createElement('seed'),
116149
defaultEvent = 'transitionend',
117150
events = {
118151
'transition' : defaultEvent,

‎test/unit/runner.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
<script src="specs/directives.js"></script>
4545
<script src="specs/api.js"></script>
4646
<script src="specs/viewmodel.js"></script>
47+
<script src="specs/transition.js"></script>
4748
<script>
4849
if (navigator.userAgent.indexOf('PhantomJS') < 0) {
4950
mocha.run(Cover.report)

‎test/unit/specs/api.js

Lines changed: 80 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -187,9 +187,44 @@ describe('UNIT: API', function () {
187187
assert.strictEqual(Seed.transition(testId), transition)
188188
})
189189

190-
// it('should work with sd-transition', function () {
191-
// assert.ok(false)
192-
// })
190+
it('should work with sd-transition', function () {
191+
192+
var enterCalled = false,
193+
leaveCalled = false
194+
195+
Seed.transition('transition-api-test', {
196+
enter: function (el, done) {
197+
enterCalled = true
198+
done()
199+
},
200+
leave: function (el, done) {
201+
leaveCalled = true
202+
done()
203+
}
204+
})
205+
206+
var t = new Seed({
207+
attributes: {
208+
'sd-show': 'show',
209+
'sd-transition': 'transition-api-test'
210+
},
211+
scope: {
212+
show: false
213+
}
214+
})
215+
216+
document.body.appendChild(t.$el)
217+
218+
t.show = true
219+
assert.ok(enterCalled)
220+
assert.strictEqual(t.$el.style.display, '')
221+
222+
t.show = false
223+
assert.ok(leaveCalled)
224+
assert.strictEqual(t.$el.style.display, 'none')
225+
226+
t.$destroy()
227+
})
193228

194229
})
195230

@@ -517,9 +552,48 @@ describe('UNIT: API', function () {
517552
})
518553

519554
describe('transitions', function () {
520-
// it('should be tested', function () {
521-
// assert.ok(false)
522-
// })
555+
556+
it('should get called during transitions', function () {
557+
558+
var enterCalled = false,
559+
leaveCalled = false
560+
561+
var t = new Seed({
562+
attributes: {
563+
'sd-show': 'show',
564+
'sd-transition': 'test'
565+
},
566+
transitions: {
567+
test: {
568+
enter: function (el, done) {
569+
enterCalled = true
570+
done()
571+
},
572+
leave: function (el, done) {
573+
leaveCalled = true
574+
done()
575+
}
576+
}
577+
},
578+
scope: {
579+
show: false
580+
}
581+
})
582+
583+
document.body.appendChild(t.$el)
584+
585+
t.show = true
586+
assert.ok(enterCalled)
587+
assert.strictEqual(t.$el.style.display, '')
588+
589+
t.show = false
590+
assert.ok(leaveCalled)
591+
assert.strictEqual(t.$el.style.display, 'none')
592+
593+
t.$destroy()
594+
595+
})
596+
523597
})
524598

525599
})

‎test/unit/specs/binding.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
var Binding = require('seed/src/binding')
2-
31
describe('UNIT: Binding', function () {
42

3+
var Binding = require('seed/src/binding')
4+
55
describe('instantiation', function () {
66

77
it('should have root==true with a root key', function () {

‎test/unit/specs/deps-parser.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
var DepsParser = require('seed/src/deps-parser')
2-
31
describe('UNIT: Dependency Parser', function () {
42

3+
var DepsParser = require('seed/src/deps-parser')
4+
55
describe('.parse()', function () {
66

77
// mock the bidnings...

‎test/unit/specs/directive.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
var Directive = require('seed/src/directive'),
2-
directives = require('seed/src/directives')
3-
41
describe('UNIT: Directive', function () {
52

3+
var Directive = require('seed/src/directive'),
4+
directives = require('seed/src/directives')
5+
66
var compiler = {
77
options: {},
88
getOption: function () {},

‎test/unit/specs/exp-parser.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
var ExpParser = require('seed/src/exp-parser')
2-
31
describe('UNIT: Expression Parser', function () {
2+
3+
var ExpParser = require('seed/src/exp-parser')
44

55
var testCases = [
66
{

‎test/unit/specs/filters.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
var filters = require('seed/src/filters')
2-
31
describe('UNIT: Filters', function () {
2+
3+
var filters = require('seed/src/filters')
44

55
describe('capitalize', function () {
66

0 commit comments

Comments
 (0)