Add test of the HTML serialisation of real world example error diff.

Author: alexjeffburke

test/assertions/to-satisfy.spec.js

@@ -1202,7 +1202,7 @@ describe('"to satisfy" assertion', () => {
   });
 
   describe('when used in a real world example', () => {
-    it('should produce a good satisfy diff', () => {
+    it('should produce a good satisfy diff (text)', () => {
       const element = parseHtml(
         '<ul class="knockout-autocomplete menu scrollable floating-menu" style="left: 0px; top: 0px; bottom: auto; display: block">' +
           '<li class="selected" data-index="0">' +
@@ -1286,5 +1286,61 @@ describe('"to satisfy" assertion', () => {
       `
       );
     });
+
+    it('should produce a good satisfy diff (html)', () => {
+      const element = parseHtml(
+        '<ul class="knockout-autocomplete menu scrollable floating-menu" style="left: 0px; top: 0px; bottom: auto; display: block">' +
+          '<li class="selected" data-index="0">' +
+          '<span class="before"></span>' +
+          '<strong class="match">pr</strong>' +
+          '<span class="after">ivate</span>' +
+          '</li>' +
+          '<li data-index="1">' +
+          '<span class="before"></span>' +
+          '<strong class="match">pr</strong>' +
+          '<span class="after">otected</span>' +
+          '</li>' +
+          '</ul>'
+      );
+
+      expect(
+        () => {
+          expect(element, 'to satisfy', {
+            attributes: {
+              style: { display: 'block' },
+              class: ['knockout-autocomplete', 'floating-menu']
+            },
+            children: [
+              {
+                attributes: { 'data-index': '0', class: 'selected' },
+                children: [
+                  { attributes: { class: 'before' }, children: [] },
+                  { attributes: { class: 'match' }, children: ['pr'] },
+                  { attributes: { class: 'after' }, children: ['ivate'] }
+                ]
+              },
+              {
+                attributes: { 'data-index': '1', class: undefined },
+                children: [
+                  { attributes: { class: 'before' }, children: [] },
+                  { attributes: { class: 'match' }, children: ['pr'] },
+                  { attributes: { class: 'after' }, children: ['odtected'] }
+                ]
+              }
+            ]
+          });
+        },
+        'to throw',
+        expect.it(error => {
+          const message = error.getErrorMessage('html').toString();
+
+          expect(
+            message,
+            'to equal snapshot',
+            '<div style="font-family: monospace; white-space: nowrap"><div><span style="color: red; font-weight: bold">expected</span></div><div><span style="color: #999">&lt;</span><span style="color: #905">ul&nbsp;</span><span style="color: #690">class</span><span style="color: #999">=&quot;</span><span style="color: #07a">knockout-autocomplete&nbsp;menu&nbsp;scrollable&nbsp;floating-menu</span><span style="color: #999">&quot;</span><span style="color: #690">&nbsp;style</span><span style="color: #999">=&quot;</span><span style="color: #905">left</span><span style="color: #999">:</span><span style="color: #07a">&nbsp;0px</span><span style="color: #999">;</span><span style="color: #07a">&nbsp;</span><span style="color: #905">top</span><span style="color: #999">:</span><span style="color: #07a">&nbsp;0px</span><span style="color: #999">;</span><span style="color: #07a">&nbsp;</span><span style="color: #905">bottom</span><span style="color: #999">:</span><span style="color: #07a">&nbsp;auto</span><span style="color: #999">;</span><span style="color: #07a">&nbsp;</span><span style="color: #905">display</span><span style="color: #999">:</span><span style="color: #07a">&nbsp;block</span><span style="color: #999">&quot;&gt;</span></div><div>&nbsp;&nbsp;<div style="display: inline-block; vertical-align: top"><div><span style="color: #999">&lt;</span><span style="color: #905">li&nbsp;</span><span style="color: #690">class</span><span style="color: #999">=&quot;</span><span style="color: #07a">selected</span><span style="color: #999">&quot;</span><span style="color: #905">&nbsp;</span><span style="color: #690">data-index</span><span style="color: #999">=&quot;</span><span style="color: #07a">0</span><span style="color: #999">&quot;&gt;</span></div><div>&nbsp;&nbsp;<div style="display: inline-block; vertical-align: top"><div><span style="color: #999">&lt;</span><span style="color: #905">span&nbsp;</span><span style="color: #690">class</span><span style="color: #999">=&quot;</span><span style="color: #07a">before</span><span style="color: #999">&quot;&gt;&lt;/</span><span style="color: #905">span</span><span style="color: #999">&gt;</span></div></div></div><div>&nbsp;&nbsp;<div style="display: inline-block; vertical-align: top"><div><span style="color: #999">&lt;</span><span style="color: #905">strong&nbsp;</span><span style="color: #690">class</span><span style="color: #999">=&quot;</span><span style="color: #07a">match</span><span style="color: #999">&quot;&gt;</span>...<span style="color: #999">&lt;/</span><span style="color: #905">strong</span><span style="color: #999">&gt;</span></div></div></div><div>&nbsp;&nbsp;<div style="display: inline-block; vertical-align: top"><div><span style="color: #999">&lt;</span><span style="color: #905">span&nbsp;</span><span style="color: #690">class</span><span style="color: #999">=&quot;</span><span style="color: #07a">after</span><span style="color: #999">&quot;&gt;</span>...<span style="color: #999">&lt;/</span><span style="color: #905">span</span><span style="color: #999">&gt;</span></div></div></div><div><span style="color: #999">&lt;/</span><span style="color: #905">li</span><span style="color: #999">&gt;</span></div></div></div><div>&nbsp;&nbsp;<div style="display: inline-block; vertical-align: top"><div><span style="color: #999">&lt;</span><span style="color: #905">li&nbsp;</span><span style="color: #690">data-index</span><span style="color: #999">=&quot;</span><span style="color: #07a">1</span><span style="color: #999">&quot;&gt;</span></div><div>&nbsp;&nbsp;<div style="display: inline-block; vertical-align: top"><div><span style="color: #999">&lt;</span><span style="color: #905">span&nbsp;</span><span style="color: #690">class</span><span style="color: #999">=&quot;</span><span style="color: #07a">before</span><span style="color: #999">&quot;&gt;&lt;/</span><span style="color: #905">span</span><span style="color: #999">&gt;</span></div></div></div><div>&nbsp;&nbsp;<div style="display: inline-block; vertical-align: top"><div><span style="color: #999">&lt;</span><span style="color: #905">strong&nbsp;</span><span style="color: #690">class</span><span style="color: #999">=&quot;</span><span style="color: #07a">match</span><span style="color: #999">&quot;&gt;</span>...<span style="color: #999">&lt;/</span><span style="color: #905">strong</span><span style="color: #999">&gt;</span></div></div></div><div>&nbsp;&nbsp;<div style="display: inline-block; vertical-align: top"><div><span style="color: #999">&lt;</span><span style="color: #905">span&nbsp;</span><span style="color: #690">class</span><span style="color: #999">=&quot;</span><span style="color: #07a">after</span><span style="color: #999">&quot;&gt;</span>...<span style="color: #999">&lt;/</span><span style="color: #905">span</span><span style="color: #999">&gt;</span></div></div></div><div><span style="color: #999">&lt;/</span><span style="color: #905">li</span><span style="color: #999">&gt;</span></div></div></div><div><span style="color: #999">&lt;/</span><span style="color: #905">ul</span><span style="color: #999">&gt;</span></div><div><span style="color: red; font-weight: bold">to&nbsp;satisfy</span></div><div>{</div><div>&nbsp;&nbsp;<div style="display: inline-block; vertical-align: top"><div><span style="color: #555">attributes</span>:&nbsp;{&nbsp;<span style="color: #555">style</span>:&nbsp;{&nbsp;<span style="color: #555">display</span>:&nbsp;<span style="color: #df5000">\'block\'</span>&nbsp;},&nbsp;<span style="color: #555">class</span>:&nbsp;[&nbsp;<span style="color: #df5000">\'knockout-autocomplete\'</span>,&nbsp;<span style="color: #df5000">\'floating-menu\'</span>&nbsp;]&nbsp;},</div><div><span style="color: #555">children</span>:&nbsp;[&nbsp;{&nbsp;<span style="color: #555">attributes</span>:&nbsp;...,&nbsp;<span style="color: #555">children</span>:&nbsp;...&nbsp;},&nbsp;{&nbsp;<span style="color: #555">attributes</span>:&nbsp;...,&nbsp;<span style="color: #555">children</span>:&nbsp;...&nbsp;}&nbsp;]</div></div></div><div>}</div><div>&nbsp;</div><div><div style="display: inline-block; vertical-align: top"><div><span style="color: #999">&lt;</span><span style="color: #905">ul</span>&nbsp;<span style="color: #690">class</span><span style="color: #999">=&quot;</span><span style="color: #07a">knockout-autocomplete&nbsp;menu&nbsp;scrollable&nbsp;floating-menu</span><span style="color: #999">&quot;</span>&nbsp;<span style="color: #690">style</span><span style="color: #999">=&quot;</span><span style="color: #07a">left:&nbsp;0px;&nbsp;top:&nbsp;0px;&nbsp;bottom:&nbsp;auto;&nbsp;display:&nbsp;block</span><span style="color: #999">&quot;&gt;</span></div><div>&nbsp;&nbsp;<div style="display: inline-block; vertical-align: top"><div><div style="display: inline-block; vertical-align: top"><div><div style="display: inline-block; vertical-align: top"><div><div style="display: inline-block; vertical-align: top"><div><span style="color: #999">&lt;</span><span style="color: #905">li&nbsp;</span><span style="color: #690">class</span><span style="color: #999">=&quot;</span><span style="color: #07a">selected</span><span style="color: #999">&quot;</span><span style="color: #905">&nbsp;</span><span style="color: #690">data-index</span><span style="color: #999">=&quot;</span><span style="color: #07a">0</span><span style="color: #999">&quot;&gt;</span></div><div>&nbsp;&nbsp;<div style="display: inline-block; vertical-align: top"><div><span style="color: #999">&lt;</span><span style="color: #905">span&nbsp;</span><span style="color: #690">class</span><span style="color: #999">=&quot;</span><span style="color: #07a">before</span><span style="color: #999">&quot;&gt;&lt;/</span><span style="color: #905">span</span><span style="color: #999">&gt;</span></div></div></div><div>&nbsp;&nbsp;<div style="display: inline-block; vertical-align: top"><div><span style="color: #999">&lt;</span><span style="color: #905">strong&nbsp;</span><span style="color: #690">class</span><span style="color: #999">=&quot;</span><span style="color: #07a">match</span><span style="color: #999">&quot;&gt;</span>...<span style="color: #999">&lt;/</span><span style="color: #905">strong</span><span style="color: #999">&gt;</span></div></div></div><div>&nbsp;&nbsp;<div style="display: inline-block; vertical-align: top"><div><span style="color: #999">&lt;</span><span style="color: #905">span&nbsp;</span><span style="color: #690">class</span><span style="color: #999">=&quot;</span><span style="color: #07a">after</span><span style="color: #999">&quot;&gt;</span>...<span style="color: #999">&lt;/</span><span style="color: #905">span</span><span style="color: #999">&gt;</span></div></div></div><div><span style="color: #999">&lt;/</span><span style="color: #905">li</span><span style="color: #999">&gt;</span></div></div></div></div></div><div><div style="display: inline-block; vertical-align: top"><div><div style="display: inline-block; vertical-align: top"><div><div style="display: inline-block; vertical-align: top"><div><span style="color: #999">&lt;</span><span style="color: #905">li</span>&nbsp;<span style="color: #690">data-index</span><span style="color: #999">=&quot;</span><span style="color: #07a">1</span><span style="color: #999">&quot;&gt;</span></div><div>&nbsp;&nbsp;<div style="display: inline-block; vertical-align: top"><div><div style="display: inline-block; vertical-align: top"><div><div style="display: inline-block; vertical-align: top"><div><div style="display: inline-block; vertical-align: top"><div><span style="color: #999">&lt;</span><span style="color: #905">span&nbsp;</span><span style="color: #690">class</span><span style="color: #999">=&quot;</span><span style="color: #07a">before</span><span style="color: #999">&quot;&gt;&lt;/</span><span style="color: #905">span</span><span style="color: #999">&gt;</span></div></div></div></div></div><div><div style="display: inline-block; vertical-align: top"><div><div style="display: inline-block; vertical-align: top"><div><span style="color: #999">&lt;</span><span style="color: #905">strong&nbsp;</span><span style="color: #690">class</span><span style="color: #999">=&quot;</span><span style="color: #07a">match</span><span style="color: #999">&quot;&gt;</span>pr<span style="color: #999">&lt;/</span><span style="color: #905">strong</span><span style="color: #999">&gt;</span></div></div></div></div></div><div><div style="display: inline-block; vertical-align: top"><div><div style="display: inline-block; vertical-align: top"><div><div style="display: inline-block; vertical-align: top"><div><span style="color: #999">&lt;</span><span style="color: #905">span</span>&nbsp;<span style="color: #690">class</span><span style="color: #999">=&quot;</span><span style="color: #07a">after</span><span style="color: #999">&quot;&gt;</span></div><div>&nbsp;&nbsp;<div style="display: inline-block; vertical-align: top"><div><div style="display: inline-block; vertical-align: top"><div><div style="display: inline-block; vertical-align: top"><div><div style="display: inline-block; vertical-align: top"><div>otected&nbsp;<div style="display: inline-block; vertical-align: top"><div><span style="color: red; font-weight: bold">//</span></div><div><span style="color: red; font-weight: bold">//</span></div><div><span style="color: red; font-weight: bold">//</span></div><div><span style="color: red; font-weight: bold">//</span></div></div>&nbsp;<div style="display: inline-block; vertical-align: top"><div><span style="color: red; font-weight: bold">should&nbsp;equal</span>&nbsp;<div style="display: inline-block; vertical-align: top"><div><span style="color: #df5000">\'odtected\'</span></div></div></div><div>&nbsp;</div><div><span style="background-color: red; color: white">otected</span></div><div><span style="background-color: green; color: white">odtected</span></div></div></div></div></div></div></div></div></div></div></div><div><span style="color: #999">&lt;/</span><span style="color: #905">span</span><span style="color: #999">&gt;</span></div></div></div></div></div></div></div></div></div></div></div><div><span style="color: #999">&lt;/</span><span style="color: #905">li</span><span style="color: #999">&gt;</span></div></div></div></div></div></div></div></div></div></div></div><div><span style="color: #999">&lt;/</span><span style="color: #905">ul</span><span style="color: #999">&gt;</span></div></div></div></div>'
+          );
+        })
+      );
+    });
   });
 });