nested HTML web component test

ProjectEvergreen · Oct 1, 2024 · 9ccf405 · 9ccf405
1 parent 027034c
commit 9ccf405
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 4 deletions.
diff --git a/src/wcc.js b/src/wcc.js
@@ -48,7 +48,7 @@ async function renderComponentRoots(tree, definitions) {
         console.log('elementTree.childNodes', elementTree.childNodes);
         console.log('node.childNodes', node.childNodes);
 
-        node.childNodes = node.childNodes.length === 0 && hasLight > 0 && !hasShadow
+        node.childNodes = node.childNodes.length === 0 && hasLight && !hasShadow
           ? elementTree.childNodes
           : hasShadow
             ? [...elementTree.childNodes, ...node.childNodes]

diff --git a/test/cases/html-web-component/html-web-component.spec.js b/test/cases/html-web-component/html-web-component.spec.js
@@ -40,9 +40,11 @@ describe('Run WCC For ', 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');
+    it('should have the expected title attribute content in a nested <wcc-caption> tag', () => {
+      const caption = pictureFrame[0].querySelectorAll('.picture-frame wcc-caption .caption');
+      const heading = caption[0].querySelectorAll('.heading');
 
+      expect(caption.length).to.equal(1);
       expect(heading.length).to.equal(1);
       expect(heading[0].textContent).to.equal('Greenwood');
     });

diff --git a/test/cases/html-web-component/src/components/caption.js b/test/cases/html-web-component/src/components/caption.js
@@ -0,0 +1,13 @@
+export default class Caption extends HTMLElement {
+  connectedCallback() {
+    const title = this.getAttribute('title');
+
+    this.innerHTML = `
+      <div class="caption">
+        ${this.innerHTML}
+      </div>
+    `;
+  }
+}
+
+customElements.define('wcc-caption', Caption);
diff --git a/test/cases/html-web-component/src/components/picture-frame.js b/test/cases/html-web-component/src/components/picture-frame.js
@@ -1,10 +1,14 @@
+import './caption.js';
+
 export default class PictureFrame extends HTMLElement {
   connectedCallback() {
     const title = this.getAttribute('title');
 
     this.innerHTML = `
       <div class="picture-frame">
-        <h6 class="heading">${title}</h6>
+        <wcc-caption>
+          <h6 class="heading">${title}</h6>
+        </wcc-caption>
         ${this.innerHTML}
       </div>
     `;