Back to Repositories

Validating v-Model Transformations in dcloudio/uni-app XHS Platform

This test suite validates v-model functionality in the uni-app framework for XHS mini-program platform. It covers component binding, input handling, and event management scenarios.

Test Coverage Overview

The test suite provides comprehensive coverage of v-model implementations across different UI elements.

Key areas tested include:

Component v-model bindings with and without cache
Input and textarea element v-model functionality
Combined v-model and event handler implementations
Data flow and value updates between components

Implementation Analysis

The testing approach utilizes Jest’s describe/test pattern with custom assert utilities for XHS platform-specific transformations.

Key implementation patterns include:

Template transformation verification
Runtime code generation testing
Event binding and handler validation
Cache optimization testing

Technical Details

Testing infrastructure includes:

Jest test framework
Custom assert utilities for template comparison
XHS-specific bindings (xhs:if, bind:__l)
Template transformation validators
Runtime code generation verifiers

Best Practices Demonstrated

The test suite exemplifies high-quality testing practices with isolated test cases and clear assertions.

Notable practices include:

Granular test case separation
Consistent assertion patterns
Platform-specific binding validation
Comprehensive event handling coverage

dcloudio/uni-app

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

            
import { assert } from './testUtils'

describe('mp-xhs: transform v-model', () => {
  test(`component v-model`, () => {
    assert(
      `<Comp v-model="model" />`,
      `<comp xhs:if="{{b}}" u-i="2a9ec0b0-0" bind:__l="__l" eO="{{a}}" bindupdateModelValue="__e" u-p="{{b}}"/>`,
      `(_ctx, _cache) => {
  return { a: _j({ 'updateModelValue': _o($event => _ctx.model = $event) }), b: _p({ modelValue: _ctx.model }) }
}`
    )
  })
  test(`component v-model with cache`, () => {
    assert(
      `<Comp v-model="model" />`,
      `<comp xhs:if="{{b}}" u-i="2a9ec0b0-0" bind:__l="__l" eO="{{a}}" bindupdateModelValue="__e" u-p="{{b}}"/>`,
      `(_ctx, _cache) => {
  return { a: _j({ 'updateModelValue': _o($event => _ctx.model = $event) }), b: _p({ modelValue: _ctx.model }) }
}`,
      {
        cacheHandlers: true,
      }
    )
  })
  test(`input,textarea v-model`, () => {
    assert(
      `<input v-model="model" />`,
      `<input value="{{a}}" bindinput="{{b}}"/>`,
      `(_ctx, _cache) => {
  return { a: _ctx.model, b: _o($event => _ctx.model = $event.detail.value) }
}`
    )
    assert(
      `<textarea v-model="model" />`,
      `<block xhs:if="{{r0}}"><textarea value="{{a}}" bindinput="{{b}}"/></block>`,
      `(_ctx, _cache) => {
  return { a: _ctx.model, b: _o($event => _ctx.model = $event.detail.value) }
}`
    )
  })
  test(`input v-model + v-on`, () => {
    assert(
      `<input @input="input" v-model="model" />`,
      `<input bindinput="{{a}}" value="{{b}}"/>`,
      `(_ctx, _cache) => {
  return { a: _o([$event => _ctx.model = $event.detail.value, _ctx.input]), b: _ctx.model }
}`
    )
  })
})