diff --git a/docs/angular-testing-library/api.mdx b/docs/angular-testing-library/api.mdx index 08daa3359..a5ba65c4b 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 2e44b893c..00ae4fa1a 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); diff --git a/docs/dom-testing-library/api-configuration.mdx b/docs/dom-testing-library/api-configuration.mdx index 6f49e9709..72dd2e196 100644 --- a/docs/dom-testing-library/api-configuration.mdx +++ b/docs/dom-testing-library/api-configuration.mdx @@ -90,14 +90,15 @@ second argument. If you're using testing-library in a browser you almost always want to set this to `true`. Only very old browser don't support this property (such as IE 8 and earlier). However, `jsdom` does not support the second argument currently. This includes versions of `jsdom` prior to `16.4.0` and any -version that logs a `not implemented` warning when calling `getComputedStyle` +version that logs a `not implemented` warning when calling +[`getComputedStyle`](https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle) with a second argument e.g. `window.getComputedStyle(document.createElement('div'), '::after')`. Defaults to `false` ### `defaultHidden` -The default value for the `hidden` option used by +The default value for the [`hidden` option](queries/byrole#hidden) used by [`getByRole`](queries/byrole.mdx). Defaults to `false`. ### `defaultIgnore` @@ -110,12 +111,12 @@ Defaults to `script, style`. ### `showOriginalStackTrace` -By default, `waitFor` will ensure that the stack trace for errors thrown by -Testing Library is cleaned up and shortened so it's easier for you to identify -the part of your code that resulted in the error (async stack traces are hard to -debug). If you want to disable this, then set`showOriginalStackTrace` to -`false`. You can also disable this for a specific call in the options you pass -to `waitFor`. +By default, [`waitFor`](api-async#waitfor) will ensure that the stack trace for +errors thrown by Testing Library is cleaned up and shortened so it's easier for +you to identify the part of your code that resulted in the error (async stack +traces are hard to debug). If you want to disable this, then +set`showOriginalStackTrace` to `false`. You can also disable this for a specific +call in the options you pass to `waitFor`. ### `throwSuggestions` (experimental) @@ -132,8 +133,8 @@ screen.getByTestId('foo', {suggest: false}) // will not throw a suggestion :::note -When this option is enabled, it may provide suggestions that lack an -intuitive implementation. Typically this happens for +When this option is enabled, it may provide suggestions that lack an intuitive +implementation. Typically this happens for [roles which cannot be named](https://w3c.github.io/aria/#namefromprohibited), most notably paragraphs. For instance, if you attempt to use [`getByText`](queries/bytext.mdx), you may encounter the following error: @@ -143,12 +144,13 @@ TestingLibraryElementError: A better query is available, try this: getByRole('paragraph') ``` -However, there is no direct way to query paragraphs using the config object parameter, such as in -`getByRole('paragraph', { name: 'Hello World' })`. +However, there is no direct way to query paragraphs using the config object +parameter, such as in `getByRole('paragraph', { name: 'Hello World' })`. To address this issue, you can leverage a custom function to validate the -element's structure, as shown in the example below. -More information can be found in the [GitHub issue](https://github.com/testing-library/dom-testing-library/issues/1306) +element's structure, as shown in the example below. More information can be +found in the +[GitHub issue](https://github.com/testing-library/dom-testing-library/issues/1306) ```js getByRole('paragraph', { @@ -171,5 +173,5 @@ message and container object as arguments. ### `asyncUtilTimeout` -The global timeout value in milliseconds used by `waitFor` utilities. Defaults -to 1000ms. +The global timeout value in milliseconds used by [`waitFor`](api-async#waitfor) +utilities. Defaults to 1000ms. diff --git a/docs/dom-testing-library/api-debugging.mdx b/docs/dom-testing-library/api-debugging.mdx index 972a2d7d9..492542440 100644 --- a/docs/dom-testing-library/api-debugging.mdx +++ b/docs/dom-testing-library/api-debugging.mdx @@ -57,7 +57,7 @@ you'd like a solution that works for both, see ## `prettyDOM` Built on top of -[`pretty-format`](https://github.com/facebook/jest/tree/master/packages/pretty-format), +[`pretty-format`](https://github.com/jestjs/jest/tree/main/packages/pretty-format), this helper function can be used to print out readable representation of the DOM tree of a node. This can be helpful for instance when debugging tests. @@ -79,7 +79,7 @@ It receives the root node to print out, an optional extra parameter to limit the size of the resulting string, for cases when it becomes too large. It has a last parameter which allows you to configure your formatting. In addition to the options listed you can also pass the -[options](https://github.com/facebook/jest/tree/master/packages/pretty-format#usage-with-options) +[options](https://github.com/jestjs/jest/tree/main/packages/pretty-format#usage-with-options) of `pretty-format`. By default, `