chore: #210 use self-closing tags in tests (#211)

Author: KaiPrince

test/cases/html-web-components/expected.html

@@ -1,7 +1,7 @@
 <wcc-picture-frame title="Greenwood">
   <div class="picture-frame">
-    <img src="https://www.greenwoodjs.io/assets/greenwood-logo-og.png" alt="Greenwood logo">
-    <br>
+    <img src="https://www.greenwoodjs.io/assets/greenwood-logo-og.png" alt="Greenwood logo" />
+    <br />
     <span>Author: <span>WCC</span></span>
     <wcc-caption>
       <div class="caption">

test/cases/html-web-components/html-web-components.spec.js

@@ -18,6 +18,7 @@ import chai from 'chai';
 import { JSDOM } from 'jsdom';
 import fs from 'fs/promises';
 import { renderToString } from '../../../src/wcc.js';
+import { parseFragment, serialize } from 'parse5';
 
 const expect = chai.expect;
 
@@ -34,7 +35,10 @@ describe('Run WCC For ', function() {
     actualHtml = html;
     dom = new JSDOM(actualHtml);
     pictureFrame = dom.window.document.querySelectorAll('wcc-picture-frame');
-    expectedHtml = await fs.readFile(new URL('./expected.html', import.meta.url), 'utf-8');
+
+    // We want to compare using canonical html (i.e. strip self-closing tags)
+    const rawExpectedHtml = await fs.readFile(new URL('./expected.html', import.meta.url), 'utf-8');
+    expectedHtml = serialize(parseFragment(rawExpectedHtml));
   });
 
   describe(LABEL, function() {
@@ -79,7 +83,7 @@ describe('Run WCC For ', function() {
     });
 
     it('should have the expected recursively generated HTML', () => {
-      expect(expectedHtml.replace(/ /g, '').replace(/\n/g, '')).to.equal(actualHtml.replace(/ /g, '').replace(/\n/g, ''));
+      expect(actualHtml.replace(/ /g, '').replace(/\n/g, '')).to.equal(expectedHtml.replace(/ /g, '').replace(/\n/g, ''));
     });
   });
 });