Back to Repositories

Testing CSS Property Expansion System in uni-app nvue-styler

This test suite validates the style expansion functionality in uni-app’s nvue styler module, focusing on border and background property parsing. It ensures proper decomposition of shorthand CSS properties into their constituent parts with correct value assignments.

Test Coverage Overview

The test suite provides comprehensive coverage of CSS property expansion scenarios:

Border property expansion with 0-3 parameters
Individual border side properties (left, right, top, bottom)
Background property expansion
Default value handling
Color value parsing

Implementation Analysis

The testing approach utilizes Jest’s describe/it pattern for structured test organization. It implements a custom normalizeStyle function to process CSS declarations and verify expanded property outputs. The tests systematically validate property expansion across multiple parameter combinations and edge cases.

Technical Details

Testing infrastructure includes:

Jest test framework
TypeScript for type safety
PostCSS Declaration types
Custom helper functions for declaration creation
Expansion utility from uni-nvue-styler

Best Practices Demonstrated

The test suite exemplifies several testing best practices:

Systematic parameter variation testing
Comprehensive edge case coverage
Clear test case organization
Consistent assertion patterns
Type-safe testing approaches

dcloudio/uni-app

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

            
import { expand } from '../src/expand/index'
// import { expand } from '../dist/uni-nvue-styler.es'
import type { Declaration } from 'postcss'

const processDeclaration = expand({ type: 'uvue' }).Declaration as (
  decl: Declaration
) => void

function createDeclaration(prop: string, value: unknown) {
  const newValue = value + ''
  if (newValue.includes('!important')) {
    return {
      prop,
      value: newValue.replace(/\s*!important/, ''),
      important: true,
    }
  }
  return {
    prop,
    value: newValue,
    important: false,
  }
}

function normalizeStyle(name: string, value: unknown) {
  const decl = {
    replaceWith(newProps: Declaration[]) {
      props = newProps
    },

    ...createDeclaration(name, value),
  } as Declaration

  let props = [decl]
  processDeclaration(decl)
  return props
}

describe('test esm expand', () => {
  test('basic', () => {
    const val = normalizeStyle('border', '1px solid red')
    expect(val).toEqual([
      {
        prop: 'border-top-width',
        raws: undefined,
        source: undefined,
        type: 'decl',
        value: '1px',
      },
      {
        prop: 'border-right-width',
        raws: undefined,
        source: undefined,
        type: 'decl',
        value: '1px',
      },
      {
        prop: 'border-bottom-width',
        raws: undefined,
        source: undefined,
        type: 'decl',
        value: '1px',
      },
      {
        prop: 'border-left-width',
        raws: undefined,
        source: undefined,
        type: 'decl',
        value: '1px',
      },
      {
        prop: 'border-top-style',
        raws: undefined,
        source: undefined,
        type: 'decl',
        value: 'solid',
      },
      {
        prop: 'border-right-style',
        raws: undefined,
        source: undefined,
        type: 'decl',
        value: 'solid',
      },
      {
        prop: 'border-bottom-style',
        raws: undefined,
        source: undefined,
        type: 'decl',
        value: 'solid',
      },
      {
        prop: 'border-left-style',
        raws: undefined,
        source: undefined,
        type: 'decl',
        value: 'solid',
      },
      {
        prop: 'border-top-color',
        raws: undefined,
        source: undefined,
        type: 'decl',
        value: 'red',
      },
      {
        prop: 'border-right-color',
        raws: undefined,
        source: undefined,
        type: 'decl',
        value: 'red',
      },
      {
        prop: 'border-bottom-color',
        raws: undefined,
        source: undefined,
        type: 'decl',
        value: 'red',
      },
      {
        prop: 'border-left-color',
        raws: undefined,
        source: undefined,
        type: 'decl',
        value: 'red',
      },
    ])
  })
})

const props = ['border-left', 'border-right', 'border-top', 'border-bottom']
const expandStyle = normalizeStyle

describe('expandStyle border', () => {
  it('test border 0 param', () => {
    props.forEach((prop) => {
      let result = expandStyle(prop, '')
      expect(result).toEqual([
        {
          prop: prop + '-width',
          raws: undefined,
          source: undefined,
          type: 'decl',
          value: 'medium',
        },
        {
          prop: prop + '-style',
          raws: undefined,
          source: undefined,
          type: 'decl',
          value: 'none',
        },
        {
          prop: prop + '-color',
          raws: undefined,
          source: undefined,
          type: 'decl',
          value: '#000000',
        },
      ])
    })
  })
  it('test border 1 param', () => {
    props.forEach((prop) => {
      let result = expandStyle(prop, '1px')
      expect(result).toEqual([
        {
          prop: prop + '-width',
          raws: undefined,
          source: undefined,
          type: 'decl',
          value: '1px',
        },
        {
          prop: prop + '-style',
          raws: undefined,
          source: undefined,
          type: 'decl',
          value: 'none',
        },
        {
          prop: prop + '-color',
          raws: undefined,
          source: undefined,
          type: 'decl',
          value: '#000000',
        },
      ])
      result = expandStyle(prop, 'solid')
      expect(result).toEqual([
        {
          prop: prop + '-width',
          raws: undefined,
          source: undefined,
          type: 'decl',
          value: 'medium', //'1px',
        },
        {
          prop: prop + '-style',
          raws: undefined,
          source: undefined,
          type: 'decl',
          value: 'solid',
        },
        {
          prop: prop + '-color',
          raws: undefined,
          source: undefined,
          type: 'decl',
          value: '#000000',
        },
      ])
      result = expandStyle(prop, 'red')
      expect(result).toEqual([
        {
          prop: prop + '-width',
          raws: undefined,
          source: undefined,
          type: 'decl',
          value: 'medium',
        },
        {
          prop: prop + '-style',
          raws: undefined,
          source: undefined,
          type: 'decl',
          value: 'none',
        },
        {
          prop: prop + '-color',
          raws: undefined,
          source: undefined,
          type: 'decl',
          value: 'red',
        },
      ])
    })
  })
  it('test border 2 params', () => {
    props.forEach((prop) => {
      let result = expandStyle(prop, '1px solid')
      expect(result).toEqual([
        {
          prop: prop + '-width',
          raws: undefined,
          source: undefined,
          type: 'decl',
          value: '1px',
        },
        {
          prop: prop + '-style',
          raws: undefined,
          source: undefined,
          type: 'decl',
          value: 'solid',
        },
        {
          prop: prop + '-color',
          raws: undefined,
          source: undefined,
          type: 'decl',
          value: '#000000',
        },
      ])
      result = expandStyle(prop, '1px red')
      expect(result).toEqual([
        {
          prop: prop + '-width',
          raws: undefined,
          source: undefined,
          type: 'decl',
          value: '1px',
        },
        {
          prop: prop + '-style',
          raws: undefined,
          source: undefined,
          type: 'decl',
          value: 'none',
        },
        {
          prop: prop + '-color',
          raws: undefined,
          source: undefined,
          type: 'decl',
          value: 'red',
        },
      ])
      result = expandStyle(prop, 'solid red')
      expect(result).toEqual([
        {
          prop: prop + '-width',
          raws: undefined,
          source: undefined,
          type: 'decl',
          value: 'medium',
        },
        {
          prop: prop + '-style',
          raws: undefined,
          source: undefined,
          type: 'decl',
          value: 'solid',
        },
        {
          prop: prop + '-color',
          raws: undefined,
          source: undefined,
          type: 'decl',
          value: 'red',
        },
      ])
    })
  })

  it('test border 3 params', () => {
    props.forEach((prop) => {
      let result = expandStyle(prop, '1px solid red')
      expect(result).toEqual([
        {
          prop: prop + '-width',
          raws: undefined,
          source: undefined,
          type: 'decl',
          value: '1px',
        },
        {
          prop: prop + '-style',
          raws: undefined,
          source: undefined,
          type: 'decl',
          value: 'solid',
        },
        {
          prop: prop + '-color',
          raws: undefined,
          source: undefined,
          type: 'decl',
          value: 'red',
        },
      ])

      result = expandStyle(prop, 'medium solid red')
      // normal
      expect(result).toEqual([
        {
          prop: prop + '-width',
          raws: undefined,
          source: undefined,
          type: 'decl',
          value: 'medium',
        },
        {
          prop: prop + '-style',
          raws: undefined,
          source: undefined,
          type: 'decl',
          value: 'solid',
        },
        {
          prop: prop + '-color',
          raws: undefined,
          source: undefined,
          type: 'decl',
          value: 'red',
        },
      ])
    })
  })
})

describe('expand background', () => {
  it('test background 0 param', () => {
    let result = expandStyle('background', '')
    expect(result).toEqual([
      {
        prop: 'background-image',
        raws: undefined,
        source: undefined,
        type: 'decl',
        value: 'none',
      },
      {
        prop: 'background-color',
        raws: undefined,
        source: undefined,
        type: 'decl',
        value: 'transparent',
      },
    ])
  })
  it('test background 1 param', () => {
    let result = expandStyle('background', 'red')
    expect(result).toEqual([
      {
        prop: 'background-image',
        raws: undefined,
        source: undefined,
        type: 'decl',
        value: 'none',
      },
      {
        prop: 'background-color',
        raws: undefined,
        source: undefined,
        type: 'decl',
        value: 'red',
      },
    ])

    result = expandStyle(
      'background',
      'linear-gradient(to bottom,rgba(255, 255, 255, 0.95),rgba(255, 255, 255, 0.6))'
    )

    expect(result).toEqual([
      {
        prop: 'background-image',
        raws: undefined,
        source: undefined,
        type: 'decl',
        value:
          'linear-gradient(to bottom,rgba(255, 255, 255, 0.95),rgba(255, 255, 255, 0.6))',
      },
      {
        prop: 'background-color',
        raws: undefined,
        source: undefined,
        type: 'decl',
        value: 'transparent',
      },
    ])
  })
})