Update tutorial docs.

1 files changed, 52 insertions, 5 deletions

diff --git a/docs/tutorial.step_4.ngdoc b/docs/tutorial.step_4.ngdoc
index 260ad38f..de98eb34 100755
--- a/docs/tutorial.step_4.ngdoc
+++ b/docs/tutorial.step_4.ngdoc
@@ -7,8 +7,7 @@
 <td id="previous_step">{@link tutorial.step_3 Previous}</td>

 <td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-4/app Example}</td>

 <td id="tut_home">{@link tutorial Tutorial Home}</td>

-<td id="code_diff">{@link

-https://github.com/angular/angular-phonecat/commit/b56c91f453114347f0cb25e70b1c4fa4f1421763 Code

+<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-3...step-4 Code

 Diff}</td>

 <td id="next_step">{@link tutorial.step_5 Next}</td>

 </tr>

@@ -85,20 +84,69 @@ describe('PhoneCat controllers', function() {
 });

 </pre>

 

+__`test/e2e/scenarios.js`:__

+<pre>

+/* jasmine-like end2end tests go here */

+describe('PhoneCat App', function() {

+

+  describe('Phone list view', function() {

+

+    beforeEach(function() {

+      browser().navigateTo('../../app/index.html');

+    });

+

+

+    it('should filter the phone list as user types into the search box', function() {

+      expect(repeater('.phones li').count()).toBe(3);

+

+      input('query').enter('nexus');

+      expect(repeater('.phones li').count()).toBe(1);

+

+      input('query').enter('motorola');

+      expect(repeater('.phones li').count()).toBe(2);

+    });

+

+

+    it('should be possible to control phone order via the drop down select box', function() {

+      input('query').enter('tablet'); //let's narrow the dataset to make the test assertions

+      shorter

+

+      expect(repeater('.phones li', 'Phone List').column('a')).

+          toEqual(["Motorola XOOM\u2122 with Wi-Fi",

+                   "MOTOROLA XOOM\u2122"]);

+

+      select('orderProp').option('alphabetical');

+

+      expect(repeater('.phones li', 'Phone List').column('a')).

+          toEqual(["MOTOROLA XOOM\u2122",

+                   "Motorola XOOM\u2122 with Wi-Fi"]);

+    });

+  });

+});

+</pre>

+

 ## Discussion:

 

 To provide dynamic ordering, we employ another one of angular's "array type augmenters" and let

 the data binding do the rest of the work for us:

 

+* First, we provide a `<select>` element named `orderProp` for our users so they can choose to

+sort the phone list either alphabetically or by the age of the phone.  We added the `age` property

+to each phone record so we can sort by that field.

+

 * Like {@link angular.Array.filter $filter}, {@link angular.Array.orderBy $orderBy} is a built-in

 method available on array objects in angular expressions.  In our UI template, we set up a select

 box that lets the user set the `orderProp` model variable to one of the string constants: `age` or

 `name`.

 

-* In our controller, we added a line to set the default value of `orderProp` to `age`.

+* In our controller, we added a line to set the default value of `orderProp` to `age`.  If we

+don't override the default value, angular uses the value of the first `<option>` element when it

+initializes the data model.

 

 * Our unit test now verifies that our default ordering property is set.

 

+* We added an end-to-end test to verify that our select box ordering mechanism works properly.

+

 * Once again we added a little more CSS to improve the View.

 

 <table id="tutorial_nav">

@@ -106,8 +154,7 @@ box that lets the user set the `orderProp` model variable to one of the string c
 <td id="previous_step">{@link tutorial.step_3 Previous}</td>

 <td id="step_result">{@link  http://angular.github.com/angular-phonecat/step-4/app Example}</td>

 <td id="tut_home">{@link tutorial Tutorial Home}</td>

-<td id="code_diff">{@link

-https://github.com/angular/angular-phonecat/commit/b56c91f453114347f0cb25e70b1c4fa4f1421763 Code

+<td id="code_diff">{@link https://github.com/angular/angular-phonecat/compare/step-3...step-4 Code

 Diff}</td>

 <td id="next_step">{@link tutorial.step_5 Next}</td>

 </tr>