Add support for <form> elements

Closes #2
ericclemmons · Mar 27, 2013 · 45fe03f · 45fe03f
1 parent b987f00
commit 45fe03f
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 8 deletions.
diff --git a/index.js b/index.js
@@ -50,6 +50,8 @@ function selectors(el) {
   var label = null;
   var title = null;
   var alt   = null;
+  var name  = null;
+  var value = null;
 
   do {
     // IDs are unique enough
@@ -71,6 +73,12 @@ function selectors(el) {
       label += '[title="' + title + '"]';
     } else if (alt = el.getAttribute('alt')) {
       label += '[alt="' + alt + '"]';
+    } else if (name = el.getAttribute('name')) {
+      label += '[name="' + name + '"]';
+    }
+
+    if (value = el.getAttribute('value')) {
+      label += '[value="' + value + '"]';
     }
 
     parts.unshift(label);

diff --git a/test/index.html b/test/index.html
@@ -1,3 +1,5 @@
+<!DOCTYPE html>
+
 <html>
   <head>
     <title>unique-selector tests</title>
@@ -29,6 +31,26 @@ <h3>Test Fixture <small>(for Mocha)</small></h3>
         </li>
         <li class="last collapsed item">Item 3</li>
       </ul>
+
+      <form>
+        <select name="state">
+          <option value="NM">New Mexico</option>
+          <option value="NY">New York</option>
+          <option value="TX" selected>Texas</option>
+        </select>
+
+        <p>
+          Do you have a computer?
+
+          <label>
+            <input type="radio" name="computer" value="1" checked />&nbsp;Yes
+          </label>
+
+          <label>
+            <input type="radio" name="computer" value="0" />&nbsp;No
+          </label>
+        </p>
+      </form>
     </div>
 
     <script src="../build/build.js"></script>

diff --git a/test/unique-selector.js b/test/unique-selector.js
@@ -1,7 +1,7 @@
 var unique = require('unique-selector');
 
 function assert(expr, msg) {
-  if (!expr) throw new Error(msg || 'failed');
+  if (!expr) throw new Error(typeof msg === undefined ? 'failed' : msg);
 }
 
 describe('unique-selector', function() {
@@ -35,20 +35,24 @@ describe('unique-selector', function() {
     'HTML > BODY > DIV#fixture > UL#nav > LI:nth-child(1)': '#nav > li.first.item',
     'HTML > BODY > DIV#fixture > UL#nav > LI:nth-child(2)': '#nav > li.collapsed.item:nth-child(2)',
     'HTML > BODY > DIV#fixture > UL#nav > LI:nth-child(3)': '#nav > li.last.collapsed.item',
-    'HTML > BODY > DIV#fixture > UL#nav > LI.item > UL#nested > LI.child > IMG': '#nested > li.child > img[alt="Some Title"]'
+    'HTML > BODY > DIV#fixture > UL#nav > LI.item > UL#nested > LI.child > IMG': '#nested > li.child > img[alt="Some Title"]',
+    'HTML > BODY > DIV#fixture > FORM > SELECT > OPTION[selected]': '#fixture > form > select[name="state"] > option[value="TX"]',
+    'HTML > BODY > DIV#fixture > FORM > P > LABEL > INPUT[checked]': '#fixture > form > p > label > input[name="computer"][value="1"]'
   };
 
   for (selector in selectors) {
     describe('with ' + selector, function() {
-      var expected = selectors[selector];
-      var actual = unique(document.querySelector(selector));
+      var expected  = selectors[selector];
+      var match     = selector ? document.querySelector(selector): undefined;
+      var matches   = selector ? document.querySelectorAll(selector) : undefined;
+      var actual    = match ? unique(match) : undefined;
 
-      it('should return `' + expected + '`', function() {
-        assert(expected === actual, actual);
+      it('should have only 1 match', function() {
+        assert(1 === matches.length, matches.length + ' matches');
       });
 
-      it('should have only 1 match', function() {
-        assert(1 === document.querySelectorAll(selector).length);
+      it('should return `' + expected + '`', function() {
+        assert(expected === actual, actual);
       });
     });
   }