Support Shadow DOM and Document Fragments in closest method

.travis.yml

@@ -3,5 +3,8 @@ language: node_js
 node_js:
   - node
 
+addons:
+  firefox: 'latest-esr'
+
 script:
-  - npm run all
+  - TEST_BROWSERS=ChromeHeadless,PhantomJS,Firefox xvfb-run npm run all

README.md

@@ -27,7 +27,7 @@ The library exposes the following tiny dom helpers:
 * `attr` - get and set node attributes
 * `classes` - class name helper
 * `clear` - remove children from a node
-* `closest` - get the closest parent by selector; [component-closest](https://github.com/component/closest)
+* `closest` - get the closest parent by selector;
 * `delegate` - event deletation support; [delegate-events](https://www.npmjs.com/package/delegate-events)
 * `domify` - html to elements; [domify](https://github.com/component/domify)
 * `event` - event binding; [component-event](https://github.com/component/event)

karma.conf.js

@@ -1,3 +1,5 @@
+const browsers = (process.env.TEST_BROWSERS || 'PhantomJS').split(',');
+
 module.exports = function(karma) {
   karma.set({
 
@@ -17,7 +19,7 @@ module.exports = function(karma) {
 
     reporters: [ 'progress' ],
 
-    browsers: [ 'PhantomJS' ],
+    browsers,
 
     singleRun: true,
     autoWatch: false,

lib/closest.js

@@ -1,3 +1,24 @@
-export {
-  default
-} from 'closest';
+import matches from './matches';
+
+/**
+ * Closest
+ *
+ * @param {Element} el
+ * @param {String} selector
+ * @param {Boolean} checkYourSelf (optional)
+ */
+export default function(element, selector, checkYourSelf) {
+  var currentElem = checkYourSelf ? element : element.parentNode;
+
+  while (currentElem && currentElem.nodeType !== document.DOCUMENT_NODE &&
+      currentElem.nodeType !== document.DOCUMENT_FRAGMENT_NODE) {
+
+    if (matches(currentElem, selector)) {
+      return currentElem;
+    }
+
+    currentElem = currentElem.parentNode;
+  }
+
+  return matches(currentElem, selector) ? currentElem : null;
+}

package.json

@@ -33,7 +33,6 @@
   "license": "MIT",
   "sideEffects": false,
   "dependencies": {
-    "closest": "0.0.1",
     "component-event": "^0.1.4",
     "delegate-events": "^1.1.1",
     "domify": "^1.3.1",
@@ -49,10 +48,11 @@
     "cpx": "^1.5.0",
     "eslint": "^5.6.1",
     "eslint-plugin-bpmn-io": "^0.6.0",
-    "karma": "^3.0.0",
-    "karma-browserify": "^5.1.1",
+    "karma": "^4.4.1",
+    "karma-browserify": "^7.0.0",
     "karma-chai": "^0.1.0",
-    "karma-cli": "^1.0.1",
+    "karma-chrome-launcher": "^3.1.0",
+    "karma-firefox-launcher": "^1.3.0",
     "karma-mocha": "^1.3.0",
     "karma-phantomjs-launcher": "^1.0.4",
     "mocha": "^5.2.0",

test/closest.js

@@ -9,6 +9,7 @@ describe('closest', function() {
 
   it('should get closest parent', function() {
 
+    // given
     var node = domify('<div class="root">' +
                         '<div class="parent">' +
                           '<div class="child"></div>' +
@@ -17,9 +18,60 @@ describe('closest', function() {
 
     var child = query('.child', node);
 
-    // when
+    // then
     expect(closest(child, '.root')).to.equal(node);
     expect(closest(node, '.root', true)).to.equal(node);
   });
 
+
+  it('should work with document fragments', function() {
+
+    // given
+    var node = domify('<div class="root">' +
+                        '<div class="parent">' +
+                          '<div class="child"></div>' +
+                        '</div>' +
+                      '</div>');
+
+    var child = query('.child', node);
+
+    var fragment = document.createDocumentFragment();
+    fragment.appendChild(node);
+
+    // then
+    expect(closest(child, '.root')).to.equal(node);
+    expect(closest(node, '.root', true)).to.equal(node);
+    expect(closest(node, '.outside')).to.be.null;
+  });
+
+
+  // Shadow DOM is not supported by PhantomJS headless browser. In order to
+  // execute this test, use 'karma-chrome-launcher' and set the browser to
+  // 'Chrome' in karma.conf.js
+  (window.HTMLShadowElement ? it : it.skip)('should work with shadow dom', function() {
+
+    //  .root
+    //    | -> (shadow - This is not a HTML document nor HTML element)
+    //          | -> .shadowRoot
+    //                    | -> .shadowChild
+
+    // given
+    var root = domify('<div class="root"></div>');
+    var shadow = root.attachShadow({ mode: 'open' });
+
+    var shadowRoot = domify('<div class="shadowRoot">' +
+                              '<div class="shadowChild"></div>' +
+                            '</div>');
+
+    shadow.appendChild(shadowRoot);
+
+    var shadowChild = query('.shadowChild', shadowRoot);
+
+    // then
+    expect(closest(shadowChild, '.shadowRoot')).to.equal(shadowRoot);
+    expect(closest(shadowRoot, '.shadowRoot', true)).to.equal(shadowRoot);
+    expect(closest(shadowChild, '.outside')).to.be.null;
+    expect(closest(shadowChild, '.root')).to.be.null;
+  });
+
 });