Angular API

Methods

mount

import { mount } from 'cypress/angular'
Description Mounts an Angular component inside Cypress browser
Signature mount<T>(component: Type<T> | string, config?: MountConfig<T>): Cypress.Chainable<MountResponse<T>>
Returns Cypress.Chainable<MountResponse>
mount Parameters
Name Type Description
component Type | string Angular component being mounted or its template
config MountConfig<T> (optional)

Example

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

// or

it('mounts with template', () => {
  mount('<app-stepper></app-stepper>', {
    declarations: [StepperComponent],
  })
})

createOutputSpy

import { createOutputSpy } from 'cypress/angular'
Description Creates a new Event Emitter and then spies on it's `emit` method
Signature (alias: string) => any
Returns EventEmitter<T>
createOutputSpy parameters
Name Type Description
alias string alias name you want to use for your cy.spy() alias

Example

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

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

Interfaces

MountConfig

Additional module configurations needed while mounting the component, like providers, declarations, imports and even component @Inputs()

members
Name Type Description
autoSpyOutputs boolean (optional) flag to automatically create a cy.spy() for every component @Output() property
autoDetectChanges boolean (optional) flag defaulted to true to automatically detect changes in your components
componentProperties Partial<{[P in keyof T]: T[P];}> (optional)

MountResponse

Type that the mount function returns

members
Name Type Description
fixture ComponentFixture<T> Fixture for debugging and testing a component.
component T The instance of the root component class

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