From c112930554c780fe6694cd6ee173834e01ed68f1 Mon Sep 17 00:00:00 2001
From: Simon Mumenthaler <simon@der-web.dev>
Date: Tue, 9 Jul 2024 10:23:12 +0200
Subject: [PATCH 1/4] new option `subscribeToOutputs` for render and rerender

---
 projects/testing-library/src/lib/models.ts    |  36 ++++-
 .../src/lib/testing-library.ts                | 146 ++++++++++++------
 projects/testing-library/tests/render.spec.ts |  71 ++++++++-
 3 files changed, 199 insertions(+), 54 deletions(-)

diff --git a/projects/testing-library/src/lib/models.ts b/projects/testing-library/src/lib/models.ts
index fad3394..e69244c 100644
--- a/projects/testing-library/src/lib/models.ts
+++ b/projects/testing-library/src/lib/models.ts
@@ -1,8 +1,14 @@
-import { Type, DebugElement } from '@angular/core';
-import {ComponentFixture, DeferBlockBehavior, DeferBlockState, TestBed} from '@angular/core/testing';
+import { Type, DebugElement, OutputRef } from '@angular/core';
+import { ComponentFixture, DeferBlockBehavior, DeferBlockState, TestBed } from '@angular/core/testing';
 import { Routes } from '@angular/router';
 import { BoundFunction, Queries, queries, Config as dtlConfig, PrettyDOMOptions } from '@testing-library/dom';
 
+export type SubscribeToOutputsKeysWithCallback<T> = {
+  [key in keyof T as T[key] extends OutputRef<any> ? key : never]?: T[key] extends OutputRef<infer U>
+    ? (val: U) => void
+    : never;
+};
+
 export type RenderResultQueries<Q extends Queries = typeof queries> = { [P in keyof Q]: BoundFunction<Q[P]> };
 export interface RenderResult<ComponentType, WrapperType = ComponentType> extends RenderResultQueries {
   /**
@@ -60,7 +66,7 @@ export interface RenderResult<ComponentType, WrapperType = ComponentType> extend
   rerender: (
     properties?: Pick<
       RenderTemplateOptions<ComponentType>,
-      'componentProperties' | 'componentInputs' | 'componentOutputs' | 'detectChangesOnRender'
+      'componentProperties' | 'componentInputs' | 'componentOutputs' | 'subscribeToOutputs' | 'detectChangesOnRender'
     > & { partialUpdate?: boolean },
   ) => Promise<void>;
   /**
@@ -205,12 +211,12 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
   /**
    * @description
    * An object to set `@Output` properties of the component
-   *
+   * @deprecated use the `subscribeToOutputs` option instead. When actually wanting to override properties, use the `componentProperties` option.
    * @default
    * {}
    *
    * @example
-   * const sendValue = (value) => { ... }
+   * const sendValue = new EventEmitter<any>();
    * await render(AppComponent, {
    *  componentOutputs: {
    *    send: {
@@ -220,6 +226,24 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
    * })
    */
   componentOutputs?: Partial<ComponentType>;
+
+  /**
+   * @description
+   * An object to subscribe to EventEmitters/Observables of the component
+   *
+   * @default
+   * {}
+   *
+   * @example
+   * const sendValue = (value) => { ... }
+   * await render(AppComponent, {
+   *  subscribeToOutputs: {
+   *    send: (_v:any) => void
+   *  }
+   * })
+   */
+  subscribeToOutputs?: SubscribeToOutputsKeysWithCallback<ComponentType>;
+
   /**
    * @description
    * A collection of providers to inject dependencies of the component.
@@ -379,7 +403,7 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
    * @description
    * Set the defer blocks behavior.
    */
-  deferBlockBehavior?: DeferBlockBehavior
+  deferBlockBehavior?: DeferBlockBehavior;
 }
 
 export interface ComponentOverride<T> {
diff --git a/projects/testing-library/src/lib/testing-library.ts b/projects/testing-library/src/lib/testing-library.ts
index 9b57b50..905debd 100644
--- a/projects/testing-library/src/lib/testing-library.ts
+++ b/projects/testing-library/src/lib/testing-library.ts
@@ -5,6 +5,8 @@ import {
   isStandalone,
   NgZone,
   OnChanges,
+  OutputRef,
+  OutputRefSubscription,
   SimpleChange,
   SimpleChanges,
   Type,
@@ -25,9 +27,17 @@ import {
   waitForOptions as dtlWaitForOptions,
   within as dtlWithin,
 } from '@testing-library/dom';
-import { ComponentOverride, RenderComponentOptions, RenderResult, RenderTemplateOptions } from './models';
+import {
+  ComponentOverride,
+  RenderComponentOptions,
+  RenderResult,
+  RenderTemplateOptions,
+  SubscribeToOutputsKeysWithCallback,
+} from './models';
 import { getConfig } from './config';
 
+type SubscribedOutput<T> = readonly [key: keyof T, callback: (v: any) => void, subscription: OutputRefSubscription];
+
 const mountedFixtures = new Set<ComponentFixture<any>>();
 const safeInject = TestBed.inject || TestBed.get;
 
@@ -57,6 +67,7 @@ export async function render<SutType, WrapperType = SutType>(
     componentProperties = {},
     componentInputs = {},
     componentOutputs = {},
+    subscribeToOutputs = {},
     componentProviders = [],
     childComponentOverrides = [],
     componentImports: componentImports,
@@ -165,7 +176,55 @@ export async function render<SutType, WrapperType = SutType>(
 
   let detectChanges: () => void;
 
-  const fixture = await renderFixture(componentProperties, componentInputs, componentOutputs);
+  let renderedPropKeys = Object.keys(componentProperties);
+  let renderedInputKeys = Object.keys(componentInputs);
+  let renderedOutputKeys = Object.keys(componentOutputs);
+  let subscribedOutputs: SubscribedOutput<SutType>[] = [];
+
+  const renderFixture = async (
+    properties: Partial<SutType>,
+    inputs: Partial<SutType>,
+    outputs: Partial<SutType>,
+    subscribeTo: SubscribeToOutputsKeysWithCallback<SutType>,
+  ): Promise<ComponentFixture<SutType>> => {
+    const createdFixture: ComponentFixture<SutType> = await createComponent(componentContainer);
+    setComponentProperties(createdFixture, properties);
+    setComponentInputs(createdFixture, inputs);
+    setComponentOutputs(createdFixture, outputs);
+    subscribedOutputs = subscribeToComponentOutputs(createdFixture, subscribeTo);
+
+    if (removeAngularAttributes) {
+      createdFixture.nativeElement.removeAttribute('ng-version');
+      const idAttribute = createdFixture.nativeElement.getAttribute('id');
+      if (idAttribute && idAttribute.startsWith('root')) {
+        createdFixture.nativeElement.removeAttribute('id');
+      }
+    }
+
+    mountedFixtures.add(createdFixture);
+
+    let isAlive = true;
+    createdFixture.componentRef.onDestroy(() => (isAlive = false));
+
+    if (hasOnChangesHook(createdFixture.componentInstance) && Object.keys(properties).length > 0) {
+      const changes = getChangesObj(null, componentProperties);
+      createdFixture.componentInstance.ngOnChanges(changes);
+    }
+
+    detectChanges = () => {
+      if (isAlive) {
+        createdFixture.detectChanges();
+      }
+    };
+
+    if (detectChangesOnRender) {
+      detectChanges();
+    }
+
+    return createdFixture;
+  };
+
+  const fixture = await renderFixture(componentProperties, componentInputs, componentOutputs, subscribeToOutputs);
 
   if (deferBlockStates) {
     if (Array.isArray(deferBlockStates)) {
@@ -177,13 +236,10 @@ export async function render<SutType, WrapperType = SutType>(
     }
   }
 
-  let renderedPropKeys = Object.keys(componentProperties);
-  let renderedInputKeys = Object.keys(componentInputs);
-  let renderedOutputKeys = Object.keys(componentOutputs);
   const rerender = async (
     properties?: Pick<
       RenderTemplateOptions<SutType>,
-      'componentProperties' | 'componentInputs' | 'componentOutputs' | 'detectChangesOnRender'
+      'componentProperties' | 'componentInputs' | 'componentOutputs' | 'subscribeToOutputs' | 'detectChangesOnRender'
     > & { partialUpdate?: boolean },
   ) => {
     const newComponentInputs = properties?.componentInputs ?? {};
@@ -205,6 +261,22 @@ export async function render<SutType, WrapperType = SutType>(
     setComponentOutputs(fixture, newComponentOutputs);
     renderedOutputKeys = Object.keys(newComponentOutputs);
 
+    // first unsubscribe the no longer available or changed callback-fns
+    const newSubscribeToOutputs: SubscribeToOutputsKeysWithCallback<SutType> = properties?.subscribeToOutputs ?? {};
+    for (const [key, cb, subscription] of subscribedOutputs) {
+      // when no longer provided or when the callback has changed
+      if (!(key in newSubscribeToOutputs) || cb !== (newSubscribeToOutputs as any)[key]) {
+        subscription.unsubscribe();
+      }
+    }
+    // then subscribe the new callback-fns
+    subscribedOutputs = Object.entries(newSubscribeToOutputs).map(([key, cb]) => {
+      const existing = subscribedOutputs.find(([k]) => k === key);
+      return existing && existing[1] === cb
+        ? existing // nothing to do
+        : subscribeToComponentOutput(fixture, key as keyof SutType, cb as (v: any) => void);
+    });
+
     const newComponentProps = properties?.componentProperties ?? {};
     const changesInComponentProps = update(
       fixture,
@@ -249,47 +321,6 @@ export async function render<SutType, WrapperType = SutType>(
         : console.log(dtlPrettyDOM(element, maxLength, options)),
     ...replaceFindWithFindAndDetectChanges(dtlGetQueriesForElement(fixture.nativeElement, queries)),
   };
-
-  async function renderFixture(
-    properties: Partial<SutType>,
-    inputs: Partial<SutType>,
-    outputs: Partial<SutType>,
-  ): Promise<ComponentFixture<SutType>> {
-    const createdFixture = await createComponent(componentContainer);
-    setComponentProperties(createdFixture, properties);
-    setComponentInputs(createdFixture, inputs);
-    setComponentOutputs(createdFixture, outputs);
-
-    if (removeAngularAttributes) {
-      createdFixture.nativeElement.removeAttribute('ng-version');
-      const idAttribute = createdFixture.nativeElement.getAttribute('id');
-      if (idAttribute && idAttribute.startsWith('root')) {
-        createdFixture.nativeElement.removeAttribute('id');
-      }
-    }
-
-    mountedFixtures.add(createdFixture);
-
-    let isAlive = true;
-    createdFixture.componentRef.onDestroy(() => (isAlive = false));
-
-    if (hasOnChangesHook(createdFixture.componentInstance) && Object.keys(properties).length > 0) {
-      const changes = getChangesObj(null, componentProperties);
-      createdFixture.componentInstance.ngOnChanges(changes);
-    }
-
-    detectChanges = () => {
-      if (isAlive) {
-        createdFixture.detectChanges();
-      }
-    };
-
-    if (detectChangesOnRender) {
-      detectChanges();
-    }
-
-    return createdFixture;
-  }
 }
 
 async function createComponent<SutType>(component: Type<SutType>): Promise<ComponentFixture<SutType>> {
@@ -355,6 +386,27 @@ function setComponentInputs<SutType>(
   }
 }
 
+function subscribeToComponentOutputs<SutType>(
+  fixture: ComponentFixture<SutType>,
+  listeners: SubscribeToOutputsKeysWithCallback<SutType>,
+): SubscribedOutput<SutType>[] {
+  // with Object.entries we lose the type information of the key and callback, therefore we need to cast them
+  return Object.entries(listeners).map(([key, cb]) =>
+    subscribeToComponentOutput(fixture, key as keyof SutType, cb as (v: any) => void),
+  );
+}
+
+function subscribeToComponentOutput<SutType>(
+  fixture: ComponentFixture<SutType>,
+  key: keyof SutType,
+  cb: (val: any) => void,
+): SubscribedOutput<SutType> {
+  const eventEmitter = (fixture.componentInstance as any)[key] as OutputRef<any>;
+  const subscription = eventEmitter.subscribe(cb);
+  fixture.componentRef.onDestroy(subscription.unsubscribe.bind(subscription));
+  return [key, cb, subscription];
+}
+
 function overrideComponentImports<SutType>(sut: Type<SutType> | string, imports: (Type<any> | any[])[] | undefined) {
   if (imports) {
     if (typeof sut === 'function' && isStandalone(sut)) {
diff --git a/projects/testing-library/tests/render.spec.ts b/projects/testing-library/tests/render.spec.ts
index 56f4608..09e4763 100644
--- a/projects/testing-library/tests/render.spec.ts
+++ b/projects/testing-library/tests/render.spec.ts
@@ -10,12 +10,14 @@ import {
   Injectable,
   EventEmitter,
   Output,
+  ElementRef,
+  inject,
 } from '@angular/core';
 import { NoopAnimationsModule, BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TestBed } from '@angular/core/testing';
 import { render, fireEvent, screen } from '../src/public_api';
 import { ActivatedRoute, Resolve, RouterModule } from '@angular/router';
-import { map } from 'rxjs';
+import { fromEvent, map } from 'rxjs';
 import { AsyncPipe, NgIf } from '@angular/common';
 
 @Component({
@@ -183,6 +185,73 @@ describe('componentOutputs', () => {
   });
 });
 
+describe('subscribeToOutputs', () => {
+  @Component({ template: ``, standalone: true })
+  class TestFixtureWithEventEmitterComponent {
+    @Output() readonly event = new EventEmitter<void>();
+  }
+
+  @Component({ template: ``, standalone: true })
+  class TestFixtureWithDerivedEventComponent {
+    @Output() readonly event = fromEvent<MouseEvent>(inject(ElementRef).nativeElement, 'click');
+  }
+
+  it('should subscribe passed listener to the component EventEmitter', async () => {
+    const spy = jest.fn();
+    const { fixture } = await render(TestFixtureWithEventEmitterComponent, { subscribeToOutputs: { event: spy } });
+    fixture.componentInstance.event.emit();
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('should unsubscribe on rerender without listener', async () => {
+    const spy = jest.fn();
+    const { fixture, rerender } = await render(TestFixtureWithEventEmitterComponent, {
+      subscribeToOutputs: { event: spy },
+    });
+
+    await rerender({});
+
+    fixture.componentInstance.event.emit();
+    expect(spy).not.toHaveBeenCalled();
+  });
+
+  it('should not unsubscribe when same listener function is used on rerender', async () => {
+    const spy = jest.fn();
+    const { fixture, rerender } = await render(TestFixtureWithEventEmitterComponent, {
+      subscribeToOutputs: { event: spy },
+    });
+
+    await rerender({ subscribeToOutputs: { event: spy } });
+
+    fixture.componentInstance.event.emit();
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('should unsubscribe old and subscribe new listener function on rerender', async () => {
+    const firstSpy = jest.fn();
+    const { fixture, rerender } = await render(TestFixtureWithEventEmitterComponent, {
+      subscribeToOutputs: { event: firstSpy },
+    });
+
+    const newSpy = jest.fn();
+    await rerender({ subscribeToOutputs: { event: newSpy } });
+
+    fixture.componentInstance.event.emit();
+
+    expect(firstSpy).not.toHaveBeenCalled();
+    expect(newSpy).toHaveBeenCalled();
+  });
+
+  it('should subscribe passed listener to derived component outputs', async () => {
+    const spy = jest.fn();
+    const { fixture } = await render(TestFixtureWithDerivedEventComponent, {
+      subscribeToOutputs: { event: spy },
+    });
+    fireEvent.click(fixture.nativeElement);
+    expect(spy).toHaveBeenCalled();
+  });
+});
+
 describe('animationModule', () => {
   @NgModule({
     declarations: [FixtureComponent],

From b935d101319684b66e6af58473a3f5d90f8b0ae2 Mon Sep 17 00:00:00 2001
From: Simon Mumenthaler <simon@der-web.dev>
Date: Tue, 16 Jul 2024 22:26:03 +0200
Subject: [PATCH 2/4] add test with functional output api

---
 projects/testing-library/tests/render.spec.ts | 31 ++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/projects/testing-library/tests/render.spec.ts b/projects/testing-library/tests/render.spec.ts
index 09e4763..a19cc6e 100644
--- a/projects/testing-library/tests/render.spec.ts
+++ b/projects/testing-library/tests/render.spec.ts
@@ -12,7 +12,9 @@ import {
   Output,
   ElementRef,
   inject,
+  output,
 } from '@angular/core';
+import { outputFromObservable } from '@angular/core/rxjs-interop';
 import { NoopAnimationsModule, BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TestBed } from '@angular/core/testing';
 import { render, fireEvent, screen } from '../src/public_api';
@@ -196,6 +198,11 @@ describe('subscribeToOutputs', () => {
     @Output() readonly event = fromEvent<MouseEvent>(inject(ElementRef).nativeElement, 'click');
   }
 
+  @Component({ template: ``, standalone: true })
+  class TestFixtureWithFunctionalOutputComponent {
+    readonly event = output<string>();
+  }
+
   it('should subscribe passed listener to the component EventEmitter', async () => {
     const spy = jest.fn();
     const { fixture } = await render(TestFixtureWithEventEmitterComponent, { subscribeToOutputs: { event: spy } });
@@ -242,7 +249,7 @@ describe('subscribeToOutputs', () => {
     expect(newSpy).toHaveBeenCalled();
   });
 
-  it('should subscribe passed listener to derived component outputs', async () => {
+  it('should subscribe passed listener to a derived component output', async () => {
     const spy = jest.fn();
     const { fixture } = await render(TestFixtureWithDerivedEventComponent, {
       subscribeToOutputs: { event: spy },
@@ -250,6 +257,28 @@ describe('subscribeToOutputs', () => {
     fireEvent.click(fixture.nativeElement);
     expect(spy).toHaveBeenCalled();
   });
+
+  it('should subscribe passed listener to a functional component output', async () => {
+    const spy = jest.fn();
+    const { fixture } = await render(TestFixtureWithFunctionalOutputComponent, {
+      subscribeToOutputs: { event: spy },
+    });
+    fixture.componentInstance.event.emit('test');
+    expect(spy).toHaveBeenCalledWith('test');
+  });
+
+  it('should subscribe passed listener to a functional derived component output', async () => {
+    @Component({ template: ``, standalone: true })
+    class TestFixtureWithFunctionalDerivedEventComponent {
+      readonly event = outputFromObservable(fromEvent<MouseEvent>(inject(ElementRef).nativeElement, 'click'));
+    }
+    const spy = jest.fn();
+    const { fixture } = await render(TestFixtureWithFunctionalDerivedEventComponent, {
+      subscribeToOutputs: { event: spy },
+    });
+    fireEvent.click(fixture.nativeElement);
+    expect(spy).toHaveBeenCalled();
+  });
 });
 
 describe('animationModule', () => {

From 46bc4a0f7d0f8bcabb2bb58d134de0c9829c3724 Mon Sep 17 00:00:00 2001
From: Simon Mumenthaler <simon@der-web.dev>
Date: Tue, 16 Jul 2024 22:34:30 +0200
Subject: [PATCH 3/4] rename option to

---
 projects/testing-library/src/lib/models.ts    | 10 +++++-----
 .../src/lib/testing-library.ts                | 18 ++++++++---------
 projects/testing-library/tests/render.spec.ts | 20 +++++++++----------
 3 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/projects/testing-library/src/lib/models.ts b/projects/testing-library/src/lib/models.ts
index e69244c..6482787 100644
--- a/projects/testing-library/src/lib/models.ts
+++ b/projects/testing-library/src/lib/models.ts
@@ -3,7 +3,7 @@ import { ComponentFixture, DeferBlockBehavior, DeferBlockState, TestBed } from '
 import { Routes } from '@angular/router';
 import { BoundFunction, Queries, queries, Config as dtlConfig, PrettyDOMOptions } from '@testing-library/dom';
 
-export type SubscribeToOutputsKeysWithCallback<T> = {
+export type OutputRefKeysWithCallback<T> = {
   [key in keyof T as T[key] extends OutputRef<any> ? key : never]?: T[key] extends OutputRef<infer U>
     ? (val: U) => void
     : never;
@@ -66,7 +66,7 @@ export interface RenderResult<ComponentType, WrapperType = ComponentType> extend
   rerender: (
     properties?: Pick<
       RenderTemplateOptions<ComponentType>,
-      'componentProperties' | 'componentInputs' | 'componentOutputs' | 'subscribeToOutputs' | 'detectChangesOnRender'
+      'componentProperties' | 'componentInputs' | 'componentOutputs' | 'on' | 'detectChangesOnRender'
     > & { partialUpdate?: boolean },
   ) => Promise<void>;
   /**
@@ -211,7 +211,7 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
   /**
    * @description
    * An object to set `@Output` properties of the component
-   * @deprecated use the `subscribeToOutputs` option instead. When actually wanting to override properties, use the `componentProperties` option.
+   * @deprecated use the `on` option instead. When it is necessary to override properties, use the `componentProperties` option.
    * @default
    * {}
    *
@@ -237,12 +237,12 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
    * @example
    * const sendValue = (value) => { ... }
    * await render(AppComponent, {
-   *  subscribeToOutputs: {
+   *  on: {
    *    send: (_v:any) => void
    *  }
    * })
    */
-  subscribeToOutputs?: SubscribeToOutputsKeysWithCallback<ComponentType>;
+  on?: OutputRefKeysWithCallback<ComponentType>;
 
   /**
    * @description
diff --git a/projects/testing-library/src/lib/testing-library.ts b/projects/testing-library/src/lib/testing-library.ts
index 905debd..0ceda24 100644
--- a/projects/testing-library/src/lib/testing-library.ts
+++ b/projects/testing-library/src/lib/testing-library.ts
@@ -32,7 +32,7 @@ import {
   RenderComponentOptions,
   RenderResult,
   RenderTemplateOptions,
-  SubscribeToOutputsKeysWithCallback,
+  OutputRefKeysWithCallback,
 } from './models';
 import { getConfig } from './config';
 
@@ -67,7 +67,7 @@ export async function render<SutType, WrapperType = SutType>(
     componentProperties = {},
     componentInputs = {},
     componentOutputs = {},
-    subscribeToOutputs = {},
+    on = {},
     componentProviders = [],
     childComponentOverrides = [],
     componentImports: componentImports,
@@ -185,7 +185,7 @@ export async function render<SutType, WrapperType = SutType>(
     properties: Partial<SutType>,
     inputs: Partial<SutType>,
     outputs: Partial<SutType>,
-    subscribeTo: SubscribeToOutputsKeysWithCallback<SutType>,
+    subscribeTo: OutputRefKeysWithCallback<SutType>,
   ): Promise<ComponentFixture<SutType>> => {
     const createdFixture: ComponentFixture<SutType> = await createComponent(componentContainer);
     setComponentProperties(createdFixture, properties);
@@ -224,7 +224,7 @@ export async function render<SutType, WrapperType = SutType>(
     return createdFixture;
   };
 
-  const fixture = await renderFixture(componentProperties, componentInputs, componentOutputs, subscribeToOutputs);
+  const fixture = await renderFixture(componentProperties, componentInputs, componentOutputs, on);
 
   if (deferBlockStates) {
     if (Array.isArray(deferBlockStates)) {
@@ -239,7 +239,7 @@ export async function render<SutType, WrapperType = SutType>(
   const rerender = async (
     properties?: Pick<
       RenderTemplateOptions<SutType>,
-      'componentProperties' | 'componentInputs' | 'componentOutputs' | 'subscribeToOutputs' | 'detectChangesOnRender'
+      'componentProperties' | 'componentInputs' | 'componentOutputs' | 'on' | 'detectChangesOnRender'
     > & { partialUpdate?: boolean },
   ) => {
     const newComponentInputs = properties?.componentInputs ?? {};
@@ -262,15 +262,15 @@ export async function render<SutType, WrapperType = SutType>(
     renderedOutputKeys = Object.keys(newComponentOutputs);
 
     // first unsubscribe the no longer available or changed callback-fns
-    const newSubscribeToOutputs: SubscribeToOutputsKeysWithCallback<SutType> = properties?.subscribeToOutputs ?? {};
+    const newObservableSubscriptions: OutputRefKeysWithCallback<SutType> = properties?.on ?? {};
     for (const [key, cb, subscription] of subscribedOutputs) {
       // when no longer provided or when the callback has changed
-      if (!(key in newSubscribeToOutputs) || cb !== (newSubscribeToOutputs as any)[key]) {
+      if (!(key in newObservableSubscriptions) || cb !== (newObservableSubscriptions as any)[key]) {
         subscription.unsubscribe();
       }
     }
     // then subscribe the new callback-fns
-    subscribedOutputs = Object.entries(newSubscribeToOutputs).map(([key, cb]) => {
+    subscribedOutputs = Object.entries(newObservableSubscriptions).map(([key, cb]) => {
       const existing = subscribedOutputs.find(([k]) => k === key);
       return existing && existing[1] === cb
         ? existing // nothing to do
@@ -388,7 +388,7 @@ function setComponentInputs<SutType>(
 
 function subscribeToComponentOutputs<SutType>(
   fixture: ComponentFixture<SutType>,
-  listeners: SubscribeToOutputsKeysWithCallback<SutType>,
+  listeners: OutputRefKeysWithCallback<SutType>,
 ): SubscribedOutput<SutType>[] {
   // with Object.entries we lose the type information of the key and callback, therefore we need to cast them
   return Object.entries(listeners).map(([key, cb]) =>
diff --git a/projects/testing-library/tests/render.spec.ts b/projects/testing-library/tests/render.spec.ts
index a19cc6e..68370cc 100644
--- a/projects/testing-library/tests/render.spec.ts
+++ b/projects/testing-library/tests/render.spec.ts
@@ -187,7 +187,7 @@ describe('componentOutputs', () => {
   });
 });
 
-describe('subscribeToOutputs', () => {
+describe('on', () => {
   @Component({ template: ``, standalone: true })
   class TestFixtureWithEventEmitterComponent {
     @Output() readonly event = new EventEmitter<void>();
@@ -205,7 +205,7 @@ describe('subscribeToOutputs', () => {
 
   it('should subscribe passed listener to the component EventEmitter', async () => {
     const spy = jest.fn();
-    const { fixture } = await render(TestFixtureWithEventEmitterComponent, { subscribeToOutputs: { event: spy } });
+    const { fixture } = await render(TestFixtureWithEventEmitterComponent, { on: { event: spy } });
     fixture.componentInstance.event.emit();
     expect(spy).toHaveBeenCalled();
   });
@@ -213,7 +213,7 @@ describe('subscribeToOutputs', () => {
   it('should unsubscribe on rerender without listener', async () => {
     const spy = jest.fn();
     const { fixture, rerender } = await render(TestFixtureWithEventEmitterComponent, {
-      subscribeToOutputs: { event: spy },
+      on: { event: spy },
     });
 
     await rerender({});
@@ -225,10 +225,10 @@ describe('subscribeToOutputs', () => {
   it('should not unsubscribe when same listener function is used on rerender', async () => {
     const spy = jest.fn();
     const { fixture, rerender } = await render(TestFixtureWithEventEmitterComponent, {
-      subscribeToOutputs: { event: spy },
+      on: { event: spy },
     });
 
-    await rerender({ subscribeToOutputs: { event: spy } });
+    await rerender({ on: { event: spy } });
 
     fixture.componentInstance.event.emit();
     expect(spy).toHaveBeenCalled();
@@ -237,11 +237,11 @@ describe('subscribeToOutputs', () => {
   it('should unsubscribe old and subscribe new listener function on rerender', async () => {
     const firstSpy = jest.fn();
     const { fixture, rerender } = await render(TestFixtureWithEventEmitterComponent, {
-      subscribeToOutputs: { event: firstSpy },
+      on: { event: firstSpy },
     });
 
     const newSpy = jest.fn();
-    await rerender({ subscribeToOutputs: { event: newSpy } });
+    await rerender({ on: { event: newSpy } });
 
     fixture.componentInstance.event.emit();
 
@@ -252,7 +252,7 @@ describe('subscribeToOutputs', () => {
   it('should subscribe passed listener to a derived component output', async () => {
     const spy = jest.fn();
     const { fixture } = await render(TestFixtureWithDerivedEventComponent, {
-      subscribeToOutputs: { event: spy },
+      on: { event: spy },
     });
     fireEvent.click(fixture.nativeElement);
     expect(spy).toHaveBeenCalled();
@@ -261,7 +261,7 @@ describe('subscribeToOutputs', () => {
   it('should subscribe passed listener to a functional component output', async () => {
     const spy = jest.fn();
     const { fixture } = await render(TestFixtureWithFunctionalOutputComponent, {
-      subscribeToOutputs: { event: spy },
+      on: { event: spy },
     });
     fixture.componentInstance.event.emit('test');
     expect(spy).toHaveBeenCalledWith('test');
@@ -274,7 +274,7 @@ describe('subscribeToOutputs', () => {
     }
     const spy = jest.fn();
     const { fixture } = await render(TestFixtureWithFunctionalDerivedEventComponent, {
-      subscribeToOutputs: { event: spy },
+      on: { event: spy },
     });
     fireEvent.click(fixture.nativeElement);
     expect(spy).toHaveBeenCalled();

From 54d9e1731e6592e43c0b16dcde85d4ec1c90e44c Mon Sep 17 00:00:00 2001
From: Simon Mumenthaler <simon@der-web.dev>
Date: Thu, 18 Jul 2024 12:22:29 +0200
Subject: [PATCH 4/4] fix type `OutputRefKeysWithCallback` and add typings
 tests

---
 projects/testing-library/src/lib/models.ts    |  8 ++--
 projects/testing-library/tests/render.spec.ts | 40 ++++++++++++++++---
 2 files changed, 40 insertions(+), 8 deletions(-)

diff --git a/projects/testing-library/src/lib/models.ts b/projects/testing-library/src/lib/models.ts
index 6482787..3cf053a 100644
--- a/projects/testing-library/src/lib/models.ts
+++ b/projects/testing-library/src/lib/models.ts
@@ -1,10 +1,12 @@
-import { Type, DebugElement, OutputRef } from '@angular/core';
+import { Type, DebugElement, OutputRef, EventEmitter } from '@angular/core';
 import { ComponentFixture, DeferBlockBehavior, DeferBlockState, TestBed } from '@angular/core/testing';
 import { Routes } from '@angular/router';
 import { BoundFunction, Queries, queries, Config as dtlConfig, PrettyDOMOptions } from '@testing-library/dom';
 
 export type OutputRefKeysWithCallback<T> = {
-  [key in keyof T as T[key] extends OutputRef<any> ? key : never]?: T[key] extends OutputRef<infer U>
+  [key in keyof T]?: T[key] extends EventEmitter<infer U>
+    ? (val: U) => void
+    : T[key] extends OutputRef<infer U>
     ? (val: U) => void
     : never;
 };
@@ -229,7 +231,7 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
 
   /**
    * @description
-   * An object to subscribe to EventEmitters/Observables of the component
+   * An object with callbacks to subscribe to EventEmitters/Observables of the component
    *
    * @default
    * {}
diff --git a/projects/testing-library/tests/render.spec.ts b/projects/testing-library/tests/render.spec.ts
index 68370cc..b73c9c7 100644
--- a/projects/testing-library/tests/render.spec.ts
+++ b/projects/testing-library/tests/render.spec.ts
@@ -17,7 +17,7 @@ import {
 import { outputFromObservable } from '@angular/core/rxjs-interop';
 import { NoopAnimationsModule, BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TestBed } from '@angular/core/testing';
-import { render, fireEvent, screen } from '../src/public_api';
+import { render, fireEvent, screen, OutputRefKeysWithCallback } from '../src/public_api';
 import { ActivatedRoute, Resolve, RouterModule } from '@angular/router';
 import { fromEvent, map } from 'rxjs';
 import { AsyncPipe, NgIf } from '@angular/common';
@@ -203,6 +203,11 @@ describe('on', () => {
     readonly event = output<string>();
   }
 
+  @Component({ template: ``, standalone: true })
+  class TestFixtureWithFunctionalDerivedEventComponent {
+    readonly event = outputFromObservable(fromEvent<MouseEvent>(inject(ElementRef).nativeElement, 'click'));
+  }
+
   it('should subscribe passed listener to the component EventEmitter', async () => {
     const spy = jest.fn();
     const { fixture } = await render(TestFixtureWithEventEmitterComponent, { on: { event: spy } });
@@ -268,10 +273,6 @@ describe('on', () => {
   });
 
   it('should subscribe passed listener to a functional derived component output', async () => {
-    @Component({ template: ``, standalone: true })
-    class TestFixtureWithFunctionalDerivedEventComponent {
-      readonly event = outputFromObservable(fromEvent<MouseEvent>(inject(ElementRef).nativeElement, 'click'));
-    }
     const spy = jest.fn();
     const { fixture } = await render(TestFixtureWithFunctionalDerivedEventComponent, {
       on: { event: spy },
@@ -279,6 +280,35 @@ describe('on', () => {
     fireEvent.click(fixture.nativeElement);
     expect(spy).toHaveBeenCalled();
   });
+
+  it('OutputRefKeysWithCallback is correctly typed', () => {
+    const fnWithVoidArg = (_: void) => void 0;
+    const fnWithNumberArg = (_: number) => void 0;
+    const fnWithStringArg = (_: string) => void 0;
+    const fnWithMouseEventArg = (_: MouseEvent) => void 0;
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    function _test<T>(_on: OutputRefKeysWithCallback<T>) {}
+
+    // @ts-expect-error
+    _test<TestFixtureWithEventEmitterComponent>({ event: fnWithNumberArg });
+    _test<TestFixtureWithEventEmitterComponent>({ event: fnWithVoidArg });
+
+    // @ts-expect-error
+    _test<TestFixtureWithDerivedEventComponent>({ event: fnWithNumberArg });
+    _test<TestFixtureWithDerivedEventComponent>({ event: fnWithMouseEventArg });
+
+    // @ts-expect-error
+    _test<TestFixtureWithFunctionalOutputComponent>({ event: fnWithNumberArg });
+    _test<TestFixtureWithFunctionalOutputComponent>({ event: fnWithStringArg });
+
+    // @ts-expect-error
+    _test<TestFixtureWithFunctionalDerivedEventComponent>({ event: fnWithNumberArg });
+    _test<TestFixtureWithFunctionalDerivedEventComponent>({ event: fnWithMouseEventArg });
+
+    // add a statement so the test succeeds
+    expect(true).toBeTruthy();
+  });
 });
 
 describe('animationModule', () => {