Back to Repositories

Testing v-on Event Transformations in uni-app Baidu Mini Program

This test suite examines event handling transformations in the uni-app Baidu Mini Program implementation. It verifies how various event bindings are correctly transformed from Vue-style syntax to Baidu Mini Program format, covering both built-in and custom events.

Test Coverage Overview

The test suite provides comprehensive coverage of v-on event transformations.

Key areas tested include:

Built-in event handling (@tap)
Custom event bindings (@click)
Multiple custom event handlers
Event handler function transformations

Integration points focus on the conversion between Vue event syntax and Baidu Mini Program event binding format.

Implementation Analysis

The testing approach uses assertion-based validation to verify event binding transformations. The pattern involves comparing input Vue template syntax against expected Baidu Mini Program output, including both markup and runtime handler functions.

Tests utilize template transformation assertions with corresponding JavaScript handler compilations, demonstrating the full event binding pipeline.

Technical Details

Testing infrastructure includes:

Custom assert utility for template transformation verification
Jest as the test runner
Template compilation validation
Runtime handler function verification

Best Practices Demonstrated

The test suite exemplifies strong testing practices through precise input-output validation and comprehensive event handling coverage.

Notable practices include:

Isolated test cases for each event binding scenario
Clear test case organization by event type
Explicit verification of both template and runtime transformations
Structured test grouping using describe blocks

dcloudio/uni-app

packages/uni-mp-baidu/__tests__/vOn.spec.ts

            
import { assert } from './testUtils'

describe('mp-baidu: transform v-on', () => {
  describe('component', () => {
    test(`built-in event`, () => {
      assert(
        `<custom @tap="tap"/>`,
        `<custom bindtap="{{a}}" u-i="2a9ec0b0-0"/>`,
        `(_ctx, _cache) => {
  return { a: _o(_ctx.tap) }
}`
      )
    })
    test(`custom event`, () => {
      assert(
        `<custom @click="click"/>`,
        `<custom bindclick="__e" u-i="2a9ec0b0-0" eO="{{a}}"/>`,
        `(_ctx, _cache) => {
  return { a: _j({ 'click': _o(_ctx.click) }) }
}`
      )
    }),
      test(`multi custom event`, () => {
        assert(
          `<custom @unmount="unmount" @update:modelValue="changeHandle" @custom-mount="mount();created();"/>`,
          `<custom bindunmount="__e" bindupdateModelValue="__e" bindcustomMount="__e" u-i="2a9ec0b0-0" eO="{{a}}"/>`,
          `(_ctx, _cache) => {
  return { a: _j({ 'unmount': _o(_ctx.unmount), 'updateModelValue': _o(_ctx.changeHandle), 'customMount': _o($event => { _ctx.mount(); _ctx.created(); }) }) }
}`
        )
      })
  })
})