Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
forked fromvuejs/vue

Commit232dd85

Browse files
Hanks10100yyx990803
authored andcommitted
test(weex): support testing the virtual dom generated form *.vue files (vuejs#6944)
Compile the *.vue file into js code, then run it in Weex context, andcompare the generate virtual dom.It’s a black-box testing for `weex-template-compiler`,`weex-styler`,`weex-vue-framework` and `weex-js-runtime`.
1 parent8a784d8 commit232dd85

File tree

8 files changed

+223
-3
lines changed

8 files changed

+223
-3
lines changed

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,8 @@
125125
"typescript":"^2.5.2",
126126
"uglify-js":"^3.0.15",
127127
"webpack":"^2.6.1",
128-
"weex-js-runtime":"^0.23.0"
128+
"weex-js-runtime":"^0.23.0",
129+
"weex-styler":"^0.3.0"
129130
},
130131
"config": {
131132
"commitizen": {

‎test/weex/cases/cases.spec.js

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
importfsfrom'fs'
2+
importpathfrom'path'
3+
import{
4+
compileVue,
5+
createInstance,
6+
getRoot,
7+
getEvents,
8+
fireEvent
9+
}from'../helpers'
10+
11+
functionreadFile(filename){
12+
returnfs.readFileSync(path.resolve(__dirname,filename),'utf8')
13+
}
14+
15+
functionreadObject(filename){
16+
return(newFunction(`return${readFile(filename)}`))()
17+
}
18+
19+
// Create one-off render test case
20+
functioncreateRenderTestCase(name){
21+
constsource=readFile(`${name}.vue`)
22+
consttarget=readObject(`${name}.vdom.js`)
23+
returndone=>{
24+
compileVue(source).then(code=>{
25+
constid=String(Date.now()*Math.random())
26+
constinstance=createInstance(id,code)
27+
setTimeout(()=>{
28+
expect(getRoot(instance)).toEqual(target)
29+
done()
30+
},50)
31+
}).catch(err=>{
32+
expect(err).toBe(null)
33+
done()
34+
})
35+
}
36+
}
37+
38+
// Create event test case, will trigger the first bind event
39+
functioncreateEventTestCase(name){
40+
constsource=readFile(`${name}.vue`)
41+
constbefore=readObject(`${name}.before.vdom.js`)
42+
constafter=readObject(`${name}.after.vdom.js`)
43+
returndone=>{
44+
compileVue(source).then(code=>{
45+
constid=String(Date.now()*Math.random())
46+
constinstance=createInstance(id,code)
47+
setTimeout(()=>{
48+
expect(getRoot(instance)).toEqual(before)
49+
constevent=getEvents(instance)[0]
50+
fireEvent(instance,event.ref,event.type,{})
51+
setTimeout(()=>{
52+
expect(getRoot(instance)).toEqual(after)
53+
done()
54+
},50)
55+
},50)
56+
}).catch(err=>{
57+
expect(err).toBe(null)
58+
done()
59+
})
60+
}
61+
}
62+
63+
describe('Usage',()=>{
64+
describe('render',()=>{
65+
it('sample',createRenderTestCase('render/sample'))
66+
})
67+
68+
describe('event',()=>{
69+
it('click',createEventTestCase('event/click'))
70+
})
71+
})
72+
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
({
2+
type:'div',
3+
event:['click'],
4+
children:[{
5+
type:'text',
6+
attr:{
7+
value:'43'
8+
}
9+
}]
10+
})
Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
({
2+
type:'div',
3+
event:['click'],
4+
children:[{
5+
type:'text',
6+
attr:{
7+
value:'42'
8+
}
9+
}]
10+
})

‎test/weex/cases/event/click.vue

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<div@click="inc">
3+
<text>{{count}}</text>
4+
</div>
5+
</template>
6+
7+
<script>
8+
module.exports= {
9+
data () {
10+
return {
11+
count:42
12+
}
13+
},
14+
methods: {
15+
inc () {
16+
this.count++
17+
}
18+
}
19+
}
20+
</script>

‎test/weex/cases/render/sample.vdom.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
({
2+
type:'div',
3+
style:{
4+
justifyContent:'center'
5+
},
6+
children:[{
7+
type:'text',
8+
attr:{
9+
value:'Yo'
10+
},
11+
style:{
12+
color:'#41B883',
13+
fontSize:'233px',
14+
textAlign:'center'
15+
}
16+
}]
17+
})

‎test/weex/cases/render/sample.vue

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<template>
2+
<divstyle="justify-content:center">
3+
<textclass="freestyle">{{string}}</text>
4+
</div>
5+
</template>
6+
7+
<style scoped>
8+
.freestyle {
9+
color:#41B883;
10+
font-size:233px;
11+
text-align:center;
12+
}
13+
</style>
14+
15+
<script>
16+
module.exports= {
17+
data () {
18+
return {
19+
string:'Yo'
20+
}
21+
}
22+
}
23+
</script>

‎test/weex/helpers/index.js

Lines changed: 69 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
import*asVuefrom'../../../packages/weex-vue-framework'
22
import{compile}from'../../../packages/weex-template-compiler'
33
importWeexRuntimefrom'weex-js-runtime'
4+
importstylerfrom'weex-styler'
5+
6+
conststyleRE=/<\s*style\s*\w*>([^(<\/)]*)<\/\s*style\s*>/g
7+
constscriptRE=/<\s*script.*>([^]*)<\/\s*script\s*>/
8+
consttemplateRE=/<\s*template\s*>([^]*)<\/\s*template\s*>/
49

510
console.debug=()=>{}
611

@@ -10,6 +15,10 @@ export function strToRegExp (str) {
1015
returnnewRegExp(str.replace(matchOperatorsRe,'\\$&'))
1116
}
1217

18+
functionparseStatic(fns){
19+
return'['+fns.map(fn=>`function () {${fn} }`).join(',')+']'
20+
}
21+
1322
exportfunctioncompileAndStringify(template){
1423
const{ render, staticRenderFns}=compile(template)
1524
return{
@@ -18,8 +27,48 @@ export function compileAndStringify (template) {
1827
}
1928
}
2029

21-
functionparseStatic(fns){
22-
return'['+fns.map(fn=>`function () {${fn} }`).join(',')+']'
30+
/**
31+
* Compile *.vue file into js code
32+
*@param {string} source raw text of *.vue file
33+
*@param {string} componentName whether compile to a component
34+
*/
35+
exportfunctioncompileVue(source,componentName){
36+
returnnewPromise((resolve,reject)=>{
37+
if(!templateRE.test(source)){
38+
returnreject('No Template!')
39+
}
40+
constscriptMatch=scriptRE.exec(source)
41+
constscript=scriptMatch ?scriptMatch[1] :''
42+
const{ render, staticRenderFns}=compile(templateRE.exec(source)[1])
43+
44+
constgenerateCode=styles=>(`
45+
var test_case = Object.assign({
46+
style:${JSON.stringify(styles)},
47+
render: function () {${render} },
48+
staticRenderFns:${parseStatic(staticRenderFns)},
49+
}, (function(){
50+
var module = { exports: {} };
51+
${script};
52+
return module.exports;
53+
})());
54+
`+(componentName
55+
?`Vue.component('${componentName}', test_case);\n`
56+
:`test_case.el = 'body';new Vue(test_case);`)
57+
)
58+
59+
letcssText=''
60+
letstyleMatch=null
61+
while((styleMatch=styleRE.exec(source))){
62+
cssText+=`\n${styleMatch[1]}\n`
63+
}
64+
styler.parse(cssText,(error,result)=>{
65+
if(error){
66+
returnreject(error)
67+
}
68+
resolve(generateCode(result.jsonStyle))
69+
})
70+
resolve(generateCode({}))
71+
})
2372
}
2473

2574
functionisObject(object){
@@ -47,6 +96,24 @@ export function getRoot (instance) {
4796
returnomitUseless(instance.document.body.toJSON())
4897
}
4998

99+
// Get all binding events in the instance
100+
exportfunctiongetEvents(instance){
101+
constevents=[]
102+
constrecordEvent=node=>{
103+
if(!node){return}
104+
if(Array.isArray(node.event)){
105+
node.event.forEach(type=>{
106+
events.push({ref:node.ref, type})
107+
})
108+
}
109+
if(Array.isArray(node.children)){
110+
node.children.forEach(recordEvent)
111+
}
112+
}
113+
recordEvent(instance.document.body.toJSON())
114+
returnevents
115+
}
116+
50117
exportfunctionfireEvent(instance,ref,type,event={}){
51118
constel=instance.document.getRef(ref)
52119
if(el){

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp