diff --git a/docs/angular-testing-library/api.mdx b/docs/angular-testing-library/api.mdx index 08daa335..a5ba65c4 100644 --- a/docs/angular-testing-library/api.mdx +++ b/docs/angular-testing-library/api.mdx @@ -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. diff --git a/docs/angular-testing-library/examples.mdx b/docs/angular-testing-library/examples.mdx index 2e44b893..00ae4fa1 100644 --- a/docs/angular-testing-library/examples.mdx +++ b/docs/angular-testing-library/examples.mdx @@ -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);