Back to Repositories

Testing DOM Selector Query Implementation in uni-app

This test suite validates the DOM selector query functionality in uni-app’s platform-specific implementation. It ensures proper method definitions and NodesRef interface compliance for DOM element selection and manipulation.

Test Coverage Overview

The test suite provides comprehensive coverage of the createSelectorQuery API implementation.

Key areas tested include:

Core selector query method availability
NodesRef interface method implementations
Component reference handling
DOM query execution chain

Implementation Analysis

The testing approach utilizes Jest’s mocking capabilities to isolate the DOM query functionality from the uni-core dependencies. The tests validate both the presence and type correctness of essential query methods through function type checking and interface verification.

Implementation patterns focus on:

Method signature verification
Interface compliance testing
Mock integration for page context

Technical Details

Testing infrastructure includes:

Jest testing framework
TypeScript type checking
Mock implementations for @dcloudio/uni-core
DOM query interface validation
Function type assertions

Best Practices Demonstrated

The test suite exemplifies high-quality testing practices through focused test cases and clear structural organization.

Notable practices include:

Isolated component testing
Comprehensive API surface validation
Clear test case separation
Effective mock implementation
Type-safe testing approaches

dcloudio/uni-app

packages/uni-app-plus/__tests__/x/api/dom/createSelectorQuery.spec.ts

            
import { createSelectorQuery } from '../../../../src/x/api/dom/createSelectorQuery'

// import { getCurrentPage } from '@dcloudio/uni-core'

jest.mock('@dcloudio/uni-core', () => {
  return {
    getCurrentPage: jest.fn(() => {
      return {
        vm: null,
      }
    }),
  }
})

describe('createSelectorQuery', () => {
  it('定义包含的方法', () => {
    const query = createSelectorQuery()
    expect(typeof query.in).toBe('function')
    expect(typeof query.select).toBe('function')
    expect(typeof query.selectAll).toBe('function')
    expect(typeof query.selectViewport).toBe('function')
    expect(typeof query.exec).toBe('function')
  })
  it('NodesRef 定义的方法', () => {
    const query = createSelectorQuery()
    const ref = query.select('.test')
    expect(typeof ref.boundingClientRect).toBe('function')
    expect(typeof ref.scrollOffset).toBe('function')
    expect(typeof ref.fields).toBe('function')
    expect(typeof ref.context).toBe('function')
    expect(typeof ref.node).toBe('function')
  })
})