fix: allow input properties to be aliased (#391)

Author: timdeschryver

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

@@ -196,7 +196,7 @@ export interface RenderComponentOptions<ComponentType, Q extends Queries = typeo
    *  }
    * })
    */
-  componentInputs?: Partial<ComponentType>;
+  componentInputs?: Partial<ComponentType> | { [alias: string]: unknown };
   /**
    * @description
    * An object to set `@Output` properties of the component

projects/testing-library/tests/issues/issue-386.spec.ts

@@ -1,20 +1,19 @@
-import {Component} from '@angular/core';
-import {throwError} from 'rxjs';
-import {render, screen} from '@testing-library/angular';
+import { Component } from '@angular/core';
+import { throwError } from 'rxjs';
 import userEvent from '@testing-library/user-event';
+import { render, screen } from '../../src/public_api';
 
 @Component({
-  selector: 'app-test',
+  selector: 'atl-fixture',
   template: `<button (click)="onTest()">Test</button>`,
   styles: [],
 })
-export class TestComponent {
+class TestComponent {
   onTest() {
     throwError(() => new Error('myerror')).subscribe();
   }
 }
 
-
 describe('TestComponent', () => {
   beforeEach(() => {
     jest.useFakeTimers();
@@ -23,7 +22,7 @@ describe('TestComponent', () => {
   afterEach(() => {
     jest.runAllTicks();
     jest.useRealTimers();
-  })
+  });
 
   it('does not fail', async () => {
     await render(TestComponent);

projects/testing-library/tests/issues/issue-389.spec.ts

@@ -0,0 +1,16 @@
+import { Component, Input } from '@angular/core';
+import { render, screen } from '../../src/public_api';
+
+@Component({
+  selector: 'atl-fixture',
+  template: `Hello {{ name }}`,
+})
+class TestComponent {
+  // eslint-disable-next-line @angular-eslint/no-input-rename
+  @Input('aliasName') name = '';
+}
+
+test('allows you to set componentInputs using the name alias', async () => {
+  await render(TestComponent, { componentInputs: { aliasName: 'test' } });
+  expect(screen.getByText('Hello test')).toBeInTheDocument();
+});