From 027034c8323c957f222d84cbf00603469cdf4a72 Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Fri, 27 Sep 2024 19:59:07 -0400
Subject: [PATCH] HTML web component test cae

---
 .../html-web-component.spec.js                | 58 +++++++++++++++++++
 .../src/components/picture-frame.js           | 14 +++++
 .../html-web-component/src/pages/index.js     | 23 ++++++++
 test/cases/light-dom/light-dom.spec.js        |  1 -
 4 files changed, 95 insertions(+), 1 deletion(-)
 create mode 100644 test/cases/html-web-component/html-web-component.spec.js
 create mode 100644 test/cases/html-web-component/src/components/picture-frame.js
 create mode 100644 test/cases/html-web-component/src/pages/index.js

diff --git a/test/cases/html-web-component/html-web-component.spec.js b/test/cases/html-web-component/html-web-component.spec.js
new file mode 100644
index 0000000..cdf2ed4
--- /dev/null
+++ b/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');
+    });
+  });
+});
\ No newline at end of file
diff --git a/test/cases/html-web-component/src/components/picture-frame.js b/test/cases/html-web-component/src/components/picture-frame.js
new file mode 100644
index 0000000..cd926d9
--- /dev/null
+++ b/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);
\ No newline at end of file
diff --git a/test/cases/html-web-component/src/pages/index.js b/test/cases/html-web-component/src/pages/index.js
new file mode 100644
index 0000000..4897627
--- /dev/null
+++ b/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>
+    `;
+  }
+}
\ No newline at end of file
diff --git a/test/cases/light-dom/light-dom.spec.js b/test/cases/light-dom/light-dom.spec.js
index 54d80b2..de03978 100644
--- a/test/cases/light-dom/light-dom.spec.js
+++ b/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);
   });