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>>
Generic Param T The component type
Returns Cypress.Chainable<MountResponse>

Parameters

component
Description Angular component being mounted or its template
Type Type | string
config
Description configuration used to configure the TestBed
Type MountConfig<T> (optional)
Default undefined

Example

import { HelloWorldComponent } from 'hello-world/hello-world.component'
import { MyService } from 'services/my.service'
import { SharedModule } from 'shared/shared.module'
import { mount } from '@cypress/angular'
it('can mount', () => {
  mount(HelloWorldComponent, {
    providers: [MyService],
    imports: [SharedModule],
  })
  cy.get('h1').contains('Hello World')
})

or

it('can mount with template', () => {
  mount('<app-hello-world></app-hello-world>', {
    declarations: [HelloWorldComponent],
    providers: [MyService],
    imports: [SharedModule],
  })
})

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>

Parameters

alias
Description name you want to use for your cy.spy() alias
Type string

Interfaces

MountConfig

import { MountConfig } from 'cypress/angular'
Description Additional module configurations needed while mounting the component, like providers, declarations, imports and even component @Inputs()
Generic Param T The component type
Extends TestModuleMetadata

Properties

autoSpyOutputs
Description flag to automatically create a cy.spy() for every component @Output() property
Type boolean (optional)
Default undefined

Example:

export class ButtonComponent {
  @Output clicked = new EventEmitter()
}

cy.mount(ButtonComponent, { autoSpyOutputs: true })
cy.get('@clickedSpy).should('have.been.called')
autoDetectChanges
Description flag defaulted to true to automatically detect changes in your components
Type boolean (optional)
Default true
componentProperties
Description Inputs and Outputs to pass into the component
Type Partial<{[P in keyof T]: T[P];}> (optional)
Default undefined

Example:

import { ButtonComponent } from 'button/button.component'
it('renders a button with Save text', () => {
  cy.mount(ButtonComponent, { componentProperties: { text: 'Save' }})
  cy.get('button').contains('Save')
})

it('renders a button with a cy.spy() replacing EventEmitter', () => {
  cy.mount(ButtonComponent, {
    componentProperties: {
      clicked: cy.spy().as('mySpy)
    }
  })
  cy.get('button').click()
  cy.get('@mySpy').should('have.been.called')
})

MountResponse

import { MountResponse } from 'cypress/angular'
Description Type that the `mount` function returns
Generic Param T The component type

Properties

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

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