Added recorder for text fill in, record initial route.

Author: quantuminformation

app/components/test-recorder.js

@@ -64,6 +64,9 @@ export default Ember.Component.extend({
    */
   didInsertElement: function () {
 
+    var route = this.get("currentRouteName") === 'index' ? '/' : this.get("currentRouteName");
+    this.set("generatedScript", 'visit("' + route + '");<br>');
+
     var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
 
     //listen to clicks on ember items, apart from
@@ -74,42 +77,44 @@ export default Ember.Component.extend({
     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.
+     * this is used for capturing text input fill-ins
      */
-    Ember.$.fn.extend({
-      path: function () {
-
-        if (this.length !== 1) {
-          throw 'Requires one element.';
-        }
-
-        var path, node = this;
-        //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;
-          }
-          name = name.toLowerCase();
-
-          var parent = node.parent();
-
-          var siblings = parent.children(name);
-          if (siblings.length > 1) {
-            name += ':eq(' + siblings.index(realNode) + ')';
+    Ember.$('input').on('focusout', function (e) {
+
+        if (e.target.localName === 'input' && e.target.type === 'text') {
+
+          var $target = $(e.target);
+          var $emberTarget = $target.is(emberSelector) ? $target : $target.parent(emberSelector);
+          if ($emberTarget.length) {
+            // 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 = 'fillIn("' + pathPrint + '", " ' + e.target.value + '");<br/>'
+
+            //add to existing tests
+            self.set("generatedScript", self.get("generatedScript") + newTestPrint);
+
+            //wrap in <pre> block to make code well formatted
+            self.set("renderedScript", '<pre>' + self.get("generatedScript") + '</pre>');
+          } else {
+            return;
           }
-
-          path = name + (path ? '>' + path : '');
-          node = parent;
         }
-
-        return path;
       }
-    });
+    );
+
     Ember.$(document).on('click', function (e) {
 
+      if (e.target.localName === 'input' && e.target.type === 'text') {
+        return; //for text inputs we capture mouse out and use this to generate a fillIn test helper
+      }
+
       //clear this if not DOM mutations happen ()
       var cleanText = self.get("generatedScript").replace(self.get("MUTATIONS_PLACEHOLDER"), "");
       self.set("generatedScript", cleanText);
@@ -270,3 +275,39 @@ function filterDoNotRecordAndWhiteSpace(node) {
   var hasDoNotRecordClass = classListArray ? (classListArray.indexOf("doNotRecord") !== -1) : false;
   return node.nodeType !== 3 && !hasDoNotRecordClass;
 }
+
+/**
+ * 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 () {
+
+    if (this.length !== 1) {
+      throw 'Requires one element.';
+    }
+
+    var path, node = this;
+    //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;
+      }
+      name = name.toLowerCase();
+
+      var parent = node.parent();
+
+      var siblings = parent.children(name);
+      if (siblings.length > 1) {
+        name += ':eq(' + siblings.index(realNode) + ')';
+      }
+
+      path = name + (path ? '>' + path : '');
+      node = parent;
+    }
+
+    return path;
+  }
+});

package.json

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

tests/acceptance/test-playback-test.js

@@ -24,7 +24,18 @@ module('Acceptance: TestPlayback', {
  */
 test('Playback code', function (assert) {
 //assume that the user starts  on index
-  visit('/');
+  visit("/");
+  fillIn("#register-input-1", " wd");
+  click("div:eq(0)>form>input:eq(0)");
+  andThen(function () {
+
+  });
+
+  click("div:eq(0)>form>input:eq(1)");
+  andThen(function () {
+
+  });
+
   click("div:eq(0)>header>button:eq(1)");
   andThen(function () {
     assert.equal(currentRouteName(), "foo", "The page navigates to foo on button click");
@@ -33,6 +44,17 @@ test('Playback code', function (assert) {
 
   });
 
+  click("#foobtn");
+  andThen(function () {
+    assert.equal(find("#toggle-component-login-p").length, 0, "toggle-component-login-p removed AFTER user [INSERT REASON]");
+
+  });
+
+  click("div:eq(0)");
+  andThen(function () {
+
+  });
+
   click("div:eq(0)>header>button:eq(0)");
   andThen(function () {
     assert.equal(currentRouteName(), "index", "The page navigates to index on button click");
@@ -41,5 +63,19 @@ test('Playback code', function (assert) {
 
   });
 
+  click("div:eq(0)");
+  andThen(function () {
+
+  });
+
+  click("div:eq(0)");
+  andThen(function () {
+
+  });
+
+  click("div:eq(0)");
+  andThen(function () {
+
+  });
 
 });