From e15d0527d953468fa67f77b3e451c2b339432723 Mon Sep 17 00:00:00 2001 From: Bill Glesias Date: Tue, 25 Nov 2025 16:53:26 -0500 Subject: [PATCH] chore: add angular 21 documentation --- .../app/component-testing/angular/examples.mdx | 18 ++++++++++++++++++ .../app/component-testing/angular/overview.mdx | 2 +- docs/app/component-testing/get-started.mdx | 2 +- 3 files changed, 20 insertions(+), 2 deletions(-) diff --git a/docs/app/component-testing/angular/examples.mdx b/docs/app/component-testing/angular/examples.mdx index 75eab39e05..aaf186faed 100644 --- a/docs/app/component-testing/angular/examples.mdx +++ b/docs/app/component-testing/angular/examples.mdx @@ -157,6 +157,24 @@ 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 diff --git a/docs/app/component-testing/angular/overview.mdx b/docs/app/component-testing/angular/overview.mdx index 235d813e2c..5338e75314 100644 --- a/docs/app/component-testing/angular/overview.mdx +++ b/docs/app/component-testing/angular/overview.mdx @@ -20,7 +20,7 @@ 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 diff --git a/docs/app/component-testing/get-started.mdx b/docs/app/component-testing/get-started.mdx index cbf9b3f79b..8e417a8ae0 100644 --- a/docs/app/component-testing/get-started.mdx +++ b/docs/app/component-testing/get-started.mdx @@ -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) Alpha | Svelte 5 | Vite 5-7 | | [Svelte with Webpack](/app/component-testing/svelte/overview#Svelte-with-Webpack) Alpha | Svelte 5 | Webpack 5 |