Skip to content

Update angular api #1413

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Aug 24, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 83 additions & 40 deletions docs/angular-testing-library/api.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -76,58 +76,40 @@ export async function render<WrapperType = WrapperComponent>(

## 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
}
})
```
Expand Down Expand Up @@ -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**:

Expand Down Expand Up @@ -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`
Expand Down Expand Up @@ -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')
Expand All @@ -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')
Expand Down