add test case for constructable stylesheets

test/cases/constructable-stylesheet/constructabe-stylesheet.spec.js

@@ -0,0 +1,38 @@
+/*
+ * Use Case
+ * Run wcc against a custom element using constructible stylesheets.
+ *
+ * User Result
+ * Should return the expected HTML and no error instatiating a CSSStyleSheet..
+ *
+ * User Workspace
+ * src/
+ *   components/
+ *     header/
+ *       header.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 = 'Constructible Stylesheets usage';
+  let dom;
+
+  before(async function() {
+    const { html } = await renderToString(new URL('./src/pages/index.js', import.meta.url));
+
+    dom = new JSDOM(html);
+  });
+
+  describe(LABEL, function() {
+    it('should have one top level <wcc-header> element with a <template> with an open shadowroot', function() {
+      expect(dom.window.document.querySelectorAll('wcc-header template[shadowrootmode="open"]').length).to.equal(1);
+      expect(dom.window.document.querySelectorAll('template').length).to.equal(1);
+    });
+  });
+});

test/cases/constructable-stylesheet/src/components/header/header.js

@@ -0,0 +1,23 @@
+const template = document.createElement('template');
+
+template.innerHTML = `
+  <header>
+    <h1>Welcome to my website!</h1>
+  </header>
+`;
+
+const sheet = new CSSStyleSheet();
+sheet.replaceSync('li{color:red;}');
+
+export default class Header extends HTMLElement {
+  connectedCallback() {
+    if (!this.shadowRoot) {
+      this.attachShadow({ mode: 'open' });
+      this.shadowRoot.appendChild(template.content.cloneNode(true));
+    }
+
+    this.shadowRoot.adoptedStyleSheets = [sheet];
+  }
+}
+
+customElements.define('wcc-header', Header);

test/cases/constructable-stylesheet/src/pages/index.js

@@ -0,0 +1,10 @@
+import '../components/header/header.js';
+
+export default class HomePage extends HTMLElement {
+  connectedCallback() {
+    this.innerHTML = `
+      <wcc-header></wcc-header>
+      <h1>Home Page</h1>
+    `;
+  }
+}

test/cases/import-attributes/import-attributes.spec.js

@@ -31,10 +31,8 @@ describe('Run WCC For ', function() {
   });
 
   describe(LABEL, function() {
-    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');
-      });
+    it('should have the expected static content for the page', function() {
+      expect(dom.window.document.querySelector('h1').textContent).to.equal('Home Page');
     });
 
     it('should have a <header> tag within the document', function() {