diff --git a/docs/angular-testing-library/api.mdx b/docs/angular-testing-library/api.mdx index 4644d8293..14e3d9af1 100644 --- a/docs/angular-testing-library/api.mdx +++ b/docs/angular-testing-library/api.mdx @@ -76,58 +76,40 @@ export async function render( ## Component RenderOptions -### `componentInputs` -An object to set `@Input` properties of the component. Uses `setInput` to set -the input property. Throws if the component property is not annotated with the -`@Input` attribute. +### `inputs` -**default** : `{}` +An object to set `@Input` or `input()` properties of the component. -**example**: +**default** : `{}` ```typescript await render(AppComponent, { - componentInputs: { + inputs: { counterValue: 10, + // explicitly define aliases using `aliasedInput` + ...aliasedInput('someAlias', 'someValue'), }, }) ``` -### `componentOutputs` - -An object to set `@Output` properties of the component. - -**default** : `{}` - -**example**: - -```typescript -await render(AppComponent, { - componentOutputs: { - clicked: (value) => { ... } - } -}) -``` - -### `componentProperties` +### `on` -An object to set `@Input` and `@Output` properties of the component. Doesn't -have a fine-grained control as `componentInputs` and `componentOutputs`. +An object with callbacks to subscribe to `EventEmitters` and `Observables` of +the component. **default** : `{}` -**example**: +```ts +// using a manual callback +const sendValue = (value) => { ... } +// using a (jest) spy +const sendValueSpy = jest.fn() -```typescript await render(AppComponent, { - componentProperties: { - // an input - counterValue: 10, - // an output - send: (value) => { ... } - // a public property - name: 'Tim' + on: { + send: (value) => sendValue(value), + send: sendValueSpy } }) ``` @@ -157,7 +139,8 @@ Set the defer blocks behavior. For more info see the [Angular docs](https://angular.io/api/core/testing/DeferBlockBehavior) -**default** : `undefined` (uses `DeferBlockBehavior.Manual`, which is different from the Angular default of `DeferBlockBehavior.Playthrough`) +**default** : `undefined` (uses `DeferBlockBehavior.Manual`, which is different +from the Angular default of `DeferBlockBehavior.Playthrough`) **example**: @@ -403,6 +386,64 @@ await render(AppComponent, { }) ``` + +### ~~`componentInputs`~~ (deprecated) + +An object to set `@Input` properties of the component. Uses `setInput` to set +the input property. Throws if the component property is not annotated with the +`@Input` attribute. + +**default** : `{}` + +**example**: + +```typescript +await render(AppComponent, { + componentInputs: { + counterValue: 10, + }, +}) +``` + +### ~~`componentOutputs`~~ (deprecated) + +An object to set `@Output` properties of the component. + +**default** : `{}` + +**example**: + +```typescript +await render(AppComponent, { + componentOutputs: { + clicked: (value) => { ... } + } +}) +``` + +### ~~`componentProperties`~~ (deprecated) + +An object to set `@Input` and `@Output` properties of the component. Doesn't +have a fine-grained control as `inputs` and `on`. + +**default** : `{}` + +**example**: + +```typescript +await render(AppComponent, { + componentProperties: { + // an input + counterValue: 10, + // an output + send: (value) => { ... } + // a public property + name: 'Tim' + } +}) +``` + + ## `RenderResult` ### `container` @@ -430,13 +471,15 @@ properties that are not defined are cleared. ```typescript const {rerender} = await render(Counter, { - componentInputs: {count: 4, name: 'Sarah'}, + inputs: {count: 4, name: 'Sarah'}, }) expect(screen.getByTestId('count-value').textContent).toBe('4') expect(screen.getByTestId('name-value').textContent).toBe('Sarah') -await rerender({componentInputs: {count: 7}}) +await rerender({ + inputs: {count: 7} +}) // count is updated to 7 expect(screen.getByTestId('count-value').textContent).toBe('7') @@ -449,13 +492,13 @@ input properties that aren't provided won't be cleared. ```typescript const {rerender} = await render(Counter, { - componentInputs: {count: 4, name: 'Sarah'}, + inputs: {count: 4, name: 'Sarah'}, }) expect(screen.getByTestId('count-value').textContent).toBe('4') expect(screen.getByTestId('name-value').textContent).toBe('Sarah') -await rerender({componentInputs: {count: 7}, partialUpdate: true}) +await rerender({inputs: {count: 7}, partialUpdate: true}) // count is updated to 7 expect(screen.getByTestId('count-value').textContent).toBe('7')