step-6 Two-way Data Binding

- Add an `age` property to the phone model.
- Add a drop-down menu to control the phone list order.
- Override the default order value in controller.
- Add unit and end-to-end tests for this feature.

Closes #213

Author: petebacondarwin

Diff for: app/phone-list/phone-list.component.js

@@ -9,14 +9,19 @@ angular.
       this.phones = [
         {
           name: 'Nexus S',
-          snippet: 'Fast just got faster with Nexus S.'
+          snippet: 'Fast just got faster with Nexus S.',
+          age: 1
         }, {
           name: 'Motorola XOOM™ with Wi-Fi',
-          snippet: 'The Next, Next Generation tablet.'
+          snippet: 'The Next, Next Generation tablet.',
+          age: 2
         }, {
           name: 'MOTOROLA XOOM™',
-          snippet: 'The Next, Next Generation tablet.'
+          snippet: 'The Next, Next Generation tablet.',
+          age: 3
         }
       ];
+
+      this.orderProp = 'age';
     }
   });

Diff for: app/phone-list/phone-list.component.spec.js

@@ -7,12 +7,19 @@ describe('phoneList', function() {
 
   // Test the controller
   describe('PhoneListController', function() {
+    var ctrl;
 
-    it('should create a `phones` model with 3 phones', inject(function($componentController) {
-      var ctrl = $componentController('phoneList');
+    beforeEach(inject(function($componentController) {
+      ctrl = $componentController('phoneList');
+    }));
 
+    it('should create a `phones` model with 3 phones', function() {
       expect(ctrl.phones.length).toBe(3);
-    }));
+    });
+
+    it('should set a default value for the `orderProp` model', function() {
+      expect(ctrl.orderProp).toBe('age');
+    });
 
   });
 

Diff for: app/phone-list/phone-list.template.html

@@ -3,14 +3,25 @@
     <div class="col-md-2">
       <!--Sidebar content-->
 
-      Search: <input ng-model="$ctrl.query" />
+      <p>
+        Search:
+        <input ng-model="$ctrl.query" />
+      </p>
+
+      <p>
+        Sort by:
+        <select ng-model="$ctrl.orderProp">
+          <option value="name">Alphabetical</option>
+          <option value="age">Newest</option>
+        </select>
+      </p>
 
     </div>
     <div class="col-md-10">
       <!--Body content-->
 
       <ul class="phones">
-        <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query">
+        <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp">
           <span>{{phone.name}}</span>
           <p>{{phone.snippet}}</p>
         </li>

Diff for: e2e-tests/scenarios.js

@@ -25,6 +25,33 @@ describe('PhoneCat Application', function() {
       expect(phoneList.count()).toBe(2);
     });
 
+    it('should be possible to control phone order via the drop-down menu', function() {
+      var queryField = element(by.model('$ctrl.query'));
+      var orderSelect = element(by.model('$ctrl.orderProp'));
+      var nameOption = orderSelect.element(by.css('option[value="name"]'));
+      var phoneNameColumn = element.all(by.repeater('phone in $ctrl.phones').column('phone.name'));
+
+      function getNames() {
+        return phoneNameColumn.map(function(elem) {
+          return elem.getText();
+        });
+      }
+
+      queryField.sendKeys('tablet');   // Let's narrow the dataset to make the assertions shorter
+
+      expect(getNames()).toEqual([
+        'Motorola XOOM\u2122 with Wi-Fi',
+        'MOTOROLA XOOM\u2122'
+      ]);
+
+      nameOption.click();
+
+      expect(getNames()).toEqual([
+        'MOTOROLA XOOM\u2122',
+        'Motorola XOOM\u2122 with Wi-Fi'
+      ]);
+    });
+
   });
 
 });