feat: Add findElmsInContext method

lib/commons/dom/find-elms-in-context.js

@@ -0,0 +1,26 @@
+/* global axe, dom */
+/**
+ * Find a elements reference from a given context
+ * 
+ * @param object {
+ *    context:  Node | virtual node    Element in the same context
+ *    value:    String  attribute value to search for
+ *    attr:     String  attribute name to search for
+ *    elm:      String  ndoeName to search for (optional)
+ *  }
+ * @return Array[Node]  
+ */
+dom.findElmsInContext = function ({ context, value, attr, elm = '' }) {
+  let root;
+  context = context.actualNode || context;
+  const escapedValue = axe.utils.escapeSelector(value);
+
+  if (context.nodeType === 9 || context.nodeType === 11) { // It's already root
+    root = context;
+  } else {
+    root = dom.getRootNode(context);
+  }
+  return Array.from(
+    root.querySelectorAll(elm + '[' + attr + '=' + escapedValue + ']')
+  );
+};

test/commons/.jshintrc

@@ -3,6 +3,7 @@
 	"globals": {
 		"describe": true,
 		"it": true,
+		"xit": true,
 		"before": true,
 		"beforeEach": true,
 		"after": true,

test/commons/dom/find-elms-in-context.js

@@ -0,0 +1,53 @@
+describe('dom.findElmsInContext', function () {
+  'use strict';
+
+  var shadowSupport = axe.testUtils.shadowSupport;
+  var fixtureSetup = axe.testUtils.fixtureSetup;
+  var findElmsInContext = axe.commons.dom.findElmsInContext;
+
+  afterEach(function () {
+    fixtureSetup('');
+  });
+
+  it('returns an array or elements in the same context', function () {
+    var fixture = fixtureSetup(
+      '<b name="foo">1</b>' + 
+      '<b name="foo">2</b>' + 
+      '<b name="bar">3</b>' + 
+      '<i name="foo">4</i>');
+
+    assert.deepEqual(
+      findElmsInContext({ elm: 'b', attr: 'name', value: 'foo', context: fixture }),
+      Array.from( document.querySelectorAll('b[name=foo]') )
+    );
+  });
+
+  (shadowSupport.v1 ? it : xit)('ignores elements inside shadow tree', function () {
+    var node = document.createElement('div');
+    node.innerHTML = '<b name="foo">1</b>';
+    var shadow = node.attachShadow({ mode: 'open' });
+    shadow.innerHTML = '<b name="foo">2</b> <slot></slot>';
+    var fixture = fixtureSetup(node);
+
+    var result = findElmsInContext({
+      elm: 'b', attr: 'name', value: 'foo', context: fixture
+    });
+    assert.lengthOf(result, 1);
+    assert.equal(result[0].innerText, '1');
+  });
+
+  (shadowSupport.v1 ? it : xit)('can search elements limited to the shadow tree', function () {
+    var node = document.createElement('div');
+    node.innerHTML = '<b name="foo">1</b>';
+    var shadow = node.attachShadow({ mode: 'open' });
+    shadow.innerHTML = '<b name="foo">2</b><slot></slot>';
+    fixtureSetup(node);
+
+    var result = findElmsInContext({
+      elm: 'b', attr: 'name', value: 'foo', context: shadow
+    });
+
+    assert.lengthOf(result, 1);
+    assert.equal(result[0].innerText, '2');
+  });
+});