should.have.html ignore whitespace differences

[William Rusnack]

Is it possible for to ignore whitespace differences with when comparing html?
Right now it seems to be just doing a string compare.

Example:

      AssertionError: expected form[method="post"] to have HTML '\n      <form>\n        <div>\n          <div><input name="one"><p class="input-error-msg"></p></div>\n          <div><input name="oneone"><p class="input-error-msg"></p></div>\n        </div>\n        <div>\n          <div><input name="two"><p class="input-error-msg"></p></div>\n        </div>\n        <div><input name="one"><p class="input-error-msg"></p></div>\n      </form>\n    ', but the HTML was '<div><label></label><input name="one"><p class="input-error-msg"></p></div><div><label></label><input name="two"><p class="input-error-msg"></p></div><div><label></label><input name="oneone"><p class="input-error-msg"></p></div><div><label></label><input name="three"><p class="input-error-msg"></p></div><input name="submit" type="submit" value="Submit">'
      + expected - actual

      -<div><label></label><input name="one"><p class="input-error-msg"></p></div><div><label></label><input name="two"><p class="input-error-msg"></p></div><div><label></label><input name="oneone"><p class="input-error-msg"></p></div><div><label></label><input name="three"><p class="input-error-msg"></p></div><input name="submit" type="submit" value="Submit">
      +
      +      <form>
      +        <div>
      +          <div><input name="one"><p class="input-error-msg"></p></div>
      +          <div><input name="oneone"><p class="input-error-msg"></p></div>
      +        </div>
      +        <div>
      +          <div><input name="two"><p class="input-error-msg"></p></div>
      +        </div>
      +        <div><input name="one"><p class="input-error-msg"></p></div>
      +      </form>
      +    

[William Rusnack]

It seems like 'pretty' could be helpful https://www.npmjs.com/package/pretty

[Nathan Black]

No I do not want to do this, because this goes down the slippery slope of having the html assertion be basically a full DOM tree comparison. Now do you want <p style="width:100%;"> to be the same as <p style="width: 100%"> ?

Moreover, this is poor assertion practice in general. Rather than writing granular, readable, meaninful assertions, your asserting this big, huge, fragile to other concerns injection assertion.

Rather try something like:

form.querySelectorAll('input').should.have.length(4)
form.querySelectorAll('p').should.all.have.class('input-error-msg') // requires chai-things
Array.from(form.querySelectorAll('input')).map(e => e.getAttribute('name')).should.deep.equal(['one', 'oneone', 'two', 'one'])