fix: extra protection around tagName accessor (#13)

* fix: extra protection around tagName accessor

* extra fallback to nodeName to help keep us on the rails if possible

Author: tbiethman

src/getTag.js

@@ -1,3 +1,7 @@
+function isString(value) {
+  return typeof value === 'string';
+}
+
 /**
  * Returns the Tag of the element
  * @param  { Object } element
@@ -6,7 +10,26 @@
  */
 export function getTag( el, filter )
 {
-  const tagName = el.tagName.toLowerCase().replace(/:/g, '\\:')
+  let tagName = el.tagName;
+
+  // If the tagName attribute has been overridden, we should 
+  // check the nodeName property instead. If the nodeName property
+  // is also not a string, we should return null and ignore tagName
+  // for selector generation.
+  //
+  // This can happen when a <form> element contains an <input>
+  // with an id of `tagName`. In this case, the form element's
+  // tagName property is a reference to the input element, not
+  // a string.
+  if (!isString(tagName)) {
+    tagName = el.nodeName;
+
+    if (!isString(tagName)) {
+      return null;
+    }
+  }
+
+  tagName = tagName.toLowerCase().replace(/:/g, '\\:')
 
   if (filter && !filter('tag', 'tag', tagName)) {
     return null;

test/unique-selector.js

@@ -112,7 +112,6 @@ describe( 'Unique Selector Tests', () =>
     expect( uniqueSelector ).to.equal( 'span' );
   } );
 
-
   it( 'Tag', () =>
   {
     $( 'body' ).append( '<div class="test5"><span></span></div><div class="test5"><span></span></div>' );
@@ -129,6 +128,74 @@ describe( 'Unique Selector Tests', () =>
     expect( uniqueSelector ).to.equal( 'a' );
   } );
 
+  it( 'Tag - fallback to nodeName', () =>
+  {
+    $( 'body' ).append(`
+      <div class="test2">
+        <form action="" method="get">
+          <div class="form-example">
+            <label for="name">Enter your name: </label>
+            <input type="text" name="name" id="tagName" required />
+          </div>
+        </form>
+      </div>
+    `);
+
+    const formNode = $( 'form' ).get( 0 );
+
+    // JSDOM doesn't actually exhibit this behavior;
+    // forcing the test to behave as a browser does.
+    Object.defineProperty(formNode, 'tagName', {
+      get: () => {
+        return $( 'input#tagName' ).get( 0 );
+      }
+    })
+
+    expect(typeof formNode.tagName).to.not.equal('string')
+
+    const uniqueSelector = unique( formNode );
+    // nodeName === 'form'
+    expect( uniqueSelector ).to.equal( 'form' );
+  } );
+
+  it( 'Tag - ignored due to property override', () =>
+    {
+      $( 'body' ).append(`
+        <div class="test2">
+          <form action="" method="get">
+            <div class="form-example">
+              <label for="name">Enter your name: </label>
+              <input type="text" name="name" id="tagName" required />
+            </div>
+          </form>
+        </div>
+      `);
+  
+      const formNode = $( 'form' ).get( 0 );
+  
+      // JSDOM doesn't actually exhibit this behavior;
+      // forcing the test to behave as a browser does.
+      Object.defineProperty(formNode, 'tagName', {
+        get: () => {
+          return $( 'input#tagName' ).get( 0 );
+        }
+      })
+      Object.defineProperty(formNode, 'nodeName', {
+        get: () => {
+          return $( 'input#tagName' ).get( 0 );
+        }
+      })
+  
+      expect(typeof formNode.tagName).to.not.equal('string')
+      expect(typeof formNode.nodeName).to.not.equal('string')
+
+      const uniqueSelector = unique( formNode );
+      // with nodeName overridden, the isElement check will fail
+      // and the wildcard selector is returned for that element.
+      // This really shouldn't happen in practice.
+      expect( uniqueSelector ).to.equal( '.test2 > *' );
+  } );  
+
   it( 'Attributes', () =>
   {
     $( 'body' ).append( '<div class="test5" test="5"></div>' );