refactor: introduce ...aliasedInput()

Author: andreialecu

README.md

@@ -100,13 +100,15 @@ counter.component.ts
 @Component({
   selector: 'app-counter',
   template: `
+    <span>{{ hello() }}</span>
     <button (click)="decrement()">-</button>
     <span>Current Count: {{ counter() }}</span>
     <button (click)="increment()">+</button>
   `,
 })
-export class CounterComponent {
+class CounterComponent {
   counter = model(0);
+  hello = input('Hi', { alias: 'greeting' });
 
   increment() {
     this.counter.set(this.counter() + 1);
@@ -121,23 +123,30 @@ export class CounterComponent {
 counter.component.spec.ts
 
 ```typescript
-import { render, screen, fireEvent } from '@testing-library/angular';
+import { render, screen, fireEvent, aliasedInput } from '@testing-library/angular';
 import { CounterComponent } from './counter.component';
 
 describe('Counter', () => {
-  test('should render counter', async () => {
-    await render(CounterComponent, { inputs: { counter: 5 } });
-
-    expect(screen.getByText('Current Count: 5'));
+  it('should render counter', async () => {
+    await render(CounterComponent, {
+      inputs: {
+        counter: 5,
+        // aliases need to be specified this way
+        ...aliasedInput('greeting', 'Hello Alias!'),
+      },
+    });
+
+    expect(screen.getByText('Current Count: 5')).toBeVisible();
+    expect(screen.getByText('Hello Alias!')).toBeVisible();
   });
 
-  test('should increment the counter on click', async () => {
+  it('should increment the counter on click', async () => {
     await render(CounterComponent, { inputs: { counter: 5 } });
 
     const incrementButton = screen.getByRole('button', { name: '+' });
     fireEvent.click(incrementButton);
 
-    expect(screen.getByText('Current Count: 6'));
+    expect(screen.getByText('Current Count: 6')).toBeVisible();
   });
 });
 ```

apps/example-app/src/app/examples/22-signal-inputs.component.spec.ts

@@ -1,11 +1,11 @@
-import { aliasedInputWithValue, render, screen, within } from '@testing-library/angular';
+import { aliasedInput, render, screen, within } from '@testing-library/angular';
 import { SignalInputComponent } from './22-signal-inputs.component';
 import userEvent from '@testing-library/user-event';
 
 test('works with signal inputs', async () => {
   await render(SignalInputComponent, {
     inputs: {
-      greeting: aliasedInputWithValue('Hello'),
+      ...aliasedInput('greeting', 'Hello'),
       name: 'world',
     },
   });
@@ -17,7 +17,7 @@ test('works with signal inputs', async () => {
 test('works with computed', async () => {
   await render(SignalInputComponent, {
     inputs: {
-      greeting: aliasedInputWithValue('Hello'),
+      ...aliasedInput('greeting', 'Hello'),
       name: 'world',
     },
   });
@@ -29,7 +29,7 @@ test('works with computed', async () => {
 test('can update signal inputs', async () => {
   const { fixture } = await render(SignalInputComponent, {
     inputs: {
-      greeting: aliasedInputWithValue('Hello'),
+      ...aliasedInput('greeting', 'Hello'),
       name: 'world',
     },
   });
@@ -52,7 +52,7 @@ test('output emits a value', async () => {
   const submitFn = jest.fn();
   await render(SignalInputComponent, {
     inputs: {
-      greeting: aliasedInputWithValue('Hello'),
+      ...aliasedInput('greeting', 'Hello'),
       name: 'world',
     },
     on: {
@@ -68,7 +68,7 @@ test('output emits a value', async () => {
 test('model update also updates the template', async () => {
   const { fixture } = await render(SignalInputComponent, {
     inputs: {
-      greeting: aliasedInputWithValue('Hello'),
+      ...aliasedInput('greeting', 'Hello'),
       name: 'initial',
     },
   });
@@ -98,7 +98,7 @@ test('model update also updates the template', async () => {
 test('works with signal inputs, computed values, and rerenders', async () => {
   const view = await render(SignalInputComponent, {
     inputs: {
-      greeting: aliasedInputWithValue('Hello'),
+      ...aliasedInput('greeting', 'Hello'),
       name: 'world',
     },
   });
@@ -111,7 +111,7 @@ test('works with signal inputs, computed values, and rerenders', async () => {
 
   await view.rerender({
     inputs: {
-      greeting: aliasedInputWithValue('bye'),
+      ...aliasedInput('greeting', 'bye'),
       name: 'test',
     },
   });

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

@@ -95,8 +95,8 @@ export type ComponentInput<T> =
  * Creates an aliased input branded type with a value
  *
  */
-export function aliasedInputWithValue<T>(value: T): AliasedInput<T> {
-  return value as AliasedInput<T>;
+export function aliasedInput<TAlias extends string, T>(alias: TAlias, value: T): Record<TAlias, AliasedInput<T>> {
+  return { [alias]: value } as Record<TAlias, AliasedInput<T>>;
 }
 
 export interface RenderComponentOptions<ComponentType, Q extends Queries = typeof queries> {
@@ -220,7 +220,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.
+   * @deprecated use the `inputs` option instead. When you need to use aliases, use the `aliasedInput(...)` helper function.
    * @default
    * {}
    *
@@ -245,7 +245,7 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
    * inputs: {
    *  counterValue: 10,
    *  // explicitly define aliases this way:
-   *  someAlias: aliasedInputWithValue('value')
+   *  ...aliasedInput('someAlias', 'someValue')
    * })
    */
   inputs?: ComponentInput<ComponentType>;

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

@@ -14,11 +14,12 @@ import {
   inject,
   output,
   input,
+  model,
 } 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, aliasedInputWithValue } from '../src/public_api';
+import { render, fireEvent, screen, OutputRefKeysWithCallback, aliasedInput } from '../src/public_api';
 import { ActivatedRoute, Resolve, RouterModule } from '@angular/router';
 import { fromEvent, map } from 'rxjs';
 import { AsyncPipe, NgIf } from '@angular/common';
@@ -550,7 +551,7 @@ describe('inputs and signals', () => {
     await render(InputComponent, {
       inputs: {
         myName: 'Bob',
-        job: aliasedInputWithValue('Builder'),
+        ...aliasedInput('job', 'Builder'),
       },
     });
 
@@ -583,15 +584,15 @@ describe('inputs and signals', () => {
         // OK:
         await render(InputComponent, {
           inputs: {
-            job: aliasedInputWithValue('OK'),
+            ...aliasedInput('job', 'OK'),
           },
         });
       },
       async () => {
-        // @ts-expect-error - job is not using aliasedInputWithValue
+        // @ts-expect-error - job is not using aliasedInput
         await render(InputComponent, {
           inputs: {
-            job: 'not used with aliasedInputWithValue',
+            job: 'not used with aliasedInput',
           },
         });
       },
@@ -601,3 +602,50 @@ describe('inputs and signals', () => {
     expect(typeTests).toBeTruthy();
   });
 });
+
+describe('README examples', () => {
+  describe('Counter', () => {
+    @Component({
+      selector: 'atl-counter',
+      template: `
+        <span>{{ hello() }}</span>
+        <button (click)="decrement()">-</button>
+        <span>Current Count: {{ counter() }}</span>
+        <button (click)="increment()">+</button>
+      `,
+    })
+    class CounterComponent {
+      counter = model(0);
+      hello = input('Hi', { alias: 'greeting' });
+
+      increment() {
+        this.counter.set(this.counter() + 1);
+      }
+
+      decrement() {
+        this.counter.set(this.counter() + 1);
+      }
+    }
+
+    it('should render counter', async () => {
+      await render(CounterComponent, {
+        inputs: {
+          counter: 5,
+          ...aliasedInput('greeting', 'Hello Alias!'),
+        },
+      });
+
+      expect(screen.getByText('Current Count: 5')).toBeVisible();
+      expect(screen.getByText('Hello Alias!')).toBeVisible();
+    });
+
+    it('should increment the counter on click', async () => {
+      await render(CounterComponent, { inputs: { counter: 5 } });
+
+      const incrementButton = screen.getByRole('button', { name: '+' });
+      fireEvent.click(incrementButton);
+
+      expect(screen.getByText('Current Count: 6')).toBeVisible();
+    });
+  });
+});