Back to Repositories

Testing Component Transformation Implementation in uni-app Alipay Integration

This test suite validates component transformation functionality in the uni-app framework for Alipay Mini Program integration. It covers built-in components, custom elements, and Alipay-specific open components through comprehensive unit testing.

Test Coverage Overview

The test suite provides extensive coverage of component transformation scenarios in the Alipay Mini Program context.

Key areas tested include:

Built-in component rendering
Match-media component transformation
Mini program component integration
Alipay open components (webview, join-group-chat, subscribe-message)
Button component with chooseAvatar functionality

Implementation Analysis

The testing approach utilizes Jest framework with custom assertion utilities to verify component transformations. The implementation employs pattern matching and template transformation verification, specifically handling component attributes, event bindings, and proper template generation for the Alipay platform.

Technical patterns include:

Component template verification
Event handler transformation testing
Custom component registration validation

Technical Details

Testing infrastructure includes:

Jest test runner
Custom assertion utilities
Mock component registration system
Template transformation verification tools
Component configuration handlers

Best Practices Demonstrated

The test suite exemplifies high-quality testing practices through modular test organization and comprehensive coverage. Notable practices include:

Isolated component testing
Event binding verification
Platform-specific transformation validation
Component registration testing
Structured test case organization

dcloudio/uni-app

packages/uni-mp-alipay/__tests__/component.spec.ts

            
import { addMiniProgramPageJson } from '@dcloudio/uni-cli-shared'
import { customElements } from '../src/compiler/options'
import { assert } from './testUtils'

const blankScript = `(_ctx, _cache) => {
  return {}
}`
describe('mp-alipay: transform component', () => {
  test(`built-in component`, () => {
    // 这里已经包含了自定义组件
    const code = customElements.map((tag) => `<${tag}/>`).join('')
    assert(code, code, blankScript)
  })
  test(`match-media`, () => {
    assert(
      `<match-media/>`,
      `<uni-match-media u-i="2a9ec0b0-0" onVI="__l"/>`,
      blankScript
    )
  })
  test(`mini program component`, () => {
    const filename = 'pages/vant/vant'
    addMiniProgramPageJson(filename, {
      usingComponents: {
        'van-button': 'mycomponents/button/index',
      },
    })
    assert(
      `<van-button/>`,
      `<van-button u-t="m" u-i="dc555fe4-0" onVI="__l"/>`,
      blankScript,
      {
        filename,
      }
    )
  })

  test('alipay open component - webview', () => {
    assert(
      `<web-view
    src="https://https://uniapp.dcloud.io/"
    @message="onmessage"
  ></web-view>`,
      `<web-view src=\"https://https://uniapp.dcloud.io/\" onMessage=\"{{a}}\"></web-view>`,
      `(_ctx, _cache) => {
  return { a: _o(_ctx.onmessage) }
}`
    )
  })
  test('alipay open component - join-group-chat', () => {
    assert(
      `<join-group-chat template-id="your_template_id" />`,
      `<join-group-chat template-id="your_template_id"/>`,
      blankScript
    )
    assert(
      `<join-group-chat template-id="your_template_id"></join-group-chat>`,
      `<join-group-chat template-id="your_template_id"></join-group-chat>`,
      blankScript
    )
  })
  test('alipay open component - subscribe-message', () => {
    // <subscribe-message template-id='xxxxx' onComplete="completeHandler" />
    assert(
      `<subscribe-message template-id='xxxxx' onComplete="completeHandler" />`,
      `<subscribe-message template-id="xxxxx" onComplete="completeHandler"/>`,
      blankScript
    )
    assert(
      `<subscribe-message template-id='xxxxx' @complete="completeHandler" />`,
      `<subscribe-message template-id="xxxxx" onComplete="{{a}}"/>`,
      `(_ctx, _cache) => {
  return { a: _o(_ctx.completeHandler) }
}`
    )
  })

  test(`button chooseAvatar`, () => {
    assert(
      `<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" />`,
      `<button open-type="chooseAvatar" onChooseAvatar="{{a}}"/>`,
      `(_ctx, _cache) => {
  return { a: _o(_ctx.onChooseAvatar) }
}`
    )
  })
})