feat(comments): disable comments by default and add flag to add them

BREAKING CHANGE: param order changed: before(ngHTMLElement, theme) - now: (ngHTMLElement, enableComments, theme)

Author: nivekcode

README.md

@@ -28,6 +28,24 @@ This import adds a `logNgHTML` method to your console. You can then
 use this method during tests to pretty print `ComponentFixtures`,
 `DebugElements`, `NativeElements` or even plain HTML `strings` .
 
+## API
+
+The `console.logNgHTML()` method has the following signature:
+
+```
+<T>(
+  ngHTMLElement: NgHTMLElement<T>,
+  enableComments = false,
+  theme = THEMES.DRACULA
+)
+```
+
+| Property                        | Description                                                                                                        |
+| ------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
+| ngHTMLElement<T>                | 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: <!--bindings={"ng-reflect-ng-for-of":... |
+| theme: (default: DRACULA)       | pretty-html-log themes (DRACULA, VSCODE and MATERIAL)                                                              |
+
 ## Examples
 
 ### Pass in specific DebugElement
@@ -63,3 +81,17 @@ or even a simple HTML string
 ```
 console.logNgHTML('<h1>Foo</h1>');
 ```
+
+### Print Angular comments
+
+```
+console.logNgHTML(fixture, true);
+```
+
+### Change the theme
+
+```
+import {THEMES} from 'pretty-html-log';
+
+console.logNgHTML(fixture, false, THEMES.VSCODE);
+```

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

@@ -8,6 +8,7 @@ import { logNgHTML } from './logNgHTML';
 import * as fixturePrettier from './prettiers/fixture/pretty-fixture';
 import * as debugElementPrettier from './prettiers/debugElement/pretty-debugElement';
 import * as htmlElementPrettier from './prettiers/htmlElement/pretty-htmlelement';
+import * as prettierUtil from './prettiers/prettier-util';
 
 @Component({
   selector: 'lib-mock-component',
@@ -25,6 +26,7 @@ describe('LogNgHTML', () => {
   let component: MockComponent;
   let fixture: ComponentFixture<MockComponent>;
   const theme = THEMES.DRACULA;
+  const enableComments = true;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -40,9 +42,10 @@ describe('LogNgHTML', () => {
 
   it('should call prettyPrintFixture incase we provide a component fixture', () => {
     spyOn(fixturePrettier, 'fixturePrettier');
-    logNgHTML<MockComponent>(fixture, theme);
+    logNgHTML<MockComponent>(fixture, enableComments, theme);
     expect(fixturePrettier.fixturePrettier).toHaveBeenCalledWith(
       fixture,
+      enableComments,
       theme
     );
   });
@@ -51,9 +54,10 @@ describe('LogNgHTML', () => {
     spyOn(console, 'log');
     spyOn(debugElementPrettier, 'prettyPrintDebugElements');
     const debugElements = fixture.debugElement.queryAll(By.css('li'));
-    logNgHTML(debugElements, theme);
+    logNgHTML(debugElements, enableComments, theme);
     expect(debugElementPrettier.prettyPrintDebugElements).toHaveBeenCalledWith(
       debugElements,
+      enableComments,
       theme
     );
   });
@@ -64,19 +68,21 @@ describe('LogNgHTML', () => {
     const htmlElements = fixture.debugElement
       .queryAll(By.css('li'))
       .map((debugElement: DebugElement) => debugElement.nativeElement);
-    logNgHTML(htmlElements, theme);
+    logNgHTML(htmlElements, enableComments, theme);
     expect(htmlElementPrettier.prettyPrintHtmlElements).toHaveBeenCalledWith(
       htmlElements,
+      enableComments,
       theme
     );
   });
 
   it('should call prettyPrintDebugElement in case we provide a debug element', () => {
     spyOn(debugElementPrettier, 'prettyPrintDebugElement');
     const debugElement = fixture.debugElement.queryAll(By.css('li'))[0];
-    logNgHTML(debugElement, theme);
+    logNgHTML(debugElement, enableComments, theme);
     expect(debugElementPrettier.prettyPrintDebugElement).toHaveBeenCalledWith(
       debugElement,
+      enableComments,
       theme
     );
   });
@@ -85,9 +91,10 @@ describe('LogNgHTML', () => {
     spyOn(htmlElementPrettier, 'prettyPrintHtmlElement');
     const htmlElement = fixture.debugElement.queryAll(By.css('li'))[0]
       .nativeElement;
-    logNgHTML(htmlElement, theme);
+    logNgHTML(htmlElement, enableComments, theme);
     expect(htmlElementPrettier.prettyPrintHtmlElement).toHaveBeenCalledWith(
       htmlElement,
+      enableComments,
       theme
     );
   });
@@ -96,7 +103,22 @@ describe('LogNgHTML', () => {
     spyOn(console, 'log');
     spyOn(prettyHTMLLog, 'highlight');
     const htmlString = '<h1>Foo</h1>';
-    logNgHTML(htmlString, theme);
+    logNgHTML(htmlString, enableComments, theme);
     expect(prettyHTMLLog.highlight).toHaveBeenCalledWith(htmlString, theme);
   });
+
+  it('should print a warning and remove the comments we pass in an unknown type and enableComments', () => {
+    const htmlString = '<h1>Foo</h1><!--Some comment-->';
+    const commentFreeHTMLString = '<h1>Foo</h1>';
+    spyOn(console, 'log');
+    spyOn(prettyHTMLLog, 'highlight');
+    spyOn(prettierUtil, 'removeComments').and.returnValue(
+      commentFreeHTMLString
+    );
+    logNgHTML(htmlString, false, theme);
+    expect(prettyHTMLLog.highlight).toHaveBeenCalledWith(
+      commentFreeHTMLString,
+      theme
+    );
+  });
 });

projects/pretty-html-log/README.md

@@ -1,6 +1,7 @@
 import { ComponentFixture } from '@angular/core/testing';
 import { DebugElement } from '@angular/core';
-import { highlight, Theme } from 'pretty-html-log';
+import { highlight, Theme, THEMES } from 'pretty-html-log';
+
 import { fixturePrettier } from './prettiers/fixture/pretty-fixture';
 import {
   prettyPrintDebugElement,
@@ -10,6 +11,7 @@ import {
   prettyPrintHtmlElement,
   prettyPrintHtmlElements
 } from './prettiers/htmlElement/pretty-htmlelement';
+import { removeComments } from './prettiers/prettier-util';
 
 export type NgHTMLElement<T> =
   | ComponentFixture<T>
@@ -21,33 +23,49 @@ export type NgHTMLElement<T> =
 
 export const logNgHTML = <T>(
   ngHTMLElement: NgHTMLElement<T>,
-  theme?: Theme
+  enableComments = false,
+  theme = THEMES.DRACULA
 ) => {
   if (ngHTMLElement instanceof ComponentFixture) {
-    fixturePrettier<T>(ngHTMLElement, theme);
+    fixturePrettier<T>(ngHTMLElement, enableComments, theme);
     return;
   }
 
   if (Array.isArray(ngHTMLElement)) {
     if (ngHTMLElement[0] instanceof DebugElement) {
-      prettyPrintDebugElements(ngHTMLElement as DebugElement[], theme);
+      prettyPrintDebugElements(
+        ngHTMLElement as DebugElement[],
+        enableComments,
+        theme
+      );
       return;
     }
 
     if (ngHTMLElement[0] instanceof HTMLElement) {
-      prettyPrintHtmlElements(ngHTMLElement as HTMLElement[], theme);
+      prettyPrintHtmlElements(
+        ngHTMLElement as HTMLElement[],
+        enableComments,
+        theme
+      );
       return;
     }
   }
 
   if (ngHTMLElement instanceof DebugElement) {
-    prettyPrintDebugElement(ngHTMLElement, theme);
+    prettyPrintDebugElement(ngHTMLElement, enableComments, theme);
     return;
   }
 
   if (ngHTMLElement instanceof HTMLElement) {
-    prettyPrintHtmlElement(ngHTMLElement, theme);
+    prettyPrintHtmlElement(ngHTMLElement, enableComments, theme);
     return;
   }
-  console.log(highlight(ngHTMLElement as any, theme));
+  console.log(
+    highlight(
+      enableComments
+        ? (ngHTMLElement as string)
+        : removeComments(ngHTMLElement as string),
+      theme
+    )
+  );
 };

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

@@ -7,6 +7,10 @@ import { logNgHTML } from './logNgHTML';
 
 declare global {
   interface Console {
-    logNgHTML: <T>(ngHTMLElement: any, theme?: Theme) => void;
+    logNgHTML: <T>(
+      ngHTMLElement: any,
+      enableComments?: boolean,
+      theme?: Theme
+    ) => void;
   }
 }

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

@@ -2,6 +2,8 @@ import { DebugElement } from '@angular/core';
 import { THEMES } from 'pretty-html-log';
 import * as prettyHTMLLog from 'pretty-html-log';
 
+import * as prettierUtil from '../prettier-util';
+
 import * as debugElementPrettier from './pretty-debugElement';
 import { prettyPrintDebugElement } from './pretty-debugElement';
 
@@ -10,10 +12,14 @@ describe('pretty debug element', () => {
     console.log = jest.fn();
     const debugElement = {} as DebugElement;
     spyOn(debugElementPrettier, 'prettyDebugelement');
-    debugElementPrettier.prettyPrintDebugElement(debugElement, THEMES.DRACULA);
+    debugElementPrettier.prettyPrintDebugElement(
+      debugElement,
+      true,
+      THEMES.DRACULA
+    );
 
     expect(console.log).toHaveBeenCalledWith(
-      prettyPrintDebugElement(debugElement, THEMES.DRACULA)
+      prettyPrintDebugElement(debugElement, true, THEMES.DRACULA)
     );
   });
 
@@ -34,17 +40,18 @@ describe('pretty debug element', () => {
     spyOn(debugElementPrettier, 'prettyDebugelement');
     debugElementPrettier.prettyPrintDebugElements(
       debugElements,
+      true,
       THEMES.DRACULA
     );
 
     expect(console.log).toHaveBeenCalledWith(
-      prettyPrintDebugElement(debugElementOne, THEMES.DRACULA)
+      prettyPrintDebugElement(debugElementOne, true, THEMES.DRACULA)
     );
     expect(console.log).toHaveBeenCalledWith(
-      prettyPrintDebugElement(debugElementTwo, THEMES.DRACULA)
+      prettyPrintDebugElement(debugElementTwo, true, THEMES.DRACULA)
     );
     expect(console.log).toHaveBeenCalledWith(
-      prettyPrintDebugElement(debugElementThree, THEMES.DRACULA)
+      prettyPrintDebugElement(debugElementThree, true, THEMES.DRACULA)
     );
   });
 
@@ -57,10 +64,32 @@ describe('pretty debug element', () => {
     } as DebugElement;
     spyOn(prettyHTMLLog, 'highlight');
 
-    debugElementPrettier.prettyDebugelement(debugElement, THEMES.DRACULA);
+    debugElementPrettier.prettyDebugelement(debugElement, true, THEMES.DRACULA);
     expect(prettyHTMLLog.highlight).toHaveBeenCalledWith(
       innerHTML,
       THEMES.DRACULA
     );
   });
+
+  it('should call the highlight method with the innerHTML without comments', () => {
+    const innerHTML = '<h1>Foo</h1><!--Some comment-->';
+    const commentFreeHTML = '<h1>Foo</h1>';
+    const debugElement = {
+      nativeElement: {
+        innerHTML
+      }
+    } as DebugElement;
+    spyOn(prettyHTMLLog, 'highlight');
+    spyOn(prettierUtil, 'removeComments').and.returnValue(commentFreeHTML);
+
+    debugElementPrettier.prettyDebugelement(
+      debugElement,
+      false,
+      THEMES.DRACULA
+    );
+    expect(prettyHTMLLog.highlight).toHaveBeenCalledWith(
+      commentFreeHTML,
+      THEMES.DRACULA
+    );
+  });
 });