Back to Repositories

Testing NVUE Template Compilation and Element Transformation in uni-app

This test suite validates the compiler functionality for nvue components in the uni-app framework, focusing on template compilation and element transformation. The tests cover various aspects of template parsing, tag handling, and event binding specific to the nvue environment.

Test Coverage Overview

The test suite provides comprehensive coverage of nvue compiler functionality.

Key areas tested include:

Basic view and text element compilation
Template interpolation handling
Native component rendering (video, input, textarea)
Component attribute processing
Built-in tag validation
Event handler transformations

Implementation Analysis

The testing approach utilizes Jest’s snapshot testing pattern for validating compiler output consistency. The implementation leverages Vue’s compiler-core and compiler-sfc packages, with custom compiler options specific to nvue requirements.

Key patterns include:

AST generation and validation
Code generation testing
Dynamic test case generation
Directive transformation verification

Technical Details

Testing infrastructure includes:

Jest as the testing framework
Vue compiler utilities for AST manipulation
Custom helper functions for AST and code generation
Snapshot testing for output validation
TypeScript for type-safe testing
Compiler configuration specific to nvue environment

Best Practices Demonstrated

The test suite exemplifies several testing best practices in compiler validation.

Notable practices include:

Systematic test case organization
Comprehensive edge case coverage
Modular test helper functions
Clear test case descriptions
Efficient test data management
Type-safe testing approaches

dcloudio/uni-app

packages/uni-app-vite/__tests__/nvue/compiler.spec.ts

            
import { NVUE_U_BUILT_IN_TAGS } from '@dcloudio/uni-shared'
import {
  type ElementNode,
  ElementTypes,
  type SimpleExpressionNode,
  findDir,
} from '@vue/compiler-core'
import { compileTemplate } from '@vue/compiler-sfc'
import { uniOptions } from '../../src/plugin/uni/index'
const { compilerOptions } = uniOptions('nvue')!
const filename = 'foo.vue'

function compile(source: string) {
  return compileTemplate({
    source,
    filename,
    id: filename,
    compilerOptions: {
      ...compilerOptions,
    },
  })
}

function genAst(source: string) {
  return compile(source).ast!.children[0] as ElementNode
}

function genCode(source: string) {
  return compile(source).code
}

const codes = [
  `<view>hello</view>`,
  `<view><text>hello</text></view>`,
  `<view>hello{{a}}<view>aaa{{a}}</view>{{b}}</view>`,
  `<video></video>`,
  `<video><view></view></video>`,
  `<input v-model="text"/>`,
  `<textarea v-model="text"/>`,
  `<slider/>`,
  `<scroll-view data-id="id" scroll-x="true" :show-scrollbar="true"/>`,
]

describe('app-nvue: compiler', () => {
  codes.forEach((code) => {
    test(code, () => {
      expect(genCode(code)).toMatchSnapshot()
    })
  })
  test('u-tags', () => {
    NVUE_U_BUILT_IN_TAGS.forEach((tag) => {
      expect(genAst(`<${tag}></${tag}>`).tagType).toBe(ElementTypes.ELEMENT)
    })
  })

  test('scroll-view', () => {
    genAst(`<view></view>`)
  })
  // test('render-whole', () => {
  //   expect(
  //     (
  //       (
  //         findProp(
  //           genAst(`<view :render-whole="true">hello</view>`),
  //           'appendAsTree',
  //           true,
  //           false
  //         ) as DirectiveNode
  //       ).arg as SimpleExpressionNode
  //     ).content
  //   ).toBe('appendAsTree')
  // })
  // test('unitary tag', () => {
  //   expect(
  //     findProp(genAst(`<text>hello</text>`), 'appendAsTree', true, false)
  //   ).toBeTruthy()
  // })
  test('tap=>click', () => {
    expect(
      (
        findDir(genAst(`<view @tap="click"></view>`), 'on')!
          .arg as SimpleExpressionNode
      ).content
    ).toBe('click')
  })
})