const compiler = require('../lib')
function assertCodegen (template, templateCode, renderCode = 'with(this){}') {
const res = compiler.compile(template, {
resourcePath: 'test.wxml',
mp: {
minified: true,
isTest: true,
platform: 'mp-weixin'
}
})
expect(res.template).toBe(templateCode)
expect(res.render).toBe(renderCode)
}
describe('mp:compiler', () => {
// TODO
// it('generate directive', () => {
// assertCodegen(
// '',
// `with(this){return _c('view',{directives:[{name:"custom1",rawName:"v-custom1:arg1.modifier",value:(value1),expression:"value1",arg:"arg1",modifiers:{"modifier":true}},{name:"custom2",rawName:"v-custom2"}]})}`
// )
// })
it('generate filters', () => {
assertCodegen(
'text {{ d | e | f }} text',
'{{"text "+$root.f1+" text"}}',
'with(this){var f0=_f("c")(_f("b")(a));var f1=_f("f")(_f("e")(d));$mp.data=Object.assign({},{$root:{f0:f0,f1:f1}})}'
)
})
it('generate filters with no arguments', () => {
assertCodegen(
'{{ d | e() }}',
'{{$root.f0}}',
'with(this){var f0=_f("e")(d);$mp.data=Object.assign({},{$root:{f0:f0}})}'
)
})
it('generate v-for directive', () => {
assertCodegen(
'',
''
)
// iterator syntax
assertCodegen(
'',
''
)
// TODO
// assertCodegen(
// '',
// `with(this){return _c('view',_l((items),function(item,key,index){return _c('view')}),0)}`
// )
// destructuring
// TODO
// assertCodegen(
// '',
// ``
// )
// TODO
// assertCodegen(
// '',
// `with(this){return _c('view',_l((items),function({ a, b },key,index){return _c('view')}),0)}`
// )
// v-for with extra element
assertCodegen(
'',
''
)
})
it('generate v-if directive', () => {
assertCodegen(
'hello',
'hello'
)
})
it('generate v-else directive', () => {
assertCodegen(
'helloworld',
'helloworld'
)
})
it('generate v-else-if directive', () => {
assertCodegen(
'helloworld',
'helloworld'
)
})
it('generate v-else-if with v-else directive', () => {
assertCodegen(
'helloworldbye',
'helloworldbye'
)
})
it('generate multi v-else-if with v-else directive', () => {
assertCodegen(
'helloworldelseifbye',
'helloworldelseifbye'
)
})
it('generate ref', () => {
assertCodegen(
'',
''
)
})
it('generate ref on v-for', () => {
assertCodegen(
'
',
''
)
})
// it('generate v-bind directive', () => {
// assertCodegen(
// '',
// ``
// )
// })
// it('generate v-bind with prop directive', () => {
// assertCodegen(
// '',
// `with(this){return _c('view',_b({},'view',test,true))}`
// )
// })
// it('generate v-bind directive with sync modifier', () => {
// assertCodegen(
// '',
// `with(this){return _c('view',_b({},'view',test,false,true))}`
// )
// })
it('generate v-model directive', () => {
assertCodegen(
'',
''
)
})
it('generate multiline v-model directive', () => {
assertCodegen(
'',
''
)
})
it('generate multiline v-model directive on custom component', () => {
assertCodegen(
'',
''
)
})
it('generate template tag', () => {
assertCodegen(
'{{hello}}',
'{{hello}}'
)
})
it('generate single slot', () => {
assertCodegen('', '')
assertCodegen('', '')
})
it('generate named slot', () => {
assertCodegen(
'',
''
)
})
// it('generate slot fallback content', () => {
// assertCodegen(
// 'hi',
// `with(this){return _c('view',[_t("default",[_c('view',[_v("hi")])])],2)}`
// )
// })
it('generate slot target', () => {
assertCodegen(
'hello world',
'hello world'
)
assertCodegen(
'hello world',
'hello world'
)
})
// it('generate scoped slot', () => {
// assertCodegen(
// '{{ bar }}',
// `with(this){return _c('foo',{scopedSlots:_u([{key:"default",fn:function(bar){return [_v(_s(bar))]}}])})}`
// )
// assertCodegen(
// '{{ bar }}',
// `with(this){return _c('foo',{scopedSlots:_u([{key:"default",fn:function(bar){return _c('view',{},[_v(_s(bar))])}}])})}`
// )
// })
// it('generate named scoped slot', () => {
// assertCodegen(
// '{{ bar }}',
// `with(this){return _c('foo',{scopedSlots:_u([{key:"foo",fn:function(bar){return [_v(_s(bar))]}}])})}`
// )
// assertCodegen(
// '{{ bar }}',
// `with(this){return _c('foo',{scopedSlots:_u([{key:"foo",fn:function(bar){return _c('view',{},[_v(_s(bar))])}}])})}`
// )
// })
// it('generate scoped slot with multiline v-if', () => {
// assertCodegen(
// '{{ bar }}',
// `with(this){return _c('foo',{scopedSlots:_u([{key:"default",fn:function(bar){return (\nshow\n)?[_v(_s(bar))]:undefined}}])})}`
// )
// assertCodegen(
// '{{ bar }}',
// `with(this){return _c(\'foo\',{scopedSlots:_u([{key:"foo",fn:function(bar){return (\nshow\n)?_c(\'view\',{},[_v(_s(bar))]):_e()}}])})}`
// )
// })
it('generate class binding', () => {
// static
assertCodegen(
'hello world',
'hello world'
)
// dynamic
assertCodegen(
'hello world',
'hello world'
)
// assertCodegen(
// 'hello world',
// `hello world`,
// `with(this){var c0=__get_class(class1);$mp.data=Object.assign({},{$root:{c0:c0}})}`
// )
})
it('generate staticStyle', () => {
assertCodegen(
'hello world',
'hello world'
)
})
it('generate style binding', () => {
assertCodegen(
'hello world',
'hello world'
)
// assertCodegen(
// 'hello world',
// `hello world`,
// `with(this){var s0=__get_style(error);$mp.data=Object.assign({},{$root:{s0:s0}})}`
// )
})
it('generate v-show directive', () => {
assertCodegen(
'hello world',
'hello world'
)
})
it('generate DOM props with v-bind directive', () => {
// input + value
assertCodegen('', '')
// non input
assertCodegen('', '')
})
it('generate attrs with v-bind directive', () => {
assertCodegen('', '')
})
it('generate static attrs', () => {
assertCodegen('', '')
})
it('generate events with v-on directive', () => {
assertCodegen(
'',
''
)
})
it('generate events with method call', () => {
assertCodegen(
'',
''
)
// empty arguments
assertCodegen(
'',
''
)
// without semicolon
assertCodegen(
'',
''
)
// multiple args
assertCodegen(
'',
''
)
// expression in args
assertCodegen(
'',
''
)
// tricky symbols in args
// assertCodegen(
// ``,
// ``,
// `with(this){if(!$mp.events){$mp.events=__get_event({"e0":{on:{"input":function($event){onInput(");['());")}}}})}}`
// )
})
// it('generate events with multiple statements', () => {
// // normal function
// assertCodegen(
// '',
// ``,
// `with(this){if(!$mp.events){$mp.events=__get_event({"e0":{on:{"input":function($event){onInput1();onInput2()}}}})}}`
// )
// // function with multiple args
// assertCodegen(
// '',
// ``,
// `with(this){if(!$mp.events){$mp.events=__get_event({"e0":{on:{"input":function($event){onInput1($event,"text");onInput2("text2",$event)}}}})}}`
// )
// })
// it('generate events with keycode', () => {
// assertCodegen(
// '',
// `with(this){return _c('input',{on:{"input":function($event){if(!('button' in $event)&&_k($event.keyCode,"enter",13,$event.key,"Enter"))return null;return onInput($event)}}})}`
// )
// // multiple keycodes (delete)
// assertCodegen(
// '',
// `with(this){return _c('input',{on:{"input":function($event){if(!('button' in $event)&&_k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"]))return null;return onInput($event)}}})}`
// )
// // multiple keycodes (esc)
// assertCodegen(
// '',
// `with(this){return _c('input',{on:{"input":function($event){if(!('button' in $event)&&_k($event.keyCode,"esc",27,$event.key,["Esc","Escape"]))return null;return onInput($event)}}})}`
// )
// // multiple keycodes (space)
// assertCodegen(
// '',
// `with(this){return _c('input',{on:{"input":function($event){if(!('button' in $event)&&_k($event.keyCode,"space",32,$event.key,[" ","Spacebar"]))return null;return onInput($event)}}})}`
// )
// // multiple keycodes (chained)
// assertCodegen(
// '',
// `with(this){return _c('input',{on:{"keydown":function($event){if(!('button' in $event)&&_k($event.keyCode,"enter",13,$event.key,"Enter")&&_k($event.keyCode,"delete",[8,46],$event.key,["Backspace","Delete","Del"]))return null;return onInput($event)}}})}`
// )
// // number keycode
// assertCodegen(
// '',
// `with(this){return _c('input',{on:{"input":function($event){if(!('button' in $event)&&$event.keyCode!==13)return null;return onInput($event)}}})}`
// )
// // custom keycode
// assertCodegen(
// '',
// `with(this){return _c('input',{on:{"input":function($event){if(!('button' in $event)&&_k($event.keyCode,"custom",undefined,$event.key,undefined))return null;return onInput($event)}}})}`
// )
// })
it('generate events with generic modifiers', () => {
assertCodegen(
'',
''
)
assertCodegen(
'',
''
)
assertCodegen(
'',
''
)
})
// GitHub Issues #5146
it('generate events with generic modifiers and keycode correct order', () => {
assertCodegen(
'',
''
)
assertCodegen(
'',
''
)
})
it('generate events with mouse event modifiers', () => {
assertCodegen(
'',
''
)
assertCodegen(
'',
''
)
assertCodegen(
'',
''
)
assertCodegen(
'',
''
)
assertCodegen(
'',
''
)
assertCodegen(
'',
''
)
})
it('generate events with multiple modifiers', () => {
assertCodegen(
'',
''
)
})
it('generate events with capture modifier', () => {
assertCodegen(
'',
''
)
})
it('generate events with once modifier', () => {
assertCodegen(
'',
''
)
})
it('generate events with capture and once modifier', () => {
assertCodegen(
'',
''
)
})
it('generate events with once and capture modifier', () => {
assertCodegen(
'',
''
)
})
it('generate events with inline statement', () => {
assertCodegen(
'',
'',
'with(this){if(!_isMounted){e0=function($event){current++}}}'
)
})
it('generate events with inline function expression', () => {
// normal function
assertCodegen(
'',
'',
'with(this){if(!_isMounted){e0=function(){current++}}}'
)
// normal named function
assertCodegen(
'',
'',
'with(this){if(!_isMounted){e0=function fn(){current++}}}'
)
// arrow with no args
assertCodegen(
'current++">',
'',
'with(this){if(!_isMounted){e0=()=>current++}}'
)
// arrow with parens, single arg
assertCodegen(
' current++">',
'',
'with(this){if(!_isMounted){e0=e=>current++}}'
)
// arrow with parens, multi args
assertCodegen(
' current++">',
'',
'with(this){if(!_isMounted){e0=(a,b,c)=>current++}}'
)
// arrow with destructuring
assertCodegen(
' current++">',
'',
'with(this){if(!_isMounted){e0=({a,b})=>current++}}'
)
// arrow single arg no parens
assertCodegen(
'current++">',
'',
'with(this){if(!_isMounted){e0=e=>current++}}'
)
// with modifiers
assertCodegen(
'current++">',
'',
'with(this){if(!_isMounted){e0=function($event){$event.stopPropagation();return(e=>current++)($event)}}}'
)
})
// #3893
it('should not treat handler with unexpected whitespace as inline statement', () => {
assertCodegen(
'',
''
)
})
// it('generate unhandled events', () => {
// assertCodegen(
// '',
// `with(this){return _c('input',{on:{"input":function(){}}})}`,
// ast => {
// ast.events.input = undefined
// }
// )
// })
// it('generate multiple event handlers', () => {
// assertCodegen(
// '',
// ``,
// `with(this){if(!$mp.events){$mp.events=__get_event({"e0":{on:{"input":[function($event){current++},function($event){$event.stopPropagation();return onInput($event)}]}}})}}`
// )
// })
it('generate component', () => {
assertCodegen(
'hi
',
'hi'
// `with(this){if(!$mp.events){$mp.events=__get_event({"e0":{on:{"notify":onNotify},component:true}})}}`
)
})
// it('generate svg component with children', () => {
// assertCodegen(
// '',
// ``
// )
// })
it('generate is attribute', () => {
assertCodegen(
'',
''
)
// assertCodegen(
// '',
// ''
// )
// maybe a component and normalize type should be 1
assertCodegen(
'',
''
)
})
// it('generate component with inline-template', () => {
// // have "inline-template'"
// assertCodegen(
// 'hello world
',
// `with(this){return _c('my-component',{inlineTemplate:{render:function(){with(this){return _m(0)}},staticRenderFns:[function(){with(this){return _c('p',[_c('span',[_v("hello world")])])}}]}})}`
// )
// // "have inline-template attrs, but not having exactly one child element
// assertCodegen(
// '
',
// `with(this){return _c('my-component',{inlineTemplate:{render:function(){with(this){return _c('hr')}},staticRenderFns:[]}})}`
// )
// try {
// assertCodegen(
// '',
// ''
// )
// } catch (e) {}
// expect('Inline-template components must have exactly one child element.').toHaveBeenWarned()
// expect(console.error.calls.count()).toBe(2)
// })
it('generate static trees inside v-for', () => {
// TODO vue的数字 item 是从1,小程序是从0,后续考虑抹平差异
assertCodegen(
'',
''
)
})
it('generate component with v-for', () => {
// normalize type: 2
assertCodegen(
'{{ item }}
',
'{{item}}'
)
})
it('generate component with comment', () => {
assertCodegen(
'',
''
)
})
// #6150
it('generate comments with special characters', () => {
assertCodegen(
'',
''
)
})
// #8041
it('does not squash templates inside v-pre', () => {
assertCodegen(
'',
'{{msg}}'
)
})
it('not specified ast type', () => {
assertCodegen(
'',
''
)
})
it('not specified directives option', () => {
assertCodegen(
'hello world
',
'hello world'
)
})
// #9142
it('should compile single v-for component inside template', () => {
assertCodegen(
'
',
''
)
})
})