add test case for constructor props

test/cases/constructor-props/constructor-props.spec.js

@@ -0,0 +1,43 @@
+/*
+ * Use Case
+ * Run wcc against a custom element passing in constructor props.
+ *
+ * User Result
+ * Should return the expected HTML output based on the fetched content from constructor props.
+ *
+ * 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 Element w/ constructor props';
+  const postId = 1;
+  let dom;
+
+  before(async function() {
+    const { html } = await renderToString(new URL('./src/index.js', import.meta.url), false, postId);
+
+    dom = new JSDOM(html);
+  });
+
+  describe(LABEL, function() {
+    it('should have a heading tag with the postId', function() {
+      expect(dom.window.document.querySelectorAll('h1')[0].textContent).to.equal(`Fetched Post ID: ${postId}`);
+    });
+
+    it('should have a second heading tag with the title', function() {
+      expect(dom.window.document.querySelectorAll('h2')[0].textContent).to.equal('sunt aut facere repellat provident occaecati excepturi optio reprehenderit');
+    });
+
+    it('should have a heading tag with the body', function() {
+      expect(dom.window.document.querySelectorAll('p')[0].textContent.startsWith('quia et suscipit')).to.equal(true);
+    });
+  });
+});

test/cases/constructor-props/src/index.js

@@ -0,0 +1,19 @@
+export default class PostPage extends HTMLElement {
+  constructor(postId) {
+    super();
+
+    this.postId = postId;
+  }
+
+  async connectedCallback() {
+    const { postId } = this;
+    const post = await fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`).then(resp => resp.json());
+    const { id, title, body } = post;
+
+    this.innerHTML = `
+      <h1>Fetched Post ID: ${id}</h1>
+      <h2>${title}</h2>
+      <p>${body}</p>
+    `;
+  }
+}