| Description | @@ -153,7 +159,7 @@ providers, declarations, imports and even component @Inputs()|||
| componentProperties | Partial<{[P in keyof T]: T[P];}> (optional) | -+ | If using the `cypress/angular-signals` test harness, this type is adapted to `Partial<{[P in keyof T]: T[P] extends InputSignal |
{{ title() }}
+{{ count() }}
+ + +``` + +#### Testing Signals + +There are two ways to test signals within Cypress Component Testing: + +1. [Inferred Generic Type](#Inferred-Generic-Type) +2. [Writable Signal](#Writable-Signal) + +##### Inferred Generic Type + +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`. + +```typescript +let titleProp = 'Test Component' +cy.mount(TestComponent, { + componentProperties: { + title: titleProp, + }, +}) + +cy.get('[data-cy="test-component-title-display"]').should( + 'have.text', + 'Test Component' +) +``` + +:::info +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: + +```typescript +cy.mount(TestComponent, { + componentProperties: { + title: signal('Test Component'), + }, +}) +``` + +::: + +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`: + +```ts +cy.mount(TestComponent, { + componentProperties: { + title: 'Test Component', + count: 3, + }, +}) + +cy.get('[data-cy="test-component-count-display"]').should('have.text', '3') +``` + +##### Writable Signal + +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()`. + +This allows us to test our one-way data binding for our `input()` signals. + +```typescript +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') +``` + +And our two-way data binding for our `model()` signals. + +```typescript +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 test +cy.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) +}) +``` + +##### Change Spies + +Cypress doesn't propagate changes via spy from `input()` signals. + +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. + +```typescript +cy.mount(TestComponent, { + componentProperties: { + title: 'Test Component', + count: 4, + // @ts-expect-error + countChange: createOutputSpy('countChange'), + }, +}) + +// some action occurs that changes the count +cy.get('[data-cy="test-component-count-incr"]').click() + +cy.get('@countChange').should('have.been.called') +``` + +These spies can automatically be created if `autoSpyOutputs: true` is configured. The suffix in this case will be `ChangeSpy`. + ## Custom Mount Commands ### Customizing `cy.mount()` diff --git a/docs/guides/references/changelog.mdx b/docs/guides/references/changelog.mdx index 7fe445a0af..2007f72a85 100644 --- a/docs/guides/references/changelog.mdx +++ b/docs/guides/references/changelog.mdx @@ -2,6 +2,30 @@ title: Changelog --- +## 13.13.0 + +_Released 7/02/2024_ + +**Performance:** + +- Improved performance of `experimentalSourceRewriting` option. Fixed in [#29540](https://github.com/cypress-io/cypress/pull/29540). + +**Features:** + +- Adds Signal support for Angular Component Testing versions 17.2 and up. Addresses [#29264](https://github.com/cypress-io/cypress/issues/29264). + +**Bugfixes:** + +- 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). +- 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). + +**Dependency Updates:** + +- Updated `launch-editor` from `2.3.0` to `2.8.0`. Addressed in [#29770](https://github.com/cypress-io/cypress/pull/29770). +- Updated `memfs` from `3.4.12` to `3.5.3`. Addressed in [#29746](https://github.com/cypress-io/cypress/pull/29746). +- Updated `tmp` from `0.2.1` to `0.2.3`. Addresses [#29693](https://github.com/cypress-io/cypress/issues/29693). +- Updated `ws` from `5.2.3` to `5.2.4`. Addressed in [#29698](https://github.com/cypress-io/cypress/pull/29698). + ## 13.12.0 _Released 6/18/2024_