Skip to content

update angular docs for v13 #1193

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 1 commit into from
Dec 23, 2022
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
105 changes: 88 additions & 17 deletions docs/angular-testing-library/api.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,44 @@ 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.

**default** : `{}`

**example**:

```typescript
await render(AppComponent, {
componentInputs: {
counterValue: 10,
},
})
```

### `componentOutputs`

An object to set `@Output` properties of the component.

**default** : `{}`

**example**:

```typescript
await render(AppComponent, {
componentOutputs: {
clicked: (value) => { ... }
}
})
```

### `componentProperties`

An object to set `@Input` and `@Output` properties of the component.
An object to set `@Input` and `@Output` properties of the component. Doesn't
have a fine-grained control as `componentInputs` and `componentOutputs`.

**default** : `{}`

Expand All @@ -88,12 +123,34 @@ An object to set `@Input` and `@Output` properties of the component.
```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.
For example, nested components of the component.

For more info see the
[Angular docs](https://angular.io/api/core/NgModule#declarations).

**default** : `[]`

**example**:

```typescript
await render(AppComponent, {
declarations: [CustomerDetailComponent, ButtonComponent],
})
```

### `componentProviders`

A collection of providers needed to render the component via Dependency
Expand All @@ -115,50 +172,64 @@ await render(AppComponent, {
})
```

### `declarations`
### `componentImports`

A collection of components, directives and pipes needed to render the component.
For example, nested components of the component.

For more info see the
[Angular docs](https://angular.io/api/core/NgModule#declarations).
A collection of imports to override a standalone component's imports with.

**default** : `[]`
**default** : `undefined`

**example**:

```typescript
await render(AppComponent, {
declarations: [CustomerDetailComponent, ButtonComponent],
componentImports: [MockChildComponent],
})
```

### `ɵcomponentImports`
### `childComponentOverrides`

A collection of imports to override a standalone component's imports with.
Collection of child component specified providers to override with.

**default** : `undefined`

**example**:

```typescript
await render(AppComponent, {
ɵcomponentImports: [
MockChildComponent
]
childComponentOverrides: [
{
component: ChildOfAppComponent,
providers: [{provide: ChildService, useValue: {hello: 'world'}}],
},
],
})
```

### `detectChanges`
### `detectChangesOnRender`

Will call `detectChanges` when the component is compiled
Invokes `detectChanges` after the component is rendered.

**default** : `true`

**example**:

```typescript
await render(AppComponent, {detectChanges: false})
await render(AppComponent, {detectChangesOnRender: false})
```

### `autoDetectChanges`

Automatically detect changes as a "real" running component would do. For
example, runs a change detection cycle when an event has occured.

**default** : `true`

**example**:

```typescript
await render(AppComponent, {
autoDetectChanges: false,
})
```

### `excludeComponentDeclaration`
Expand Down