Back to Repositories

Testing uVue Style Parser Functionality in dcloudio/uni-app

This test suite validates the uVue style parser functionality in uni-app, focusing on CSS transformation and processing. The tests verify various aspects of style parsing including JavaScript and TypeScript support, chunking, font-face handling, and CSS variable processing.

Test Coverage Overview

The test suite provides comprehensive coverage of the uVue style parser’s core functionality.

Basic CSS parsing in both JavaScript and TypeScript contexts
Chunked style processing with different configuration options
Font-face declaration handling
CSS variable and calculation support
Environment variable processing

Implementation Analysis

The testing approach employs Jest’s snapshot testing methodology to verify style transformations. The implementation uses async/await patterns for parsing operations and validates multiple configuration scenarios including map generation, TypeScript support, and chunking options.

Snapshot-based assertion strategy
Asynchronous test execution
Configuration permutation testing

Technical Details

Testing Framework: Jest
Language: TypeScript
Key Libraries: uni-nvue-styler parser
Test Utilities: Jest snapshot matching
Configuration Options: map, ts, chunk, mapOf, trim

Best Practices Demonstrated

The test suite exemplifies several testing best practices in modern frontend development.

Isolated test cases for specific functionality
Comprehensive edge case coverage
Consistent test structure and organization
Proper async/await usage
Effective use of snapshot testing for style output validation

dcloudio/uni-app

packages/uni-nvue-styler/__tests__/uvue.spec.ts

            
import { parse } from '../src/index'
describe('uvue-style', () => {
  test('js', async () => {
    const { code } = await parse(
      `
        .content {
            display: flex;
        } 
        .content .logo {
            width: 200rpx;
            height: 200rpx;
        }
        .text-area, .title {
            font-size: 36rpx;
        }
        `,
      { type: 'uvue', map: true }
    )
    expect(code).toMatchSnapshot()
  })
  test('ts', async () => {
    const { code } = await parse(
      `
        .content {
            display: flex;
        } 
        .content .logo {
            width: 200rpx;
            height: 200rpx;
        }
        .text-area, .title {
            font-size: 36rpx;
        }
        `,
      { type: 'uvue', map: true, ts: true }
    )
    expect(code).toMatchSnapshot()
  })
  test('chunk', async () => {
    const { code } = await parse(
      `
        .content {
            display: flex;
        } 
        .content .logo {
            width: 200rpx;
            height: 200rpx;
        }
        .text-area, .title {
            font-size: 36rpx;
        }
        `,
      { type: 'uvue', map: true, ts: true, chunk: 2 }
    )
    expect(code).toMatchSnapshot()
  })
  test('chunk with mapOf', async () => {
    const { code } = await parse(
      `
        .content {
            display: flex;
        } 
        .content .logo {
            width: 200rpx;
            height: 200rpx;
        }
        .text-area, .title {
            font-size: 36rpx;
        }
        `,
      { type: 'uvue', mapOf: 'utsMapOf', chunk: 2 }
    )
    expect(code).toMatchSnapshot()
  })
  test('chunk font-face', async () => {
    const { code } = await parse(
      `
        @font-face { 
          font-family: "font-family-name-1"; 
          src: url("font file url 1-1") format("truetype");
        }
        .content {
            display: flex;
        } 
        .content .logo {
            width: 200rpx;
            height: 200rpx;
        }
        .text-area, .title {
            font-size: 36rpx;
            transition-property: margin-top; 
            transition-duration: 300ms;
        }
        `,
      { type: 'uvue', map: true, ts: true, chunk: 2 }
    )
    expect(code).toMatchSnapshot()
  })
  test('chunk font-face with mapOf', async () => {
    const { code } = await parse(
      `
        @font-face { 
          font-family: "font-family-name-1"; 
          src: url("font file url 1-1") format("truetype");
        }
        .content {
            display: flex;
        } 
        .content .logo {
            width: 200rpx;
            height: 200rpx;
        }
        .text-area, .title {
            font-size: 36rpx;
            transition-property: margin-top; 
            transition-duration: 300ms;
        }
        `,
      { type: 'uvue', mapOf: 'utsMapOf', chunk: 2 }
    )
    expect(code).toMatchSnapshot()
  })
  test('chunk font-face with mapOf and trim', async () => {
    const { code } = await parse(
      `
        @font-face { 
          font-family: "font-family-name-1"; 
          src: url("font file url 1-1") format("truetype");
        }
        .content {
            display: flex;
        } 
        .content .logo {
            width: 200rpx;
            height: 200rpx;
        }
        .text-area, .title {
            font-size: 36rpx;
            transition-property: margin-top; 
            transition-duration: 300ms;
        }
        `,
      { type: 'uvue', mapOf: 'utsMapOf', chunk: 2, trim: true }
    )
    expect(code).toMatchSnapshot()
  })
  test('css var', async () => {
    const { code } = await parse(
      `
        .content {
            top: var(--window-top);
            bottom: var(--window-bottom);
            height: var(--status-bar-height);
        }
        `,
      { type: 'uvue', map: true, ts: true }
    )
    expect(code).toMatchSnapshot()
  })
  test('css calc', async () => {
    const { code, messages } = await parse(
      `
        .content {
            top: calc(var(--window-top) + 10px);
            bottom: calc(10px - var(--window-bottom));
            height: calc(var(--status-bar-height) * 2);
        }
        `,
      { type: 'uvue', map: true, ts: true }
    )
    expect(messages).toHaveLength(0)
    expect(code).toMatchSnapshot()
  })

  test('support env', async () => {
    const {
      code,
      // messages
    } = await parse(
      `.top {
    padding-top: env(safe-area-inset-top, 20px);
    padding-left: env(
      safe-area-inset-top,
      20px
    );
  }`,
      { type: 'uvue', map: true, ts: true }
    )
    expect(code).toMatchSnapshot()
  })
})