Back to Repositories

Testing v-on Event Transformations in uni-app Xiaohongshu Components

This test suite examines event handling transformations in the uni-app framework for Xiaohongshu Mini Program components. It validates both built-in and custom event bindings, ensuring proper event transformation and handler execution.

Test Coverage Overview

The test suite provides comprehensive coverage of v-on directive transformations for the Xiaohongshu Mini Program platform.

Key areas tested include:

Built-in event binding transformation
Custom event handler mapping
Multiple event binding scenarios
Event handler expression compilation

Implementation Analysis

The testing approach uses a custom assert utility to verify template transformations and corresponding render function generation. The implementation focuses on comparing input Vue template syntax against expected Xiaohongshu Mini Program output, with specific attention to event binding syntax differences.

Testing patterns include:

Template transformation verification
Event handler compilation validation
Complex event binding scenarios

Technical Details

Testing infrastructure includes:

Jest as the primary testing framework
Custom assertion utilities for template comparison
Template transformation validation
Render function generation verification

Best Practices Demonstrated

The test suite exemplifies several testing best practices for component event handling:

Isolated test cases for different event types
Clear input/output validation
Comprehensive coverage of edge cases
Structured test organization using describe blocks

dcloudio/uni-app

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

            
import { assert } from './testUtils'

describe('mp-xhs: transform v-on', () => {
  describe('component', () => {
    test(`built-in event`, () => {
      assert(
        `<custom @tap="tap"/>`,
        `<custom bindtap="{{a}}" u-i="2a9ec0b0-0" bind:__l="__l"/>`,
        `(_ctx, _cache) => {
  return { a: _o(_ctx.tap) }
}`
      )
    })
    test(`custom event`, () => {
      assert(
        `<custom @click="click"/>`,
        `<custom bindclick="__e" u-i="2a9ec0b0-0" bind:__l="__l" 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" bind:__l="__l" eO="{{a}}"/>`,
          `(_ctx, _cache) => {
  return { a: _j({ 'unmount': _o(_ctx.unmount), 'updateModelValue': _o(_ctx.changeHandle), 'customMount': _o($event => { _ctx.mount(); _ctx.created(); }) }) }
}`
        )
      })
  })
})