HTML web component test cae

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

@@ -0,0 +1,58 @@
+/*
+ * Use Case
+ * Run wcc against an "HTML" Web Component.
+ * https://blog.jim-nielsen.com/2023/html-web-components/
+ *
+ * User Result
+ * Should return the expected HTML with no template tags or Shadow Roots.
+ *
+ * User Workspace
+ * src/
+ *   components/
+ *     picture-frame.js
+ *   pages/
+ *     index.js
+ */
+import chai from 'chai';
+import { JSDOM } from 'jsdom';
+import { renderToString } from '../../../src/wcc.js';
+
+const expect = chai.expect;
+
+describe('Run WCC For ', function() {
+  const LABEL = 'HTML Web Component';
+  let dom;
+  let pictureFrame;
+
+  before(async function() {
+    const { html } = await renderToString(new URL('./src/pages/index.js', import.meta.url));
+
+    dom = new JSDOM(html);
+    pictureFrame = dom.window.document.querySelectorAll('wcc-picture-frame');
+  });
+
+  describe(LABEL, function() {
+    it('should not have any <template> tags within the document', function() {
+      expect(dom.window.document.querySelectorAll('template').length).to.equal(0);
+    });
+
+    it('should only have one <wcc-picture-frame> tag', function() {
+      expect(pictureFrame.length).to.equal(1);
+    });
+
+    it('should have the expected title attribute content in the heading of HTML', () => {
+      const heading = pictureFrame[0].querySelectorAll('.picture-frame .heading');
+
+      expect(heading.length).to.equal(1);
+      expect(heading[0].textContent).to.equal('Greenwood');
+    });
+
+    it('should have the expected image from userland in the HTML', () => {
+      const img = pictureFrame[0].querySelectorAll('.picture-frame img');
+
+      expect(img.length).to.equal(1);
+      expect(img[0].getAttribute('alt')).to.equal('Greenwood logo');
+      expect(img[0].getAttribute('src')).to.equal('https://www.greenwoodjs.io/assets/greenwood-logo-og.png');
+    });
+  });
+});

test/cases/html-web-component/src/components/picture-frame.js

@@ -0,0 +1,14 @@
+export default class PictureFrame extends HTMLElement {
+  connectedCallback() {
+    const title = this.getAttribute('title');
+
+    this.innerHTML = `
+      <div class="picture-frame">
+        <h6 class="heading">${title}</h6>
+        ${this.innerHTML}
+      </div>
+    `;
+  }
+}
+
+customElements.define('wcc-picture-frame', PictureFrame);

test/cases/html-web-component/src/pages/index.js

@@ -0,0 +1,23 @@
+import '../components/picture-frame.js';
+
+export default class HomePage extends HTMLElement {
+
+  connectedCallback() {
+    this.innerHTML = `
+      <wcc-picture-frame title="Greenwood">
+        <img
+          src="https://www.greenwoodjs.io/assets/greenwood-logo-og.png"
+          alt="Greenwood logo"
+        />
+      </wcc-picture-frame>
+    `;
+  }
+
+  getTemplate() {
+    return `
+      <wcc-header></wcc-header>
+
+      <h1>Home Page</h1>
+    `;
+  }
+}

test/cases/light-dom/light-dom.spec.js

@@ -26,7 +26,6 @@ describe('Run WCC For ', function() {
   before(async function() {
     const { html } = await renderToString(new URL('./src/pages/index.js', import.meta.url));
 
-    console.log('?????', { html });
     dom = new JSDOM(html);
   });