Agrega paso 4 de la aplicación

- Agrega la propiedad `age` a cada teléfono en el modelo de datos.

- Agrega una combo `<select>` para cambiar el orden de la lista de
teléfonos.

- Sobreescribe el valor del orden por defecto en el controlador.

- Agrega pruebas unitarias y e2e tests para esta funcionalidad.

README.md

@@ -76,7 +76,7 @@ Para ver los cambios entre dos lecciones cualquiera usa el comando git diff.
 
 ### paso-4
 
-- Agrega la propiedad `edad` a cada teléfono en el modelo de datos.
+- Agrega la propiedad `age` a cada teléfono en el modelo de datos.
 - Agrega una combo `<select>` para cambiar el orden de la lista de teléfonos.
 - Sobreescribe el valor del orden por defecto en el controlador.
 - Agrega pruebas unitarias y e2e tests para esta funcionalidad.

app/index.html

@@ -16,13 +16,17 @@
       <!--Sidebar content-->
 
       Búsqueda: <input ng-model="query">
-
+      Ordenar por:
+      <select ng-model="ordenProp">
+        <option value="name">Alfabética</option>
+        <option value="age">El más nuevo</option>
+      </select>
     </div>
     <div class="col-md-10">
       <!--Body content-->
 
       <ul class="phones">
-        <li ng-repeat="telefono in telefonos | filter:query">
+        <li ng-repeat="telefono in telefonos | filter:query | orderBy:ordenProp">
           {{telefono.name}}
           <p>{{telefono.snippet}}</p>
         </li>

app/js/controladores.js

@@ -7,10 +7,16 @@ var phonecatAp = angular.module('phonecatAp', []);
 phonecatAp.controller('ListaTelefonosCtrl', function($scope) {
   $scope.telefonos = [
     {'name': 'Nexus S',
-      'snippet': 'Rápido ahora es más rápido con Nexus S.'},
-    {'name': 'Motorola XOOM™ con Wi-Fi',
-      'snippet': 'la Siguiente, Siguiente Generación de tableta.'},
+      'snippet': 'Fast just got faster with Nexus S.',
+      'age': 1},
+    {'name': 'Motorola XOOM™ with Wi-Fi',
+      'snippet': 'The Next, Next Generation tablet with Wi-Fi.',
+      'age': 2},
     {'name': 'MOTOROLA XOOM™',
-      'snippet': 'la Siguiente, Siguiente Generación de tableta.'}
+      'snippet': 'The Next, Next Generation tablet.',
+      'age': 3}
   ];
+
+  $scope.ordenProp = 'age';
+
 });

test/e2e/scenarios.js

@@ -2,7 +2,7 @@
 
 /* http://docs.angularjs.org/guide/dev_guide.e2e-testing */
 
-describe('my app', function() {
+describe('mi ap', function() {
 
   beforeEach(function() {
     browser.get('app/index.html');
@@ -22,4 +22,30 @@ describe('my app', function() {
     query.sendKeys('motorola');
     expect(listaTelefonos.count()).toBe(2);
   });
+
+  it('Debe ser posible controlar el orden de los teléfonos via el combo box', function() {
+
+    var phoneNameColumn = element.all(by.repeater('telefono in telefonos').column('{{telefono.snippet}}'));
+    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([
+      "The Next, Next Generation tablet with Wi-Fi.",
+      "The Next, Next Generation tablet."
+    ]);
+
+    element(by.model('ordenProp')).element(by.css('option[value="name"]')).click();
+
+    expect(getNames()).toEqual([
+      "The Next, Next Generation tablet.",
+      "The Next, Next Generation tablet with Wi-Fi."
+    ]);
+  });
 });

test/unit/controladoresSpec.js

@@ -3,14 +3,23 @@
 /* jasmine specs for controllers go here */
 
 describe('controllers', function() {
+  var scope, ctrl;
 
   beforeEach(module('phonecatAp'));
 
-  it('debe crear el modelo "telefonos" con 3 teléfonos', inject(function($controller) {
-    var scope = {},
-      ctrl = $controller('ListaTelefonosCtrl', {$scope:scope});
 
+  beforeEach(inject(function($controller) {
+    scope = {};
+    ctrl = $controller('ListaTelefonosCtrl', {$scope:scope});
+  }));
+
+  it('debe crear el modelo "telefonos" con 3 teléfonos', inject(function($controller) {
     expect(scope.telefonos.length).toBe(3);
   }));
 
+
+  it('debe setear el valor por defecto del modelo ordenProp', function() {
+    expect(scope.ordenProp).toBe('age');
+  });
+
 });