You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* feat: first pass at adding angular signals documentation (#5841)
* feat: first pass at adding angular signals documentation
* take suggestions from code review
* remove info from mount overview for angular-signals
* use contraction for does not
* overhaul the angular signals documentation to be more user friendly on usage and not so technical
* empty commit to kick off ci
* changelog for 13.13.0
---------
Co-authored-by: Cacie Prins <cacie@cypress.io>
Copy file name to clipboardExpand all lines: docs/guides/component-testing/angular/api.mdx
+7-1Lines changed: 7 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -11,6 +11,12 @@ sidebar_position: 40
11
11
import { mount } from'cypress/angular'
12
12
```
13
13
14
+
Be sure to use the `cypress/angular-signals` package if using Angular `17.2` and up and wishing to test `signal()`s within your component tests.
15
+
16
+
```js
17
+
import { mount } from'cypress/angular-signals'
18
+
```
19
+
14
20
<tableclass="api-table">
15
21
<tr>
16
22
<td>Description</td>
@@ -153,7 +159,7 @@ providers, declarations, imports and even component @Inputs()
153
159
<tr>
154
160
<td>componentProperties</td>
155
161
<td>Partial<{[P in keyof T]: T[P];}> (optional)</td>
156
-
<td></td>
162
+
<td> If using the `cypress/angular-signals` test harness, this type is adapted to `Partial<{[P in keyof T]: T[P] extends InputSignal<infer V> ? InputSignal<V> | WritableSignal<V> | V : T[P]}>` to allow for generic types to be wrapped inside a signal</td>
Copy file name to clipboardExpand all lines: docs/guides/component-testing/angular/examples.mdx
+164Lines changed: 164 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -193,6 +193,170 @@ in the future
193
193
194
194
:::
195
195
196
+
### Signals
197
+
198
+
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.
199
+
Since signals introduced new methods and types to the core API, Cypress introduced a new test harness, `@cypress/angular-signals`.
200
+
201
+
Though basic signals were introduced in Angular `16`, this testing harness requires Angular `17.2` and above.
202
+
203
+
For the below examples, we'll be working with a very simple component called `TestComponent`, which looks something like shown below:
204
+
205
+
```typescript
206
+
// app/components/test-component.component.ts
207
+
import { Component, input, model } from'@angular/core'
There are two ways to test signals within Cypress Component Testing:
235
+
236
+
1.[Inferred Generic Type](#Inferred-Generic-Type)
237
+
2.[Writable Signal](#Writable-Signal)
238
+
239
+
##### Inferred Generic Type
240
+
241
+
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`.
Under the hood, Cypress wraps the generic value in a writable `signal()` and merges it into the prop. In other words, the `@cypress/angular-signals` test harness in this example is really:
259
+
260
+
```typescript
261
+
cy.mount(TestComponent, {
262
+
componentProperties: {
263
+
title: signal('Test Component'),
264
+
},
265
+
})
266
+
```
267
+
268
+
:::
269
+
270
+
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`:
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()`.
286
+
287
+
This allows us to test our one-way data binding for our `input()` signals.
Cypress doesn't propagate changes via spy from `input()` signals.
338
+
339
+
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,
340
+
`countChange` will spy on changes to the `count` signal.
Copy file name to clipboardExpand all lines: docs/guides/references/changelog.mdx
+24Lines changed: 24 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -2,6 +2,30 @@
2
2
title: Changelog
3
3
---
4
4
5
+
## 13.13.0
6
+
7
+
_Released 7/02/2024_
8
+
9
+
**Performance:**
10
+
11
+
- Improved performance of `experimentalSourceRewriting` option. Fixed in [#29540](https://github.com/cypress-io/cypress/pull/29540).
12
+
13
+
**Features:**
14
+
15
+
- Adds Signal support for Angular Component Testing versions 17.2 and up. Addresses [#29264](https://github.com/cypress-io/cypress/issues/29264).
16
+
17
+
**Bugfixes:**
18
+
19
+
- Fixed an issue where Chrome launch instances would not recreate the browser CRI client correctly after recovering from an unexpected browser closure. Fixes [#27657](https://github.com/cypress-io/cypress/issues/27657). Fixed in [#29663](https://github.com/cypress-io/cypress/pull/29663).
20
+
- Fixed an issue where Firefox 129 (Firefox Nightly) would not launch with Cypress. Fixes [#29713](https://github.com/cypress-io/cypress/issues/29713). Fixed in [#29720](https://github.com/cypress-io/cypress/pull/29720).
21
+
22
+
**Dependency Updates:**
23
+
24
+
- Updated `launch-editor` from `2.3.0` to `2.8.0`. Addressed in [#29770](https://github.com/cypress-io/cypress/pull/29770).
25
+
- Updated `memfs` from `3.4.12` to `3.5.3`. Addressed in [#29746](https://github.com/cypress-io/cypress/pull/29746).
26
+
- Updated `tmp` from `0.2.1` to `0.2.3`. Addresses [#29693](https://github.com/cypress-io/cypress/issues/29693).
27
+
- Updated `ws` from `5.2.3` to `5.2.4`. Addressed in [#29698](https://github.com/cypress-io/cypress/pull/29698).
0 commit comments