Skip to main content
Cypress应用

Angular API

方法​

mount​

import { mount } from 'cypress/angular'
描述在Cypress浏览器中挂载Angular组件
签名

mount<T>(component: Type<T> | string, config?: MountConfig<T>): Cypress.Chainable<MountResponse<T>>

返回值Cypress.Chainable<MountResponse>
mount 参数
名称类型描述
componentType<T> | string要挂载的Angular组件或其模板
configMountConfig<T> (可选)

示例​

import { mount } from '@cypress/angular'
import { StepperComponent } from './stepper.component'
import { MyService } from 'services/my.service'
import { SharedModule } from 'shared/shared.module'
it('挂载组件', () => {
  mount(StepperComponent, {
    providers: [MyService],
    imports: [SharedModule],
  })
  cy.get('[data-cy=increment]').click()
  cy.get('[data-cy=counter]').should('have.text', '1')
})

// 或

it('使用模板挂载', () => {
  mount('<app-stepper></app-stepper>', {
    declarations: [StepperComponent],
  })
})

createOutputSpy​

import { createOutputSpy } from 'cypress/angular'
描述创建一个新的事件发射器并监听其emit方法
签名(alias: string) => any
返回值EventEmitter<T>
createOutputSpy 参数
名称类型描述
aliasstring要为cy.spy()别名使用的名称

示例​

import { StepperComponent } from './stepper.component'
import { mount, createOutputSpy } from '@cypress/angular'

it('包含监听器', () => {
  mount(StepperComponent, { change: createOutputSpy('changeSpy') })
  cy.get('[data-cy=increment]').click()
  cy.get('@changeSpy').should('have.been.called')
})

接口​

MountConfig​

挂载组件时需要的额外模块配置，如providers、declarations、imports甚至组件@Inputs()

成员
名称类型描述
autoSpyOutputsboolean (可选)

自动为每个组件@Output()属性创建cy.spy()的标记

autoDetectChangesboolean (可选)

默认为true的标记，用于自动检测组件中的变化

componentProperties

Partial<{[P in keyof T]: T[P] extends InputSignal<infer V> ? InputSignal<V> | WritableSignal<V> | V : T[P]}> (可选)

仅当在组件测试中使用信号时才需要应用基于信号的推断类型

MountResponse​

mount函数返回的类型

成员
名称类型描述
fixtureComponentFixture<T>用于调试和测试组件的Fixture
componentT根组件类的实例

参见 https://angular.io/api/core/testing/ComponentFixture#componentInstance

目录