fix(wrapper): support for node as string (#12)

* fix(wrapper): support for node as string

* refactor(wrapper): refactor for better readability

* tests(wrapper): test for string node as mount argument added + running tests during "npm test"

* chore(travis): configuring firefox version

* chore(travis): configuring sudo

* refactor(wrapper): alternative refactoring of wrapper

* refactor(wrapper): code review comments implemented

* refactor(wrapper): code review comments implemented

* chore(travis): reverting enabling of testing

* refactor(wrapper): code review comments implemented

* style(wrapper): code review styling issues fixed

.travis.yml

@@ -25,4 +25,4 @@ env:
   global:
     - SAUCE_TESTNAME="bore"
     - SAUCE_USERNAME="skatejs"
-    - secure: V9HMHadJEu18wWMNQgkXEUP9RhRaFc8r2gehb3NwYREntlu14rLCVRA9P5LgHJbEKe+4icQP4vW8A/cJZL7HCWuDKnr9D+BH2/f2DO8KyMvGAdQjzm6+eOUU+B9ErGcVrloB94BGF8oTD+dUtP4Jwu1E/8jvqrcFTnxOjnhGo/sv+/GBxCS/RX25U4ysVtCrfT0Fsu8AP9ku5/FqHJxjBtHDz2nkgxT4rEnJQJ/V0o0uU+nKqNyn4fgFuup0E+yDu30PvCVo9tWWipvGlwOdxqyZpkivMFCGoai/XE06OiZRYxcFdInZuXLIUpazeXc0GWYlpXMU7aZkIVp9sLHoMGs9pn4sHSBQRPFqi9nWZiJDcJRpIBaLv9OAFQWJJyzZjqDxbvPjPhmtrUK3ECir5U5a++5pQKQz1WGUj5eLFQEhZd6bb5uJzgwAuJZ/NmJ7cg+XDqvprSMZX2tUw0dTkwc0q4ug5bk/UN+Br5aQtUerj/7A2uw5VRPIdVo5qncg8774UkIuSzA1mtaAMmI2AZI7P+ugFYjv93WEjhoschxCtbAOCcvGyDQzO/7A7orPm2ZdIUx1b/Y9TABXkI8NCUDAoxqPDLYZrPGJw6YliOVysrGKwpig4aEdJC9tl9uhWr7C7jN+8TTVw+cOt8eTnvfrjO5iAHLPPAz3M2NFA14=
+    - secure: V9HMHadJEu18wWMNQgkXEUP9RhRaFc8r2gehb3NwYREntlu14rLCVRA9P5LgHJbEKe+4icQP4vW8A/cJZL7HCWuDKnr9D+BH2/f2DO8KyMvGAdQjzm6+eOUU+B9ErGcVrloB94BGF8oTD+dUtP4Jwu1E/8jvqrcFTnxOjnhGo/sv+/GBxCS/RX25U4ysVtCrfT0Fsu8AP9ku5/FqHJxjBtHDz2nkgxT4rEnJQJ/V0o0uU+nKqNyn4fgFuup0E+yDu30PvCVo9tWWipvGlwOdxqyZpkivMFCGoai/XE06OiZRYxcFdInZuXLIUpazeXc0GWYlpXMU7aZkIVp9sLHoMGs9pn4sHSBQRPFqi9nWZiJDcJRpIBaLv9OAFQWJJyzZjqDxbvPjPhmtrUK3ECir5U5a++5pQKQz1WGUj5eLFQEhZd6bb5uJzgwAuJZ/NmJ7cg+XDqvprSMZX2tUw0dTkwc0q4ug5bk/UN+Br5aQtUerj/7A2uw5VRPIdVo5qncg8774UkIuSzA1mtaAMmI2AZI7P+ugFYjv93WEjhoschxCtbAOCcvGyDQzO/7A7orPm2ZdIUx1b/Y9TABXkI8NCUDAoxqPDLYZrPGJw6YliOVysrGKwpig4aEdJC9tl9uhWr7C7jN+8TTVw+cOt8eTnvfrjO5iAHLPPAz3M2NFA14=

src/index.js

@@ -88,34 +88,42 @@ function matches (node, query) {
   return (node.matches || node.msMatchesSelector).call(node, query);
 }
 
-function nodeFromHtml (html) {
-  const div = document.createElement('div');
-  div.innerHTML = html;
-  return div.firstElementChild;
+function getInstantiatedNodeWithinFixture (node, isRootNode) {
+  const isStringNode = typeof node === 'string';
+
+  // If the fixture has been removed from the document, re-insert it.
+  if (!body.contains(fixture)) {
+    body.appendChild(fixture);
+  }
+
+  if (isRootNode) {
+    setFixtureContent(node, isStringNode);
+  }
+
+  return isStringNode
+    ? fixture.firstElementChild
+    : node;
+}
+
+function setFixtureContent (node, shouldSetChildrenViaString) {
+  // If this is a new node, clean up the fixture.
+  fixture.innerHTML = '';
+
+  // Add the node to the fixture so it runs the connectedCallback().
+  shouldSetChildrenViaString
+    ? (fixture.innerHTML = node)
+    : (fixture.appendChild(node));
 }
 
 class Wrapper {
   constructor (node, opts = {}) {
-    this.node = typeof node === 'string' ? nodeFromHtml(node) : node;
-    this.opts = opts;
-
-    const customElementDefinition = customElements.get(this.node.localName);
     const isRootNode = !node.parentNode;
 
-    // If this is a new node, clean up the fixture.
-    if (isRootNode) {
-      fixture.innerHTML = '';
-      customElementDefinition && flush();
-    }
-
-    // If the fixture has been removed from the document, re-insert it.
-    if (!body.contains(fixture)) {
-      body.appendChild(fixture);
-    }
+    this.opts = opts;
+    this.node = getInstantiatedNodeWithinFixture(node, isRootNode);
 
-    // Add the node to the fixture so it runs the connectedCallback().
     if (isRootNode) {
-      fixture.appendChild(node);
+      const customElementDefinition = customElements.get(this.node.localName);
       customElementDefinition && flush();
     }
   }

test/unit.js

@@ -152,6 +152,19 @@ describe('bore', () => {
     expect(test.all('span').length).to.equal(1);
     expect(test.all('span')[0].node.localName).to.equal('span');
   });
+
+  it('mount: should descend for node as string into custom elements', () => {
+    class Test extends HTMLElement {
+      connectedCallback () {
+        this.attachShadow();
+        this.shadowRoot.innerHTML = '<span></span>';
+      }
+    }
+    customElements.define('x-mount-test-2', Test);
+    const test = mount('<x-mount-test-2></x-mount-test-2>');
+    expect(test.all('span').length).to.equal(1);
+    expect(test.all('span')[0].node.localName).to.equal('span');
+  });
 });
 
 describe('then()', () => {