@angular-extensions/pretty-html-log

Improved debugging of Angular component tests with Jest!

> The @angular-extension/pretty-html-log is a module that makes debugging component tests with Jest a breeze.
> It adds a phl method which pretty prints the _innerHTML_ of a ComponentFixture, a DebugElement, a NativeElement or an HTML string.

!logNgHTML

- Why you should use this module
- Features
- Getting started
- Installation
- Usage
- Usage via import
- Usage via globals
- API
- Examples
- Pass in specific DebugElement
- Examples
- Print Angular comments
- Change the theme
- Further resources
- Blog post
- Video tutorial

Why you should use this module

When debugging component tests, it’s often necessary to inspect the DOM. The most common approach to do so is by using the good old console.log which has some downsides.

First of all, it’s annoying to always type

``typescript
fixture.debugElement.nativeElement.innerHTML;
`

Moreover, the console.log statement doesn’t print the HTML in a very readable way. Therefore we still need to copy the string in a new HTML file and format it to be able to inspect it. Not with @angular-extensions/pretty-html-log!

!logNgHTML

Features

- Provides a phl method that highlights and pretty prints a fixture, debugElement, nativeElement or even a plain HTML string - you don't have to worry how to get to the HTML, just pass the thing you want to print to the phl method.
- in case you are using prettier (which you should ;)), pretty-html-log will pick
up your prettier config and pretty print the HTML string based on your prettier configuration. 🤩

Getting started

$3

This module will only be used during development and can therefore be installed as a dev dependency.

`
npm i -D @angular-extensions/pretty-html-log
`

$3

pretty-html-log can be used in two different ways. The first and most
simple way is to simply import the phl function into your test.

#### Usage via import

The @angular-extensions/pretty-html-log package provides a phl method that you can use to pretty print a fixture, debugElement, nativeElement or even a plain HTML string. Simply import it while debugging and pretty print that HTML.

`typescript
import { phl } from '@angular-extensions/pretty-html-log';

describe('my test suite', () => {
it('should be green', () => {
phl(fixture); // This will pretty print the fixture
expect(myTable.getRows()).toBe(5);
});
});
`

Importing the phl function is straightforward. However, since phl is often used as a temporary tool, it can be bothersome to add an import at the top of the file. This is easy to forget and requires manual cleanup afterward.

Wouldn't it be cool if we can simply use the phl function without the need of an import. Let's check out how to setup the phl function globally.

> To make sure unused import statement get cleaned up we should configure our eslint to clean up unused imports. More: https://www.npmjs.com/package/eslint-plugin-unused-imports.

#### Usage via globals

To make phl globally available, import and run the following method within a jest.setup.ts file.

`typescript
import { setupPhl } from '@angular-extensions/pretty-html-log';

setupPhl();
`

API

The phl method has the following signature:

`typescript
(
ngHTMLElement: NgHTMLElement,
enableComments = false,
theme = THEMES.DRACULA
)
`

| Property | Description |
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| ngHTMLElement | Value to extract the html from and pretty print it to the console: ComponentFixture | DebugElement | DebugElement[] | HTMLElement | HTMLElement[] | string; |
| enableComments (default: false) | When set to true we print the generated comments by Angular. For example: