3
3
![ logNgHTML] ( https://raw.githubusercontent.com/angular-extensions/pretty-html-log/master/images/logo.png )
4
4
5
5
This module allows you to pretty print the inner HTML
6
- of ` ComponentFixtures ` , ` DebugElements ` , ` NativeElements ` or even plain HTML ` strings ` to the console.
6
+ of ` ComponentFixture ` , single or multiple ` DebugElements ` , single or multiple ` NativeElements ` or even plain HTML ` strings ` to the console.
7
7
** This is very useful for debugging Angular component tests in Jest**
8
8
9
9
![ logNgHTML] ( https://raw.githubusercontent.com/angular-extensions/pretty-html-log/master/images/before-after.png )
@@ -18,7 +18,7 @@ npm i -D @angular-extensions/pretty-html-log
18
18
```
19
19
20
20
This module is best used with Angular and Jest. Create a
21
- ` setupJest.ts ` file in your ` src ` directory and add the following line ** after your jest-preset-angular import. The order can matter** :
21
+ ` setupJest.ts ` file in your ` src ` directory and add the following line ** after your jest-preset-angular import. ⚠️ The order can matter** :
22
22
23
23
```
24
24
import '@angular-extensions/pretty-html-log'
@@ -62,15 +62,21 @@ Which will print the following string to your console
62
62
63
63
![ logNgHTML] ( https://raw.githubusercontent.com/angular-extensions/pretty-html-log/master/images/output.png )
64
64
65
- ### Further examples
65
+ ### Examples
66
66
67
- Instead of passing in a DebugElement you can also pass in a fixture:
67
+ Log the content innerHTML of a fixture
68
68
69
69
```
70
70
console.logNgHTML(fixture);
71
71
```
72
72
73
- or a nativeElement
73
+ of a debugElement (or multiple debugElements)
74
+
75
+ ```
76
+ console.logNgHTML(fixture.debugElement);
77
+ ```
78
+
79
+ of a nativeElement (or multiple nativeElements)
74
80
75
81
```
76
82
console.logNgHTML(fixture.debugElement.nativeElement);
@@ -84,12 +90,20 @@ console.logNgHTML('<h1>Foo</h1>');
84
90
85
91
### Print Angular comments
86
92
93
+ Angular adds some comments to our HTML file. Usually, when debugging our tests, we don't need them. Therefore they
94
+ are not printed by default. However, there are cases where you want to print those comments. To do so, you
95
+ can pass ` true ` as an additional flag tot he ` logNgHTML ` method.
96
+
87
97
```
88
98
console.logNgHTML(fixture, true);
89
99
```
90
100
91
101
### Change the theme
92
102
103
+ ` @angular-extensions/pretty-html-log ` allows you to print the html logs in different themes.
104
+ Currently, we support (DRACULA, VSCODE and MATERIAL). The themes can be importet from ` pretty-html-log ` , the
105
+ base library ` @angular-extensions/pretty-html-log ` depends on.
106
+
93
107
```
94
108
import {THEMES} from 'pretty-html-log';
95
109
0 commit comments