File size: 4,161 Bytes
bc20498 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 |
/// <reference types="cypress" />
import { Type } from '@angular/core';
import { TestModuleMetadata, ComponentFixture, TestComponentRenderer } from '@angular/core/testing';
/**
* Additional module configurations needed while mounting the component, like
* providers, declarations, imports and even component @Inputs()
*
*
* @interface MountConfig
* @see https://angular.io/api/core/testing/TestModuleMetadata
*/
interface MountConfig<T> extends TestModuleMetadata {
/**
* @memberof MountConfig
* @description flag to automatically create a cy.spy() for every component @Output() property
* @example
* export class ButtonComponent {
* @Output clicked = new EventEmitter()
* }
*
* cy.mount(ButtonComponent, { autoSpyOutputs: true })
* cy.get('@clickedSpy).should('have.been.called')
*/
autoSpyOutputs?: boolean;
/**
* @memberof MountConfig
* @description flag defaulted to true to automatically detect changes in your components
*/
autoDetectChanges?: boolean;
/**
* @memberof MountConfig
* @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')
* })
*/
componentProperties?: Partial<{
[P in keyof T]: T[P];
}>;
}
/**
* Type that the `mount` function returns
* @type MountResponse<T>
*/
declare type MountResponse<T> = {
/**
* Fixture for debugging and testing a component.
*
* @memberof MountResponse
* @see https://angular.io/api/core/testing/ComponentFixture
*/
fixture: ComponentFixture<T>;
/**
* The instance of the root component class
*
* @memberof MountResponse
* @see https://angular.io/api/core/testing/ComponentFixture#componentInstance
*/
component: T;
};
declare class CypressTestComponentRenderer extends TestComponentRenderer {
insertRootElement(rootElId: string): void;
removeAllRootElements(): void;
}
/**
* Mounts an Angular component inside Cypress browser
*
* @param component Angular component being mounted or its template
* @param config configuration used to configure the TestBed
* @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],
* })
* })
*
* @see {@link https://on.cypress.io/mounting-angular} for more details.
*
* @returns A component and component fixture
*/
declare function mount<T>(component: Type<T> | string, config?: MountConfig<T>): Cypress.Chainable<MountResponse<T>>;
/**
* Creates a new Event Emitter and then spies on it's `emit` method
*
* @param {string} alias name you want to use for your cy.spy() alias
* @returns EventEmitter<T>
* @example
* import { StepperComponent } from './stepper.component'
* import { mount, createOutputSpy } from '@cypress/angular'
*
* it('Has spy', () => {
* mount(StepperComponent, { componentProperties: { change: createOutputSpy('changeSpy') } })
* cy.get('[data-cy=increment]').click()
* cy.get('@changeSpy').should('have.been.called')
* })
*/
declare const createOutputSpy: <T>(alias: string) => any;
export { CypressTestComponentRenderer, MountConfig, MountResponse, createOutputSpy, mount };
|