Back to Repositories

Validating v-On Event Transformations in dcloudio/uni-app

This test suite validates v-on event handling transformations in the Kuaishou Mini Program implementation of uni-app. It ensures proper event binding and data transformation across different component types including inputs, textareas, and custom components.

Test Coverage Overview

The test suite provides comprehensive coverage of v-on event transformations across multiple component types:

Input and textarea event binding validation
Built-in and custom component event handling
Special event cases like getphonenumber and getuserextendinfo
Multiple event binding scenarios

Implementation Analysis

The testing approach uses a custom assert utility to verify event binding transformations. It follows a structured pattern of comparing original template syntax with expected Kuaishou Mini Program output and corresponding JavaScript context generators.

The tests utilize Jest’s describe/test blocks for organized test grouping and leverage template literal strings for clear input/output comparisons.

Technical Details

Testing Framework: Jest
Testing Pattern: Unit Tests
Key Components:

Custom assert utility for transformation validation
Template transformation verification
JavaScript context generation testing
Event binding syntax validation

Best Practices Demonstrated

The test suite exemplifies strong testing practices through organized test grouping, clear test case isolation, and comprehensive coverage of edge cases. It maintains clear separation between different component types and event scenarios, while ensuring consistent validation of both template transformation and runtime behavior.

Structured test organization
Isolated test cases
Comprehensive event handling coverage
Clear input/output validation

dcloudio/uni-app

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

            
import { assert } from './testUtils'

describe('mp-kuaishou: transform v-on', () => {
  describe('input,textarea', () => {
    test(`input`, () => {
      assert(
        `<input @input="input"/>`,
        `<input bindinput="__e" data-e-o="{{a}}"/>`,
        `(_ctx, _cache) => {
  return { a: { 'input': _o(_ctx.input) } }
}`
      )
    })
    test(`textarea`, () => {
      assert(
        `<textarea @input="input"></textarea>`,
        `<textarea bindinput="__e" data-e-o="{{a}}"></textarea>`,
        `(_ctx, _cache) => {
  return { a: { 'input': _o(_ctx.input) } }
}`
      )
    })
  })
  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" @custom-mount="mount();created();"/>`,
        `<custom bindunmount="__e" bindcustomMount="__e" u-i="2a9ec0b0-0" bind:__l="__l" eO="{{a}}"/>`,
        `(_ctx, _cache) => {
  return { a: _j({ 'unmount': _o(_ctx.unmount), 'customMount': _o($event => { _ctx.mount(); _ctx.created(); }) }) }
}`
      )
    })
  })
  describe('event', () => {
    test(`getphonenumber`, () => {
      assert(
        `<button open-type="getPhoneNumber" @getphonenumber="getInfo"></button>`,
        `<button open-type="getPhoneNumber" bindgetphonenumber="__e" data-e-o="{{a}}"></button>`,
        `(_ctx, _cache) => {
  return { a: { 'getphonenumber': _o(_ctx.getInfo) } }
}`
      )
    })
    test(`getuserextendinfo`, () => {
      assert(
        `<button open-type="getuserextendinfo" @getuserextendinfo="getInfo"></button>`,
        `<button open-type="getuserextendinfo" bindgetuserextendinfo="__e" data-e-o="{{a}}"></button>`,
        `(_ctx, _cache) => {
  return { a: { 'getuserextendinfo': _o(_ctx.getInfo) } }
}`
      )
    })
  })
})