Added test case for shadowrootmode open vs. closed

test/cases/shadowrootmode/shadowrootmode.spec.js

@@ -0,0 +1,42 @@
+/*
+ * Use Case
+ * Run wcc against two custom elements, one with an open shadow root and one with a closed shadow root
+ *
+ * User Result
+ * Should return the expected HTML output based on the shadow root mode of each component
+ *
+ * User Workspace
+ * src/
+ *   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 = 'Custom Elements w/ closed and open shadowrootmode';
+  let dom;
+
+  before(async function () {
+    const { html } = await renderToString(new URL('./src/index.js', import.meta.url));
+    console.log('hello', html);
+    dom = new JSDOM(html);
+  });
+
+  describe(LABEL, function () {
+    it('should have exactly one open shadowrootmode template', function () {
+      expect(
+        dom.window.document.querySelectorAll('open-shadow-component template[shadowrootmode="open"]').length
+      ).to.equal(1);
+    });
+
+    it('should have exactly one closed shadowrootmode template', function () {
+      expect(
+        dom.window.document.querySelectorAll('closed-shadow-component template[shadowrootmode="closed"]').length
+      ).to.equal(1);
+    });
+  });
+});

test/cases/shadowrootmode/src/closed-shadow-component.js

@@ -0,0 +1,19 @@
+export default class ClosedShadowComponent extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  async connectedCallback() {
+
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: 'closed' });
+      const template = document.createElement('template');
+      template.innerHTML = `
+        <h1>Shadow Root Closed</h1>
+      `;
+      this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+  }
+}
+
+customElements.define('closed-shadow-component', ClosedShadowComponent);

test/cases/shadowrootmode/src/index.js

@@ -0,0 +1,17 @@
+import './open-shadow-component.js';
+import './closed-shadow-component.js';
+
+export default class HomePage extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    this.innerHTML = `
+      <open-shadow-component></open-shadow-component>
+      <closed-shadow-component></closed-shadow-component>
+    `;
+  }
+}
+
+customElements.define('wcc-home', HomePage);

test/cases/shadowrootmode/src/open-shadow-component.js

@@ -0,0 +1,19 @@
+export default class OpenShadowComponent extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  async connectedCallback() {
+
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: 'open' });
+      const template = document.createElement('template');
+      template.innerHTML = `
+        <h1>Shadow Root Open</h1>
+      `;
+      this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+  }
+}
+
+customElements.define('open-shadow-component', OpenShadowComponent);