rename option to

Author: Simon Mumenthaler

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

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]) =>

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,15 +205,15 @@ 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();
   });
 
   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();