Back to Repositories

Testing SFC Source Import Detection in uni-app Framework

This test suite validates the functionality of Single File Component (SFC) source imports in the uni-app framework. It specifically tests the isSrcImport and isSrcImportVue utility functions that check for external source references in Vue template, script, and style tags.

Test Coverage Overview

The test suite provides comprehensive coverage of source import detection in Vue SFC files.

Key areas tested include:

Template source imports with .html and .uvue extensions
Script source imports with .uts and .vue extensions
Style source imports with .css extension
Various quotation styles (single and double quotes)
Complex scenarios with multiple tags and lang attributes

Implementation Analysis

The testing approach uses Jest’s expect assertions to verify the behavior of two main utility functions. The implementation follows a systematic pattern of testing different source import scenarios, including both positive and negative cases.

The tests leverage Jest’s describe/test structure and utilize toBe matchers to verify boolean return values, demonstrating thorough validation of the source import detection logic.

Technical Details

Testing tools and configuration:

Jest as the primary testing framework
TypeScript for type-safe test implementation
Import statements showing module dependency structure
Focused unit tests for specific utility functions
String-based input testing for HTML-like content

Best Practices Demonstrated

The test suite exemplifies several testing best practices for Vue component utilities.

Notable practices include:

Isolation of test cases for specific functionality
Comprehensive edge case coverage
Clear test case organization
Consistent testing patterns
Readable test descriptions

dcloudio/uni-app

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

            
import { isSrcImport, isSrcImportVue } from '../src/vite/plugins/sfc'

describe('sfc', () => {
  test(`isSrcImport`, () => {
    expect(isSrcImport(`<template src="./template.html"></template>`)).toBe(
      true
    )
    expect(isSrcImport(`<script src="./template.uts"></script>`)).toBe(true)
    expect(isSrcImport(`<style src="./template.css"></style>`)).toBe(true)

    expect(isSrcImport(`<template src='./template.uvue'></template>`)).toBe(
      true
    )
    expect(isSrcImport(`<script src='./template.uts'></script>`)).toBe(true)
    expect(isSrcImport(`<style src='./template.css'></style>`)).toBe(true)

    expect(isSrcImport(`<template></template>`)).toBe(false)
    expect(
      isSrcImport(`<template></template><script src="./template.vue"></script>`)
    ).toBe(true)

    expect(
      isSrcImport(`<script lang="uts" src='./template.uvue'></script>`)
    ).toBe(true)

    expect(
      isSrcImport(`<style lang="scss" scoped src='./template.uvue'></style>`)
    ).toBe(true)
  })
  test(`isSrcImportVue`, () => {
    expect(isSrcImportVue(`<template src="./template.uvue"></template>`)).toBe(
      true
    )
    expect(isSrcImportVue(`<script src="./template.uvue"></script>`)).toBe(true)
    expect(isSrcImportVue(`<style src="./template.uvue"></style>`)).toBe(true)

    expect(isSrcImportVue(`<template src='./template.uvue'></template>`)).toBe(
      true
    )
    expect(isSrcImportVue(`<script src='./template.uvue'></script>`)).toBe(true)
    expect(isSrcImportVue(`<style src='./template.uvue'></style>`)).toBe(true)

    expect(isSrcImportVue(`<template></template>`)).toBe(false)
    expect(
      isSrcImportVue(
        `<template></template><script src="./template.vue"></script>`
      )
    ).toBe(true)

    expect(
      isSrcImportVue(`<script lang="uts" src='./template.uvue'></script>`)
    ).toBe(true)

    expect(
      isSrcImportVue(`<style lang="scss" scoped src='./template.uvue'></style>`)
    ).toBe(true)
  })
})