feat(virtual-node): add attrNames property which returns list of attr…

…ibute names

lib/core/base/virtual-node/abstract-virtual-node.js

@@ -13,13 +13,17 @@ class AbstractVirtualNode {
   }
 
   attr() {
-    throw new Error('VirtualNode class must have a "attr" function');
+    throw new Error('VirtualNode class must have an "attr" function');
   }
 
   hasAttr() {
     throw new Error('VirtualNode class must have a "hasAttr" function');
   }
 
+  attrNames() {
+    throw new Error('VirtualNode class must have an "attrNames" function');
+  }
+
   hasClass(className) {
     // get the value of the class attribute as svgs return a SVGAnimatedString
     // if you access the className property

lib/core/base/virtual-node/serial-virtual-node.js

@@ -34,6 +34,10 @@ class SerialVirtualNode extends AbstractVirtualNode {
   hasAttr(attrName) {
     return this._attrs[attrName] !== undefined;
   }
+
+  get attrNames() {
+    return Object.keys(this._attrs);
+  }
 }
 
 /**

lib/core/base/virtual-node/virtual-node.js

@@ -95,6 +95,32 @@ class VirtualNode extends AbstractVirtualNode {
     return this.actualNode.hasAttribute(attrName);
   }
 
+  /**
+   * Return a list of attributes names for the element.
+   * @return {String[]}
+   */
+  get attrNames() {
+    if (!this._cache.hasOwnProperty('attrNames')) {
+      let attrs;
+
+      // eslint-disable-next-line no-restricted-syntax
+      if (this.actualNode.attributes instanceof window.NamedNodeMap) {
+        // eslint-disable-next-line no-restricted-syntax
+        attrs = this.actualNode.attributes;
+      }
+      // if the attributes property is not of type NamedNodeMap
+      // then the DOM has been clobbered. E.g. <form><input name="attributes"></form>.
+      // We can clone the node to isolate it and then return
+      // the attributes
+      else {
+        attrs = this.actualNode.cloneNode(false).attributes;
+      }
+
+      this._cache.attrNames = Array.from(attrs).map(attr => attr.name);
+    }
+    return this._cache.attrNames;
+  }
+
   /**
    * Return a property of the computed style for this element and cache the result. This is much faster than called `getPropteryValue` every time.
    * @see https://jsperf.com/get-property-value

lib/core/utils/get-node-attributes.js

@@ -3,6 +3,7 @@
  * @method getNodeAttributes
  * @memberof axe.utils
  * @param {Element} node
+ * @deprecated
  * @returns {NamedNodeMap}
  */
 function getNodeAttributes(node) {

test/core/base/virtual-node/abstract-virtual-node.js

@@ -36,6 +36,17 @@ describe('AbstractVirtualNode', function() {
     assert.throws(fn);
   });
 
+  it('should throw an error when accessing attrNames', function() {
+    function fn() {
+      var abstractNode = new axe.AbstractVirtualNode();
+      if (abstractNode.attrNames()) {
+        return;
+      }
+    }
+
+    assert.throws(fn);
+  });
+
   it('should throw an error when accessing hasAttr', function() {
     function fn() {
       var abstractNode = new axe.AbstractVirtualNode();

test/core/base/virtual-node/serial-virtual-node.js

@@ -274,4 +274,22 @@ describe('SerialVirtualNode', function() {
       assert.isTrue(nodeWithClass.hasAttr('class'));
     });
   });
+
+  describe('attrNames', function() {
+    it('should return a list of attribute names', function() {
+      var vNode = new SerialVirtualNode({
+        nodeName: 'div',
+        attributes: { foo: 'bar' }
+      });
+
+      assert.deepEqual(vNode.attrNames, ['foo']);
+    });
+
+    it('should return an empty array if there are no attributes', function() {
+      var vNode = new SerialVirtualNode({
+        nodeName: 'div'
+      });
+      assert.deepEqual(vNode.attrNames, []);
+    });
+  });
 });

test/core/base/virtual-node/virtual-node.js

@@ -129,6 +129,29 @@ describe('VirtualNode', function() {
       });
     });
 
+    describe('attrNames', function() {
+      it('should return a list of attribute names', function() {
+        node.setAttribute('foo', 'bar');
+        var vNode = new VirtualNode(node);
+
+        assert.deepEqual(vNode.attrNames, ['foo']);
+      });
+
+      it('should work with clobbered attributes', function() {
+        var node = document.createElement('form');
+        node.setAttribute('id', '123');
+        node.innerHTML = '<select name="attributes"></select>';
+        var vNode = new VirtualNode(node);
+
+        assert.deepEqual(vNode.attrNames, ['id']);
+      });
+
+      it('should return an empty array if there are no attributes', function() {
+        var vNode = new VirtualNode(node);
+        assert.deepEqual(vNode.attrNames, []);
+      });
+    });
+
     describe.skip('isFocusable', function() {
       var commons;