includeShadowRoots config spec

test/cases/config-include-shadow-roots/config-include-shadow-roots.spec.js

@@ -0,0 +1,88 @@
+/*
+ * Use Case
+ * Run wcc against nested custom elements with nested declarative shadow dom and ensure no shadow is included
+ *
+ * User Result
+ * Should return the expected HTML output for all levels of element nesting.
+ *
+ * User Workspace
+ * src/
+ *   components/
+ *     navigation.js
+ *     header.js
+ *   pages/
+ *     index.js
+ * 
+ * Config
+ * {
+ *   includeShadowRoots: false
+ * }
+ */
+
+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 = 'Nested Custom Element w/ no rendered Shadow Roots';
+  let dom;
+
+  before(async function() {
+    const { html } = await renderToString(new URL('./src/pages/index.js', import.meta.url), {
+      includeShadowRoots: false
+    });
+
+    dom = new JSDOM(html);
+  });
+
+  describe(LABEL, function() {
+    it('should not have one top level <template> with an open shadowroot', function() {
+      expect(dom.window.document.querySelectorAll('template[shadowroot="open"]').length).to.equal(0);
+      expect(dom.window.document.querySelectorAll('template').length).to.equal(0);
+    });
+
+    describe('static page content', function() {
+      it('should have the expected static content for the page', function() {
+        expect(dom.window.document.querySelector('h1').textContent).to.equal('Home Page');
+      });
+    });
+
+    describe('custom header element with nested navigation element', function() {
+      let headerContentsDom;
+
+      before(function() {
+        headerContentsDom = new JSDOM(dom.window.document.querySelectorAll('header')[0].innerHTML);
+      });
+
+      it('should have a <header> tag within the <template> shadowroot', function() {
+        expect(dom.window.document.querySelectorAll('header').length).to.equal(1);
+      });
+
+      it('should have expected content within the <header> tag', function() {
+        const content = headerContentsDom.window.document.querySelector('a h4').textContent;
+
+        expect(content).to.contain('My Personal Blog');
+      });
+
+      describe('nested navigation element', function() {
+        let navigationContentsDom;
+
+        before(function() {
+          navigationContentsDom = new JSDOM(headerContentsDom.window.document.querySelectorAll('wcc-navigation')[0].innerHTML);
+        });
+
+        it('should have a <nav> tag within the <template> shadowroot', function() {
+          expect(navigationContentsDom.window.document.querySelectorAll('nav').length).to.equal(1);
+        });
+
+        it('should have three links within the <nav> element', function() {
+          const links = navigationContentsDom.window.document.querySelectorAll('nav ul li a');
+
+          expect(links.length).to.equal(3);
+        });
+      });
+    });
+  });
+});

test/cases/config-include-shadow-roots/src/components/header.js

@@ -0,0 +1,43 @@
+// intentionally nested to test wcc nested dependency resolution logic
+import './navigation.js';
+
+class Header extends HTMLElement {
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: 'open' });
+      this.shadowRoot.innerHTML = this.render();
+    }
+  }
+
+  render() {
+    return `
+      <header class="header">
+        <div class="head-wrap">
+          <div class="brand">
+            <a href="/">
+              <img src="/www/assets/greenwood-logo.jpg" alt="Greenwood logo"/>
+              <h4>My Personal Blog</h4>
+            </a>
+          </div>
+
+          <wcc-navigation></wcc-navigation>
+
+          <div class="social">
+            <a href="https://github.com/ProjectEvergreen/greenwood">
+              <img
+                src="https://img.shields.io/github/stars/ProjectEvergreen/greenwood.svg?style=social&logo=github&label=github"
+                alt="Greenwood GitHub badge"
+                class="github-badge"/>
+            </a>
+          </div>
+        </div>
+      </header>
+    `;
+  }
+}
+
+export {
+  Header
+};
+
+customElements.define('wcc-header', Header);

test/cases/config-include-shadow-roots/src/components/navigation.js

@@ -0,0 +1,27 @@
+// intentionally nested in the assets/ directory to test wcc nested dependency resolution logic
+const template = document.createElement('template');
+
+template.innerHTML = `
+  <nav>
+    <ul>
+      <li><a href="/">Home</a></li>
+      <li><a href="/about">About</a></li>
+      <li><a href="/artists">Artists</a></li>
+    <ul>
+  </nav>
+`;
+
+class Navigation extends HTMLElement {
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: 'open' });
+      this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+  }
+}
+
+export {
+  Navigation
+};
+
+customElements.define('wcc-navigation', Navigation);

test/cases/config-include-shadow-roots/src/pages/index.js

@@ -0,0 +1,25 @@
+import '../components/header.js';
+
+export default class HomePage extends HTMLElement {
+  constructor() {
+    super();
+
+    if (this.shadowRoot) {
+      // console.debug('HomePage => shadowRoot detected!');
+    } else {
+      this.attachShadow({ mode: 'open' });
+    }
+  }
+
+  connectedCallback() {
+    this.shadowRoot.innerHTML = this.getTemplate();
+  }
+
+  getTemplate() {
+    return `
+      <wcc-header></wcc-header>
+
+      <h1>Home Page</h1>
+    `;
+  }
+}