refactor: stronger typing of inputs

Author: andreialecu

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

@@ -1,4 +1,4 @@
-import { Type, DebugElement, OutputRef, EventEmitter } from '@angular/core';
+import { Type, DebugElement, OutputRef, EventEmitter, Signal } 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';
@@ -78,6 +78,29 @@ export interface RenderResult<ComponentType, WrapperType = ComponentType> extend
   renderDeferBlock: (deferBlockState: DeferBlockState, deferBlockIndex?: number) => Promise<void>;
 }
 
+declare const ALIASED_INPUT_BRAND: unique symbol;
+export type AliasedInput<T> = T & {
+  [ALIASED_INPUT_BRAND]: T;
+};
+export type AliasedInputs = Record<string, AliasedInput<unknown>>;
+
+export type ComponentInput<T> =
+  | {
+      [P in keyof T]?: T[P] extends Signal<infer U>
+        ? U // If the property is a Signal, apply Partial to the inner type
+        : Partial<T[P]>; // Otherwise, apply Partial to the property itself
+    }
+  | AliasedInputs;
+
+/**
+ * @description
+ * Creates an aliased input branded type with a value
+ *
+ */
+export function aliasedInputWithValue<T>(value: T): AliasedInput<T> {
+  return value as AliasedInput<T>;
+}
+
 export interface RenderComponentOptions<ComponentType, Q extends Queries = typeof queries> {
   /**
    * @description
@@ -199,6 +222,7 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
    * @description
    * An object to set `@Input` properties of the component
    *
+   * @deprecated use the `inputs` option instead. When you need to use aliases, use the `aliasedInputWithValue(...)` helper function.
    * @default
    * {}
    *
@@ -210,6 +234,23 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
    * })
    */
   componentInputs?: Partial<ComponentType> | { [alias: string]: unknown };
+
+  /**
+   * @description
+   * An object to set `@Input` or `input()` properties of the component
+   *
+   * @default
+   * {}
+   *
+   * @example
+   * await render(AppComponent, {
+   * inputs: {
+   *  counterValue: 10,
+   *  someAlias: aliasedInputWithValue('value')
+   * }
+   */
+  inputs?: ComponentInput<ComponentType>;
+
   /**
    * @description
    * An object to set `@Output` properties of the component

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

@@ -67,6 +67,7 @@ export async function render<SutType, WrapperType = SutType>(
     componentProperties = {},
     componentInputs = {},
     componentOutputs = {},
+    inputs: newInputs = {},
     on = {},
     componentProviders = [],
     childComponentOverrides = [],
@@ -176,8 +177,10 @@ export async function render<SutType, WrapperType = SutType>(
 
   let detectChanges: () => void;
 
+  const allInputs = { ...componentInputs, ...newInputs };
+
   let renderedPropKeys = Object.keys(componentProperties);
-  let renderedInputKeys = Object.keys(componentInputs);
+  let renderedInputKeys = Object.keys(allInputs);
   let renderedOutputKeys = Object.keys(componentOutputs);
   let subscribedOutputs: SubscribedOutput<SutType>[] = [];
 
@@ -224,7 +227,7 @@ export async function render<SutType, WrapperType = SutType>(
     return createdFixture;
   };
 
-  const fixture = await renderFixture(componentProperties, componentInputs, componentOutputs, on);
+  const fixture = await renderFixture(componentProperties, allInputs, componentOutputs, on);
 
   if (deferBlockStates) {
     if (Array.isArray(deferBlockStates)) {

projects/testing-library/tests/render.spec.ts

@@ -13,11 +13,12 @@ import {
   ElementRef,
   inject,
   output,
+  input,
 } 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, OutputRefKeysWithCallback } from '../src/public_api';
+import { render, fireEvent, screen, OutputRefKeysWithCallback, aliasedInputWithValue } from '../src/public_api';
 import { ActivatedRoute, Resolve, RouterModule } from '@angular/router';
 import { fromEvent, map } from 'rxjs';
 import { AsyncPipe, NgIf } from '@angular/common';
@@ -533,3 +534,46 @@ describe('configureTestBed', () => {
     expect(configureTestBedFn).toHaveBeenCalledTimes(1);
   });
 });
+
+describe('inputs and signals', () => {
+  @Component({
+    selector: 'atl-fixture',
+    template: `<span>{{ myName() }}</span> <span>{{ myJob() }}</span>`,
+  })
+  class InputComponent {
+    myName = input('foo');
+
+    myJob = input('bar', { alias: 'job' });
+  }
+
+  it('should set the input component', async () => {
+    await render(InputComponent, {
+      inputs: {
+        myName: 'Bob',
+        job: aliasedInputWithValue('Builder'),
+      },
+    });
+
+    expect(screen.getByText('Bob')).toBeInTheDocument();
+    expect(screen.getByText('Builder')).toBeInTheDocument();
+  });
+
+  it('should typecheck correctly', async () => {
+    // @ts-expect-error - myName is a string
+    await render(InputComponent, {
+      inputs: {
+        myName: 123,
+      },
+    });
+
+    // @ts-expect-error - job is not using aliasedInputWithValue
+    await render(InputComponent, {
+      inputs: {
+        job: 'not used with aliasedInputWithValue',
+      },
+    });
+
+    // add a statement so the test succeeds
+    expect(true).toBeTruthy();
+  });
+});