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

Author: IgorMinar

app/index.html

@@ -16,14 +16,19 @@
         <!--Sidebar content-->
 
         Search: <input ng-model="query">
+        Sort by:
+        <select ng-model="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 phones | filter:query">
-            {{phone.name}}
+          <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
+            <span>{{phone.name}}</span>
             <p>{{phone.snippet}}</p>
           </li>
         </ul>

app/js/controllers.js

@@ -7,10 +7,15 @@ var phonecatApp = angular.module('phonecatApp', []);
 phonecatApp.controller('PhoneListCtrl', function($scope) {
   $scope.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}
   ];
+
+  $scope.orderProp = 'age';
 });

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 phones').column('{{phone.name}}'));
+      var query = element(by.model('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('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,15 +4,23 @@
 describe('PhoneCat controllers', function() {
 
   describe('PhoneListCtrl', function(){
+    var scope, ctrl;
 
     beforeEach(module('phonecatApp'));
 
-    it('should create "phones" model with 3 phones', inject(function($controller) {
-      var scope = {},
-          ctrl = $controller('PhoneListCtrl', {$scope:scope});
+    beforeEach(inject(function($controller) {
+      scope = {};
+      ctrl = $controller('PhoneListCtrl', {$scope:scope});
+    }));
+
 
+    it('should create "phones" model with 3 phones', inject(function($controller) {
       expect(scope.phones.length).toBe(3);
     }));
 
+
+    it('should set the default value of orderProp model', function() {
+      expect(scope.orderProp).toBe('age');
+    });
   });
 });