Back to Repositories

Testing UniElement CSS Style Implementation in dcloudio/uni-app

This test suite validates the implementation of UniElement and CSS style manipulation in the uni-mp-vue package. It focuses on testing CSS property handling and style declaration functionality for the uni-app framework.

Test Coverage Overview

The test suite provides comprehensive coverage of CSS style manipulation functionality in UniElement.

Tests CSS property setting and retrieval via different methods
Validates cssText generation and formatting
Covers both standard and vendor-prefixed CSS properties
Tests hyphenation of camelCase CSS property names

Implementation Analysis

The testing approach utilizes Jest’s describe/it pattern for structured unit testing. The implementation focuses on two main areas:

UniCSSStyleDeclaration class functionality testing through property manipulation
CSS property name transformation testing with hyphenateCssProperty function
Verification of both direct property access and method-based property manipulation

Technical Details

Testing Framework: Jest
Test Type: Unit Tests
Key Classes: UniElement, UniCSSStyleDeclaration
Test Utilities: expect assertions
File Location: packages/uni-mp-vue/__tests__/element.spec.ts

Best Practices Demonstrated

The test suite demonstrates several testing best practices for DOM-like implementations.

Comprehensive property access testing through multiple interfaces
Systematic validation of transformation functions
Clear test case organization and progression
Thorough verification of CSS property format handling

dcloudio/uni-app

packages/uni-mp-vue/__tests__/element.spec.ts

            
import { hyphenateCssProperty } from '../src/dom/UniCSSStyleDeclaration'
import { UniElement } from '../src/dom/UniElement'

describe('uni-mp-vue: UniElement', () => {
  it('UniCSSStyleDeclaration', () => {
    const element = new UniElement()
    element.style['color'] = 'red'
    expect(element.style['color']).toBe('red')
    expect(element.style.getPropertyValue('color')).toBe('red')
    expect(element.style.cssText).toBe('color:red;')
    element.style.setProperty('color', 'blue')
    expect(element.style['color']).toBe('blue')
    expect(element.style.getPropertyValue('color')).toBe('blue')
    expect(element.style.cssText).toBe('color:blue;')
    element.style.setProperty('margin-top', '10px')
    expect(element.style['margin-top']).toBe('10px')
    expect(element.style.getPropertyValue('margin-top')).toBe('10px')
    expect(element.style.cssText).toBe('color:blue;margin-top:10px;')
    element.style.setProperty('marginBottom', '10px')
    expect(element.style['marginBottom']).toBe('10px')
    expect(element.style.getPropertyValue('marginBottom')).toBe('10px')
    expect(element.style['margin-bottom']).toBe('10px')
    expect(element.style.getPropertyValue('margin-bottom')).toBe('10px')
    expect(element.style.cssText).toBe(
      'color:blue;margin-top:10px;margin-bottom:10px;'
    )
  })
  it('hyphenateCssProperty', () => {
    expect(hyphenateCssProperty('WebkitTransform')).toBe('-webkit-transform')
    expect(hyphenateCssProperty('WebkitTransitionOpacity')).toBe(
      '-webkit-transition-opacity'
    )
    expect(hyphenateCssProperty('marginTop')).toBe('margin-top')
  })
})