compiler-mp-alipay.spec.js 15.1 KB
Newer Older
fxy060608's avatar
fxy060608 已提交
1 2
const compiler = require('../lib')

3 4
function assertCodegen (template, templateCode, renderCode = 'with(this){}', mpOptions = {}, baseOptions = {}) {
  const res = compiler.compile(template, Object.assign({
fxy060608's avatar
fxy060608 已提交
5 6 7 8 9
    resourcePath: 'test.wxml',
    mp: Object.assign({
      minified: true,
      isTest: true,
      platform: 'mp-alipay'
10 11
    }, mpOptions)
  }, baseOptions))
fxy060608's avatar
fxy060608 已提交
12 13 14 15 16 17 18 19 20

  expect(res.template).toBe(templateCode)
  expect(res.render).toBe(renderCode)
}

describe('mp:compiler-mp-alipay', () => {
  it('generate v-for directive', () => {
    assertCodegen(
      '<view><view v-for="(item,index) in items" :key="index"></view></view>',
21
      '<view><view a:for="{{items}}" a:for-item="item" a:for-index="index" a:key="index"></view></view>'
fxy060608's avatar
fxy060608 已提交
22 23 24 25 26 27
    )
  })

  it('generate v-else-if with v-else directive', () => {
    assertCodegen(
      '<view><view v-if="show">hello</view><view v-else-if="hide">world</view><view v-else>bye</view></view>',
fxy060608's avatar
fxy060608 已提交
28
      '<view><block a:if="{{show}}"><view>hello</view></block><block a:else><block a:if="{{hide}}"><view>world</view></block><block a:else><view>bye</view></block></block></view>'
fxy060608's avatar
fxy060608 已提交
29
    )
fxy060608's avatar
fxy060608 已提交
30 31 32 33
  })
  it('generate ref', () => {
    assertCodegen(
      '<component1 ref="c1">text</component1>',
fxy060608's avatar
fxy060608 已提交
34
      '<component1 vue-id="551070e6-1" ref="__r" data-ref="c1" onVueInit="__l">text</component1>'
fxy060608's avatar
fxy060608 已提交
35 36 37
    )
    assertCodegen(
      '<component1 :ref="c2">text<text>123213</text></component1>',
fxy060608's avatar
fxy060608 已提交
38
      '<component1 vue-id="551070e6-1" ref="__r" data-ref="{{c2}}" onVueInit="__l">text<text>123213</text></component1>'
fxy060608's avatar
fxy060608 已提交
39 40 41
    )
    assertCodegen(
      '<component1 v-for="item in items" ref="c3"></component1>',
42
      '<component1 vue-id="{{\'551070e6-1-\'+__i0__}}" ref="__r" data-ref-in-for="c3" a:for="{{items}}" a:for-item="item" a:for-index="__i0__" onVueInit="__l"></component1>'
fxy060608's avatar
fxy060608 已提交
43 44 45
    )
    assertCodegen(
      '<component1 v-for="item in items" :ref="c4"></component1>',
46
      '<component1 vue-id="{{\'551070e6-1-\'+__i0__}}" ref="__r" data-ref-in-for="{{c4}}" a:for="{{items}}" a:for-item="item" a:for-index="__i0__" onVueInit="__l"></component1>'
fxy060608's avatar
fxy060608 已提交
47
    )
48 49 50 51 52 53 54 55 56
    assertCodegen(
      '<component1>text</component1>',
      '<component1 vue-id="551070e6-1" data-com-type="wx" ref="__r" onVueInit="__l">text</component1>',
      undefined,
      undefined,
      {
        wxComponents: { component1: '/mycomponents/component1' }
      }
    )
57
    assertCodegen(
58 59
      '<component1 @change="onChange" @cancle="onCancle">text</component1>',
      '<component1 onChange="__e" onCancle="__e" vue-id="551070e6-1" data-event-opts="{{[[\'^change\',[[\'onChange\']]],[\'^cancle\',[[\'onCancle\']]]]}}" data-com-type="wx" ref="__r" data-event-list="onChange,onCancle" onVueInit="__l">text</component1>',
60 61 62 63 64 65
      undefined,
      undefined,
      {
        wxComponents: { component1: '/mycomponents/component1' }
      }
    )
66
    assertCodegen(
67
      '<credit-pay @change="onChange" @cancle="onCancle">text</credit-pay>',
68
      '<plugin-wrapper onChange="__e" onCancle="__e" vue-id="551070e6-1" onPluginWrap="__w" data-event-opts="{{[[\'^change\',[[\'onChange\']]],[\'^cancle\',[[\'onCancle\']]]]}}" data-com-type="wx" data-event-list="onChange,onCancle" onVueInit="__l"><credit-pay onChange="{{\'onChange\'+\'551070e6-1\'}}" onCancle="{{\'onCancle\'+\'551070e6-1\'}}" onVueInit="__l">text</credit-pay></plugin-wrapper>',
69 70 71 72 73 74
      undefined,
      undefined,
      {
        wxComponents: { 'credit-pay': 'plugin://myPlugin/CreditPay' }
      }
    )
fxy060608's avatar
fxy060608 已提交
75
  })
76 77 78 79 80 81
  it('generate slot fallback content', () => {
    assertCodegen(
      '<view><slot>slot</slot></view>',
      '<view><block a:if="{{$slots.$default}}"><slot></slot></block><block a:else>slot</block></view>'
    )
  })
fxy060608's avatar
fxy060608 已提交
82 83 84
  it('generate default slot', () => {
    assertCodegen(
      '<component1>text</component1>',
fxy060608's avatar
fxy060608 已提交
85
      '<component1 vue-id="551070e6-1" onVueInit="__l">text</component1>'
fxy060608's avatar
fxy060608 已提交
86 87 88
    )
    assertCodegen(
      '<component1>text<text>123213</text></component1>',
fxy060608's avatar
fxy060608 已提交
89
      '<component1 vue-id="551070e6-1" onVueInit="__l">text<text>123213</text></component1>'
fxy060608's avatar
fxy060608 已提交
90 91 92
    )
    assertCodegen(
      '<component1>text<block slot="right"></block></component1>',
fxy060608's avatar
fxy060608 已提交
93
      '<component1 vue-id="551070e6-1" onVueInit="__l">text<view slot="right"></view></component1>'
fxy060608's avatar
fxy060608 已提交
94 95
    )
  })
96 97 98 99

  it('generate scoped slot', () => {
    assertCodegen(
      '<component1 :text="\'text\'"><template v-slot="props"><view :class="{text:props.text}">{{props.text}}</view></template></component1>',
100
      '<component1 vue-id="551070e6-1" text="text" onVueInit="__l"><view slot-scope="props"><view class="{{((props.text)?\'text\':\'\')}}">{{props.text}}</view></view></component1>'
101 102 103
    )
    assertCodegen(
      '<component1 :text="\'text\'"><template v-slot="{text}"><view :class="{text:text}">{{text}}</view></template></component1>',
104
      '<component1 vue-id="551070e6-1" text="text" onVueInit="__l"><view slot-scope="__SCOPED__"><view class="{{((__SCOPED__.text)?\'text\':\'\')}}">{{__SCOPED__.text}}</view></view></component1>'
105 106 107
    )
  })

108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135
  it('generate scoped slot with scopedSlotsCompiler: auto', () => {
    assertCodegen(
      '<my-component><template v-slot="{item}">{{item}}<template></my-component>',
      '<my-component vue-id="551070e6-1" onVueInit="__l"><view slot-scope="__SCOPED__">{{__SCOPED__.item}}</view></my-component>',
      'with(this){}',
      {
        scopedSlotsCompiler: 'auto'
      }
    )
    assertCodegen(
      '<my-component><template v-slot="{item}">{{getValue(item)}}<template></my-component>',
      '<my-component scoped-slots-compiler="augmented" vue-id="551070e6-1" onVueInit="__l"><block><block a:if="{{$root.m0}}">{{$root.m1}}</block></block></my-component>',
      'with(this){var m0=$hasScopedSlotsParams("551070e6-1");var m1=m0?getValue($getScopedSlotsParams("551070e6-1","default","item")):null;$mp.data=Object.assign({},{$root:{m0:m0,m1:m1}})}',
      {
        scopedSlotsCompiler: 'auto'
      }
    )
    assertCodegen(
      '<my-component><template v-slot="item">{{getValue(item.text)}}<template></my-component>',
      '<my-component scoped-slots-compiler="augmented" vue-id="551070e6-1" onVueInit="__l"><block><block a:if="{{$root.m0}}">{{$root.m1}}</block></block></my-component>',
      'with(this){var m0=$hasScopedSlotsParams("551070e6-1");var m1=m0?getValue($getScopedSlotsParams("551070e6-1","default").text):null;$mp.data=Object.assign({},{$root:{m0:m0,m1:m1}})}',
      {
        scopedSlotsCompiler: 'auto'
      }
    )
    assertCodegen(
      '<view><slot :item="item"><slot></view>',
      '<view><block a:if="{{$slots.$default}}"><slot item="{{item}}"></slot></block><block a:else><slot></slot></block></view>',
136
      'with(this){if($scope.props.scopedSlotsCompiler==="augmented"){$setScopedSlotsParams("default",{"item":item})}}',
137 138 139 140 141 142 143
      {
        scopedSlotsCompiler: 'auto'
      }
    )
    assertCodegen(
      '<view><slot v-bind="object"><slot></view>',
      '<view><block a:if="{{$slots.$default}}"><slot></slot></block><block a:else><slot></slot></block></view>',
144
      'with(this){if($scope.props.scopedSlotsCompiler==="augmented"){$setScopedSlotsParams("default",object)}}',
145 146 147 148 149 150
      {
        scopedSlotsCompiler: 'auto'
      }
    )
  })

fxy060608's avatar
fxy060608 已提交
151 152 153
  it('generate class binding', () => {
    assertCodegen(
      '<div :class="{ active: isActive }">1</div>',
fxy060608's avatar
fxy060608 已提交
154
      '<view class="{{((\'_div\')+\' \'+((isActive)?\'active\':\'\'))}}">1</view>'
fxy060608's avatar
fxy060608 已提交
155 156
    )
    assertCodegen(
fxy060608's avatar
fxy060608 已提交
157
      '<p class="static" :class="{ active: isActive, \'text-danger\': hasError }">2</p>',
158
      '<view class="{{((((\'static\')+\' \'+\'_p\')+\' \'+((isActive)?\'active\':\'\'))+\' \'+((hasError)?\'text-danger\':\'\'))}}">2</view>'
fxy060608's avatar
fxy060608 已提交
159 160 161
    )
    assertCodegen(
      '<p class="static" :class="[activeClass, errorClass]">3</p>',
162
      '<view class="{{((((\'static\')+\' \'+\'_p\')+\' \'+activeClass)+\' \'+errorClass)}}">3</view>'
fxy060608's avatar
fxy060608 已提交
163 164
    )
    assertCodegen(
fxy060608's avatar
fxy060608 已提交
165
      '<p class="static" :class="[isActive ? activeClass : \'\', errorClass]">4</p>',
166
      '<view class="{{((((\'static\')+\' \'+\'_p\')+\' \'+(isActive?activeClass:\'\'))+\' \'+errorClass)}}">4</view>'
fxy060608's avatar
fxy060608 已提交
167 168
    )
    assertCodegen(
fxy060608's avatar
fxy060608 已提交
169
      '<p class="static" :class="[{ active: isActive }, errorClass]">5</p>',
170
      '<view class="{{((((\'static\')+\' \'+\'_p\')+\' \'+((isActive)?\'active\':\'\'))+\' \'+errorClass)}}">5</view>'
fxy060608's avatar
fxy060608 已提交
171
    )
172 173
    assertCodegen(
      '<p class="static" :class="[{ active: isActive, disabled: isDisabled }, errorClass]">52</p>',
174
      '<view class="{{((((\'static\')+\' \'+\'_p\')+\' \'+(((isActive)?\'active\':\'\')+\' \'+((isDisabled)?\'disabled\':\'\')))+\' \'+errorClass)}}">52</view>'
175
    )
fxy060608's avatar
fxy060608 已提交
176
    assertCodegen(
fxy060608's avatar
fxy060608 已提交
177
      '<div class="container" :class="computedClassObject">6</div>',
178
      '<view class="{{(((\'container\')+\' \'+\'_div\')+\' \'+computedClassObject)}}">6</view>'
fxy060608's avatar
fxy060608 已提交
179 180 181 182 183 184 185
    )
    //     assertCodegen(
    //       `<div class="container" :class="computedClassObject">6</div>`,
    //       `<view class="{{$root.c0}}">6</view>`,
    //       `with(this){var c0=__get_class(computedClassObject,"container");$mp.data=Object.assign({},{$root:{c0:c0}})}`
    //     )
    assertCodegen(
fxy060608's avatar
fxy060608 已提交
186 187
      '<p :class="index === currentIndex ? activeClass : itemClass">7</p>',
      '<view class="{{((\'_p\')+\' \'+(index===currentIndex?activeClass:itemClass))}}">7</view>'
fxy060608's avatar
fxy060608 已提交
188 189
    )
    assertCodegen(
fxy060608's avatar
fxy060608 已提交
190 191
      '<p :class="\'m-content-head-\'+message.user">8</p>',
      '<view class="{{((\'_p\')+\' \'+(\'m-content-head-\'+message.user))}}">8</view>'
fxy060608's avatar
fxy060608 已提交
192 193
    )
    assertCodegen(
fxy060608's avatar
fxy060608 已提交
194
      '<p :class="classStr1 || classStr2" class="bg">9</p>',
195
      '<view class="{{(((\'bg\')+\' \'+\'_p\')+\' \'+(classStr1||classStr2))}}">9</view>'
fxy060608's avatar
fxy060608 已提交
196
    )
D
DCloud_LXH 已提交
197 198
    assertCodegen(
      '<p class="static" :class="[{ active: isActive }, errorClass, [flex, \'flex-row\']]">10</p>',
199 200 201 202 203
      '<view class="{{(((((\'static\')+\' \'+\'_p\')+\' \'+((isActive)?\'active\':\'\'))+\' \'+errorClass)+\' \'+((flex)+\' \'+\'flex-row\'))}}">10</view>'
    )
    assertCodegen(
      '<p class="a external-class c" :class="class1">hello world</p>',
      '<view class="{{(((((\'a\')+\' \'+\'external-class\')+\' \'+\'c\')+\' \'+\'_p\')+\' \'+class1)}}">hello world</view>'
D
DCloud_LXH 已提交
204
    )
fxy060608's avatar
fxy060608 已提交
205 206
  })

Q
qiang 已提交
207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241
  it('generate attrs with mergeVirtualHostAttributes', () => {
    assertCodegen(
      '<custom-view>hello world</custom-view>',
      '<custom-view vue-id="551070e6-1" onVueInit="__l" virtualHostStyle="{{virtualHostStyle}}" virtualHostClass="{{(virtualHostClass)}}">hello world</custom-view>',
      'with(this){}',
      {
        mergeVirtualHostAttributes: true
      }
    )
    assertCodegen(
      '<custom-view :class="class1" :style="style">hello world</custom-view>',
      '<custom-view vue-id="551070e6-1" onVueInit="__l" virtualHostStyle="{{(style)+virtualHostStyle}}" virtualHostClass="{{((class1)+\' \'+virtualHostClass)}}">hello world</custom-view>',
      'with(this){}',
      {
        mergeVirtualHostAttributes: true
      }
    )
    assertCodegen(
      '<view><custom-view>hello world</custom-view></view>',
      '<view class="{{(virtualHostClass)}}" style="{{virtualHostStyle}}"><custom-view vue-id="551070e6-1" onVueInit="__l">hello world</custom-view></view>',
      'with(this){}',
      {
        mergeVirtualHostAttributes: true
      }
    )
    assertCodegen(
      '<view><custom-view :class="class1" :style="style">hello world</custom-view></view>',
      '<view class="{{(virtualHostClass)}}" style="{{virtualHostStyle}}"><custom-view vue-id="551070e6-1" onVueInit="__l" virtualHostStyle="{{(style)}}" virtualHostClass="{{(class1)}}">hello world</custom-view></view>',
      'with(this){}',
      {
        mergeVirtualHostAttributes: true
      }
    )
  })

fxy060608's avatar
fxy060608 已提交
242 243 244
  it('generate getPhoneNumber', () => {
    assertCodegen(
      '<button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>',
fxy060608's avatar
fxy060608 已提交
245
      '<button open-type="getAuthorize" scope="phoneNumber" data-event-opts="{{[[\'getAuthorize\',[[\'$onAliGetAuthorize\',[\'getPhoneNumber\',\'$event\']]]],[\'error\',[[\'$onAliAuthError\',[\'getPhoneNumber\',\'$event\']]]]]}}" onGetAuthorize="__e" onError="__e">获取手机号</button>'
fxy060608's avatar
fxy060608 已提交
246 247 248
    )
  })

fxy060608's avatar
fxy060608 已提交
249 250
  it('generate events with v-on directive', () => {
    assertCodegen(
fxy060608's avatar
fxy060608 已提交
251
      '<uni-list-item title="标题文字" note="描述信息" show-extra-icon="true" :extra-icon="{color: \'#4cd964\',size: \'22\',type: \'spinner\'}"></uni-list-item>',
252 253
      '<uni-list-item vue-id="551070e6-1" title="标题文字" note="描述信息" show-extra-icon="true" extra-icon="{{({color:\'#4cd964\',size:\'22\',type:\'spinner\'})}}" onVueInit="__l"></uni-list-item>',
      'with(this){}'
fxy060608's avatar
fxy060608 已提交
254 255 256
    )

    assertCodegen(
fxy060608's avatar
fxy060608 已提交
257 258
      '<view @click="onClick" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" @touchcancel="onTouchCancel" @longtap="onLongTap" @longpress="onLongPress"></view>',
      '<view data-event-opts="{{[[\'tap\',[[\'onClick\',[\'$event\']]]],[\'touchStart\',[[\'onTouchStart\',[\'$event\']]]],[\'touchMove\',[[\'onTouchMove\',[\'$event\']]]],[\'touchEnd\',[[\'onTouchEnd\',[\'$event\']]]],[\'touchCancel\',[[\'onTouchCancel\',[\'$event\']]]],[\'longTap\',[[\'onLongTap\',[\'$event\']]]],[\'longTap\',[[\'onLongPress\',[\'$event\']]]]]}}" onTap="__e" onTouchStart="__e" onTouchMove="__e" onTouchEnd="__e" onTouchCancel="__e" onLongTap="__e"></view>'
fxy060608's avatar
fxy060608 已提交
259 260 261
    )

    assertCodegen(
fxy060608's avatar
fxy060608 已提交
262 263
      '<form @submit="formSubmit" @reset="formReset"/>',
      '<form data-event-opts="{{[[\'submit\',[[\'formSubmit\',[\'$event\']]]]]}}" onSubmit="__e" onReset="formReset"></form>'
fxy060608's avatar
fxy060608 已提交
264 265 266
    )

    assertCodegen(
fxy060608's avatar
fxy060608 已提交
267 268
      '<map @callouttap="calloutTap" @controltap="controlTap" @markertap="markerTap" @regionchange="regionChange" @tap="tap"/>',
      '<map data-event-opts="{{[[\'tap\',[[\'tap\',[\'$event\']]]]]}}" onCalloutTap="calloutTap" onControlTap="controlTap" onMarkerTap="markerTap" onRegionChange="regionChange" onTap="__e"></map>'
fxy060608's avatar
fxy060608 已提交
269 270 271
    )

    assertCodegen(
fxy060608's avatar
fxy060608 已提交
272 273
      '<view @transitionend="transitionEnd" @animationstart="animationStart" @animationiteration="animationIteration" @animationend="animationEnd" @firstappear="firstAppear"/>',
      '<view data-event-opts="{{[[\'transitionEnd\',[[\'transitionEnd\',[\'$event\']]]],[\'animationStart\',[[\'animationStart\',[\'$event\']]]],[\'animationIteration\',[[\'animationIteration\',[\'$event\']]]],[\'animationEnd\',[[\'animationEnd\',[\'$event\']]]],[\'firstAppear\',[[\'firstAppear\',[\'$event\']]]]]}}" onTransitionEnd="__e" onAnimationStart="__e" onAnimationIteration="__e" onAnimationEnd="__e" onFirstAppear="__e"></view>'
fxy060608's avatar
fxy060608 已提交
274 275 276
    )

    assertCodegen(
fxy060608's avatar
fxy060608 已提交
277 278
      '<scroll-view @scrolltoupper="scrollToUpper" @scrolltolower="scrollToLower"/>',
      '<scroll-view data-event-opts="{{[[\'scrollToUpper\',[[\'scrollToUpper\',[\'$event\']]]],[\'scrollToLower\',[[\'scrollToLower\',[\'$event\']]]]]}}" onScrollToUpper="__e" onScrollToLower="__e"></scroll-view>'
fxy060608's avatar
fxy060608 已提交
279 280 281
    )

    assertCodegen(
fxy060608's avatar
fxy060608 已提交
282 283
      '<movable-view @changeend="changeEnd"/>',
      '<movable-view data-event-opts="{{[[\'changeEnd\',[[\'changeEnd\',[\'$event\']]]]]}}" onChangeEnd="__e"></movable-view>'
fxy060608's avatar
fxy060608 已提交
284
    )
285 286 287 288 289

    assertCodegen(
      '<life-follow @close="close"/>',
      '<life-follow data-event-opts="{{[[\'close\',[[\'close\',[\'$event\']]]]]}}" onClose="__e"></life-follow>'
    )
fxy060608's avatar
fxy060608 已提交
290
  })
291
})