feat: add generic types support for render result queries (#566)

Author: MattijsE

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

@@ -11,7 +11,7 @@ import {
 } 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';
+import { BoundFunctions, Queries, queries, Config as dtlConfig, PrettyDOMOptions } from '@testing-library/dom';
 
 // TODO: import from Angular (is a breaking change)
 interface OutputRef<T> {
@@ -29,7 +29,7 @@ export type OutputRefKeysWithCallback<T> = {
     : never;
 };
 
-export type RenderResultQueries<Q extends Queries = typeof queries> = { [P in keyof Q]: BoundFunction<Q[P]> };
+export type RenderResultQueries<Q extends Queries = typeof queries> = BoundFunctions<Q>;
 export interface RenderResult<ComponentType, WrapperType = ComponentType> extends RenderResultQueries {
   /**
    * @description

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

@@ -45,6 +45,29 @@ describe('DTL functionality', () => {
     // eslint-disable-next-line testing-library/prefer-screen-queries
     fireEvent.click(view.getByText('button'));
   });
+
+  test('render result queries should support generic type parameter', async () => {
+    const view = await render(FixtureComponent);
+
+    // eslint-disable-next-line testing-library/prefer-screen-queries
+    const inputByTestId: HTMLInputElement = view.getByTestId<HTMLInputElement>('input');
+    expect(inputByTestId).toBeInTheDocument();
+
+    // screen.getByTestId should also accept a generic type parameter
+    const inputByScreen: HTMLInputElement = screen.getByTestId<HTMLInputElement>('input');
+    expect(inputByScreen).toBeInTheDocument();
+
+    // eslint-disable-next-line testing-library/prefer-screen-queries
+    const button: HTMLButtonElement = view.getByRole<HTMLButtonElement>('button');
+    expect(button).toBeInTheDocument();
+
+    // @ts-expect-error - generic narrows the type, so assigning HTMLInputElement to HTMLButtonElement should fail
+    // eslint-disable-next-line testing-library/prefer-screen-queries
+    const _wrongType: HTMLButtonElement = view.getByTestId<HTMLInputElement>('input');
+    void _wrongType;
+
+    expect(true).toBeTruthy();
+  });
 });
 
 describe('components', () => {