Back to Repositories

Validating Tag Transformation Compiler Tests in dcloudio/uni-app

This test suite validates the tag transformation functionality in the uni-app compiler, focusing on HTML to mini-program tag conversions and built-in custom elements handling. The tests ensure proper tag mapping and attribute preservation across different component types.

Test Coverage Overview

The test suite provides comprehensive coverage of tag transformation scenarios in the uni-app compiler.

Key areas tested include:

HTML to mini-program tag conversion mappings
Self-closing and paired tag handling
Built-in custom elements transformation
Reference attribute handling in custom elements

Implementation Analysis

The testing approach utilizes Jest’s describe/test blocks with custom assertion utilities for comparing input and expected output transformations.

The implementation leverages:

Custom assert function for transformation validation
HTML_TO_MINI_PROGRAM_TAGS mapping object
Context-aware transformation handling
Special handling for ‘x’ mode components

Technical Details

Testing infrastructure includes:

Jest as the primary test runner
Custom testUtils with assert functionality
Transformation mapping configurations
Context simulation for rendering
Special flags for different compilation modes

Best Practices Demonstrated

The test suite exemplifies strong testing practices through systematic coverage of transformation scenarios.

Notable practices include:

Iterative testing of all HTML tags
Separate test cases for different element types
Explicit expected output validation
Mode-specific transformation testing

dcloudio/uni-app

packages/uni-mp-compiler/__tests__/tag.spec.ts

            
import { HTML_TO_MINI_PROGRAM_TAGS } from '@dcloudio/uni-cli-shared'
import { assert } from './testUtils'

describe('compiler: transform tag', () => {
  test('html', () => {
    Object.keys(HTML_TO_MINI_PROGRAM_TAGS).forEach((htmlTag) => {
      // 自闭合
      assert(
        `<${htmlTag}/>`,
        `<${HTML_TO_MINI_PROGRAM_TAGS[htmlTag]}/>`,
        `(_ctx, _cache) => {
  return {}
}`
      )
      // 成对标签
      assert(
        `<${htmlTag}></${htmlTag}>`,
        `<${HTML_TO_MINI_PROGRAM_TAGS[htmlTag]}></${HTML_TO_MINI_PROGRAM_TAGS[htmlTag]}>`,
        `(_ctx, _cache) => {
  return {}
}`
      )
    })
  })
  test('built-in custom elements', () => {
    assert(
      `<uni-cloud-db-element/>`,
      `<uni-cloud-db-element u-i="2a9ec0b0-0"/>`,
      `(_ctx, _cache) => {
  return {}
}`
    )
  })
  test('built-in custom elements (x)', () => {
    assert(
      `<uni-cloud-db-element ref="udb"/>`,
      `<view u-t="uni-cloud-db-element" ref="udb" id="r0-2a9ec0b0" style="{{$eS[a]}}"/>`,
      `(_ctx, _cache) => {
  const __returned__ = { a: _sei('r0-2a9ec0b0', { "name": "uni-cloud-db-element", "type": 2 }, 'udb'), b: _s(_ses('r0-2a9ec0b0')) }
  return __returned__
}`,
      {
        isX: true,
      }
    )
  })
})