fix: return the debug element (#302)

Author: timdeschryver

apps/example-app/src/app/examples/19-standalone-component.spec.ts

@@ -1,15 +1,15 @@
 import { render, screen } from '@testing-library/angular';
 import { StandaloneComponent, StandaloneWithChildComponent } from './19-standalone-component';
 
-test('is possible to render a standalone component', async () => {
+test('can render a standalone component', async () => {
   await render(StandaloneComponent);
 
   const content = screen.getByTestId('standalone');
 
   expect(content).toHaveTextContent('Standalone Component');
 });
 
-test('is possibl to render a standalone component with a child', async () => {
+test('can render a standalone component with a child', async () => {
   await render(StandaloneWithChildComponent, {
     componentProperties: { name: 'Bob' },
   });

apps/example-app/src/app/examples/19-standalone-component.ts

@@ -5,7 +5,7 @@ import { Component, Input } from '@angular/core';
   template: `<div data-testid="standalone">Standalone Component</div>`,
   standalone: true,
 })
-export class StandaloneComponent { }
+export class StandaloneComponent {}
 
 @Component({
   selector: 'app-standalone-with-child',

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

@@ -10,7 +10,6 @@ import {
   ɵisStandalone,
 } from '@angular/core';
 import { ComponentFixture, TestBed, tick } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
 import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { NavigationExtras, Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
@@ -77,7 +76,7 @@ export async function render<SutType, WrapperType = SutType>(
       excludeComponentDeclaration,
       wrapper,
     }),
-    imports: addAutoImports(sut,{
+    imports: addAutoImports(sut, {
       imports: imports.concat(defaultImports),
       routes,
     }),
@@ -129,23 +128,23 @@ export async function render<SutType, WrapperType = SutType>(
     const [path, params] = (basePath + href).split('?');
     const queryParams = params
       ? params.split('&').reduce((qp, q) => {
-        const [key, value] = q.split('=');
-        const currentValue = qp[key];
-        if (typeof currentValue === 'undefined') {
-          qp[key] = value;
-        } else if (Array.isArray(currentValue)) {
-          qp[key] = [...currentValue, value];
-        } else {
-          qp[key] = [currentValue, value];
-        }
-        return qp;
-      }, {} as Record<string, string | string[]>)
+          const [key, value] = q.split('=');
+          const currentValue = qp[key];
+          if (typeof currentValue === 'undefined') {
+            qp[key] = value;
+          } else if (Array.isArray(currentValue)) {
+            qp[key] = [...currentValue, value];
+          } else {
+            qp[key] = [currentValue, value];
+          }
+          return qp;
+        }, {} as Record<string, string | string[]>)
       : undefined;
 
     const navigateOptions: NavigationExtras | undefined = queryParams
       ? {
-        queryParams,
-      }
+          queryParams,
+        }
       : undefined;
 
     const doNavigate = () => {
@@ -172,7 +171,7 @@ export async function render<SutType, WrapperType = SutType>(
     rerender,
     change,
     // @ts-ignore: fixture assigned
-    debugElement: typeof sut === 'string' ? fixture.debugElement : fixture.debugElement.query(By.directive(sut)),
+    debugElement: fixture.debugElement,
     // @ts-ignore: fixture assigned
     container: fixture.nativeElement,
     debug: (element = fixture.nativeElement, maxLength, options) =>
@@ -398,7 +397,7 @@ if (typeof process === 'undefined' || !process.env?.ATL_SKIP_AUTO_CLEANUP) {
 }
 
 @Component({ selector: 'atl-wrapper-component', template: '' })
-class WrapperComponent { }
+class WrapperComponent {}
 
 /**
  * Wrap findBy queries to poke the Angular change detection cycle

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

@@ -10,7 +10,7 @@ import {
 } from '@angular/core';
 import { NoopAnimationsModule, BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { TestBed } from '@angular/core/testing';
-import { render, fireEvent } from '../src/public_api';
+import { render, fireEvent, screen } from '../src/public_api';
 
 @Component({
   selector: 'atl-fixture',
@@ -33,6 +33,21 @@ test('creates queries and events', async () => {
   fireEvent.click(view.getByText('button'));
 });
 
+describe('standalone', () => {
+  @Component({
+    selector: 'atl-fixture',
+    template: ` {{ name }} `,
+  })
+  class StandaloneFixtureComponent {
+    @Input() name = '';
+  }
+
+  it('renders standalone component', async () => {
+    await render(StandaloneFixtureComponent, { componentProperties: { name: 'Bob' } });
+    expect(screen.getByText('Bob')).toBeInTheDocument();
+  });
+});
+
 describe('removeAngularAttributes', () => {
   it('should remove angular attribute', async () => {
     await render(FixtureComponent, {
@@ -148,6 +163,13 @@ test('waits for angular app initialization before rendering components', async (
     ],
   });
 
-  expect(TestBed.inject(ApplicationInitStatus).done).toEqual(true);
+  expect(TestBed.inject(ApplicationInitStatus).done).toBe(true);
   expect(mock).toHaveBeenCalled();
 });
+
+test('gets the DebugElement', async () => {
+  const view = await render(FixtureComponent);
+
+  expect(view.debugElement).not.toBeNull();
+  expect(view.debugElement.componentInstance).toBeInstanceOf(FixtureComponent);
+});