Skip to content

Commit 0937718

Browse files
author
Evan You
committed
functional tests for transition
1 parent 03fd929 commit 0937718

File tree

5 files changed

+147
-16
lines changed

5 files changed

+147
-16
lines changed

‎Gruntfile.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -110,11 +110,12 @@ module.exports = function( grunt ) {
110110
}
111111
})
112112

113-
grunt.registerTask( 'casper', function () {
114-
var done = this.async()
113+
grunt.registerTask( 'casper', function (id) {
114+
var done = this.async(),
115+
file = id ? id + '.js' : ''
115116
grunt.util.spawn({
116117
cmd: 'casperjs',
117-
args: ['test', '--concise', 'specs/'],
118+
args: ['test', '--concise', 'specs/' + file],
118119
opts: {
119120
stdio: ['ignore', process.stdout, 'ignore'],
120121
cwd: path.resolve('test/functional')

‎examples/todomvc/index.html

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,6 @@
44
<title>Todo</title>
55
<meta charset="utf-8">
66
<link rel="stylesheet" type="text/css" href="bower_components/todomvc-common/base.css">
7-
<!-- for PhantomJS/CasperJS testing only -->
8-
<script src="../../test/functional/fixtures/bind.js"></script>
97
</head>
108
<body>
119
<section id="todoapp">
@@ -72,6 +70,16 @@ <h1>todos</h1>
7270
<p>Powered by <a href="https://github.com/yyx990803/seed">Seed.js</a></p>
7371
<p>Created by <a href="http://evanyou.me">Evan You</a></p>
7472
</footer>
73+
74+
<!-- for PhantomJS/CasperJS testing only -->
75+
<script src="../../test/functional/fixtures/bind.js"></script>
76+
<script>
77+
if (navigator.userAgent.indexOf('PhantomJS') > -1) {
78+
localStorage.clear()
79+
}
80+
</script>
81+
<!-- end testing -->
82+
7583
<script src="../../dist/seed.js"></script>
7684
<script src="js/store.js"></script>
7785
<script src="js/app.js"></script>

‎src/directives/index.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,10 @@ module.exports = {
4040
if (this.lastVal) {
4141
this.el.classList.remove(this.lastVal)
4242
}
43-
this.el.classList.add(value)
44-
this.lastVal = value
43+
if (value) {
44+
this.el.classList.add(value)
45+
this.lastVal = value
46+
}
4547
}
4648
},
4749

‎test/functional/fixtures/transition.html

Lines changed: 69 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,86 @@
33
<head>
44
<title></title>
55
<meta charset="utf-8">
6+
<script src="bind.js"></script>
7+
<script src="../../../dist/seed.js"></script>
68
<style type="text/css">
7-
#test {
8-
width: 100px;
9+
.test {
10+
width: 600px;
911
height: 100px;
1012
background-color: #f00;
11-
transition: all .5s ease;
13+
padding: 10px;
14+
border: 1px solid #000;
15+
overflow: hidden;
16+
transition: all .2s ease;
17+
-moz-transition: all .2s ease;
18+
-webkit-transition: all .2s ease;
1219
}
13-
#test.test {
20+
.test.shrink {
1421
height: 0;
15-
background-color: #0f0;
22+
padding-top: 0;
23+
padding-bottom: 0;
24+
border-top-width: 0;
25+
border-bottom-width: 0;
1626
}
1727
</style>
18-
<script src="../../../dist/seed.js"></script>
1928
</head>
2029
<body>
21-
<div id="test" sd-show="a"></div>
22-
<h1 style="margin:0">123123</h1>
30+
<div id="test">
31+
<div>
32+
<button class="button-0" sd-on="click:set">0</button>
33+
<button class="button-1" sd-on="click:set">1</button>
34+
<button class="button-2" sd-on="click:set">2</button>
35+
<button class="push" sd-on="click:push">push</button>
36+
<button class="pop" sd-on="click:pop">pop</button>
37+
<button class="splice" sd-on="click:splice">splice</button>
38+
</div>
39+
<div
40+
class="test"
41+
sd-repeat="item:items"
42+
sd-if="filter(item)"
43+
sd-transition-class="shrink"
44+
sd-attr="data-id:item.a">
45+
{{item.a}}
46+
</div>
47+
<div
48+
class="test"
49+
sd-repeat="item:items"
50+
sd-show="filter(item)"
51+
sd-transition-class="shrink"
52+
sd-attr="data-id:item.a">
53+
{{item.a}}
54+
</div>
55+
</div>
56+
<h1 style="margin:0">123</h1>
2357
<script>
2458
var test = new Seed({
25-
el: '#test'
59+
el: '#test',
60+
scope: {
61+
b: 1,
62+
set: function (e) {
63+
this.b = +e.el.textContent
64+
},
65+
push: function () {
66+
this.items.push({a: this.items.length + 1 })
67+
},
68+
pop: function () {
69+
this.items.pop()
70+
},
71+
splice: function () {
72+
this.items.splice(0, 1, {a:99})
73+
},
74+
filter: function (item) {
75+
return item.a > this.b
76+
},
77+
items: [
78+
{
79+
a: 1
80+
},
81+
{
82+
a: 2
83+
}
84+
]
85+
}
2686
})
2787
</script>
2888
</body>

‎test/functional/specs/transition.js

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
casper.test.begin('Transition', 23, function (test) {
2+
3+
var minWait = 50,
4+
transDuration = 200
5+
6+
casper
7+
.start('./fixtures/transition.html', function () {
8+
test.assertElementCount('.test', 3)
9+
test.assertNotVisible('.test[data-id="1"]')
10+
})
11+
.thenClick('.button-0')
12+
.wait(minWait, function () {
13+
test.assertElementCount('.test', 4)
14+
test.assertVisible('.test[data-id="1"]')
15+
})
16+
.thenClick('.button-1')
17+
.wait(minWait, function () {
18+
test.assertElementCount('.test', 4)
19+
test.assertElementCount('.test.shrink', 2)
20+
})
21+
.wait(transDuration, function () {
22+
test.assertElementCount('.test', 3)
23+
test.assertElementCount('.test.shrink', 0)
24+
test.assertNotVisible('.test[data-id="1"]')
25+
})
26+
.thenClick('.button-2')
27+
.wait(minWait, function () {
28+
test.assertElementCount('.test', 3)
29+
test.assertElementCount('.test.shrink', 2)
30+
})
31+
.wait(transDuration, function () {
32+
test.assertElementCount('.test', 2)
33+
test.assertNotVisible('.test[data-id="1"]')
34+
test.assertNotVisible('.test[data-id="2"]')
35+
})
36+
.thenClick('.push')
37+
.wait(minWait, function () {
38+
test.assertElementCount('.test', 4)
39+
test.assertVisible('.test[data-id="3"]')
40+
})
41+
.thenClick('.pop')
42+
.wait(minWait, function () {
43+
test.assertElementCount('.test', 4)
44+
test.assertElementCount('.test.shrink', 2)
45+
})
46+
.wait(transDuration, function () {
47+
test.assertElementCount('.test', 2)
48+
test.assertNotVisible('.test[data-id="1"]')
49+
test.assertNotVisible('.test[data-id="2"]')
50+
})
51+
.thenClick('.splice')
52+
.wait(minWait, function () {
53+
test.assertElementCount('.test', 4)
54+
test.assertVisible('.test[data-id="99"]')
55+
})
56+
.run(function () {
57+
test.done()
58+
})
59+
60+
})

0 commit comments

Comments
 (0)