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! :)

2 files changed, 47 insertions, 49 deletions

diff --git a/scenario/widgets-scenario.js b/scenario/widgets-scenario.js
index 69fdc10e..befc481c 100644
--- a/scenario/widgets-scenario.js
+++ b/scenario/widgets-scenario.js
@@ -1,58 +1,55 @@
 describe('widgets', function() {
   it('should verify that basic widgets work', function(){
     navigateTo('widgets.html');
-    input('text.basic').enter('Carlos');
+            
+    using('#text-basic-box').input('text.basic').enter('Carlos');
     expect(binding('text.basic')).toEqual('Carlos');
-    pause(2);
     input('text.basic').enter('Carlos Santana');
-    pause(2);
     expect(binding('text.basic')).not().toEqual('Carlos Boozer');
-    pause(2);
+    
     input('text.password').enter('secret');
     expect(binding('text.password')).toEqual('secret');
+    
     expect(binding('text.hidden')).toEqual('hiddenValue');
+    
     expect(binding('gender')).toEqual('male');
-    pause(2);
     input('gender').select('female');
-    expect(binding('gender')).toEqual('female');
-    pause(2);
-  });
-  describe('do it again', function() {
-    it('should verify that basic widgets work', function(){
-      navigateTo('widgets.html');
-      input('text.basic').enter('Carlos');
-      expect(binding('text.basic')).toEqual('Carlos');
-      pause(2);
-      input('text.basic').enter('Carlos Santana');
-      pause(2);
-      expect(binding('text.basic')).toEqual('Carlos Santana');
-      pause(2);
-      input('text.password').enter('secret');
-      expect(binding('text.password')).toEqual('secret');
-      expect(binding('text.hidden')).toEqual('hiddenValue');
-      expect(binding('gender')).toEqual('male');
-      pause(2);
-      input('gender').select('female');
-      expect(binding('gender')).toEqual('female');
-      pause(2);
-    });
-  });
-  it('should verify that basic widgets work', function(){
-    navigateTo('widgets.html');
-    input('text.basic').enter('Carlos');
-    expect(binding('text.basic')).toEqual('Carlos');
-    pause(2);
-    input('text.basic').enter('Carlos Santana');
-    pause(2);
-    expect(binding('text.basic')).toEqual('Carlos Santana');
-    pause(2);
-    input('text.password').enter('secret');
-    expect(binding('text.password')).toEqual('secret');
-    expect(binding('text.hidden')).toEqual('hiddenValue');
-    expect(binding('gender')).toEqual('male');
-    pause(2);
-    input('gender').select('female');
-    expect(binding('gender')).toEqual('female');
-    pause(2);
+    expect(using('#gender-box').binding('gender')).toEqual('female');
+
+    expect(repeater('#repeater-row ul li').count()).toEqual(2);
+    expect(repeater('#repeater-row ul li').row(1)).toEqual(['adam']);
+    expect(repeater('#repeater-row ul li').column('name')).toEqual(['misko', 'adam']);
+    
+    select('select').option('B');
+    expect(binding('select')).toEqual('B');
+    
+    select('multiselect').options('A', 'C');
+    expect(binding('multiselect').fromJson()).toEqual(['A', 'C']);
+
+    expect(binding('button').fromJson()).toEqual({'count': 0});
+    element('form a').click();
+    expect(binding('button').fromJson()).toEqual({'count': 1});
+    element('input[value="submit"]').click();
+    expect(binding('button').fromJson()).toEqual({'count': 2});
+    element('input[value="button"]').click();
+    expect(binding('button').fromJson()).toEqual({'count': 3});
+    element('input[type="image"]').click();
+    expect(binding('button').fromJson()).toEqual({'count': 4});
+    
+    /**
+     * Custom value parser for futures.
+     */
+    function checkboxParser(value) {
+      return angular.fromJson(value.substring(value.indexOf('=')+1));
+    }
+    
+    input('checkbox.tea').check();
+    expect(binding('checkbox').parsedWith(checkboxParser)).toEqual({coffee: false, tea: false});
+    input('checkbox.coffee').check();
+    expect(binding('checkbox').parsedWith(checkboxParser)).toEqual({coffee: true, tea: false});
+    input('checkbox.tea').check();
+    input('checkbox.tea').check();
+    input('checkbox.tea').check();
+    expect(binding('checkbox').parsedWith(checkboxParser)).toEqual({coffee: true, tea: true});
   });
 });
diff --git a/scenario/widgets.html b/scenario/widgets.html
index 08443d2a..80a0a22f 100644
--- a/scenario/widgets.html
+++ b/scenario/widgets.html
@@ -2,6 +2,7 @@
 <html xmlns:ng="http://angularjs.org">
   <head>
     <link rel="stylesheet" type="text/css" href="style.css"/>
+    <script type="text/javascript" src="../lib/jquery/jquery-1.4.2.js"></script>
     <script type="text/javascript" src="../src/angular-bootstrap.js" ng:autobind></script>
   </head>
   <body ng:init="$window.$scope = this">
@@ -14,7 +15,7 @@
       <tr><th colspan="3">Input text field</th></tr>
       <tr>
         <td>basic</td>
-        <td>
+        <td id="text-basic-box">
           <input type="text" name="text.basic"/>
         </td>
         <td>text.basic={{text.basic}}</td>
@@ -30,7 +31,7 @@
         <td>text.hidden={{text.hidden}}</td>
       </tr>
       <tr><th colspan="3">Input selection field</th></tr>
-      <tr>
+      <tr id="gender-box">
         <td>radio</td>
         <td>
          <input type="radio" name="gender" value="female"/> Female <br/>
@@ -78,13 +79,13 @@
            <input type="button" value="button" ng:change="button.count = button.count + 1"/> <br/>
            <input type="submit" value="submit" ng:change="button.count = button.count + 1"/><br/>
            <input type="image" src="" ng:change="button.count = button.count + 1"/><br/>
-           <a href=""   ng:click="button.count = button.count + 1">action</a>
+           <a href="" ng:click="button.count = button.count + 1">action</a>
           </form>
         </td>
         <td>button={{button}}</td>
       </tr>
       <tr><th colspan="3">Repeaters</th></tr>
-      <tr>
+      <tr id="repeater-row">
         <td>ng:repeat</td>
         <td>
           <ul>