Back to Repositories

Testing Vue Template Compilation and Event Handling in uni-app H5 Platform

This test suite validates the compilation functionality in uni-app’s H5 Vite implementation, focusing on event handling and component transformations. The tests ensure proper conversion of template directives and built-in component handling for the H5 platform.

Test Coverage Overview

The test suite provides coverage for critical Vue template compilation aspects in uni-app H5.

Key areas tested include:

Event binding transformation (tap to click)
Built-in component resolution
Template directive processing
Component naming conventions

Implementation Analysis

The testing approach utilizes Jest’s describe/test pattern with Vue’s compiler utilities. The implementation leverages @vue/compiler-sfc for template compilation, with custom compiler options to handle uni-app specific bindings and transformations.

Notable patterns include:

Isolated compilation testing
Binding metadata configuration
Component resolution verification

Technical Details

Testing infrastructure includes:

Jest test framework
@vue/compiler-core for binding types
@vue/compiler-sfc for template compilation
Custom compiler options configuration
Component resolution assertions

Best Practices Demonstrated

The test suite exemplifies high-quality testing practices through modular test organization and focused test cases.

Notable practices include:

Isolated test cases for specific features
Clear test descriptions
Consistent assertion patterns
Reusable compilation helper function

dcloudio/uni-app

packages/uni-h5-vite/__tests__/compiler.spec.ts

            
import { BindingTypes } from '@vue/compiler-core'
import { compileTemplate } from '@vue/compiler-sfc'
import { compilerOptions } from '../src/plugin/uni'
const filename = 'foo.vue'

function compile(source: string) {
  return compileTemplate({
    source,
    filename,
    id: filename,
    compilerOptions: {
      ...compilerOptions,
      bindingMetadata: {
        canvas: BindingTypes.SETUP_REF,
      },
    },
  })
}
describe('h5: compiler', () => {
  test('tap=>click', () => {
    expect(compile('<view @tap="tap"/>').code).toContain(`onClick`)
    expect(compile('<map @tap="tap"/>').code).toContain(`onTap`)
  })
  test('builtInComponents', () => {
    expect(compile('<canvas/>').code).toContain(
      `_resolveComponent("v-uni-canvas")`
    )
  })
})