Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 13 additions & 4 deletions docs/app/component-testing/angular/api.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,11 @@ sidebar_label: API

### mount

```js
// for Angular 20 and 21 using zoneless configuration
import { mount } from 'cypress/angular-zoneless'
```

```js
import { mount } from 'cypress/angular'
```
Expand Down Expand Up @@ -142,18 +147,22 @@ providers, declarations, imports and even component @Inputs()
<td>Description</td>
</thead>
<tr>
<td>autoSpyOutputs</td>
<td>autoSpyOutputs (deprecated)</td>
<td>boolean (optional)</td>
<td>
flag to automatically create a cy.spy() for every component @Output()
property
property. This is deprecated and not supported in
`cypress/angular-zoneless` and will be removed in a future version
</td>
</tr>
<tr>
<td>autoDetectChanges</td>
<td>autoDetectChanges (deprecated)</td>
<td>boolean (optional)</td>
<td>
flag defaulted to true to automatically detect changes in your components
flag defaulted to true to automatically detect changes in your components.
This is deprecated and not supported in `cypress/angular-zoneless` and
will be removed in a future version as it is not needed with zoneless
configuration
</td>
</tr>
<tr>
Expand Down
46 changes: 34 additions & 12 deletions docs/app/component-testing/angular/examples.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ in the options:
cy.mount(StepperComponent, {
componentProperties: {
count: 100,
change: new EventEmitter(),
},
})
```
Expand Down Expand Up @@ -157,6 +156,26 @@ it('clicking + fires a change event with the incremented value', () => {
})
```

### Working with Legacy @Input() Decorators

With the release of Angular 18, [signals](https://angular.dev/guide/signals) became the preferred way to handle data binding.
However, legacy components that use `@Input()` and `@Output()` decorators are still supported.

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.

```ts
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')
})
```

### Using createOutputSpy()

To make spying on event emitters easier, there is a utility function called
Expand All @@ -179,7 +198,13 @@ it('clicking + fires a change event with the incremented value', () => {
})
```

### Using autoSpyOutputs
### Using autoSpyOutputs (deprecated)

:::caution

The `autoSpyOutputs` flag is deprecated and not supported in `cypress/angular-zoneless` and will be removed in a future version.

:::

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
Expand Down Expand Up @@ -208,17 +233,8 @@ function. It currently does not work with the template syntax.

:::

:::caution

`autoSpyOutput` is an **experimental feature** and could be removed or changed
in the future

:::

### Signals

With the releases of Angular versions [17.1](https://github.com/angular/angular/blob/main/CHANGELOG.md#1710-2024-01-17) and [17.2](https://github.com/angular/angular/blob/main/CHANGELOG.md#1720-2024-02-14), [input](https://github.com/angular/angular/pull/53521) and [model](https://github.com/angular/angular/pull/54252) signals were introduced into the `@angular/core` API. Though basic signals were introduced in Angular `16`, using all signals requires Angular `17.2` and above.

:::info

With Cypress 14, signal support is directly included in the `cypress/angular` testing harness.
Expand Down Expand Up @@ -434,7 +450,13 @@ This custom mount command will allow you to skip manually passing in the
`ButtonComponent` and `CardComponent` as declarations into each `cy.mount()`
call.

### autoSpyOutputs
### autoSpyOutputs (deprecated)

:::caution

The `autoSpyOutputs` flag is deprecated and not supported in `cypress/angular-zoneless` and will be removed in a future version.

:::

Here is an example of defaulting `autoSpyOutputs` for every mounted component:

Expand Down
5 changes: 3 additions & 2 deletions docs/app/component-testing/angular/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,12 @@ sidebar_label: Overview

## Framework Support

Cypress Component Testing supports Angular `^18.0.0`, `^19.0.0`, and `^20.0.0`.
Cypress Component Testing supports Angular `^18.0.0`, `^19.0.0`, `^20.0.0`, and `^21.0.0`.

:::info

Our testing harness, `cypress/angular`, still requires `zone.js` and `@angular-devkit/build-angular` to be installed in your project, even if your project is zoneless or is built with `@angular/build`.
If you wish to use the zoneless configuration, which is the default in Angular 21, you can use `cypress/angular-zoneless` testing harness instead as of Cypress `15.8.0`.
:::

## Tutorial
Expand Down Expand Up @@ -129,5 +130,5 @@ export default {

#### Sample Angular Apps

- [Angular 18](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/angular)
- [Angular 20 Standalone](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/angular-standalone)
- [Angular 21 Zoneless](https://github.com/cypress-io/cypress-component-testing-apps/tree/main/angular-zoneless)
2 changes: 1 addition & 1 deletion docs/app/component-testing/get-started.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ following development servers and frameworks:
| [Next.js 14-16](/app/component-testing/react/overview#Nextjs) | React 18-19 | Webpack 5 |
| [Vue with Vite](/app/component-testing/vue/overview#Vue-with-Vite) | Vue 3 | Vite 5-7 |
| [Vue with Webpack](/app/component-testing/vue/overview#Vue-with-Webpack) | Vue 3 | Webpack 5 |
| [Angular](/app/component-testing/angular/overview#Framework-Configuration) | Angular 18-20 | Webpack 5 |
| [Angular](/app/component-testing/angular/overview#Framework-Configuration) | Angular 18-21 | Webpack 5 |
| [Svelte with Vite](/app/component-testing/svelte/overview#Svelte-with-Vite) <Badge type="info">Alpha</Badge> | Svelte 5 | Vite 5-7 |
| [Svelte with Webpack](/app/component-testing/svelte/overview#Svelte-with-Webpack) <Badge type="info">Alpha</Badge> | Svelte 5 | Webpack 5 |

Expand Down
4 changes: 4 additions & 0 deletions docs/app/references/changelog.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,10 @@ sidebar_label: Changelog

# Changelog

## 15.8.0

_Released 12/16/2025_

## 15.7.1

_Released 12/2/2025_
Expand Down
30 changes: 28 additions & 2 deletions docs/app/references/error-messages.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -801,10 +801,10 @@ read a unique identifier from your CI provider as described in our

You may encounter this error if Cypress is detecting the exact same CI Build ID
matching a previous CI Build ID in a run that was completed over 24 hours ago.
You cannot run tests on a run that has been complete for that long. ​ ​You can
You cannot run tests on a run that has been complete for that long. You can
see the CI Build ID that is detected for each completed run by looking at the
details section at the top of your run in
[Cypress Cloud](https://on.cypress.io/cloud). ​ ​You can generate and pass in
[Cypress Cloud](https://on.cypress.io/cloud). You can generate and pass in
your own unique CI Build ID per run as described
[here](/app/references/command-line#cypress-run-ci-build-id-lt-id-gt).

Expand Down Expand Up @@ -946,6 +946,32 @@ there.
It's possible to enable debugging these scripts by adding the `crossorigin`
attribute and setting a `CORS` header.

### <Icon name="exclamation-triangle" color="red" /> Synchronous XHR requests

:::caution

<strong>Note</strong>

Synchronous XHR requests often cause hangs on the web, especially with poor network conditions or when the remote server is slow to respond. Synchronous XHR is now deprecated and should be avoided in favor of asynchronous requests.

:::

When using synchronous XHR requests, you may see the following warnings:

> **Warning: Synchronous XHR request was not intercepted: http://example.com.**

Cypress is unable to intercept a synchronous XHR request if the [`cy.intercept()`](/api/commands/intercept) is using a [`routeHandler`](/api/commands/intercept#routeHandler-Function).
Thus, the [`routeHandler`](/api/commands/intercept#routeHandler-Function) won't be executed and the request will be sent to the origin server without any modifications.
An intercept with a [`StaticResponse`](/api/commands/intercept#staticResponse-StaticResponse) does not have this limitation and will still be executed.

> **Warning: Cookies may not have been applied to synchronous XHR request: http://example.com.**

Cypress is unable to apply cookies to a synchronous XHR request if the request is cross-origin to the `top` origin.

> **Warning: Cookies may not have been set for synchronous XHR response: http://example.com.**

Cypress is unable to set cookies for a synchronous XHR response if the request is cross-origin to the `top` origin.

## Browser Errors

{/* keep old hash */}
Expand Down