Skip to content

Commit b88496a

Browse files
nivekcodenivekcode
authored
Merge pull request #5 from angular-extensions/feature/removeComments
feat(comments): disable comments by default and add flag to add them
2 parents 2d92491 + 8bbda1e commit b88496a

13 files changed

Lines changed: 222 additions & 99 deletions

File tree

‎README.md‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,24 @@ This import adds a `logNgHTML` method to your console. You can then
2828
use this method during tests to pretty print `ComponentFixtures`,
2929
`DebugElements`, `NativeElements` or even plain HTML `strings` .
3030

31+
## API
32+
33+
The `console.logNgHTML()` method has the following signature:
34+
35+
```
36+
<T>(
37+
ngHTMLElement: NgHTMLElement<T>,
38+
enableComments = false,
39+
theme = THEMES.DRACULA
40+
)
41+
```
42+
43+
| Property | Description |
44+
| ------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
45+
| ngHTMLElement<T> | Value to extract the html from and pretty print it to the console: ComponentFixture | DebugElement | DebugElement[] | HTMLElement | HTMLElement[] | string; |
46+
| enableComments (default: false) | When set to true we print the generated comments by Angular. For example: <!--bindings={"ng-reflect-ng-for-of":... |
47+
| theme: (default: DRACULA) | pretty-html-log themes (DRACULA, VSCODE and MATERIAL) |
48+
3149
## Examples
3250

3351
### Pass in specific DebugElement
@@ -63,3 +81,17 @@ or even a simple HTML string
6381
```
6482
console.logNgHTML('<h1>Foo</h1>');
6583
```
84+
85+
### Print Angular comments
86+
87+
```
88+
console.logNgHTML(fixture, true);
89+
```
90+
91+
### Change the theme
92+
93+
```
94+
import {THEMES} from 'pretty-html-log';
95+
96+
console.logNgHTML(fixture, false, THEMES.VSCODE);
97+
```

‎projects/pretty-html-log-showcase/src/app/app.component.spec.ts‎

Lines changed: 0 additions & 31 deletions
This file was deleted.

‎projects/pretty-html-log/README.md‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎projects/pretty-html-log/src/lib/logNgHTML.spec.ts‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { logNgHTML } from './logNgHTML';
88
import * as fixturePrettier from './prettiers/fixture/pretty-fixture';
99
import * as debugElementPrettier from './prettiers/debugElement/pretty-debugElement';
1010
import * as htmlElementPrettier from './prettiers/htmlElement/pretty-htmlelement';
11+
import * as prettierUtil from './prettiers/prettier-util';
1112

1213
@Component({
1314
selector: 'lib-mock-component',
@@ -25,6 +26,7 @@ describe('LogNgHTML', () => {
2526
let component: MockComponent;
2627
let fixture: ComponentFixture<MockComponent>;
2728
const theme = THEMES.DRACULA;
29+
const enableComments = true;
2830

2931
beforeEach(async(() => {
3032
TestBed.configureTestingModule({
@@ -40,9 +42,10 @@ describe('LogNgHTML', () => {
4042

4143
it('should call prettyPrintFixture incase we provide a component fixture', () => {
4244
spyOn(fixturePrettier, 'fixturePrettier');
43-
logNgHTML<MockComponent>(fixture, theme);
45+
logNgHTML<MockComponent>(fixture, enableComments, theme);
4446
expect(fixturePrettier.fixturePrettier).toHaveBeenCalledWith(
4547
fixture,
48+
enableComments,
4649
theme
4750
);
4851
});
@@ -51,9 +54,10 @@ describe('LogNgHTML', () => {
5154
spyOn(console, 'log');
5255
spyOn(debugElementPrettier, 'prettyPrintDebugElements');
5356
const debugElements = fixture.debugElement.queryAll(By.css('li'));
54-
logNgHTML(debugElements, theme);
57+
logNgHTML(debugElements, enableComments, theme);
5558
expect(debugElementPrettier.prettyPrintDebugElements).toHaveBeenCalledWith(
5659
debugElements,
60+
enableComments,
5761
theme
5862
);
5963
});
@@ -64,19 +68,21 @@ describe('LogNgHTML', () => {
6468
const htmlElements = fixture.debugElement
6569
.queryAll(By.css('li'))
6670
.map((debugElement: DebugElement) => debugElement.nativeElement);
67-
logNgHTML(htmlElements, theme);
71+
logNgHTML(htmlElements, enableComments, theme);
6872
expect(htmlElementPrettier.prettyPrintHtmlElements).toHaveBeenCalledWith(
6973
htmlElements,
74+
enableComments,
7075
theme
7176
);
7277
});
7378

7479
it('should call prettyPrintDebugElement in case we provide a debug element', () => {
7580
spyOn(debugElementPrettier, 'prettyPrintDebugElement');
7681
const debugElement = fixture.debugElement.queryAll(By.css('li'))[0];
77-
logNgHTML(debugElement, theme);
82+
logNgHTML(debugElement, enableComments, theme);
7883
expect(debugElementPrettier.prettyPrintDebugElement).toHaveBeenCalledWith(
7984
debugElement,
85+
enableComments,
8086
theme
8187
);
8288
});
@@ -85,9 +91,10 @@ describe('LogNgHTML', () => {
8591
spyOn(htmlElementPrettier, 'prettyPrintHtmlElement');
8692
const htmlElement = fixture.debugElement.queryAll(By.css('li'))[0]
8793
.nativeElement;
88-
logNgHTML(htmlElement, theme);
94+
logNgHTML(htmlElement, enableComments, theme);
8995
expect(htmlElementPrettier.prettyPrintHtmlElement).toHaveBeenCalledWith(
9096
htmlElement,
97+
enableComments,
9198
theme
9299
);
93100
});
@@ -96,7 +103,22 @@ describe('LogNgHTML', () => {
96103
spyOn(console, 'log');
97104
spyOn(prettyHTMLLog, 'highlight');
98105
const htmlString = '<h1>Foo</h1>';
99-
logNgHTML(htmlString, theme);
106+
logNgHTML(htmlString, enableComments, theme);
100107
expect(prettyHTMLLog.highlight).toHaveBeenCalledWith(htmlString, theme);
101108
});
109+
110+
it('should print a warning and remove the comments we pass in an unknown type and enableComments', () => {
111+
const htmlString = '<h1>Foo</h1><!--Some comment-->';
112+
const commentFreeHTMLString = '<h1>Foo</h1>';
113+
spyOn(console, 'log');
114+
spyOn(prettyHTMLLog, 'highlight');
115+
spyOn(prettierUtil, 'removeComments').and.returnValue(
116+
commentFreeHTMLString
117+
);
118+
logNgHTML(htmlString, false, theme);
119+
expect(prettyHTMLLog.highlight).toHaveBeenCalledWith(
120+
commentFreeHTMLString,
121+
theme
122+
);
123+
});
102124
});

‎projects/pretty-html-log/src/lib/logNgHTML.ts‎

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { ComponentFixture } from '@angular/core/testing';
22
import { DebugElement } from '@angular/core';
3-
import { highlight, Theme } from 'pretty-html-log';
3+
import { highlight, Theme, THEMES } from 'pretty-html-log';
4+
45
import { fixturePrettier } from './prettiers/fixture/pretty-fixture';
56
import {
67
prettyPrintDebugElement,
@@ -10,6 +11,7 @@ import {
1011
prettyPrintHtmlElement,
1112
prettyPrintHtmlElements
1213
} from './prettiers/htmlElement/pretty-htmlelement';
14+
import { removeComments } from './prettiers/prettier-util';
1315

1416
export type NgHTMLElement<T> =
1517
| ComponentFixture<T>
@@ -21,33 +23,49 @@ export type NgHTMLElement<T> =
2123

2224
export const logNgHTML = <T>(
2325
ngHTMLElement: NgHTMLElement<T>,
24-
theme?: Theme
26+
enableComments = false,
27+
theme = THEMES.DRACULA
2528
) => {
2629
if (ngHTMLElement instanceof ComponentFixture) {
27-
fixturePrettier<T>(ngHTMLElement, theme);
30+
fixturePrettier<T>(ngHTMLElement, enableComments, theme);
2831
return;
2932
}
3033

3134
if (Array.isArray(ngHTMLElement)) {
3235
if (ngHTMLElement[0] instanceof DebugElement) {
33-
prettyPrintDebugElements(ngHTMLElement as DebugElement[], theme);
36+
prettyPrintDebugElements(
37+
ngHTMLElement as DebugElement[],
38+
enableComments,
39+
theme
40+
);
3441
return;
3542
}
3643

3744
if (ngHTMLElement[0] instanceof HTMLElement) {
38-
prettyPrintHtmlElements(ngHTMLElement as HTMLElement[], theme);
45+
prettyPrintHtmlElements(
46+
ngHTMLElement as HTMLElement[],
47+
enableComments,
48+
theme
49+
);
3950
return;
4051
}
4152
}
4253

4354
if (ngHTMLElement instanceof DebugElement) {
44-
prettyPrintDebugElement(ngHTMLElement, theme);
55+
prettyPrintDebugElement(ngHTMLElement, enableComments, theme);
4556
return;
4657
}
4758

4859
if (ngHTMLElement instanceof HTMLElement) {
49-
prettyPrintHtmlElement(ngHTMLElement, theme);
60+
prettyPrintHtmlElement(ngHTMLElement, enableComments, theme);
5061
return;
5162
}
52-
console.log(highlight(ngHTMLElement as any, theme));
63+
console.log(
64+
highlight(
65+
enableComments
66+
? (ngHTMLElement as string)
67+
: removeComments(ngHTMLElement as string),
68+
theme
69+
)
70+
);
5371
};

‎projects/pretty-html-log/src/lib/patchConsole.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@ import { logNgHTML } from './logNgHTML';
77

88
declare global {
99
interface Console {
10-
logNgHTML: <T>(ngHTMLElement: any, theme?: Theme) => void;
10+
logNgHTML: <T>(
11+
ngHTMLElement: any,
12+
enableComments?: boolean,
13+
theme?: Theme
14+
) => void;
1115
}
1216
}

‎projects/pretty-html-log/src/lib/prettiers/debugElement/pretty-debugElement.spec.ts‎

Lines changed: 35 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@ import { DebugElement } from '@angular/core';
22
import { THEMES } from 'pretty-html-log';
33
import * as prettyHTMLLog from 'pretty-html-log';
44

5+
import * as prettierUtil from '../prettier-util';
6+
57
import * as debugElementPrettier from './pretty-debugElement';
68
import { prettyPrintDebugElement } from './pretty-debugElement';
79

@@ -10,10 +12,14 @@ describe('pretty debug element', () => {
1012
console.log = jest.fn();
1113
const debugElement = {} as DebugElement;
1214
spyOn(debugElementPrettier, 'prettyDebugelement');
13-
debugElementPrettier.prettyPrintDebugElement(debugElement, THEMES.DRACULA);
15+
debugElementPrettier.prettyPrintDebugElement(
16+
debugElement,
17+
true,
18+
THEMES.DRACULA
19+
);
1420

1521
expect(console.log).toHaveBeenCalledWith(
16-
prettyPrintDebugElement(debugElement, THEMES.DRACULA)
22+
prettyPrintDebugElement(debugElement, true, THEMES.DRACULA)
1723
);
1824
});
1925

@@ -34,17 +40,18 @@ describe('pretty debug element', () => {
3440
spyOn(debugElementPrettier, 'prettyDebugelement');
3541
debugElementPrettier.prettyPrintDebugElements(
3642
debugElements,
43+
true,
3744
THEMES.DRACULA
3845
);
3946

4047
expect(console.log).toHaveBeenCalledWith(
41-
prettyPrintDebugElement(debugElementOne, THEMES.DRACULA)
48+
prettyPrintDebugElement(debugElementOne, true, THEMES.DRACULA)
4249
);
4350
expect(console.log).toHaveBeenCalledWith(
44-
prettyPrintDebugElement(debugElementTwo, THEMES.DRACULA)
51+
prettyPrintDebugElement(debugElementTwo, true, THEMES.DRACULA)
4552
);
4653
expect(console.log).toHaveBeenCalledWith(
47-
prettyPrintDebugElement(debugElementThree, THEMES.DRACULA)
54+
prettyPrintDebugElement(debugElementThree, true, THEMES.DRACULA)
4855
);
4956
});
5057

@@ -57,10 +64,32 @@ describe('pretty debug element', () => {
5764
} as DebugElement;
5865
spyOn(prettyHTMLLog, 'highlight');
5966

60-
debugElementPrettier.prettyDebugelement(debugElement, THEMES.DRACULA);
67+
debugElementPrettier.prettyDebugelement(debugElement, true, THEMES.DRACULA);
6168
expect(prettyHTMLLog.highlight).toHaveBeenCalledWith(
6269
innerHTML,
6370
THEMES.DRACULA
6471
);
6572
});
73+
74+
it('should call the highlight method with the innerHTML without comments', () => {
75+
const innerHTML = '<h1>Foo</h1><!--Some comment-->';
76+
const commentFreeHTML = '<h1>Foo</h1>';
77+
const debugElement = {
78+
nativeElement: {
79+
innerHTML
80+
}
81+
} as DebugElement;
82+
spyOn(prettyHTMLLog, 'highlight');
83+
spyOn(prettierUtil, 'removeComments').and.returnValue(commentFreeHTML);
84+
85+
debugElementPrettier.prettyDebugelement(
86+
debugElement,
87+
false,
88+
THEMES.DRACULA
89+
);
90+
expect(prettyHTMLLog.highlight).toHaveBeenCalledWith(
91+
commentFreeHTML,
92+
THEMES.DRACULA
93+
);
94+
});
6695
});

0 commit comments

Comments
 (0)