Skip to content

Commit 3be1141

Browse files
committed
add tree view test case
1 parent a2b7a4f commit 3be1141

File tree

2 files changed

+110
-0
lines changed

2 files changed

+110
-0
lines changed

test/functional/fixtures/tree.html

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<script src="../../../dist/vue.js"></script>
2+
<style>
3+
.item {
4+
cursor: pointer;
5+
font-family: monospace;
6+
color: #999;
7+
}
8+
.item.folder {
9+
color: #333;
10+
}
11+
</style>
12+
13+
<div id="demo">
14+
<ul id="root">
15+
<li v-component="folder" v-with="model: treeData"></li>
16+
</ul>
17+
</div>
18+
19+
<script type="text/x-template" id="folder-template">
20+
<div class="item folder" v-on="click: open = !open">
21+
{{model.name}} [{{open ? '-' : '+'}}]
22+
</div>
23+
<ul v-show="open">
24+
<li v-repeat="model: model.children | orderBy 'type'"
25+
v-component="{{model.type}}">
26+
</li>
27+
</ul>
28+
</script>
29+
30+
<script type="text/x-template" id="file-template">
31+
<div class="item file">{{model.name}}</div>
32+
</script>
33+
34+
<script>
35+
Vue.component('folder', {
36+
template: '#folder-template',
37+
data: {
38+
open: false
39+
}
40+
})
41+
42+
Vue.component('file', {
43+
template: '#file-template'
44+
})
45+
46+
var menu = new Vue({
47+
el: '#demo',
48+
data: {
49+
treeData: {
50+
name: 'My Tree',
51+
children: [
52+
{ type: 'file', name: 'hello' },
53+
{ type: 'file', name: 'wat' },
54+
{
55+
type: 'folder',
56+
name: 'child folder',
57+
children: [
58+
{
59+
type: 'folder',
60+
name: 'child folder',
61+
children: [
62+
{ type: 'file', name: 'hello' },
63+
{ type: 'file', name: 'wat' }
64+
]
65+
},
66+
{ type: 'file', name: 'hello' },
67+
{ type: 'file', name: 'wat' },
68+
{
69+
type: 'folder',
70+
name: 'child folder',
71+
children: [
72+
{ type: 'file', name: 'hello' },
73+
{ type: 'file', name: 'wat' }
74+
]
75+
}
76+
]
77+
}
78+
]
79+
}
80+
}
81+
})
82+
</script>

test/functional/specs/tree.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
casper.test.begin('Tree View', 11, function (test) {
2+
3+
casper
4+
.start('./fixtures/tree.html')
5+
.then(function () {
6+
test.assertElementCount('.item', 12)
7+
test.assertElementCount('ul', 5)
8+
test.assertSelectorHasText('.item.folder', 'My Tree')
9+
test.assertSelectorHasText('li:nth-child(1) .item.file', 'hello')
10+
test.assertSelectorHasText('li:nth-child(2) .item.file', 'wat')
11+
test.assertVisible('#root')
12+
test.assertNotVisible('#root li > ul')
13+
})
14+
.thenClick('.item.folder', function () {
15+
test.assertVisible('#root li > ul')
16+
test.assertNotVisible('#root li > ul li > ul')
17+
})
18+
.thenClick('#root li > ul .item.folder', function () {
19+
test.assertVisible('#root li > ul li > ul')
20+
})
21+
.thenClick('.item.folder', function () {
22+
test.assertNotVisible('#root li > ul')
23+
})
24+
.run(function () {
25+
test.done()
26+
})
27+
28+
})

0 commit comments

Comments
 (0)