From e31e7b00ad17c3d387a3c4f57f34f5f225b5e13f Mon Sep 17 00:00:00 2001 From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> Date: Thu, 22 Aug 2024 19:35:16 +0200 Subject: [PATCH 1/3] mark Angular API properties as deprecated --- docs/angular-testing-library/api.mdx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/angular-testing-library/api.mdx b/docs/angular-testing-library/api.mdx index 4644d8293..c199c7115 100644 --- a/docs/angular-testing-library/api.mdx +++ b/docs/angular-testing-library/api.mdx @@ -76,7 +76,7 @@ export async function render( ## Component RenderOptions -### `componentInputs` +### ~~`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 @@ -94,7 +94,7 @@ await render(AppComponent, { }) ``` -### `componentOutputs` +### ~~`componentOutputs`~~ (deprecated) An object to set `@Output` properties of the component. @@ -110,7 +110,7 @@ await render(AppComponent, { }) ``` -### `componentProperties` +### ~~`componentProperties`~~ (deprecated) An object to set `@Input` and `@Output` properties of the component. Doesn't have a fine-grained control as `componentInputs` and `componentOutputs`. From c565dbcd2dc8a1ba6f12c370e7d0b5ef63390783 Mon Sep 17 00:00:00 2001 From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> Date: Thu, 22 Aug 2024 19:44:24 +0200 Subject: [PATCH 2/3] add new Angular API properties --- docs/angular-testing-library/api.mdx | 162 +++++++++++++++++---------- 1 file changed, 101 insertions(+), 61 deletions(-) diff --git a/docs/angular-testing-library/api.mdx b/docs/angular-testing-library/api.mdx index c199c7115..6aa7e8e0d 100644 --- a/docs/angular-testing-library/api.mdx +++ b/docs/angular-testing-library/api.mdx @@ -76,62 +76,6 @@ export async function render( ## Component RenderOptions -### ~~`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 `componentInputs` and `componentOutputs`. - -**default** : `{}` - -**example**: - -```typescript -await render(AppComponent, { - componentProperties: { - // an input - counterValue: 10, - // an output - send: (value) => { ... } - // a public property - name: 'Tim' - } -}) -``` - ### `declarations` A collection of components, directives and pipes needed to render the component. @@ -157,7 +101,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**: @@ -405,6 +350,43 @@ await render(AppComponent, { ## `RenderResult` +### `inputs` + +An object to set `@Input` or `input()` properties of the component. + +**default** : `{}` + +```typescript +await render(AppComponent, { + inputs: { + counterValue: 10, + // explicitly define aliases using `aliasedInput` + ...aliasedInput('someAlias', 'someValue'), + }, +}) +``` + +### `on` + +An object with callbacks to subscribe to `EventEmitters` and `Observables` of +the component. + +**default** : `{}` + +```ts +// using a manual callback +const sendValue = (value) => { ... } +// using a (jest) spy +const sendValueSpy = jest.fn() + +await render(AppComponent, { + on: { + send: (value) => sendValue(value), + send: sendValueSpy + } +}) +``` + ### `container` The containing DOM node of your rendered Angular Component. This is a regular @@ -430,13 +412,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 +433,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') @@ -546,3 +530,59 @@ expect(screen.getByText(/loading/i)).toBeInTheDocument() await renderDeferBlock(DeferBlockState.Complete) expect(screen.getByText(/completed/i)).toBeInTheDocument() ``` + +### ~~`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' + } +}) +``` From f549e573f905abc35f982ecb5f737fdf51db9ec6 Mon Sep 17 00:00:00 2001 From: Tim Deschryver <28659384+timdeschryver@users.noreply.github.com> Date: Thu, 22 Aug 2024 19:47:59 +0200 Subject: [PATCH 3/3] fix positioning --- docs/angular-testing-library/api.mdx | 149 ++++++++++++++------------- 1 file changed, 76 insertions(+), 73 deletions(-) diff --git a/docs/angular-testing-library/api.mdx b/docs/angular-testing-library/api.mdx index 6aa7e8e0d..14e3d9af1 100644 --- a/docs/angular-testing-library/api.mdx +++ b/docs/angular-testing-library/api.mdx @@ -76,6 +76,44 @@ export async function render( ## Component RenderOptions + +### `inputs` + +An object to set `@Input` or `input()` properties of the component. + +**default** : `{}` + +```typescript +await render(AppComponent, { + inputs: { + counterValue: 10, + // explicitly define aliases using `aliasedInput` + ...aliasedInput('someAlias', 'someValue'), + }, +}) +``` + +### `on` + +An object with callbacks to subscribe to `EventEmitters` and `Observables` of +the component. + +**default** : `{}` + +```ts +// using a manual callback +const sendValue = (value) => { ... } +// using a (jest) spy +const sendValueSpy = jest.fn() + +await render(AppComponent, { + on: { + send: (value) => sendValue(value), + send: sendValueSpy + } +}) +``` + ### `declarations` A collection of components, directives and pipes needed to render the component. @@ -348,45 +386,66 @@ await render(AppComponent, { }) ``` -## `RenderResult` -### `inputs` +### ~~`componentInputs`~~ (deprecated) -An object to set `@Input` or `input()` properties of the component. +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, { - inputs: { + componentInputs: { counterValue: 10, - // explicitly define aliases using `aliasedInput` - ...aliasedInput('someAlias', 'someValue'), }, }) ``` -### `on` +### ~~`componentOutputs`~~ (deprecated) -An object with callbacks to subscribe to `EventEmitters` and `Observables` of -the component. +An object to set `@Output` properties of the component. **default** : `{}` -```ts -// using a manual callback -const sendValue = (value) => { ... } -// using a (jest) spy -const sendValueSpy = jest.fn() +**example**: +```typescript await render(AppComponent, { - on: { - send: (value) => sendValue(value), - send: sendValueSpy + 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` The containing DOM node of your rendered Angular Component. This is a regular @@ -530,59 +589,3 @@ expect(screen.getByText(/loading/i)).toBeInTheDocument() await renderDeferBlock(DeferBlockState.Complete) expect(screen.getByText(/completed/i)).toBeInTheDocument() ``` - -### ~~`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' - } -}) -```