Back to Repositories

Testing WXS Template Transformations in uni-app Compiler

This test suite validates the transformation of WXS (WeiXin Script) features in the uni-app compiler, focusing on basic bindings, conditional rendering, and handler caching. The tests ensure proper compilation of template syntax from Vue-style to WeChat Mini Program format.

Test Coverage Overview

The test suite provides comprehensive coverage of WXS transformations in the uni-app compiler.

Key areas tested include:

Basic data binding and event handling transformations
Handler caching functionality
Conditional rendering with v-if directives
Complex conditional chains with v-if/v-else-if/v-else

Implementation Analysis

The testing approach uses Jest’s describe/test pattern with a custom assert utility for comparing input and output templates.

Key implementation patterns include:

Template transformation verification
Context object handling (_ctx, _cache)
Filter registration and processing
Handler caching configuration testing

Technical Details

Testing infrastructure includes:

Jest as the primary test runner
Custom assert utility for template comparison
Template transformation helpers (_t)
Filter and cache configuration options
TypeScript for type-safe testing

Best Practices Demonstrated

The test suite exemplifies high-quality testing practices through organized test cases and comprehensive coverage.

Notable practices include:

Isolated test cases for specific features
Clear input/output expectations
Consistent testing patterns
Configuration-driven test scenarios
Progressive complexity in test cases

dcloudio/uni-app

packages/uni-mp-compiler/__tests__/wxs.spec.ts

            
import { assert } from './testUtils'

describe('compiler: transform wxs', () => {
  test('basic', () => {
    assert(
      `<view :data-threshold="threshold" :change:prop="swipe.showWatch" :prop="is_show" @touchstart="swipe.touchstart">{{swipe.message}}</view>`,
      `<view data-threshold="{{a}}" change:prop="{{swipe.showWatch}}" prop="{{b}}" bindtouchstart="{{swipe.touchstart}}">{{swipe.message}}</view>`,
      `(_ctx, _cache) => {
  return { a: _ctx.threshold, b: _ctx.is_show }
}`,
      {
        filters: ['swipe'],
        cacheHandlers: true,
      }
    )
  })
  test('cacheHandlers', () => {
    assert(
      `<view :data-threshold="threshold" :change:prop="swipe.showWatch" :prop="is_show" @touchstart="swipe.touchstart"/>`,
      `<view data-threshold="{{a}}" change:prop="{{swipe.showWatch}}" prop="{{b}}" bindtouchstart="{{swipe.touchstart}}"/>`,
      `(_ctx, _cache) => {
  return { a: _ctx.threshold, b: _ctx.is_show }
}`,
      {
        filters: ['swipe'],
        cacheHandlers: true,
      }
    )
  })
  test('v-if', () => {
    assert(
      `<view v-if="test.aa()">123</view>`,
      `<view wx:if="{{test.aa()}}">123</view>`,
      `(_ctx, _cache) => {
  return {}
}`,
      {
        filters: ['test'],
      }
    )
    assert(
      `<view v-if="test.aa()">{{msg}}</view>`,
      `<view wx:if="{{test.aa()}}">{{a}}</view>`,
      `(_ctx, _cache) => {
  return { ...{ a: _t(_ctx.msg) } }
}`,
      {
        filters: ['test'],
      }
    )
  })
  test('v-if + v-else', () => {
    assert(
      `<view v-if="test.aa()">{{foo}}</view><view v-else>{{bar}}</view>`,
      `<view wx:if="{{test.aa()}}">{{a}}</view><view wx:else>{{b}}</view>`,
      `(_ctx, _cache) => {
  return { ...{ a: _t(_ctx.foo) }, ...{ b: _t(_ctx.bar) } }
}`,
      {
        filters: ['test'],
      }
    )
  })
  test('v-if + v-else-if + v-else', () => {
    assert(
      `<view v-if="test.aa()">{{foo}}</view><view v-else-if="test.bb()">{{foo}}</view><view v-else>{{bar}}</view>`,
      `<view wx:if="{{test.aa()}}">{{a}}</view><view wx:elif="{{test.bb()}}">{{b}}</view><view wx:else>{{c}}</view>`,
      `(_ctx, _cache) => {
  return { ...{ a: _t(_ctx.foo) }, ...{ ...{ b: _t(_ctx.foo) }, ...{ c: _t(_ctx.bar) } } }
}`,
      {
        filters: ['test'],
      }
    )
  })
})