Use query selector style for ui target breadcrumb format

Author: benvinegar

src/utils.js

@@ -153,21 +153,31 @@ function uuid4() {
 }
 
 /**
- * Returns a simple, child-less string representation of a DOM element
- * e.g. [HTMLElement] => <input class="btn" />
+ * Returns a simple, query-selector representation of a DOM element
+ * e.g. [HTMLElement] => input#foo.btn[name=baz]
  * @param HTMLElement
  */
 function htmlElementAsString(elem) {
-    var out = ['<'];
+    var out = [];
     out.push(elem.tagName.toLowerCase());
-    var attrWhitelist = ['id', 'type', 'name', 'value', 'class', 'placeholder', 'title', 'alt'];
+
+    if (elem.id) {
+        out.push('#' + elem.id);
+    }
+    var classes, i;
+    if (elem.className) {
+        classes = elem.className.split(' ');
+        for (i = 0; i < classes.length; i++) {
+            out.push('.' + classes[i]);
+        }
+    }
+    var attrWhitelist = ['type', 'name', 'value', 'placeholder', 'title', 'alt'];
     each(attrWhitelist, function(index, key) {
         var attr = elem.getAttribute(key);
         if (attr) {
-            out.push(' ' + key + '="' + attr + '"');
+            out.push('[' + key + '="' + attr + '"]');
         }
     });
-    out.push(' />');
     return out.join('');
 }
 

test/integration/test.js

@@ -441,7 +441,7 @@ describe('integration', function () {
 
                     assert.equal(breadcrumbs[0].type, 'ui_event');
                     // NOTE: attributes re-ordered. should this be expected?
-                    assert.equal(breadcrumbs[0].data.target, '<input id="bar" name="foo" placeholder="lol" />');
+                    assert.equal(breadcrumbs[0].data.target, 'input#bar[name="foo"][placeholder="lol"]');
                     assert.equal(breadcrumbs[0].data.type, 'click');
                 }
             );
@@ -482,7 +482,7 @@ describe('integration', function () {
 
                     assert.equal(breadcrumbs[0].type, 'ui_event');
                     // NOTE: attributes re-ordered. should this be expected?
-                    assert.equal(breadcrumbs[0].data.target, '<input id="bar" name="foo" placeholder="lol" />');
+                    assert.equal(breadcrumbs[0].data.target, 'input#bar[name="foo"][placeholder="lol"]');
                     assert.equal(breadcrumbs[0].data.type, 'click');
                 }
             );
@@ -530,7 +530,7 @@ describe('integration', function () {
 
                     assert.equal(breadcrumbs[0].type, 'ui_event');
                     // NOTE: attributes re-ordered. should this be expected?
-                    assert.equal(breadcrumbs[0].data.target, '<div id="a" />');
+                    assert.equal(breadcrumbs[0].data.target, 'div#a');
                     assert.equal(breadcrumbs[0].data.type, 'click');
                 }
             );

test/utils.test.js

@@ -125,26 +125,26 @@ describe('utils', function () {
         it('should work', function () {
             assert.equal(htmlElementAsString({
                 tagName: 'INPUT',
+                id: 'the-username',
+                className: 'form-control',
                 getAttribute: function (key){
                     return {
-                        id: 'the-username',
                         name: 'username',
-                        class: 'form-control',
                         placeholder: 'Enter your username'
                     }[key];
                 }
-            }), '<input id="the-username" name="username" class="form-control" placeholder="Enter your username" />');
+            }), 'input#the-username.form-control[name="username"][placeholder="Enter your username"]');
 
             assert.equal(htmlElementAsString({
                 tagName: 'IMG',
+                id: 'image-3',
                 getAttribute: function (key){
                     return {
-                        id: 'image-3',
                         title: 'A picture of an apple',
                         'data-something': 'This should be ignored' // skipping data-* attributes in first implementation
                     }[key];
                 }
-            }), '<img id="image-3" title="A picture of an apple" />');
+            }), 'img#image-3[title="A picture of an apple"]');
         });
     });