Significantly clean up the way the scenario DSL works and implement many more DSL statements.

- "this" always means the current chain scope inside a DSL

- addFutureAction callbacks now take ($window, $document, done)

- $document has a special method elements() that uses the currently selected nodes in the document as defined by using() statements.

- $document.elements() allows placeholder insertion into selectors to make them more readable.
  ex. $document.elements('input[name="$1"]', myVar) will substitute the value of myVar for $1 in the selector. Subsequent arguments are $2 and so on.

- $document.elements() results have a special method trigger(event) which should be used to events. This method implements some hacks to make sure browser UI controls update and the correct angular events fire.

- futures now allow custom formatting. By default any chain that results in a future can use toJson() or fromJson() to convert the future value to and from json. A custom parser can be provided with parsedWith(fn) where fn is a callback(value) that must return the parsed result.

Note: The entire widgets.html UI is now able to be controlled and asserted through DSL statements!!! Victory! :)

7 files changed, 391 insertions, 153 deletions

diff --git a/src/jqLite.js b/src/jqLite.js
index 2f32b121..a2ea286b 100644
--- a/src/jqLite.js
+++ b/src/jqLite.js
@@ -119,10 +119,14 @@ JQLite.prototype = {
   },
 
   trigger: function(type) {
-    var evnt = document.createEvent('MouseEvents'),
-        element = this[0];
-    evnt.initMouseEvent(type, true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, element);
-    element.dispatchEvent(evnt);
+    if (msie) {
+      this[0].fireEvent('on' + type);
+    } else {
+      var evnt = document.createEvent('MouseEvents'),
+          element = this[0];
+      evnt.initMouseEvent(type, true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, element);
+      element.dispatchEvent(evnt);
+    }
   },
 
   replaceWith: function(replaceNode) {
@@ -249,10 +253,6 @@ if (msie) {
         if (isDefined(value)) e.innerText = value;
         return e.innerText;
       }
-    },
-
-    trigger: function(type) {
-      this[0].fireEvent('on' + type);
     }
   });
 }
diff --git a/src/scenario/Application.js b/src/scenario/Application.js
index 24ae99e9..4ee0dd03 100644
--- a/src/scenario/Application.js
+++ b/src/scenario/Application.js
@@ -47,5 +47,5 @@ angular.scenario.Application.prototype.navigateTo = function(url, onloadFn) {
  */
 angular.scenario.Application.prototype.executeAction = function(action) {
   var $window = this.getWindow();
-  return action.call($window, _jQuery($window.document), $window);
+  return action.call(this, $window, _jQuery($window.document));
 };
diff --git a/src/scenario/DSL.js b/src/scenario/DSL.js
deleted file mode 100644
index a7571afe..00000000
--- a/src/scenario/DSL.js
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * Shared DSL statements that are useful to all scenarios.
- */
-
-/**
-* Usage:
-*    pause(seconds) pauses the test for specified number of seconds
-*/
-angular.scenario.dsl('pause', function() {
- return function(time) {
-   return this.addFuture('pause for ' + time + ' seconds', function(done) {
-     this.setTimeout(function() { done(null, time * 1000); }, time * 1000);
-   });
- };
-});
-
-/**
- * Usage:
- *    expect(future).{matcher} where matcher is one of the matchers defined
- *    with angular.scenario.matcher
- *
- * ex. expect(binding("name")).toEqual("Elliott")
- */
-angular.scenario.dsl('expect', function() {
-  var chain = angular.extend({}, angular.scenario.matcher);
-  
-  chain.not = function() {
-    this.inverse = true;
-    return chain;
-  };
-  
-  return function(future) {
-    this.future = future;
-    return chain;
-  };
-});
-
-/**
- * Usage:
- *    navigateTo(future|string) where url a string or future with a value 
- *    of a  URL to navigate to
- */
-angular.scenario.dsl('navigateTo', function() {
-  return function(url) {
-    var application = this.application;
-    var name = url;
-    if (url.name) {
-      name = ' value of ' + url.name;
-    }
-    return this.addFuture('navigate to ' + name, function(done) {
-      application.navigateTo(url.value || url, function() {
-        application.executeAction(function() {
-          if (this.angular) {
-            var $browser = this.angular.service.$browser();
-            $browser.poll();
-            $browser.notifyWhenNoOutstandingRequests(function() {
-              done(null, url.value || url);
-            });
-          } else {
-            done(null, url.value || url);
-          }
-        });
-      });
-    });
-  };
-});
-
-/**
- * Usage:
- *    input(name).enter(value) enters value in input with specified name
- *    input(name).check() checks checkbox
- *    input(name).select(value) selects the readio button with specified name/value
- */
-angular.scenario.dsl('input', function() {
-  var chain = {};
-  
-  chain.enter = function(value) {
-    var spec = this;
-    return this.addFutureAction("input '" + this.name + "' enter '" + value + "'", function(done) {
-      var input = _jQuery(this.document).find('input[name=' + spec.name + ']');
-      if (!input.length)
-        return done("Input named '" + spec.name + "' does not exist.");
-      input.val(value);
-      this.angular.element(input[0]).trigger('change');
-      done();
-    });
-  };
-  
-  chain.check = function() {
-    var spec = this;
-    return this.addFutureAction("checkbox '" + this.name + "' toggle", function(done) {
-      var input = _jQuery(this.document).
-        find('input:checkbox[name=' + spec.name + ']');
-      if (!input.length)
-        return done("Input named '" + spec.name + "' does not exist.");
-      this.angular.element(input[0]).trigger('click');
-      input.attr('checked', !input.attr('checked'));
-      done();
-    });
-  };
-  
-  chain.select = function(value) {
-    var spec = this;
-    return this.addFutureAction("radio button '" + this.name + "' toggle '" + value + "'", function(done) {
-      var input = _jQuery(this.document).
-        find('input:radio[name$="@' + spec.name + '"][value="' + value + '"]');
-      if (!input.length)
-        return done("Input named '" + spec.name + "' does not exist.");
-      this.angular.element(input[0]).trigger('click');
-      input.attr('checked', !input.attr('checked'));
-      done();
-    });
-  };
-  
-  return function(name) {
-    this.name = name;
-    return chain;
-  };
-});
-
-/**
- * Usage:
- *    binding(name) returns the value of a binding
- */
-angular.scenario.dsl('binding', function() {
-  return function(name) {
-    return this.addFutureAction("select binding '" + name + "'", function(done) {
-      var element = _jQuery(this.document).find('[ng\\:bind="' + name + '"]');
-      if (!element.length)
-        return done("Binding named '" + name + "' does not exist.");
-      done(null, element.text());
-    });
-  };
-});
diff --git a/src/scenario/Future.js b/src/scenario/Future.js
index 60fad9c5..30c2d902 100644
--- a/src/scenario/Future.js
+++ b/src/scenario/Future.js
@@ -6,6 +6,7 @@ angular.scenario.Future = function(name, behavior) {
   this.behavior = behavior;
   this.fulfilled = false;
   this.value = undefined;
+  this.parser = angular.identity;
 };
 
 /**
@@ -16,7 +17,38 @@ angular.scenario.Future = function(name, behavior) {
 angular.scenario.Future.prototype.execute = function(doneFn) {
   this.behavior(angular.bind(this, function(error, result) {
     this.fulfilled = true;
+    if (result) {
+      try {
+        result = this.parser(result);
+      } catch(e) {
+        error = e;
+      }
+    }
     this.value = error || result;
     doneFn(error, result);
   }));
 };
+
+/**
+ * Configures the future to convert it's final with a function fn(value)
+ */
+angular.scenario.Future.prototype.parsedWith = function(fn) {
+  this.parser = fn;
+  return this;
+};
+
+/**
+ * Configures the future to parse it's final value from JSON
+ * into objects.
+ */
+angular.scenario.Future.prototype.fromJson = function() {
+  return this.parsedWith(angular.fromJson);
+};
+
+/**
+ * Configures the future to convert it's final value from objects
+ * into JSON.
+ */
+angular.scenario.Future.prototype.toJson = function() {
+  return this.parsedWith(angular.toJson);
+};
diff --git a/src/scenario/Runner.js b/src/scenario/Runner.js
index ff20d1d1..55360592 100644
--- a/src/scenario/Runner.js
+++ b/src/scenario/Runner.js
@@ -82,14 +82,36 @@ angular.scenario.Runner.prototype.run = function(ui, application, specRunnerClas
   $root.setTimeout = function() {
     return self.$window.setTimeout.apply(self.$window, arguments);
   };
-  asyncForEach(specs, angular.bind(this, function(spec, specDone) {
+  asyncForEach(specs, function(spec, specDone) {
+    var dslCache = {};
     var runner = angular.scope($root);
     runner.$become(specRunnerClass);
-    angular.foreach(angular.scenario.dsl, angular.bind(this, function(fn, key) {
-      this.$window[key] = function() {
-        return fn.call($root).apply(angular.scope(runner), arguments);
+    angular.foreach(angular.scenario.dsl, function(fn, key) {
+      dslCache[key] = fn.call($root);
+    });
+    angular.foreach(angular.scenario.dsl, function(fn, key) {
+      self.$window[key] = function() {
+        var scope = angular.scope(runner);
+
+        // Make the dsl accessible on the current chain
+        scope.dsl = {};
+        angular.foreach(dslCache, function(fn, key) {
+          scope.dsl[key] = function() {
+            return dslCache[key].apply(scope, arguments);
+          };
+        });
+
+        // Make these methods work on the current chain
+        scope.addFuture = function() {
+          return angular.scenario.SpecRunner.prototype.addFuture.apply(scope, arguments);
+        };
+        scope.addFutureAction = function() {
+          return angular.scenario.SpecRunner.prototype.addFutureAction.apply(scope, arguments);
+        };
+
+        return scope.dsl[key].apply(scope, arguments);
       };
-    }));
+    });
     runner.run(ui, spec, specDone);
-  }), specsDone || angular.noop);
+  }, specsDone || angular.noop);
 };
diff --git a/src/scenario/SpecRunner.js b/src/scenario/SpecRunner.js
index 8b6d4ef1..d6cbdcdc 100644
--- a/src/scenario/SpecRunner.js
+++ b/src/scenario/SpecRunner.js
@@ -41,7 +41,7 @@ angular.scenario.SpecRunner.prototype.run = function(ui, spec, specDone) {
         });
       } catch (e) {
         stepUI.error(e);
-        rethrow(e);
+        throw e;
       }
     }, 
     function(e) {
@@ -71,8 +71,56 @@ angular.scenario.SpecRunner.prototype.addFuture = function(name, behavior) {
  */
 angular.scenario.SpecRunner.prototype.addFutureAction = function(name, behavior) {
   return this.addFuture(name, function(done) {
-    this.application.executeAction(function() {
-      behavior.call(this, done);
-    });
+    this.application.executeAction(angular.bind(this, function($window, $document) {
+
+      $document.elements = angular.bind(this, function(selector) {
+        var args = Array.prototype.slice.call(arguments, 1);
+        if (this.selector) {
+          selector = this.selector + ' ' + (selector || '');
+        }
+        angular.foreach(args, function(value, index) {
+          selector = selector.replace('$' + (index + 1), value);
+        });
+        var result = $document.find(selector);
+        if (!result.length) {
+          throw {
+            type: 'selector',
+            message: 'Selector ' + selector + ' did not match any elements.'
+          };
+        }
+
+        result.trigger = function(type) {
+          result.each(function(index, node) {
+            var element = $window.angular.element(node);
+            //TODO(esprehn): HACK!!! Something is broken in angular event dispatching
+            //  and if the real jQuery is used we need to set the attribtue after too
+            if (angular.isDefined(element.selector)) {
+              if (type === 'click' && node.nodeName.toLowerCase() === 'input') {
+                element.attr('checked', !element.attr('checked'));
+              }
+            }
+            //TODO(esprehn): HACK!! See above comment.
+            element.trigger(type);
+            if (angular.isDefined(element.selector)) {
+              if (type === 'click' && node.nodeName.toLowerCase() === 'input') {
+                element.attr('checked', !element.attr('checked'));
+              }
+            }
+          });
+        };
+
+        return result;
+      });
+      
+      try {
+        behavior.call(this, $window, $document, done);
+      } catch(e) {
+        if (e.type && e.type === 'selector') {
+          done(e.message);
+        } else {
+          throw e;
+        }
+      }
+    }));
   });
 };
diff --git a/src/scenario/dsl.js b/src/scenario/dsl.js
new file mode 100644
index 00000000..69af39db
--- /dev/null
+++ b/src/scenario/dsl.js
@@ -0,0 +1,270 @@
+/**
+ * Shared DSL statements that are useful to all scenarios.
+ */
+
+/**
+* Usage:
+*    pause(seconds) pauses the test for specified number of seconds
+*/
+angular.scenario.dsl('pause', function() {
+ return function(time) {
+   return this.addFuture('pause for ' + time + ' seconds', function(done) {
+     this.setTimeout(function() { done(null, time * 1000); }, time * 1000);
+   });
+ };
+});
+
+/**
+ * Usage:
+ *    expect(future).{matcher} where matcher is one of the matchers defined
+ *    with angular.scenario.matcher
+ *
+ * ex. expect(binding("name")).toEqual("Elliott")
+ */
+angular.scenario.dsl('expect', function() {
+  var chain = angular.extend({}, angular.scenario.matcher);
+
+  chain.not = function() {
+    this.inverse = true;
+    return chain;
+  };
+
+  return function(future) {
+    this.future = future;
+    return chain;
+  };
+});
+
+/**
+ * Usage:
+ *    navigateTo(future|string) where url a string or future with a value
+ *    of a  URL to navigate to
+ */
+angular.scenario.dsl('navigateTo', function() {
+  return function(url) {
+    var application = this.application;
+    var name = url;
+    if (url.name) {
+      name = ' value of ' + url.name;
+    }
+    return this.addFuture('navigate to ' + name, function(done) {
+      application.navigateTo(url.value || url, function() {
+        application.executeAction(function($window) {
+          if ($window.angular) {
+            var $browser = $window.angular.service.$browser();
+            $browser.poll();
+            $browser.notifyWhenNoOutstandingRequests(function() {
+              done(null, url.value || url);
+            });
+          } else {
+            done(null, url.value || url);
+          }
+        });
+      });
+    });
+  };
+});
+
+/**
+ * Usage:
+ *    using(selector) scopes the next DSL element selection
+ *
+ * ex.
+ *   using('#foo').input('bar')
+ */
+angular.scenario.dsl('using', function() {
+  return function(selector) {
+    this.selector = (this.selector||'') + ' ' + selector;
+    return this.dsl;
+  };
+});
+
+/**
+ * Usage:
+ *    binding(name) returns the value of a binding
+ */
+angular.scenario.dsl('binding', function() {
+  return function(name) {
+    return this.addFutureAction("select binding '" + name + "'", function($window, $document, done) {
+      var element;
+      try {
+        element = $document.elements('[ng\\:bind-template*="{{$1}}"]', name);
+      } catch(e) {
+        if (e.type !== 'selector')
+          throw e;
+        element = $document.elements('[ng\\:bind="$1"]', name);
+      }
+      done(null, element.text());
+    });
+  };
+});
+
+/**
+ * Usage:
+ *    input(name).enter(value) enters value in input with specified name
+ *    input(name).check() checks checkbox
+ *    input(name).select(value) selects the readio button with specified name/value
+ */
+angular.scenario.dsl('input', function() {
+  var chain = {};
+
+  chain.enter = function(value) {
+    return this.addFutureAction("input '" + this.name + "' enter '" + value + "'", function($window, $document, done) {
+      var input = $document.elements('input[name="$1"]', this.name);
+      input.val(value);
+      input.trigger('change');
+      done();
+    });
+  };
+
+  chain.check = function() {
+    return this.addFutureAction("checkbox '" + this.name + "' toggle", function($window, $document, done) {
+      var input = $document.elements('input:checkbox[name="$1"]', this.name);
+      input.trigger('click');
+      done();
+    });
+  };
+
+  chain.select = function(value) {
+    return this.addFutureAction("radio button '" + this.name + "' toggle '" + value + "'", function($window, $document, done) {
+      var input = $document.
+        elements('input:radio[name$="@$1"][value="$2"]', this.name, value);
+      input.trigger('click');
+      done();
+    });
+  };
+
+  return function(name) {
+    this.name = name;
+    return chain;
+  };
+});
+
+/**
+ * Usage:
+ *    repeater('#products table').count() // number of rows
+ *    repeater('#products table').row(1) // all bindings in row as an array
+ *    repeater('#products table').column('product.name') // all values across all rows in an array
+ */
+angular.scenario.dsl('repeater', function() {
+  var chain = {};
+
+  chain.count = function() {
+    return this.addFutureAction('repeater ' + this.selector + ' count', function($window, $document, done) {
+      done(null, $document.elements().size());
+    });
+  };
+
+  chain.column = function(binding) {
+    return this.addFutureAction('repeater ' + this.selector + ' column ' + binding, function($window, $document, done) {
+      var values = [];
+      $document.elements().each(function() {
+        _jQuery(this).find(':visible').each(function() {
+          var element = _jQuery(this);
+          if (element.attr('ng:bind') === binding) {
+            values.push(element.text());
+          }
+        });
+      });
+      done(null, values);
+    });
+  };
+
+  chain.row = function(index) {
+    return this.addFutureAction('repeater ' + this.selector + ' row ' + index, function($window, $document, done) {
+      var values = [];
+      var matches = $document.elements().slice(index, index + 1);
+      if (!matches.length)
+        return done('row ' + index + ' out of bounds');
+      _jQuery(matches[0]).find(':visible').each(function() {
+        var element = _jQuery(this);
+        if (element.attr('ng:bind')) {
+          values.push(element.text());
+        }
+      });
+      done(null, values);
+    });
+  };
+
+  return function(selector) {
+    this.dsl.using(selector);
+    return chain;
+  };
+});
+
+/**
+ * Usage:
+ *    select(selector).option('value') // select one option
+ *    select(selector).options('value1', 'value2', ...) // select options from a multi select
+ */
+angular.scenario.dsl('select', function() {
+  var chain = {};
+
+  chain.option = function(value) {
+    return this.addFutureAction('select ' + this.name + ' option ' + value, function($window, $document, done) {
+      var select = $document.elements('select[name="$1"]', this.name);
+      select.val(value);
+      select.trigger('change');
+      done();
+    });
+  };
+
+  chain.options = function() {
+    var values = arguments;
+    return this.addFutureAction('select ' + this.name + ' options ' + values, function($window, $document, done) {
+      var select = $document.elements('select[multiple][name="$1"]', this.name);
+      select.val(values);
+      select.trigger('change');
+      done();
+    });
+  };
+
+  return function(name) {
+    this.name = name;
+    return chain;
+  };
+});
+
+/**
+ * Usage:
+ *    element(selector).click() // clicks an element
+ *    element(selector).attr(name) // gets the value of an attribute
+ *    element(selector).attr(name, value) // sets the value of an attribute
+ *    element(selector).val() // gets the value (as defined by jQuery)
+ *    element(selector).val(value) // sets the value (as defined by jQuery)
+ */
+angular.scenario.dsl('element', function() {
+  var chain = {};
+
+  chain.click = function() {
+    return this.addFutureAction('element ' + this.selector + ' click', function($window, $document, done) {
+      $document.elements().trigger('click');
+      done();
+    });
+  };
+
+  chain.attr = function(name, value) {
+    var futureName = 'element ' + this.selector + ' get attribute ' + name;
+    if (value) {
+      futureName = 'element ' + this.selector + ' set attribute ' + name + ' to ' + value;
+    }
+    return this.addFutureAction(futureName, function($window, $document, done) {
+      done(null, $document.elements().attr(name, value));
+    });
+  };
+
+  chain.val = function(value) {
+    var futureName = 'element ' + this.selector + ' value';
+    if (value) {
+      futureName = 'element ' + this.selector + ' set value to ' + value;
+    }
+    return this.addFutureAction(futureName, function($window, $document, done) {
+      done(null, $document.elements().val(value));
+    });
+  };
+
+  return function(selector) {
+    this.dsl.using(selector);
+    return chain;
+  };
+});