{ "doc": { "id": "app/component-testing/angular/examples", "title": "Angular Examples", "description": "Learn how to mount an Angular component, pass data to an Angular component, test multiple scenarios of Angular components, test Angular signals, and customize `cy.mount()` for Angular.", "section": "app", "source_path": "/llm/markdown/app/component-testing/angular/examples.md", "version": "fa8f60eba6ec9a949b75fe9f9f5f6591719cd01f", "updated_at": "2026-05-05T21:21:10.048Z", "headings": [ { "id": "app/component-testing/angular/examples#angular-examples", "text": "Angular Examples", "level": 1 }, { "id": "app/component-testing/angular/examples#what-youll-learn", "text": "What you'll learn", "level": 5 }, { "id": "app/component-testing/angular/examples#mounting-components", "text": "Mounting Components", "level": 2 }, { "id": "app/component-testing/angular/examples#using-cy-mount", "text": "Using cy.mount()", "level": 3 }, { "id": "app/component-testing/angular/examples#passing-data-to-a-component", "text": "Passing Data to a Component", "level": 3 }, { "id": "app/component-testing/angular/examples#testing-event-handlers", "text": "Testing Event Handlers", "level": 3 }, { "id": "app/component-testing/angular/examples#imports-declarations-providers", "text": "Imports/Declarations/Providers", "level": 3 }, { "id": "app/component-testing/angular/examples#using-standalone", "text": "Using Standalone", "level": 3 }, { "id": "app/component-testing/angular/examples#using-angular-template-syntax", "text": "Using Angular Template Syntax", "level": 3 }, { "id": "app/component-testing/angular/examples#accessing-the-component-instance", "text": "Accessing the Component Instance", "level": 3 }, { "id": "app/component-testing/angular/examples#working-with-legacy-input-decorators", "text": "Working with Legacy @Input() Decorators", "level": 3 }, { "id": "app/component-testing/angular/examples#using-createoutputspy", "text": "Using createOutputSpy()", "level": 3 }, { "id": "app/component-testing/angular/examples#using-autospyoutputs-deprecated", "text": "Using autoSpyOutputs (deprecated)", "level": 3 }, { "id": "app/component-testing/angular/examples#signals", "text": "Signals", "level": 3 }, { "id": "app/component-testing/angular/examples#testing-signals", "text": "Testing Signals", "level": 4 }, { "id": "app/component-testing/angular/examples#inferred-generic-type", "text": "Inferred Generic Type", "level": 5 }, { "id": "app/component-testing/angular/examples#writable-signal", "text": "Writable Signal", "level": 5 }, { "id": "app/component-testing/angular/examples#change-spies", "text": "Change Spies", "level": 5 }, { "id": "app/component-testing/angular/examples#custom-mount-commands", "text": "Custom Mount Commands", "level": 2 }, { "id": "app/component-testing/angular/examples#customizing-cy-mount", "text": "Customizing cy.mount()", "level": 3 }, { "id": "app/component-testing/angular/examples#default-declarations-providers-or-imports", "text": "Default Declarations, Providers, or Imports", "level": 3 }, { "id": "app/component-testing/angular/examples#autospyoutputs-deprecated", "text": "autoSpyOutputs (deprecated)", "level": 3 } ] }, "content": { "type": "root", "children": [ { "type": "heading", "depth": 1, "children": [ { "type": "text", "value": "Angular Examples" } ] }, { "type": "heading", "depth": 5, "children": [ { "type": "text", "value": "What you'll learn" } ] }, { "type": "list", "ordered": false, "start": null, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "How to mount an Angular component" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "How to pass data to an Angular component" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "How to test multiple scenarios of Angular components" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "How to test Angular signals" } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "How to customize the `cy.mount()` for Angular" } ] } ] } ] }, { "type": "heading", "depth": 2, "children": [ { "type": "text", "value": "Mounting Components" } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": "Using `cy.mount()`" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "To mount a component with `cy.mount()`, import the component and pass it to the method:" } ] }, { "type": "code", "lang": null, "meta": null, "value": "import { StepperComponent } from './stepper.component'it('mounts', () => { cy.mount(StepperComponent)})" }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": "Passing Data to a Component" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "You can pass inputs and outputs to a component by setting " }, { "type": "link", "title": null, "url": "/llm/markdown/app/component-testing/angular/api.md#MountConfig", "children": [ { "type": "text", "value": "componentProperties" } ] }, { "type": "text", "value": " in the options:" } ] }, { "type": "code", "lang": null, "meta": null, "value": "cy.mount(StepperComponent, { componentProperties: { count: 100, },})" }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": "Testing Event Handlers" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Pass a Cypress " }, { "type": "link", "title": null, "url": "/llm/markdown/app/guides/stubs-spies-and-clocks.md#Spies", "children": [ { "type": "text", "value": "spy" } ] }, { "type": "text", "value": " to an event prop and validate it was called:" } ] }, { "type": "code", "lang": null, "meta": null, "value": "it('clicking + fires a change event with the incremented value', () => { cy.mount(StepperComponent, { componentProperties: { change: createOutputSpy('changeSpy'), }, }) cy.get('[data-cy=increment]').click() cy.get('@changeSpy').should('have.been.calledWith', 1)})" }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": "Imports/Declarations/Providers" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "If you need to set up any additional `imports`, `declarations`, or `providers` for your component to mount successfully, you can set them in the options (similar to setting them up in `ngModule` in a app):" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Note: `imports`, `declarations`, and `providers` options do not work with `standalone` components as they are set within the test `ngModule`. This is the default behavior in Angular 19." } ] }, { "type": "code", "lang": null, "meta": null, "value": "cy.mount(ComponentThatFetchesData, { imports: [HttpClientModule], declarations: [ButtonComponent], providers: [DataService],})" }, { "type": "paragraph", "children": [ { "type": "text", "value": "See " }, { "type": "link", "title": null, "url": "/llm/markdown/app/component-testing/angular/examples.md#Default-Declarations-Providers-or-Imports", "children": [ { "type": "text", "value": "Default Declarations, Providers, or Imports" } ] }, { "type": "text", "value": " to set up common options in a custom `cy.mount()` command to avoid having to repeat this boilerplate for each test." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": "Using Standalone" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Not only are " }, { "type": "link", "title": null, "url": "https://angular.io/guide/standalone-components", "children": [ { "type": "text", "value": "Standalone Components" } ] }, { "type": "text", "value": " supported, they are the simplest components to write tests for. Standalone Components provide the Angular compiler with everything it needs to compile through its " }, { "type": "link", "title": null, "url": "https://angular.io/api/core/Component", "children": [ { "type": "text", "value": "`@Component()`" } ] }, { "type": "text", "value": " decorator. This means that in most cases a Standalone Component can be mounted without ever providing any `imports`, `decorators`, or `providers`. Mounting then becomes as simple as:" } ] }, { "type": "code", "lang": null, "meta": null, "value": "cy.mount(MyStandaloneComponent)" }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": "Using Angular Template Syntax" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "The `cy.mount()` method also supports the Angular template syntax when mounting a component. Some developers might prefer this approach to the object based mount style:" } ] }, { "type": "code", "lang": null, "meta": null, "value": "cy.mount(``, { declarations: [StepperComponent],})" }, { "type": "blockquote", "children": [ { "type": "paragraph", "children": [ { "type": "text", "value": "When using template syntax, the component needs to added to the declarations in the options parameter." } ] } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Using with event emitter spy:" } ] }, { "type": "code", "lang": null, "meta": null, "value": "cy.mount('Click me', { declarations: [ButtonComponent] componentProperties: { onClick: createOutputSpy('onClickSpy'), },})cy.get('button').click();cy.get('@onClickSpy').should('have.been.called');" }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": "Accessing the Component Instance" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "There might be times when you might want to access the component instance directly in your tests. To do so, use `.then()`, which enables us to work with the subject that was yielded from the `cy.mount()` command. In this case, mount yields an object that contains the rendered component and the fixture." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "In the below example, we use the component to spy directly on the `change` event emitter." } ] }, { "type": "code", "lang": null, "meta": null, "value": "it('clicking + fires a change event with the incremented value', () => { cy.mount( '', { componentProperties: { change: new EventEmitter() }, declarations: [StepperComponent], } ).then((wrapper) => { console.log({ wrapper }) cy.spy(wrapper.component.change, 'emit').as('changeSpy') return cy.wrap(wrapper).as('angular') }) cy.get(incrementSelector).click() cy.get('@changeSpy').should('have.been.calledWith', 101)})" }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": "Working with Legacy @Input() Decorators" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "With the release of Angular 18, " }, { "type": "link", "title": null, "url": "https://angular.dev/guide/signals", "children": [ { "type": "text", "value": "signals" } ] }, { "type": "text", "value": " became the preferred way to handle data binding. However, legacy components that use `@Input()` and `@Output()` decorators are still supported." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Interacting with legacy `@Input()` decorators is a bit different than working with signals. In order to update the `@Input()` value, you need to use the `componentRef.setInput` method so Angular change detection runs properly. Otherwise, you may see errors." } ] }, { "type": "code", "lang": null, "meta": null, "value": "cy.mount(StepperComponent, { componentProperties: { count: 100 } }) .then(({ fixture }) => { return cy.contains('span', '100').wrap(fixture) }) .then((fixture) => { fixture.componentRef.setInput('count', 110) return cy.contains('span', '110') })" }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": "Using createOutputSpy()" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "To make spying on event emitters easier, there is a utility function called `createOutputSpy()` which can be used to automatically create an `EventEmitter` and setup the spy on it's `.emit()` method. It can be used like the following:" } ] }, { "type": "code", "lang": null, "meta": null, "value": "import { createOutputSpy } from 'cypress/angular'it('clicking + fires a change event with the incremented value', () => { // Arrange cy.mount('', { declarations: [StepperComponent], componentProperties: { change: createOutputSpy('changeSpy'), }, }) cy.get(incrementSelector).click() cy.get('@changeSpy').should('have.been.called')})" }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": "Using autoSpyOutputs (deprecated)" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "The `autoSpyOutputs` flag is deprecated and not supported in `cypress/angular-zoneless` and will be removed in a future version." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "You might find yourself repeatedly creating a `cy.spy()` for each of your component outputs. Because of this, we created an easy mechanism to handle this for you. This feature can be turned on by passing the `autoSpyOutputs` flag into `MountConfig`. After the component has been mounted you can then access each of the generated spies using the `@Output()` property name + `Spy`. So our `change` property can be accessed via its alias of `cy.get('@changeSpy')`" } ] }, { "type": "code", "lang": null, "meta": null, "value": "it('clicking + fires a change event with the incremented value', () => { cy.mount(StepperComponent, { autoSpyOutputs: true, componentProperties: { count: 100, }, }) cy.get(incrementSelector).click() cy.get('@changeSpy').should('have.been.calledWith', 101)})" }, { "type": "paragraph", "children": [ { "type": "text", "value": "The `autoSpyOutput` flag only works when passing in a component to the mount function. It currently does not work with the template syntax." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": "Signals" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "With Cypress 14, signal support is directly included in the `cypress/angular` testing harness." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "For the below examples, we'll be working with a very simple component called `TestComponent`, which looks something like shown below:" } ] }, { "type": "code", "lang": null, "meta": null, "value": "// app/components/test-component.component.tsimport { Component, input, model } from '@angular/core'@Component({ selector: 'test-component', templateUrl: './test-component.component.html', standalone: true,})export class TestComponent { title = input.required() count = model(1)}" }, { "type": "code", "lang": null, "meta": null, "value": "

{{ title() }}

{{ count() }}

" }, { "type": "heading", "depth": 4, "children": [ { "type": "text", "value": "Testing Signals" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "There are two ways to test signals within Cypress Component Testing:" } ] }, { "type": "list", "ordered": true, "start": 1, "spread": false, "children": [ { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "link", "title": null, "url": "#Inferred-Generic-Type", "children": [ { "type": "text", "value": "Inferred Generic Type" } ] } ] } ] }, { "type": "listItem", "spread": false, "checked": null, "children": [ { "type": "paragraph", "children": [ { "type": "link", "title": null, "url": "#Writable-Signal", "children": [ { "type": "text", "value": "Writable Signal" } ] } ] } ] } ] }, { "type": "heading", "depth": 5, "children": [ { "type": "text", "value": "Inferred Generic Type" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "In the example below, the `title` prop being passed into our `TestComponent` is a `string`. A `string` is the generic type of our `input()` signal we defined in our `TestComponent`." } ] }, { "type": "code", "lang": null, "meta": null, "value": "let titleProp = 'Test Component'cy.mount(TestComponent, { componentProperties: { title: titleProp, },})cy.get('[data-cy=\"test-component-title-display\"]').should( 'have.text', 'Test Component')" }, { "type": "paragraph", "children": [ { "type": "text", "value": "Under the hood, Cypress wraps the generic value in a writable `signal()` and merges it into the prop. In other words, this example is really:" } ] }, { "type": "code", "lang": null, "meta": null, "value": "cy.mount(TestComponent, { componentProperties: { title: signal('Test Component'), },})" }, { "type": "paragraph", "children": [ { "type": "text", "value": "This works for any signal. Shown below is an example of testing a `model()` signal with a generic type `number` as seen in our `TestComponent`:" } ] }, { "type": "code", "lang": null, "meta": null, "value": "cy.mount(TestComponent, { componentProperties: { title: 'Test Component', count: 3, },})cy.get('[data-cy=\"test-component-count-display\"]').should('have.text', '3')" }, { "type": "heading", "depth": 5, "children": [ { "type": "text", "value": "Writable Signal" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Inferred generic types work very well for most test cases. However, they don't allow us to update the prop in the component after the prop is passed in. For this use case, we need to use a writable `signal()`." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "This allows us to test our one-way data binding for our `input()` signals." } ] }, { "type": "code", "lang": null, "meta": null, "value": "const myTitlePropAsSignal = signal('Test Component')cy.mount(TestComponent, { componentProperties: { title: myTitlePropAsSignal, },})cy.get('[data-cy=\"test-component-title-display\"]').should( 'have.text', 'Test Component')cy.then(() => { // now set the input() through a signal to update the one-way binding myTitlePropAsSignal.set('FooBar')})cy.get('[data-cy=\"test-component-title-display\"]').should('have.text', 'FooBar')" }, { "type": "paragraph", "children": [ { "type": "text", "value": "And our two-way data binding for our `model()` signals." } ] }, { "type": "code", "lang": null, "meta": null, "value": "let count = signal(5)cy.mount(TestComponent, { componentProperties: { title: 'Test Component', count, },})cy.then(() => { // now set the model() through a signal to update the binding in the component count.set(8)})cy.get('[data-cy=\"test-component-count-display\"]').should('have.text', '8')// some action occurs that changes the count to 9 inside the component, which updates the binding in our testcy.get('[data-cy=\"test-component-count-incr\"]').click()cy.get('[data-cy=\"test-component-count-display\"]').should('have.text', '9')cy.then(() => { expect(count()).to.equal(9)})" }, { "type": "heading", "depth": 5, "children": [ { "type": "text", "value": "Change Spies" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Cypress doesn't propagate changes via spy from `input()` signals." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "For writable signals, such as `model()`s or `signal()`s, Cypress will propagate changes if an output spy is created with the prop's name suffixed with `Change`. In the example below, `countChange` will spy on changes to the `count` signal." } ] }, { "type": "code", "lang": null, "meta": null, "value": "cy.mount(TestComponent, { componentProperties: { title: 'Test Component', count: 4, // @ts-expect-error countChange: createOutputSpy('countChange'), },})// some action occurs that changes the countcy.get('[data-cy=\"test-component-count-incr\"]').click()cy.get('@countChange').should('have.been.called')" }, { "type": "paragraph", "children": [ { "type": "text", "value": "These spies can automatically be created if `autoSpyOutputs: true` is configured. The suffix in this case will be `ChangeSpy`." } ] }, { "type": "heading", "depth": 2, "children": [ { "type": "text", "value": "Custom Mount Commands" } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": "Customizing `cy.mount()`" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "By default, `cy.mount()` is a simple passthrough to `mount()`, however, you can customize `cy.mount()` to fit your needs. For instance, you may find yourself doing repetitive work during mounting. In order to reduce boilerplate you may find it useful to create a custom mount command." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": "Default Declarations, Providers, or Imports" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "If you find yourself registering a bunch of declarations, providers, or imports in your individual tests, we recommend doing them all within a custom `cy.mount()` command. The overhead is usually minimal for all your tests and it helps keep your spec code clean." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Below is a sample that registers several default component declarations while still allowing additional ones to be passed in via the config param. The same pattern can also be applied to providers and module imports." } ] }, { "type": "code", "lang": null, "meta": null, "value": "import { Type } from '@angular/core'import { mount, MountConfig } from 'cypress/angular'import { ButtonComponent } from 'src/app/button/button.component'import { CardComponent } from 'src/app/card/card.component'declare global { namespace Cypress { interface Chainable { mount: typeof customMount } }}const declarations = [ButtonComponent, CardComponent]function customMount(component: string | Type, config?: MountConfig) { if (!config) { config = { declarations } } else { config.declarations = [...(config?.declarations || []), ...declarations] } return mount(component, config)}Cypress.Commands.add('mount', customMount)" }, { "type": "paragraph", "children": [ { "type": "text", "value": "This custom mount command will allow you to skip manually passing in the `ButtonComponent` and `CardComponent` as declarations into each `cy.mount()` call." } ] }, { "type": "heading", "depth": 3, "children": [ { "type": "text", "value": "autoSpyOutputs (deprecated)" } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "The `autoSpyOutputs` flag is deprecated and not supported in `cypress/angular-zoneless` and will be removed in a future version." } ] }, { "type": "paragraph", "children": [ { "type": "text", "value": "Here is an example of defaulting `autoSpyOutputs` for every mounted component:" } ] }, { "type": "code", "lang": null, "meta": null, "value": "declare global { namespace Cypress { interface Chainable { mount: typeof mount } }}Cypress.Commands.add( 'mount', (component: Type | string, config: MountConfig) => { return mount(component, { ...config, autoSpyOutputs: true, }) })" }, { "type": "paragraph", "children": [ { "type": "text", "value": "The `autoSpyOutput` flag only works when passing in a component to the mount function. It currently does not work with the template syntax." } ] } ] }, "token_estimate": 2151 }