Refactored and fixed bug where mutations were not being applied correctly on Dom additions. Also simplified dummy app.

Author: quantuminformation

app/components/test-recorder.js

@@ -12,15 +12,13 @@ export default Ember.Component.extend({
   // want this test recorder to sit outside the ember app and not be intrusive
   pendingGeneratedDomChangedScript: "",
 
-  initialObservedTarget: null,// cache this for performance
-
   currentRouteName: "",
   routeHasChanged: false, //if true render a test condition for this
 
   mutationObserversArr: [], // we disconnect these when the component is removed form the canvas (essential for testing)
 
   willDestroyElement: function () {
-    console.log("destroying");
+    console.log("destroying " + this.get("mutationObserversArr").length + " mut observers ");
     this.get("mutationObserversArr").forEach(function (observer) {
       observer.disconnect();
     });
@@ -52,6 +50,7 @@ export default Ember.Component.extend({
   },
 
   onCurrentRouteNameChange: Ember.observer('currentRouteName', function () {
+    console.log(this.get("currentRouteName"));
     this.set("routeHasChanged", true);
   }),
 
@@ -65,8 +64,6 @@ export default Ember.Component.extend({
    */
   didInsertElement: function () {
 
-    this.set("initialObservedTarget", document.querySelector("body [id^=ember]")); // cache this for performance
-
     var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
 
     //listen to clicks on ember items, apart from
@@ -76,6 +73,10 @@ export default Ember.Component.extend({
     var indentation = ' ';//2 spaces
     var currentNestedLevel = 0; //tracks the nesting level for mutations
 
+    /**
+     * This is a helper function extension of jquery to give us a dynamic path incase the user hasn't given an
+     * interactive element an ID. We then use  this path to repeat the user action in a test case.
+     */
     Ember.$.fn.extend({
       path: function () {
 
@@ -164,7 +165,6 @@ export default Ember.Component.extend({
      */
     function addObserverForTarget(target) {
 
-
       var observer = new MutationObserver(function (mutations) {
         mutations.forEach(function (mutation) {
 
@@ -175,27 +175,17 @@ export default Ember.Component.extend({
           var addedNodesArray = Array.prototype.slice.call(mutation.addedNodes);
           var removedNodesArray = Array.prototype.slice.call(mutation.removedNodes);
 
-          //ignore non tagged markup like carriage returns //todo investigate why ember does this, potential reflow issue
-          //ignore things with no id
-          //ignore ember-view wrapper divs
-
           // This array is used to add new mutation Observers from the newly added DOM
-          var newMutationsFromAddedNodesArray = 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 && !hasDoNotRecordClass;
-          });
+          var newMutationsFromAddedNodesArray = addedNodesArray.filter(filterDoNotRecordAndWhiteSpace);
 
-          //loop through the above and add observers
+          //loop through the above and add observers, we need to do this dynamically
           newMutationsFromAddedNodesArray.forEach(function (node) {
-            addInnerObserversForTarget(node, 2); //just drill down 2 levels more
+            addObserverForTarget(node); //just drill down 2 levels more
           })
 
-          //this array is used to generate the source code, we ignore anything with no ID
-
-          addedNodesArray = addedNodesArray.filter(unwantedNodesFilter);
-          removedNodesArray = removedNodesArray.filter(unwantedNodesFilter);
+          //this array is used to generate the source code, we filter
+          addedNodesArray = addedNodesArray.filter(filter_DoNotRecord_WhiteSpace_emberID_noID);
+          removedNodesArray = removedNodesArray.filter(filter_DoNotRecord_WhiteSpace_emberID_noID);
 
           if (!addedNodesArray.length && !removedNodesArray.length) {
             //no point continuing in this iteration if nothing of interest
@@ -226,6 +216,8 @@ export default Ember.Component.extend({
       //this is the only place where observe is called so we can track them here too to disconnect
       observer.observe(target, config);
       self.get("mutationObserversArr").push(observer);
+      addInnerObserversForTarget(target, 0);//forms new observers recursively
+
 
     }
 
@@ -250,18 +242,14 @@ export default Ember.Component.extend({
       }
     }
 
-    //only observe inside the ember app, get 1st ember div todo possibly move this outside if users wish to look outside ember app
-    //var initialObservedTarget = document.querySelector('body [id^=ember]');
-    addObserverForTarget(this.get("initialObservedTarget"));
+    //todo possibly move this outside if users wish to look outside ember app
+    var target = document.querySelector('body [id^=ember]');
+    addObserverForTarget(target);//as this does't do the recursive listeners straight away we have to call this:
 
-    //this is still WIP, as things are behaving a bit weird..
-    if (this.get("initialObservedTarget").children) {
-      addInnerObserversForTarget(this.get("initialObservedTarget"), 0);//forms new observers recursively
-    }
   }
 });
 
-function unwantedNodesFilter(node) {
+function filter_DoNotRecord_WhiteSpace_emberID_noID(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;
@@ -275,3 +263,10 @@ function unwantedNodesFilter(node) {
 
   return node.nodeType !== 3 && node.id && !hasDoNotRecordClass && !hasEmberIdRegex.test(node.id);
 }
+
+function filterDoNotRecordAndWhiteSpace(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 && !hasDoNotRecordClass;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ember-cli-test-recorder",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "The default blueprint for ember-cli addons.",
   "directories": {
     "doc": "doc",

tests/acceptance/test-playback-test.js

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

tests/dummy/app/controllers/application.js

@@ -2,11 +2,11 @@ import Ember from 'ember';
 
 export default Ember.Controller.extend({
   actions: {
-    goToLoginView: function () {
-      this.transitionToRoute("login");
+    goToIndexRoute: function () {
+      this.transitionToRoute("index");
     },
-    goToInputsView: function () {
-      this.transitionToRoute("inputs");
+    goToFooRoute: function () {
+      this.transitionToRoute("foo");
     }
   }
 });

tests/dummy/app/router.js

@@ -6,8 +6,10 @@ var Router = Ember.Router.extend({
 });
 
 Router.map(function () {
-  this.route('login');
-  this.route('inputs');
+  this.route('index', {'path': ''});
+  this.route('foo');//we just have a route here so we can test for it on transition
 });
 
 export default Router;
+
+

tests/dummy/app/templates/application.hbs

@@ -1,21 +1,20 @@
 <header>
-    <h1>Buttons</h1>
-    <button type="button" {{action 'goToLoginView'}}
+    <h1>Basic Inputs</h1>
+    <p>The purpose of this page is to check that different inputs can be automated in acceptance tests</p>
+    <!--this has no id to check if test recorder prints out html path for selector-->
+    <button type="button" {{action 'goToIndexRoute'}}
             class=""
-           >
-        <span class=""></span>&nbsp;Log in
+            >
+        <span class=""></span>&nbsp;Go to Index Route
     </button>
-    <!--this has no id to check if test recorder prints out html path for selector-->
-    <button type="button" {{action 'goToInputsView'}}
+    <button type="button" {{action 'goToFooRoute'}}
             class=""
             >
-        <span class=""></span>&nbsp;Inputs
+        <span class=""></span>&nbsp;Go to Foo Route
     </button>
 </header>
-{{#toggle-component}}
-    <p id="toggle-component-1-p">Toggled content 1 in Application.hbs</p>
-    <p>Toggled content 1 in Application.hbs</p>
-{{/toggle-component}}
+
+
 
 {{outlet}}
 {{test-recorder currentRouteName=currentRouteName class="doNotRecord"}}

tests/dummy/app/templates/components/toggle-component.hbs

@@ -2,4 +2,4 @@
 {{#if showContent}}
   {{yield}}
 {{/if}}
-<button {{action 'toggle'}}>Toggle</button>
+<button id="foobtn" {{action 'toggle'}}>Toggle</button>

tests/dummy/app/templates/login.hbs tests/dummy/app/templates/foo.hbstests/dummy/app/templates/login.hbs renamed to tests/dummy/app/templates/foo.hbs

@@ -9,3 +9,4 @@
   {{input type="text" name="type" placeholder="type in here"}}
   {{view "select" content=names}}
 </form>
+