step-4 phone ordering

- Add "age" property to the phone model
- Add select box to control phone list order
- Override the default order value in controller
- Add unit and e2e test for this feature

Closes angular#213

Author: petebacondarwin

app/js/components.js

@@ -10,10 +10,15 @@ phonecatApp.component('phoneList', {
 }).controller('PhoneListCtrl', function() {
   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';
 });

app/partials/phone-list.html

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

test/e2e/scenarios.js

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

test/unit/controllersSpec.js

@@ -4,14 +4,22 @@
 describe('PhoneCat controllers', function() {
 
   describe('PhoneListCtrl', function(){
+    var ctrl;
 
     beforeEach(module('phonecatApp'));
 
-    it('should create "phones" model with 3 phones', inject(function($controller) {
-      var ctrl = $controller('PhoneListCtrl');
+    beforeEach(inject(function($controller) {
+      ctrl = $controller('PhoneListCtrl');
+    }));
+
 
+    it('should create "phones" model with 3 phones', function() {
       expect(ctrl.phones.length).toBe(3);
-    }));
+    });
+
 
+    it('should set the default value of orderProp model', function() {
+      expect(ctrl.orderProp).toBe('age');
+    });
   });
 });