Skip to main content

ngMocks.formatHtml

ngMocks.formatHtml is intended to normalize HTML in order to provide simpler html expectations in tests.

const element = document.createElement('div');
// default modengMocks.formatHtml(element); // empty
// outer modengMocks.formatHtml(element, true); // <div></div>

ngMocks.formatHtml removes:

  • all html comments
  • sequences of spaces, new lines, tabs will be replaced by a single space symbol
  • gaps inside and between siblings is removed, so <div> </div> will become <div></div>

ngMocks.formatHtml accepts:

  • a string
  • HTMLElement, Text, Comment
  • DebugElement, DebugNode, ComponentFixture
  • an array of them

dirty html#

a html like

<div>  <!-- binding1 -->  <strong>header</strong>  <!-- binding2 -->  <ul>    <li>1</li>    <li>2</li>  </ul>  <!-- binding3 --></div>

becomes

<div><strong>header</strong><ul><li>1</li><li>2</li></ul></div>

ng-container#

A cool thing is that ngMocks.formatHtml uses ngMocks.crawl under the hood and respects ng-container.

so if we have a pointer to ng-container, we can assert its content.

<div>  header  <ng-container block1>1</ng-container>  body  <ng-container block2>2</ng-container>  footer</div>
const div = ngMocks.find('div');const block1 = ngMocks.reveal(div, ['block1']);const block2 = ngMocks.reveal(div, ['block2']);
ngMocks.formatHtml(div, true);// returns// <div> headaer 1 body 2 footer </div>
ngMocks.formatHtml(block1);// returns// 1ngMocks.formatHtml(block2);// returns// 2