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 1 commit
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
Prev Previous commit
Next Next commit
add new Angular API properties
  • Loading branch information
timdeschryver committed Aug 22, 2024
commit c565dbcd2dc8a1ba6f12c370e7d0b5ef63390783
162 changes: 101 additions & 61 deletions docs/angular-testing-library/api.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -76,62 +76,6 @@ export async function render<WrapperType = WrapperComponent>(

## 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.
Expand All @@ -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**:

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