adding a slotchange listener and adding tests (#407)

kylebuch8 · web-flow · commit ee6fde41c485 · 2019-05-24T10:15:14.000-04:00
diff --git a/elements/pfe-cta/package-lock.json b/elements/pfe-cta/package-lock.json
diff --git a/elements/pfe-cta/src/pfe-cta.js b/elements/pfe-cta/src/pfe-cta.js
@@ -15,27 +15,38 @@ class PfeCta extends PFElement {
 
   constructor() {
     super(PfeCta);
+    this._init = this._init.bind(this);
   }
 
   connectedCallback() {
     super.connectedCallback();
+    this._slot = this.shadowRoot.querySelector("slot");
+    this._slot.addEventListener("slotchange", this._init);
+  }
+
+  disconnectedCallback() {
+    this._slot.removeEventListener("slotchange", this._init);
+  }
 
+  _init() {
     const firstChild = this.children[0];
 
     if (!firstChild) {
       console.warn(
-        "The first child in the light DOM must be an anchor tag (<a>)"
+        `${
+          PfeCta.tag
+        }:The first child in the light DOM must be an anchor tag (<a>)`
       );
     } else if (firstChild && firstChild.tagName.toLowerCase() !== "a") {
       console.warn(
-        "The first child in the light DOM must be an anchor tag (<a>)"
+        `${
+          PfeCta.tag
+        }:The first child in the light DOM must be an anchor tag (<a>)`
       );
     } else {
       this.link = this.querySelector("a");
     }
   }
-
-  disconnectedCallback() {}
 }
 
 PFElement.create(PfeCta);
diff --git a/elements/pfe-cta/test/pfe-cta_test.html b/elements/pfe-cta/test/pfe-cta_test.html
@@ -10,7 +10,7 @@
   <body>
 
     <pfe-cta>
-      This is the element content.
+      <a href="https://redhat.com">redhat.com</a>
     </pfe-cta>
 
     <script>
@@ -22,6 +22,46 @@
             'the <pfe-cta> should be an instance of PfeCta'
           );
         });
+
+        test("it should log a warning if there are no children in the light DOM", done => {
+          const spy = sinon.spy(console, 'warn');
+          const pfeCta = document.createElement("pfe-cta");
+          pfeCta.textContent = "This is wrong";
+
+          document.body.appendChild(pfeCta);
+
+          flush(() => {
+            sinon.assert.calledWith(spy, 'pfe-cta:The first child in the light DOM must be an anchor tag (<a>)');
+            spy.restore();
+            done();
+          });
+        });
+
+        test("it should log a warning if the first child in the light DOM is not an anchor", done => {
+          const spy = sinon.spy(console, 'warn');
+          const pfeCta = document.createElement("pfe-cta");
+          pfeCta.innerHTML = `<p>Something</p><a href="#">A link</a>`;
+
+          document.body.appendChild(pfeCta);
+
+          flush(() => {
+            sinon.assert.calledWith(spy, 'pfe-cta:The first child in the light DOM must be an anchor tag (<a>)');
+            spy.restore();
+            done();
+          });
+        });
+
+        test("it should properly initialize when the contents of the slot change", done => {
+          const pfeCta = document.querySelector("pfe-cta");
+          assert.equal(pfeCta.link.getAttribute("href"), "https://redhat.com");
+
+          pfeCta.innerHTML = `<a href="https://access.redhat.com">Customer Portal</a>`;
+
+          flush(() => {
+            assert.equal(pfeCta.link.getAttribute("href"), "https://access.redhat.com");
+            done();
+          });
+        });
       });
     </script>
   </body>
