Skip to content
Merged
Show file tree
Hide file tree
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
57 changes: 57 additions & 0 deletions docs/angular-testing-library/api.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,63 @@ await render(AppComponent, {
})
```

### `bindings`

An array of bindings to apply to the component using Angular's native bindings API. This provides a more direct way to bind inputs and outputs compared to the `inputs` and `on` options. The bindings API uses Angular's `inputBinding`, `outputBinding`, and `twoWayBinding` functions from `@angular/core`.

**default** : `[]`

```typescript
import { inputBinding, outputBinding, twoWayBinding, signal } from '@angular/core'

await render(AppComponent, {
bindings: [
// Bind a static input value
inputBinding('greeting', () => 'Hello'),

// Bind a signal as an input
inputBinding('age', () => 25),

// Two-way binding with a signal
twoWayBinding('name', signal('John')),

// Output binding with a callback
outputBinding('submitValue', (event) => console.log(event)),
],
})
```

**Using signals for reactive updates**:

```typescript
const greetingSignal = signal('Good day')
const nameSignal = signal('David')
const ageSignal = signal(35)

const { fixture } = await render(AppComponent, {
bindings: [
inputBinding('greeting', greetingSignal),
inputBinding('age', ageSignal),
twoWayBinding('name', nameSignal),
],
})

// Update signals externally
greetingSignal.set('Good evening')
```

**Handling outputs**:

```typescript
const submitHandler = jest.fn()

await render(AppComponent, {
bindings: [
outputBinding('submit', submitHandler),
],
})
```

### `declarations`

A collection of components, directives and pipes needed to render the component.
Expand Down
21 changes: 12 additions & 9 deletions docs/angular-testing-library/examples.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -37,25 +37,28 @@ export class CounterComponent {
```

```typescript title="counter.component.spec.ts"
import { render, screen, fireEvent, aliasedInput } from '@testing-library/angular';
import { signal, inputBinding, twoWayBinding } from '@angular/core';
import { render, screen, fireEvent } from '@testing-library/angular';
import { CounterComponent } from './counter.component';

describe('Counter', () => {
it('should render counter', async () => {
it('renders counter', async () => {
await render(CounterComponent, {
inputs: {
counter: 5,
// aliases need to be specified using aliasedInput
...aliasedInput('greeting', 'Hello Alias!'),
},
bindings: [
twoWayBinding('counter', signal(5)),
// aliases are handled naturally with inputBinding
inputBinding('greeting', () => 'Hello Alias!'),
],
});

expect(screen.getByText('Current Count: 5')).toBeVisible();
expect(screen.getByText('Hello Alias!')).toBeVisible();
});

it('should increment the counter on click', async () => {
await render(CounterComponent, { inputs: { counter: 5 } });
it('increments the counter on click', async () => {
await render(CounterComponent, {
bindings: [twoWayBinding('counter', signal(5))],
});

const incrementButton = screen.getByRole('button', { name: '+' });
fireEvent.click(incrementButton);
Expand Down