feat(core): support bindings in TestBed (#62040)

Adds support for passing in `Binding` objects into `TestBed.createComponent`. This makes it easier to test components by avoiding the need to create a wrapper component. Furthermore, it keeps the behavior consistent between tests and the actual app. For example, given a custom checkbox that looks like this:

```typescript
@component({
  selector: 'my-checkbox',
  template: '...',
  host: {'[class.checked]': 'isChecked()'}
})
export class MyCheckbox {
  isChecked = input(false);
}
```

A test for the `isChecked` input would look something like this:

```typescript
it('should toggle the checked class', () => {
  @component({
    imports: [MyCheckbox],
    template: '<my-checkbox [isChecked]="isChecked"/>',
  })
  class Wrapper {
    isChecked = false;
  }

  const fixture = TestBed.createComponent(Wrapper);
  const checkbox = fixture.nativeElement.querySelector('my-checkbox');
  fixture.detectChanges();
  expect(checkbox.classList).not.toContain('checked');

  fixture.componentInstance.isChecked = true;
  fixture.detectChanges();
  expect(checkbox.classList).toContain('checked');
});
```

Whereas with the new API, the test would look like this:

```typescript
it('should toggle the checked class', () => {
  const isChecked = signal(false);
  const fixture = TestBed.createComponent(MyCheckbox, {
    bindings: [inputBinding('isChecked', isChecked)]
  });
  const checkbox = fixture.nativeElement.querySelector('my-checkbox');
  fixture.detectChanges();
  expect(checkbox.classList).not.toContain('checked');

  isChecked.set(true);
  fixture.detectChanges();
  expect(checkbox.classList).toContain('checked');
});
```

PR Close #62040

Author: crisbeto

goldens/public-api/core/testing/index.api.md

@@ -114,7 +114,7 @@ export interface TestBed {
     // (undocumented)
     configureTestingModule(moduleDef: TestModuleMetadata): TestBed;
     // (undocumented)
-    createComponent<T>(component: Type<T>): ComponentFixture<T>;
+    createComponent<T>(component: Type<T>, options?: TestComponentOptions): ComponentFixture<T>;
     // (undocumented)
     execute(tokens: any[], fn: Function, context?: any): any;
     // @deprecated
@@ -177,6 +177,11 @@ export interface TestBedStatic extends TestBed {
     new (...args: any[]): TestBed;
 }
 
+// @public
+export interface TestComponentOptions {
+    bindings?: Binding[];
+}
+
 // @public
 export class TestComponentRenderer {
     // (undocumented)

packages/core/test/test_bed_spec.ts

@@ -42,6 +42,11 @@ import {
   DOCUMENT,
   signal,
   provideZonelessChangeDetection,
+  inputBinding,
+  Output,
+  EventEmitter,
+  outputBinding,
+  twoWayBinding,
 } from '../src/core';
 import {DeferBlockBehavior} from '../testing';
 import {TestBed, TestBedImpl} from '../testing/src/test_bed';
@@ -1215,6 +1220,73 @@ describe('TestBed', () => {
     });
   });
 
+  describe('bindings', () => {
+    it('should be able to bind to inputs', () => {
+      @Component({template: ''})
+      class TestComp {
+        @Input() value = 0;
+      }
+
+      const value = signal(1);
+      const fixture = TestBed.createComponent(TestComp, {
+        bindings: [inputBinding('value', value)],
+      });
+      fixture.detectChanges();
+      expect(fixture.componentInstance.value).toBe(1);
+
+      value.set(2);
+      fixture.detectChanges();
+      expect(fixture.componentInstance.value).toBe(2);
+    });
+
+    it('should be able to bind to outputs', () => {
+      let count = 0;
+
+      @Component({template: '<button (click)="event.emit()">Click me</button>'})
+      class TestComp {
+        @Output() event = new EventEmitter<void>();
+      }
+
+      const fixture = TestBed.createComponent(TestComp, {
+        bindings: [outputBinding('event', () => count++)],
+      });
+      fixture.detectChanges();
+      const button = fixture.nativeElement.querySelector('button');
+      expect(count).toBe(0);
+
+      button.click();
+      fixture.detectChanges();
+      expect(count).toBe(1);
+    });
+
+    it('should be able to bind two-way bindings', () => {
+      @Component({template: 'Value: {{value}}'})
+      class TestComp {
+        @Input() value = '';
+        @Output() valueChange = new EventEmitter<string>();
+      }
+
+      const value = signal('initial');
+      const fixture = TestBed.createComponent(TestComp, {
+        bindings: [twoWayBinding('value', value)],
+      });
+      fixture.detectChanges();
+      expect(value()).toBe('initial');
+      expect(fixture.nativeElement.textContent).toBe('Value: initial');
+
+      value.set('1');
+      fixture.detectChanges();
+      expect(value()).toBe('1');
+      expect(fixture.nativeElement.textContent).toBe('Value: 1');
+
+      fixture.componentInstance.value = '2';
+      fixture.componentInstance.valueChange.emit('2');
+      fixture.detectChanges();
+      expect(value()).toBe('2');
+      expect(fixture.nativeElement.textContent).toBe('Value: 2');
+    });
+  });
+
   it('should allow overriding a provider defined via ModuleWithProviders (using TestBed.overrideProvider)', () => {
     const serviceOverride = {
       get() {

packages/core/testing/src/test_bed.ts

@@ -12,6 +12,7 @@
 
 import {
   ApplicationRef,
+  Binding,
   Component,
   ɵRender3ComponentFactory as ComponentFactory,
   ComponentRef,
@@ -63,6 +64,16 @@ export interface TestBedStatic extends TestBed {
   new (...args: any[]): TestBed;
 }
 
+/**
+ * Options that can be configured for a test component.
+ *
+ * @publicApi
+ */
+export interface TestComponentOptions {
+  /** Bindings to apply to the test component. */
+  bindings?: Binding[];
+}
+
 /**
  * @publicApi
  */
@@ -149,7 +160,7 @@ export interface TestBed {
 
   overrideTemplateUsingTestingModule(component: Type<any>, template: string): TestBed;
 
-  createComponent<T>(component: Type<T>): ComponentFixture<T>;
+  createComponent<T>(component: Type<T>, options?: TestComponentOptions): ComponentFixture<T>;
 
   /**
    * Execute any pending effects.
@@ -377,8 +388,11 @@ export class TestBedImpl implements TestBed {
     return TestBedImpl.INSTANCE.runInInjectionContext(fn);
   }
 
-  static createComponent<T>(component: Type<T>): ComponentFixture<T> {
-    return TestBedImpl.INSTANCE.createComponent(component);
+  static createComponent<T>(
+    component: Type<T>,
+    options?: TestComponentOptions,
+  ): ComponentFixture<T> {
+    return TestBedImpl.INSTANCE.createComponent(component, options);
   }
 
   static resetTestingModule(): TestBed {
@@ -630,7 +644,7 @@ export class TestBedImpl implements TestBed {
     return this.overrideComponent(component, {set: {template, templateUrl: null!}});
   }
 
-  createComponent<T>(type: Type<T>): ComponentFixture<T> {
+  createComponent<T>(type: Type<T>, options?: TestComponentOptions): ComponentFixture<T> {
     const testComponentRenderer = this.inject(TestComponentRenderer);
     const rootElId = `root${_nextRootElementId++}`;
     testComponentRenderer.insertRootElement(rootElId);
@@ -655,6 +669,8 @@ export class TestBedImpl implements TestBed {
         [],
         `#${rootElId}`,
         this.testModuleRef,
+        undefined,
+        options?.bindings,
       ) as ComponentRef<T>;
       return this.runInInjectionContext(() => new ComponentFixture(componentRef));
     };

packages/core/testing/src/testing.ts

@@ -29,6 +29,7 @@ export {
   inject,
   InjectSetupWrapper,
   withModule,
+  TestComponentOptions,
 } from './test_bed';
 export {
   TestComponentRenderer,