feat: debug accepts an element to be pretty printed

Author: timdeschryver

README.md

@@ -26,7 +26,7 @@ Lightweight utility functions to test Angular components.
 - [How](#how)
   - [`createComponent`](#createcomponent)
     - [`container: HTMLElement`](#container-htmlelement)
-    - [`debug() => void`](#debug--void)
+    - [`debug(element: HTMLElement) => void`](#debug--void)
     - [`fixture: any`](#fixture-any)
 - [Usage](#usage)
 - [LICENSE](#license)
@@ -111,7 +111,7 @@ The DOM node containing the Angular component.
 
 All of the [dom-testing-library][dom-testing-library] query functions are binded to this container.
 
-#### `debug() => void`
+#### `debug(element: HTMLElement) => void`
 
 Prints out the container.
 

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

@@ -4,7 +4,7 @@ import { getQueriesForElement, FireObject } from 'dom-testing-library';
 
 export interface RenderResult extends ReturnType<typeof getQueriesForElement>, FireObject {
   container: HTMLElement;
-  debug: () => void;
+  debug: (element: HTMLElement) => void;
   fixture: ComponentFixture<any>;
 }
 

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

@@ -54,7 +54,7 @@ export async function createComponent<T>(
   return {
     fixture,
     container: fixture.nativeElement,
-    debug: () => console.log(prettyDOM(fixture.nativeElement)),
+    debug: (element = fixture.nativeElement) => console.log(prettyDOM(element)),
     ...eventsWithDetectChanges,
     ...getQueriesForElement(fixture.nativeElement),
   };