Back to Repositories

Testing CSS Scoped Attribute Implementation in uni-app

This test suite validates the CSS scoped functionality in uni-app, specifically focusing on the addScoped utility function. The tests ensure proper handling of style tags and scoped attribute addition across different scenarios.

Test Coverage Overview

The test suite provides comprehensive coverage of the addScoped utility function.

Key areas tested include:

Basic style tag scoping
Style tags with language attributes (scss)
Pre-existing scoped attributes
Multiple style tag handling

Integration points focus on the CSS module system and style encapsulation mechanisms.

Implementation Analysis

The testing approach utilizes Jest’s expect assertions to verify string transformations of style tags. The implementation follows a pattern of input/output validation using toBe() matchers to ensure exact string matching.

The tests leverage TypeScript’s type system and Jest’s describe/test structure for organized test cases.

Technical Details

Testing tools and configuration:

Jest as the primary testing framework
TypeScript for type-safe testing
CSS Scoped module from uni-cli-shared package
String manipulation for style tag transformations

Best Practices Demonstrated

The test suite demonstrates several testing best practices:

Isolated test cases for specific functionality
Clear input/output expectations
Comprehensive edge case coverage
Consistent test structure and organization
Focused scope per test case

dcloudio/uni-app

packages/uni-cli-shared/__tests__/cssScoped.spec.ts

            
import { addScoped } from '../src/vite/plugins/cssScoped'
describe('css scoped', () => {
  test('add scoped', () => {
    expect(addScoped(`<style></style>`)).toBe(`<style scoped></style>`)
    expect(addScoped(`<style lang="scss"></style>`)).toBe(
      `<style lang="scss" scoped></style>`
    )
    expect(addScoped(`<style  scoped></style>`)).toBe(`<style  scoped></style>`)
    expect(
      addScoped(`<style></style><style scoped></style><style  scoped></style>`)
    ).toBe(
      `<style scoped></style><style scoped></style><style  scoped></style>`
    )
  })
})