Improve signal handling (#262)

* feat: support signals with transform

* feat: provide helper method to set a single input value

* feat: support output signals

* refactor: prettify files

* refactor: cleanup after review

---------

Co-authored-by: Jasmin Ebner <jasmin.ebner@kwsoft.ch>

Author: jebner

lib/examples/component-with-bindings.spec.ts

@@ -1,4 +1,4 @@
-import { Component, EventEmitter, input, Input, NgModule, OnChanges, Output } from '@angular/core';
+import { Component, EventEmitter, input, Input, NgModule, OnChanges, output, Output } from '@angular/core';
 import { Shallow } from '../shallow';
 
 ////// Module Setup //////
@@ -12,19 +12,26 @@ interface Person {
   standalone: false,
   selector: 'born-in',
   template: `
-    <label id="personLabel" (click)="selected.emit(person)">
+    <label id="personLabel" (click)="selectPerson.emit(person)">
       {{ person.firstName }} {{ person.lastName }} was born in {{ person.birthDate.getFullYear() }}
     </label>
-    <label id="partnerLabel" (click)="selected.emit(partner())">
+    <label id="partnerLabel" (click)="selectPartner.emit(partner())">
       {{ partner().firstName }} {{ partner().lastName }} was born in {{ partner().birthDate.getFullYear() }}
     </label>
+    <div id="personAge">
+      {{ age() }}
+    </div>
     <label id="ngOnChangesCount">{{ ngOnChangesCount }}</label>
   `,
 })
 class BornInComponent implements OnChanges {
   @Input({ required: true }) person!: Person;
   partner = input.required<Person>();
-  @Output() selected = new EventEmitter<Person>();
+  age = input<string, number>('Age not provided', {
+    transform: (value: number) => `${value} years old`,
+  });
+  @Output() selectPerson = new EventEmitter<Person>();
+  selectPartner = output<Person>();
 
   public ngOnChangesCount = 0;
 
@@ -59,24 +66,39 @@ describe('component with bindings', () => {
   };
 
   it('displays the name and year the person was born', async () => {
-    const { find } = await shallow.render({ bind: { person, partner } });
+    const { find } = await shallow.render({ bind: { person, partner, age: 17 } });
 
     expect(find('#personLabel').nativeElement.textContent).toContain('Brandon Domingue was born in 1982');
     expect(find('#partnerLabel').nativeElement.textContent).toContain('John Doe was born in 1990');
+    expect(find('#personAge').nativeElement.textContent).toContain('17 years old');
   });
 
   it('emits the person when clicked', async () => {
     const { find, outputs } = await shallow.render({ bind: { person, partner } });
     find('#personLabel').nativeElement.click();
 
-    expect(outputs.selected.emit).toHaveBeenCalledWith(person);
+    expect(outputs.selectPerson.emit).toHaveBeenCalledWith(person);
   });
 
   it('emits the partner when clicked', async () => {
     const { find, outputs } = await shallow.render({ bind: { person, partner } });
     find('#partnerLabel').nativeElement.click();
 
-    expect(outputs.selected.emit).toHaveBeenCalledWith(partner);
+    expect(outputs.selectPartner.emit).toHaveBeenCalledWith(partner);
+  });
+
+  it('updates the age considering the transform function', async () => {
+    const { find, fixture, bindings } = await shallow.render({ bind: { person: person, partner: partner, age: 7 } });
+
+    // way 1: Update using the bindings
+    bindings.age = 8;
+    fixture.detectChanges();
+    expect(find('#personAge').nativeElement.textContent).toContain('8 years old');
+
+    // way 2: Update using `updateBinding` function, similar as it's done with `ComponentRef.updateBinding`
+    fixture.componentInstance.updateBinding('age', 9);
+    fixture.detectChanges();
+    expect(find('#personAge').nativeElement.textContent).toContain('9 years old');
   });
 
   it('displays the number of times the person was updated', async () => {

lib/models/recursive-partial.ts

@@ -2,10 +2,10 @@
  * Utility type that converts an object to recursively have optional properties.
  * This includes items an arrays and return values for functions.
  */
-import { InputSignal } from '@angular/core';
+import { InputSignal, InputSignalWithTransform } from '@angular/core';
 
 export type RecursivePartial<T> = Partial<{
-  [key in keyof T]: T[key] extends InputSignal<infer U> // Handle signals like input() and input.required()
+  [key in keyof T]: T[key] extends InputSignal<infer U> | InputSignalWithTransform<any, infer U> // Handle signals like input() and input.required()
     ? RecursivePartial<U> // Extract the type and recursively apply RecursivePartial
     : T[key] extends (...a: Array<infer U>) => any // Function-based properties (like methods or other signals)
       ? (...a: Array<U>) => RecursivePartial<ReturnType<T[key]>> | ReturnType<T[key]>

lib/models/renderer.ts

@@ -1,4 +1,4 @@
-import { Directive, EventEmitter, Type } from '@angular/core';
+import { Directive, EventEmitter, OutputEmitterRef, Type } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { testFramework } from '../test-frameworks/test-framework';
@@ -145,7 +145,7 @@ export class Renderer<TComponent extends object> {
     const outputs = reflect.getInputsAndOutputs(this._setup.testComponentOrService).outputs;
     outputs.forEach(({ propertyName }) => {
       const value = (instance as any)[propertyName];
-      if (value && value instanceof EventEmitter) {
+      if (value && (value instanceof EventEmitter || value instanceof OutputEmitterRef)) {
         testFramework.spyOn(value, 'emit');
       }
     });

lib/models/rendering.ts

@@ -1,7 +1,7 @@
-import { DebugElement, EventEmitter, Type, InjectionToken, AbstractType } from '@angular/core';
+import { DebugElement, Type, InjectionToken, AbstractType } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { outputProxy, PickByType } from '../tools/output-proxy';
+import { outputProxy, OutputTypes, PickByType } from '../tools/output-proxy';
 import { createQueryMatch, QueryMatch } from './query-match';
 import { TestSetup } from './test-setup';
 import { MockDirective } from '../tools/mock-directive';
@@ -44,7 +44,7 @@ export class Rendering<TComponent extends object, TBindings> {
     private readonly _setup: TestSetup<TComponent>,
   ) {}
 
-  readonly outputs: PickByType<TComponent, EventEmitter<any>> = outputProxy(this.instance);
+  readonly outputs: PickByType<TComponent, OutputTypes> = outputProxy(this.instance);
 
   /////////////////////////////////////////////////////////////////////////////
   // The following methods MUST be arrow functions so they can be deconstructured

lib/tools/create-container.spec.ts

@@ -24,4 +24,14 @@ describe('createContainerComponent', () => {
     container.foo();
     expect(container.foo).toHaveBeenCalled();
   });
+
+  it('provides method to set the input', () => {
+    const bindings: any = { foo: 'foo', bar: 'bar' };
+    const Container = createContainer('', bindings);
+    const container: any = new Container();
+
+    container.updateBinding('foo', 'fooo');
+
+    expect(container.foo).toBe('fooo');
+  });
 });

lib/tools/create-container.ts

@@ -12,16 +12,21 @@ export function createContainer(
   // eslint-disable-next-line @angular-eslint/prefer-standalone
   @Component({ template, imports, standalone })
   class ProxyShallowContainerComponent extends ShallowRenderContainer {
+    private bindings: any;
     constructor() {
       super();
-      const spies = spyOnBindings(bindings);
+      this.bindings = spyOnBindings(bindings);
       Object.defineProperties(
         ProxyShallowContainerComponent.prototype,
-        Object.keys(spies).reduce((acc, key) => {
-          return { ...acc, [key]: { get: () => spies[key] } };
+        Object.keys(this.bindings).reduce((acc, key) => {
+          return { ...acc, [key]: { get: () => this.bindings[key] } };
         }, {}),
       );
     }
+
+    updateBinding(name: string, value: any): void {
+      this.bindings[name] = value;
+    }
   }
 
   return ProxyShallowContainerComponent;

lib/tools/output-proxy.spec.ts

@@ -1,28 +1,34 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, output, Output } from '@angular/core';
 import {
   outputProxy,
+  OutputTypes,
   PickByType,
-  PropertyNotAnEventEmitterError,
+  PropertyNotAnEventEmitterOrSignalOutputError,
   PropertyNotMarkedAsOutputError,
 } from './output-proxy';
+import { TestBed } from '@angular/core/testing';
 
 describe('outputProxy', () => {
   @Component({
     standalone: false,
     selector: 'Foo',
-    template: '<h1/>',
+    template: '<h1>Foo</h1>',
   })
   class FooComponent {
     @Output() normalOutput = new EventEmitter<string>();
     @Output() notAnEventEmitter = 'foo';
     @Output('renamed') renamedOutput = new EventEmitter<string>();
+    signalOutput = output<string>();
     notMarkedAsOutput = new EventEmitter<string>();
   }
   let component: FooComponent;
-  let outputs: PickByType<FooComponent, EventEmitter<any>>;
+  let outputs: PickByType<FooComponent, OutputTypes>;
 
-  beforeEach(() => {
-    component = new FooComponent();
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({}).compileComponents();
+
+    const fixture = TestBed.createComponent(FooComponent);
+    component = fixture.componentInstance;
     outputs = outputProxy(component);
   });
 
@@ -34,12 +40,16 @@ describe('outputProxy', () => {
     expect(outputs.renamedOutput).toBe(component.renamedOutput);
   });
 
+  it('works with signal outputs', () => {
+    expect(outputs.signalOutput).toBe(component.signalOutput);
+  });
+
   it('throws an error if the property is not an EventEmitter', () => {
     try {
       String((outputs as any).notAnEventEmitter);
       fail('should have thrown an error');
     } catch (e) {
-      expect(e).toBeInstanceOf(PropertyNotAnEventEmitterError);
+      expect(e).toBeInstanceOf(PropertyNotAnEventEmitterOrSignalOutputError);
     }
   });
 

lib/tools/output-proxy.ts

@@ -1,4 +1,4 @@
-import { EventEmitter } from '@angular/core';
+import { EventEmitter, OutputEmitterRef } from '@angular/core';
 import { CustomError } from '../models/custom-error';
 import { reflect } from './reflect';
 
@@ -10,6 +10,8 @@ export type KeysOfType<TObject, TPropertyType> = {
 
 export type PickByType<TObject, TPropertyType> = Pick<TObject, KeysOfType<TObject, TPropertyType>>;
 
+export type OutputTypes = EventEmitter<any> | OutputEmitterRef<any>;
+
 export class PropertyNotMarkedAsOutputError extends CustomError {
   constructor(key: string | symbol | number, component: any) {
     super(
@@ -19,19 +21,17 @@ export class PropertyNotMarkedAsOutputError extends CustomError {
   }
 }
 
-export class PropertyNotAnEventEmitterError extends CustomError {
+export class PropertyNotAnEventEmitterOrSignalOutputError extends CustomError {
   constructor(key: string | symbol | number, component: any) {
     super(
-      `${String(key)} is not an instance of an EventEmitter. ` +
+      `${String(key)} is not an instance of an EventEmitter or a Signal Output. ` +
         `Check that it is properly defined and set on the ${className(component)} class`,
     );
   }
 }
 
 // eslint-disable-next-line @typescript-eslint/ban-types
-export const outputProxy = <TComponent extends Object>(
-  component: TComponent,
-): PickByType<TComponent, EventEmitter<any>> => {
+export const outputProxy = <TComponent extends Object>(component: TComponent): PickByType<TComponent, OutputTypes> => {
   const outputs = reflect.getInputsAndOutputs(component.constructor).outputs.map(o => o.propertyName);
 
   return new Proxy(
@@ -42,8 +42,8 @@ export const outputProxy = <TComponent extends Object>(
           throw new PropertyNotMarkedAsOutputError(key, component);
         }
         const maybeOutput = (component as any)[key];
-        if (!(maybeOutput instanceof EventEmitter)) {
-          throw new PropertyNotAnEventEmitterError(key, component);
+        if (!(maybeOutput instanceof EventEmitter) && !(maybeOutput instanceof OutputEmitterRef)) {
+          throw new PropertyNotAnEventEmitterOrSignalOutputError(key, component);
         }
 
         return maybeOutput;