Skip to content

Commit 46c8016

Browse files
Hanks10100yyx990803
Hanks10100
authored and
yyx990803
committed
test(weex): add more test cases for recycle-list (#7104)
1 parent 0bf0cbe commit 46c8016

15 files changed

+509
-17
lines changed

Diff for: ‎test/weex/cases/cases.spec.js

+65-10
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,14 @@
1-
import fs from 'fs'
2-
import path from 'path'
31
import {
2+
readFile,
3+
readObject,
44
compileVue,
5+
compileWithDeps,
56
createInstance,
67
getRoot,
78
getEvents,
89
fireEvent
910
} from '../helpers'
1011

11-
function readFile (filename) {
12-
return fs.readFileSync(path.resolve(__dirname, filename), 'utf8')
13-
}
14-
15-
function readObject (filename) {
16-
return (new Function(`return ${readFile(filename)}`))()
17-
}
18-
1912
// Create one-off render test case
2013
function createRenderTestCase (name) {
2114
const source = readFile(`${name}.vue`)
@@ -72,13 +65,75 @@ describe('Usage', () => {
7265
describe('recycle-list', () => {
7366
it('text node', createRenderTestCase('recycle-list/text-node'))
7467
it('attributes', createRenderTestCase('recycle-list/attrs'))
68+
// it('class name', createRenderTestCase('recycle-list/classname'))
69+
// it('inline style', createRenderTestCase('recycle-list/inline-style'))
7570
it('v-if', createRenderTestCase('recycle-list/v-if'))
7671
it('v-else', createRenderTestCase('recycle-list/v-else'))
7772
it('v-else-if', createRenderTestCase('recycle-list/v-else-if'))
7873
it('v-for', createRenderTestCase('recycle-list/v-for'))
7974
it('v-for-iterator', createRenderTestCase('recycle-list/v-for-iterator'))
8075
it('v-on', createRenderTestCase('recycle-list/v-on'))
8176
it('v-on-inline', createRenderTestCase('recycle-list/v-on-inline'))
77+
78+
it('stateless component', done => {
79+
compileWithDeps('recycle-list/components/stateless.vue', [{
80+
name: 'banner',
81+
path: 'recycle-list/components/banner.vue'
82+
}]).then(code => {
83+
const id = String(Date.now() * Math.random())
84+
const instance = createInstance(id, code)
85+
setTimeout(() => {
86+
const target = readObject('recycle-list/components/stateless.vdom.js')
87+
expect(getRoot(instance)).toEqual(target)
88+
done()
89+
}, 50)
90+
}).catch(err => {
91+
expect(err).toBe(null)
92+
done()
93+
})
94+
})
95+
96+
// it('stateless component with props', done => {
97+
// compileWithDeps('recycle-list/components/stateless-with-props.vue', [{
98+
// name: 'poster',
99+
// path: 'recycle-list/components/poster.vue'
100+
// }]).then(code => {
101+
// const id = String(Date.now() * Math.random())
102+
// const instance = createInstance(id, code)
103+
// setTimeout(() => {
104+
// const target = readObject('recycle-list/components/stateless-with-props.vdom.js')
105+
// expect(getRoot(instance)).toEqual(target)
106+
// done()
107+
// }, 50)
108+
// }).catch(err => {
109+
// expect(err).toBe(null)
110+
// done()
111+
// })
112+
// })
113+
114+
// it('stateful component', done => {
115+
// compileWithDeps('recycle-list/components/stateful.vue', [{
116+
// name: 'counter',
117+
// path: 'recycle-list/components/counter.vue'
118+
// }]).then(code => {
119+
// const id = String(Date.now() * Math.random())
120+
// const instance = createInstance(id, code)
121+
// setTimeout(() => {
122+
// const target = readObject('recycle-list/components/stateful.vdom.js')
123+
// expect(getRoot(instance)).toEqual(target)
124+
// const event = getEvents(instance)[0]
125+
// fireEvent(instance, event.ref, event.type, {})
126+
// setTimeout(() => {
127+
// // TODO: check render results
128+
// // expect(getRoot(instance)).toEqual(target)
129+
// done()
130+
// })
131+
// }, 50)
132+
// }).catch(err => {
133+
// expect(err).toBe(null)
134+
// done()
135+
// })
136+
// })
82137
})
83138
})
84139

Diff for: ‎test/weex/cases/recycle-list/classname.vdom.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
({
2+
type: 'recycle-list',
3+
attr: {
4+
listData: [
5+
{ type: 'A', color: 'red' },
6+
{ type: 'A', color: 'blue' }
7+
],
8+
templateKey: 'type',
9+
alias: 'item'
10+
},
11+
children: [{
12+
type: 'cell-slot',
13+
attr: { templateType: 'A' },
14+
style: {
15+
backgroundColor: '#FF6600'
16+
},
17+
children: [{
18+
type: 'text',
19+
attr: {
20+
// not supported yet
21+
// classList: ['text', { '@binding': 'item.color' }],
22+
value: 'content'
23+
}
24+
}]
25+
}]
26+
})

Diff for: ‎test/weex/cases/recycle-list/classname.vue

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<template>
2+
<recycle-list :list-data="longList" template-key="type" alias="item">
3+
<cell-slot template-type="A" class="cell">
4+
<text :class="['text', item.color]">content</text>
5+
</cell-slot>
6+
</recycle-list>
7+
</template>
8+
9+
<style scoped>
10+
.cell {
11+
background-color: #FF6600;
12+
}
13+
.text {
14+
font-size: 100px;
15+
text-align: center;
16+
}
17+
.red {
18+
color: #FF0000;
19+
}
20+
.blue {
21+
color: #0000FF;
22+
}
23+
</style>
24+
25+
<script>
26+
module.exports = {
27+
data () {
28+
return {
29+
longList: [
30+
{ type: 'A', color: 'red' },
31+
{ type: 'A', color: 'blue' }
32+
]
33+
}
34+
}
35+
}
36+
</script>
37+

Diff for: ‎test/weex/cases/recycle-list/components/banner.vue

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template recyclable="true">
2+
<div class="banner">
3+
<text class="title">BANNER</text>
4+
</div>
5+
</template>
6+
7+
<style scoped>
8+
.banner {
9+
height: 120px;
10+
justify-content: center;
11+
align-items: center;
12+
background-color: rgb(162, 217, 192);
13+
}
14+
.title {
15+
font-weight: bold;
16+
color: #41B883;
17+
font-size: 60px;
18+
}
19+
</style>

Diff for: ‎test/weex/cases/recycle-list/components/counter.vue

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<template recyclable="true">
2+
<div>
3+
<text class="output">{{count}}</text>
4+
<text class="button" @click="inc">+</text>
5+
</div>
6+
</template>
7+
8+
<script>
9+
module.exports = {
10+
props: ['start'],
11+
data () {
12+
return {
13+
count: parseInt(this.start, 10) || 42
14+
}
15+
},
16+
methods: {
17+
inc () {
18+
this.count++
19+
}
20+
}
21+
}
22+
</script>
23+
24+
<style scoped>
25+
.output {
26+
font-size: 150px;
27+
text-align: center;
28+
}
29+
.button {
30+
font-size: 100px;
31+
text-align: center;
32+
border-width: 2px;
33+
border-color: #DDD;
34+
background-color: #F5F5F5;
35+
}
36+
</style>

Diff for: ‎test/weex/cases/recycle-list/components/poster.vue

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<template>
2+
<div>
3+
<image class="image" :src="imageUrl"></image>
4+
<text class="title">{{title}}</text>
5+
</div>
6+
</template>
7+
8+
<script>
9+
module.exports = {
10+
props: {
11+
imageUrl: {
12+
type: String,
13+
default: 'https://gw.alicdn.com/tfs/TB1KF_ybRTH8KJjy0FiXXcRsXXa-890-1186.png'
14+
},
15+
title: {
16+
type: String,
17+
default: 'I WANT YOU!'
18+
}
19+
}
20+
}
21+
</script>
22+
23+
<style scoped>
24+
.image {
25+
width: 750px;
26+
height: 1000px;
27+
}
28+
.title {
29+
font-size: 80px;
30+
text-align: center;
31+
color: #E95659;
32+
}
33+
</style>

Diff for: ‎test/weex/cases/recycle-list/components/stateful.vdom.js

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
({
2+
type: 'recycle-list',
3+
attr: {
4+
listData: [
5+
{ type: 'A', number: 24 },
6+
{ type: 'A', number: 42 }
7+
],
8+
templateKey: 'type',
9+
alias: 'item'
10+
},
11+
children: [{
12+
type: 'cell-slot',
13+
attr: { templateType: 'A' },
14+
children: [{
15+
type: 'div',
16+
attr: {
17+
'@isComponentRoot': true,
18+
'@componentProps': {
19+
start: { '@binding': 'item.number' }
20+
}
21+
},
22+
children: [{
23+
type: 'text',
24+
style: { fontSize: '150px', textAlign: 'center' },
25+
attr: {
26+
value: { '@binding': 'count' } // need confirm
27+
}
28+
}, {
29+
type: 'text',
30+
event: ['click'],
31+
style: {
32+
fontSize: '100px',
33+
textAlign: 'center',
34+
borderWidth: '2px',
35+
borderColor: '#DDDDDD',
36+
backgroundColor: '#F5F5F5'
37+
},
38+
attr: { value: '+' }
39+
}]
40+
}, {
41+
type: 'text',
42+
attr: { value: 'other' }
43+
}]
44+
}]
45+
})

Diff for: ‎test/weex/cases/recycle-list/components/stateful.vue

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<recycle-list :list-data="longList" template-key="type" alias="item">
3+
<cell-slot template-type="A">
4+
<counter :start="item.number"></counter>
5+
<text>other</text>
6+
</cell-slot>
7+
</recycle-list>
8+
</template>
9+
10+
<script>
11+
// require('./counter.vue')
12+
module.exports = {
13+
data () {
14+
return {
15+
longList: [
16+
{ type: 'A', number: 24 },
17+
{ type: 'A', number: 42 }
18+
]
19+
}
20+
}
21+
}
22+
</script>

Diff for: ‎test/weex/cases/recycle-list/components/stateless-with-props.vdom.js

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
({
2+
type: 'recycle-list',
3+
attr: {
4+
listData: [
5+
{ type: 'A', poster: 'xx', title: 'x' },
6+
{ type: 'A', poster: 'yy', title: 'y' }
7+
],
8+
templateKey: 'type',
9+
alias: 'item'
10+
},
11+
children: [{
12+
type: 'cell-slot',
13+
attr: { templateType: 'A' },
14+
children: [{
15+
type: 'div',
16+
attr: {
17+
'@isComponentRoot': true,
18+
'@componentProps': {
19+
imageUrl: { '@binding': 'item.poster' },
20+
title: { '@binding': 'item.title' }
21+
}
22+
},
23+
children: [{
24+
type: 'image',
25+
style: {
26+
width: '750px',
27+
height: '1000px'
28+
},
29+
attr: {
30+
src: { '@binding': 'imageUrl' }
31+
}
32+
}, {
33+
type: 'text',
34+
style: {
35+
fontSize: '80px',
36+
textAlign: 'center',
37+
color: '#E95659'
38+
},
39+
attr: {
40+
value: { '@binding': 'title' }
41+
}
42+
}]
43+
}, {
44+
type: 'text',
45+
attr: {
46+
value: 'content'
47+
}
48+
}]
49+
}]
50+
})

Diff for: ‎test/weex/cases/recycle-list/components/stateless-with-props.vue

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<recycle-list :list-data="longList" template-key="type" alias="item">
3+
<cell-slot template-type="A">
4+
<poster :image-url="item.poster" :title="item.title"></poster>
5+
<text>content</text>
6+
</cell-slot>
7+
</recycle-list>
8+
</template>
9+
10+
<script>
11+
// require('./poster.vue')
12+
module.exports = {
13+
data () {
14+
return {
15+
longList: [
16+
{ type: 'A', poster: 'xx', title: 'x' },
17+
{ type: 'A', poster: 'yy', title: 'y' }
18+
]
19+
}
20+
}
21+
}
22+
</script>

0 commit comments

Comments
 (0)