Testing a component rendering to a pre tag with a code tag inside

[carlosga]

Hello:

I have a component rendering to a pre tag with a code tag inside, and when testing it with bUnit - MarkupMatches,
is raising an error, but as far as i can see the markup is the same, ¿ may bUnit expecting to have raw text inside the pre tag instead of the code tag ? The error message is:

Error Message:
Bunit.HtmlEqualException : HTML comparison failed.

The following errors were found:
1: The text at pre(0) > #text(0) is missing.
2: The text at pre(0) > #text(1) is missing.

Actual HTML:

<pre class="pf-c-code-block__pre">
  <code class="pf-c-code-block__code">action</code>
</pre>

Expected HTML:

<pre class="pf-c-code-block__pre">
  <code class="pf-c-code-block__code">
    action
  </code>
</pre>

Thanks in advance.

[egil]

The two markup snippets are actually not the same, because you are in a pre tag, where whitespace IS significant. MarkupMatches (powered by AngleSharp.Diffing) understands this, and is thus giving you an error, because you have line breaks around the word action in one of the snippets but not the other.

If you do not care about the whitespace in this case, then you can specify that in your expected markup, e.g.:

<pre class="pf-c-code-block__pre" diff:whitespace="RemoveWhitespaceNodes">
  <code class="pf-c-code-block__code">
    action
  </code>
</pre>

Learn more here: https://bunit.dev/docs/verification/semantic-html-comparison.html

[carlosga]

Wasn't aware of that, it's working fine now, will give a look at the semantic html comparision link.
Thanks very much.