Add support for Angular v20 bindings API

Co-authored-by: timdeschryver <[email protected]>

Author: Copilot

apps/example-app/src/app/examples/23-bindings-api.component.ts

@@ -0,0 +1,36 @@
+import { Component, computed, input, model, numberAttribute, output } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'atl-bindings-api-example',
+  template: `
+    <div data-testid="input-value">{{ greetings() }} {{ name() }} of {{ age() }} years old</div>
+    <div data-testid="computed-value">{{ greetingMessage() }}</div>
+    <button data-testid="submit-button" (click)="submitName()">Submit</button>
+    <button data-testid="increment-button" (click)="incrementAge()">Increment Age</button>
+    <input type="text" data-testid="name-input" [(ngModel)]="name" />
+    <div data-testid="current-age">Current age: {{ age() }}</div>
+  `,
+  standalone: true,
+  imports: [FormsModule],
+})
+export class BindingsApiExampleComponent {
+  greetings = input<string>('', {
+    alias: 'greeting',
+  });
+  age = input.required<number, string>({ transform: numberAttribute });
+  name = model.required<string>();
+  submitValue = output<string>();
+  ageChanged = output<number>();
+
+  greetingMessage = computed(() => `${this.greetings()} ${this.name()} of ${this.age()} years old`);
+
+  submitName() {
+    this.submitValue.emit(this.name());
+  }
+
+  incrementAge() {
+    const newAge = this.age() + 1;
+    this.ageChanged.emit(newAge);
+  }
+}

projects/testing-library/src/lib/models.ts

@@ -7,6 +7,7 @@ import {
   Provider,
   Signal,
   InputSignalWithTransform,
+  Binding,
 } from '@angular/core';
 import { ComponentFixture, DeferBlockBehavior, DeferBlockState, TestBed } from '@angular/core/testing';
 import { Routes } from '@angular/router';
@@ -307,6 +308,26 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
    */
   on?: OutputRefKeysWithCallback<ComponentType>;
 
+  /**
+   * @description
+   * An array of bindings to apply to the component using Angular v20+'s native bindings API.
+   * This provides a more direct way to bind inputs and outputs compared to the `inputs` and `on` options.
+   *
+   * @default
+   * []
+   *
+   * @example
+   * import { inputBinding, outputBinding } from '@angular/core';
+   *
+   * await render(AppComponent, {
+   *   bindings: [
+   *     inputBinding('value', () => 'test value'),
+   *     outputBinding('click', (event) => console.log(event))
+   *   ]
+   * })
+   */
+  bindings?: Binding[];
+
   /**
    * @description
    * A collection of providers to inject dependencies of the component.

projects/testing-library/src/lib/testing-library.ts

@@ -11,6 +11,7 @@ import {
   SimpleChanges,
   Type,
   isStandalone,
+  Binding,
 } from '@angular/core';
 import { ComponentFixture, DeferBlockBehavior, DeferBlockState, TestBed, tick } from '@angular/core/testing';
 import { NavigationExtras, Router } from '@angular/router';
@@ -69,6 +70,7 @@ export async function render<SutType, WrapperType = SutType>(
     componentOutputs = {},
     inputs: newInputs = {},
     on = {},
+    bindings = [],
     componentProviders = [],
     childComponentOverrides = [],
     componentImports,
@@ -192,11 +194,19 @@ export async function render<SutType, WrapperType = SutType>(
     outputs: Partial<SutType>,
     subscribeTo: OutputRefKeysWithCallback<SutType>,
   ): Promise<ComponentFixture<SutType>> => {
-    const createdFixture: ComponentFixture<SutType> = await createComponent(componentContainer);
-    setComponentProperties(createdFixture, properties);
-    setComponentInputs(createdFixture, inputs);
-    setComponentOutputs(createdFixture, outputs);
-    subscribedOutputs = subscribeToComponentOutputs(createdFixture, subscribeTo);
+    const createdFixture: ComponentFixture<SutType> = await createComponent(componentContainer, bindings);
+
+    // Only use traditional input/output setting if no bindings are provided
+    // When bindings are used, they handle inputs and outputs natively
+    if (!bindings || bindings.length === 0) {
+      setComponentProperties(createdFixture, properties);
+      setComponentInputs(createdFixture, inputs);
+      setComponentOutputs(createdFixture, outputs);
+      subscribedOutputs = subscribeToComponentOutputs(createdFixture, subscribeTo);
+    } else {
+      // With bindings, we still need to handle componentProperties for non-input properties
+      setComponentProperties(createdFixture, properties);
+    }
 
     if (removeAngularAttributes) {
       createdFixture.nativeElement.removeAttribute('ng-version');
@@ -335,9 +345,18 @@ export async function render<SutType, WrapperType = SutType>(
   };
 }
 
-async function createComponent<SutType>(component: Type<SutType>): Promise<ComponentFixture<SutType>> {
+async function createComponent<SutType>(
+  component: Type<SutType>,
+  bindings?: Binding[],
+): Promise<ComponentFixture<SutType>> {
   /* Make sure angular application is initialized before creating component */
   await TestBed.inject(ApplicationInitStatus).donePromise;
+
+  // Use the new bindings API if available and bindings are provided
+  if (bindings && bindings.length > 0) {
+    return TestBed.createComponent(component, { bindings });
+  }
+
   return TestBed.createComponent(component);
 }
 

projects/testing-library/src/public_api.ts

@@ -5,3 +5,6 @@
 export * from './lib/models';
 export * from './lib/config';
 export * from './lib/testing-library';
+
+// Re-export Angular's binding functions for convenience
+export { inputBinding, outputBinding, twoWayBinding, type Binding } from '@angular/core';

projects/testing-library/tests/bindings-support.spec.ts

@@ -0,0 +1,41 @@
+import { Component, input, output } from '@angular/core';
+import { render, screen, inputBinding, outputBinding } from '../src/public_api';
+
+describe('ATL Bindings API Support', () => {
+  @Component({
+    selector: 'atl-bindings-test',
+    template: `
+      <div data-testid="value">{{ value() }}</div>
+      <div data-testid="greeting">{{ greeting() }}</div>
+      <button data-testid="emit-button" (click)="clicked.emit('clicked: ' + value())">Click me</button>
+    `,
+    standalone: true,
+  })
+  class BindingsTestComponent {
+    value = input<string>('default');
+    greeting = input<string>('hello', { alias: 'greet' });
+    clicked = output<string>();
+  }
+
+  it('should support inputBinding for regular inputs', async () => {
+    await render(BindingsTestComponent, {
+      bindings: [inputBinding('value', () => 'test-value'), inputBinding('greet', () => 'hi there')],
+    });
+
+    expect(screen.getByTestId('value')).toHaveTextContent('test-value');
+    expect(screen.getByTestId('greeting')).toHaveTextContent('hi there');
+  });
+
+  it('should support outputBinding for outputs', async () => {
+    const clickHandler = jest.fn();
+
+    await render(BindingsTestComponent, {
+      bindings: [inputBinding('value', () => 'bound-value'), outputBinding('clicked', clickHandler)],
+    });
+
+    const button = screen.getByTestId('emit-button');
+    button.click();
+
+    expect(clickHandler).toHaveBeenCalledWith('clicked: bound-value');
+  });
+});