Back to Repositories

Testing Component Tag Transformation System in uni-app

This test suite validates the transformation of tags and properties in the uni-app compiler, focusing on component rendering and attribute handling for cross-platform compatibility. It ensures proper conversion of custom components and their directional properties for different runtime environments.

Test Coverage Overview

The test suite provides comprehensive coverage of tag and property transformations in the uni-app compiler.

Key areas tested include:

List-view to scroll-view component conversion
Directional property handling (horizontal/vertical scrolling)
Dynamic direction attribute processing
Canvas type attribution
Checkbox color property normalization

Implementation Analysis

The testing approach utilizes Jest’s describe/test pattern with custom assertion utilities. The implementation focuses on component transformation logic, employing nodeTransforms for tag conversion and property mapping. The tests verify both static and dynamic attribute handling with specific attention to cross-platform compatibility.

Technical Details

Testing stack includes:

Jest as the primary testing framework
Custom assert utility for transformation verification
Transform utilities from @dcloudio/uni-cli-shared
TypeScript for type-safe testing
Node transform hooks for component conversion

Best Practices Demonstrated

The test suite exemplifies high-quality testing practices through isolated test cases, clear assertions, and comprehensive coverage of edge cases. Each test focuses on a specific transformation scenario, ensuring maintainable and readable test code with explicit expected outputs.

dcloudio/uni-app

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

            
import { assert } from './testUtils'
import {
  transformDirection,
  transformMPBuiltInTag,
} from '@dcloudio/uni-cli-shared'

describe('compiler: transform tagAndProp', () => {
  test('list-view', () => {
    assert(
      `<list-view />`,
      `<scroll-view enable-flex=\"true\" enhanced=\"true\" scroll-y=\"true\"/>`,
      `(_ctx, _cache) => {
  const __returned__ = {}
  return __returned__
}`,
      {
        isX: true,
        nodeTransforms: [transformMPBuiltInTag, transformDirection],
      }
    )
  })
  test('list-view direction horizontal', () => {
    assert(
      `<list-view direction="horizontal" />`,
      `<scroll-view enable-flex=\"true\" enhanced=\"true\" scroll-x=\"true\"/>`,
      `(_ctx, _cache) => {
  const __returned__ = {}
  return __returned__
}`,
      {
        isX: true,
        nodeTransforms: [transformMPBuiltInTag, transformDirection],
      }
    )
  })
  test('scroll-view direction horizontal', () => {
    assert(
      `<scroll-view direction="horizontal" />`,
      `<scroll-view enable-flex=\"true\" enhanced=\"true\" scroll-x=\"true\"/>`,
      `(_ctx, _cache) => {
  const __returned__ = {}
  return __returned__
}`,
      {
        isX: true,
        nodeTransforms: [transformMPBuiltInTag, transformDirection],
      }
    )
  })
  test('scroll-view dynamic direction', () => {
    assert(
      `<scroll-view :direction="d" />`,
      `<scroll-view enable-flex=\"true\" enhanced=\"true\" scroll-x=\"{{a}}\" scroll-y=\"{{b}}\"/>`,
      `(_ctx, _cache) => {
  const __returned__ = { a: _ctx.d === 'horizontal' || _ctx.d === 'all', b: !_ctx.d || _ctx.d === 'vertical' || _ctx.d === 'all' }
  return __returned__
}`,
      {
        isX: true,
        nodeTransforms: [transformMPBuiltInTag, transformDirection],
      }
    )
  })
  test('canvas', () => {
    assert(
      `<canvas />`,
      `<canvas type=\"2d\"/>`,
      `(_ctx, _cache) => {
  const __returned__ = {}
  return __returned__
}`,
      {
        isX: true,
        nodeTransforms: [transformMPBuiltInTag, transformDirection],
      }
    )
  })
  test('checkbox fore-color', () => {
    assert(
      `<checkbox fore-color="#FF0000" />`,
      `<checkbox color=\"#FF0000\"/>`,
      `(_ctx, _cache) => {
  const __returned__ = {}
  return __returned__
}`,
      {
        isX: true,
        nodeTransforms: [transformMPBuiltInTag, transformDirection],
      }
    )
  })
  test('checkbox foreColor', () => {
    assert(
      `<checkbox foreColor="#FF0000" />`,
      `<checkbox color=\"#FF0000\"/>`,
      `(_ctx, _cache) => {
  const __returned__ = {}
  return __returned__
}`,
      {
        isX: true,
        nodeTransforms: [transformMPBuiltInTag, transformDirection],
      }
    )
  })
})