fix autogenerated paths to be relative to #ember-testing div, filter out non user given id mutations

Author: quantuminformation

README.md

@@ -34,7 +34,7 @@ If you don't want an element to be recorded, and any of its children add this cl
 
 Avoid making multiple button clicks (or other interactions that cause asynchronous) updates until DOM has 
 finished updating. This will allow code generated by the mutations observer to be placed in the in the
-generated code. This happens outside of the ember run loop.ImpIm
+generated code. This happens outside of the ember run loop.
 
 
 ## Roadmap

app/components/test-recorder.js

@@ -1,7 +1,7 @@
 import Ember from 'ember';
 
 export default Ember.Component.extend({
-  classNames: ['dont'],
+  classNames: ['dont'], //this is the output code, we don't want to generate any code form changes in this
 
   MUTATIONS_PLACEHOLDER: "[MUTATIONS_PLACEHOLDER]", //holds text to be added from mutations
 
@@ -23,8 +23,7 @@ export default Ember.Component.extend({
     console.log("destroying");
     this.get("mutationObserversArr").forEach(function (observer) {
       observer.disconnect();
-    })
-    //var rect = obj.getBoundingClientRect();
+    });
   },
 
   /**
@@ -53,15 +52,6 @@ export default Ember.Component.extend({
   },
 
   onCurrentRouteNameChange: Ember.observer('currentRouteName', function () {
-    //console.log(this.get("currentRouteName"));
-
-    /* //todo alternative?
-     window.onhashchange = function locationHashChanged() {
-     };
-     window.addEventListener('popstate', function locationHashChanged(e) {
-     });
-     * */
-    //todo have a timing mechanism or wait for all promises are fulfilled
     this.set("routeHasChanged", true);
   }),
 
@@ -80,10 +70,10 @@ export default Ember.Component.extend({
     var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
 
     //listen to clicks on ember items, apart from
-    //the test recorder UI
+    //the test recorder UI (the dont class)
     var emberSelector = '[id^=ember]:not(.dont),[data-ember-action]';
     var self = this;
-    var indendation = ' ';//2 spaces
+    var indentation = ' ';//2 spaces
     var currentNestedLevel = 0; //tracks the nesting level for mutations
 
     Ember.$.fn.extend({
@@ -94,7 +84,9 @@ export default Ember.Component.extend({
         }
 
         var path, node = this;
-        while (node.length) {
+        //this is just to get the path if the user interacts with a non user given id object
+        //we stop at body as qunit tests  find statement is relative to the #ember-testing div
+        while (node.length && node[0].localName !== 'body') {
           var realNode = node[0], name = realNode.localName;
           if (!name) {
             break;
@@ -125,13 +117,21 @@ export default Ember.Component.extend({
       var $emberTarget = $target.is(emberSelector) ? $target : $target.parent(emberSelector);
 
       if ($emberTarget.length) {
-        var pathPrint = e.target.id ? "#" + e.target.id : $emberTarget.path();
+        // we don't want to output a click (#ember123) as this is not reliable
+        var hasEmberIdRegex = /ember[\d]+/;
+        if (e.target.id && !hasEmberIdRegex.test(e.target.id)) {
+          var pathPrint = "#" + e.target.id;
+        } else {
+          //print the nasty DOM path instead, to avoid give your element its own id
+          var pathPrint = $emberTarget.path();
+        }
+
+
         var newTestPrint = 'click("' + pathPrint + '");<br/>' + 'andThen(function () {' + '<br/>';
 
         //TEST 1 - > Assert the route is what it a changed to
-        // todo hook this to afterModel in the final route
         if (self.get("routeHasChanged")) {
-          newTestPrint += indendation + 'assert.equal(currentRouteName(), "' +
+          newTestPrint += indentation + 'assert.equal(currentRouteName(), "' +
             self.get("currentRouteName") +
             '", "The page navigates to ' + self.get("currentRouteName") +
             ' on button click");<br/>'; //todo make reason more dynamic
@@ -141,15 +141,13 @@ export default Ember.Component.extend({
         //TEST 2 - > Place holder that will be replaced with dom visibility Assertions
         // the last one of these is replaced each time the mutation observes are run
         newTestPrint += self.get("MUTATIONS_PLACEHOLDER") + '<br/>' +
-
             //Close the and then block
           '});<br/><br/>'
         // console.log(testLinePrint);
 
         //add to exisiting tests
         self.set("generatedScript", self.get("generatedScript") + newTestPrint);
 
-        //todo hack to fill in mutations
         var withReplacement = self.get("generatedScript").replace(self.get("MUTATIONS_PLACEHOLDER"), self.get("pendingGeneratedDomChangedScript"));
         self.set("generatedScript", withReplacement);
         self.set("pendingGeneratedDomChangedScript", "") //clear
@@ -165,9 +163,9 @@ export default Ember.Component.extend({
      * @param target
      */
     function addObserverForTarget(target) {
-      //todo, fix this hack -> this will fire before the onClick of jquery so we cache the generated text here for now
-      var observer = new MutationObserver(function (mutations) {
 
+
+      var observer = new MutationObserver(function (mutations) {
         mutations.forEach(function (mutation) {
 
           var addedNodesTestText = "";
@@ -195,21 +193,9 @@ export default Ember.Component.extend({
           })
 
           //this array is used to generate the source code, we ignore anything with no ID
-          addedNodesArray = addedNodesArray.filter(function (node) {
-            var classListArray = node.classList && Array.prototype.slice.call(node.classList);
-            //var isEmberView = classListArray ? (classListArray.indexOf("ember-view") === -1) : false;
-            var hasDoNotRecordClass = classListArray ? (classListArray.indexOf("doNotRecord") !== -1) : false;
-
-            return node.nodeType !== 3 && node.id && !hasDoNotRecordClass;
-          });
-
-          removedNodesArray = removedNodesArray.filter(function (node) {
-            var classListArray = node.classList && Array.prototype.slice.call(node.classList);
-            //var isEmberView = classListArray ? (classListArray.indexOf("ember-view") === -1) : false;
-            var hasDoNotRecordClass = classListArray ? (classListArray.indexOf("doNotRecord") !== -1) : false;
 
-            return node.nodeType !== 3 && node.id && !hasDoNotRecordClass;
-          });
+          addedNodesArray = addedNodesArray.filter(unwantedNodesFilter);
+          removedNodesArray = removedNodesArray.filter(unwantedNodesFilter);
 
           if (!addedNodesArray.length && !removedNodesArray.length) {
             //no point continuing in this iteration if nothing of interest
@@ -223,11 +209,11 @@ export default Ember.Component.extend({
           }
 
           addedNodesArray.forEach(function (node) {
-            addedNodesTestText += indendation + 'assert.equal(find("#' + node.id + '").length, 1, "' + node.id + ' shown AFTER user [INSERT REASON]");' + '<br/>';
+            addedNodesTestText += indentation + 'assert.equal(find("#' + node.id + '").length, 1, "' + node.id + ' shown AFTER user [INSERT REASON]");' + '<br/>';
           });
 
           removedNodesArray.forEach(function (node) {
-            removedNodesTestText += indendation + 'assert.equal(find("#' + node.id + '").length, 0, "' + node.id + ' removed AFTER user [INSERT REASON]");' + '<br/>';
+            removedNodesTestText += indentation + 'assert.equal(find("#' + node.id + '").length, 0, "' + node.id + ' removed AFTER user [INSERT REASON]");' + '<br/>';
           });
 
           self.set("pendingGeneratedDomChangedScript", self.get("pendingGeneratedDomChangedScript") + (addedNodesTestText || removedNodesTestText));
@@ -275,3 +261,17 @@ export default Ember.Component.extend({
   }
 });
 
+function unwantedNodesFilter(node) {
+  var classListArray = node.classList && Array.prototype.slice.call(node.classList);
+  //var isEmberView = classListArray ? (classListArray.indexOf("ember-view") === -1) : false;
+  var hasDoNotRecordClass = classListArray ? (classListArray.indexOf("doNotRecord") !== -1) : false;
+
+  //the check here is we don't want to record
+  // 1 whitespace
+  // 2 things with no id
+  // 3 things that have a hasDoNotRecordClass
+  // 4 things with an ember id, (where a user has not given one but ember needs to add an id)
+  var hasEmberIdRegex = /ember[\d]+/;
+
+  return node.nodeType !== 3 && node.id && !hasDoNotRecordClass && !hasEmberIdRegex.test(node.id);
+}

tests/acceptance/test-playback-test.js

@@ -24,11 +24,12 @@ module('Acceptance: TestPlayback', {
  */
 test('Playback code', function (assert) {
 //assume that the user starts  on index
-  visit('inputs');
+  visit('/');
+  click("div:eq(0)>header>button:eq(0)");
   andThen(function () {
-
+    assert.equal(currentRouteName(), "login", "The page navigates to login on button click");
+    assert.equal(find("#login-foo-component-with-nested-components").length, 1, "login-foo-component-with-nested-components shown AFTER user [INSERT REASON]");
 
   });
 
-  stop();
 });

tests/dummy/app/templates/application.hbs

@@ -2,7 +2,7 @@
     <h1>Buttons</h1>
     <button type="button" {{action 'goToLoginView'}}
             class=""
-            id="btnLogin">
+           >
         <span class=""></span>&nbsp;Log in
     </button>
     <!--this has no id to check if test recorder prints out html path for selector-->