Skip to content

Commit

Permalink
Merge pull request #10 from angular-extensions/feature/angular9
Browse files Browse the repository at this point in the history
feat(upgrade): upgrade to Angular 9
  • Loading branch information
nivekcode authored Apr 17, 2020
2 parents 5ed8ed8 + 559f2a4 commit bc82d43
Show file tree
Hide file tree
Showing 10 changed files with 7,895 additions and 3,157 deletions.
24 changes: 19 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
![logNgHTML](https://raw.githubusercontent.com/angular-extensions/pretty-html-log/master/images/logo.png)

This module allows you to pretty print the inner HTML
of `ComponentFixtures`, `DebugElements`, `NativeElements` or even plain HTML `strings` to the console.
of `ComponentFixture`, single or multiple `DebugElements`, single or multiple `NativeElements` or even plain HTML `strings` to the console.
**This is very useful for debugging Angular component tests in Jest**

![logNgHTML](https://raw.githubusercontent.com/angular-extensions/pretty-html-log/master/images/before-after.png)
Expand All @@ -18,7 +18,7 @@ npm i -D @angular-extensions/pretty-html-log
```

This module is best used with Angular and Jest. Create a
`setupJest.ts` file in your `src` directory and add the following line **after your jest-preset-angular import. The order can matter**:
`setupJest.ts` file in your `src` directory and add the following line **after your jest-preset-angular import. ⚠️ The order can matter**:

```
import '@angular-extensions/pretty-html-log'
Expand Down Expand Up @@ -62,15 +62,21 @@ Which will print the following string to your console

![logNgHTML](https://raw.githubusercontent.com/angular-extensions/pretty-html-log/master/images/output.png)

### Further examples
### Examples

Instead of passing in a DebugElement you can also pass in a fixture:
Log the content innerHTML of a fixture

```
console.logNgHTML(fixture);
```

or a nativeElement
of a debugElement (or multiple debugElements)

```
console.logNgHTML(fixture.debugElement);
```

of a nativeElement (or multiple nativeElements)

```
console.logNgHTML(fixture.debugElement.nativeElement);
Expand All @@ -84,12 +90,20 @@ console.logNgHTML('<h1>Foo</h1>');

### Print Angular comments

Angular adds some comments to our HTML file. Usually, when debugging our tests, we don't need them. Therefore they
are not printed by default. However, there are cases where you want to print those comments. To do so, you
can pass `true` as an additional flag tot he `logNgHTML` method.

```
console.logNgHTML(fixture, true);
```

### Change the theme

`@angular-extensions/pretty-html-log` allows you to print the html logs in different themes.
Currently, we support (DRACULA, VSCODE and MATERIAL). The themes can be importet from `pretty-html-log`, the
base library `@angular-extensions/pretty-html-log` depends on.

```
import {THEMES} from 'pretty-html-log';
Expand Down
8 changes: 6 additions & 2 deletions angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@
"options": {
"tsConfig": "projects/pretty-html-log/tsconfig.lib.json",
"project": "projects/pretty-html-log/ng-package.json"
},
"configurations": {
"production": {
"tsConfig": "projects/pretty-html-log/tsconfig.lib.prod.json"
}
}
},
"test": {
Expand Down Expand Up @@ -51,7 +56,7 @@
"main": "projects/pretty-html-log-showcase/src/main.ts",
"polyfills": "projects/pretty-html-log-showcase/src/polyfills.ts",
"tsConfig": "projects/pretty-html-log-showcase/tsconfig.app.json",
"aot": false,
"aot": true,
"assets": [
"projects/pretty-html-log-showcase/src/favicon.ico",
"projects/pretty-html-log-showcase/src/assets"
Expand All @@ -75,7 +80,6 @@
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
Expand Down
Loading

0 comments on commit bc82d43

Please sign in to comment.