angular · guatebus · Oct 18, 2014 · Oct 18, 2014 · Oct 18, 2014 · Oct 19, 2014
diff --git a/app/css/app.css b/app/css/app.css
@@ -1 +1,6 @@
 /* app css stylesheet */
+
+body {
+  padding-top: 20px;
+}
+
diff --git a/app/index.html b/app/index.html
@@ -1,12 +1,41 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" ng-app="phonecatApp">
 <head>
   <meta charset="utf-8">
-  <title>My HTML File</title>
+  <title>Google Phone Gallery</title>
   <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
   <link rel="stylesheet" href="css/app.css">
   <script src="bower_components/angular/angular.js"></script>
+  <script src="js/controllers.js"></script>
 </head>
-<body>
+<body ng-controller="PhoneListCtrl">
+
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-md-2">
+        <!--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 | orderBy:orderProp">
+            <span>{{phone.name}}</span>
+            <p>{{phone.snippet}}</p>
+          </li>
+        </ul>
+
+      </div>
+    </div>
+  </div>
+
 </body>
-</html>
+</html>
diff --git a/app/js/controllers.js b/app/js/controllers.js
@@ -1,3 +1,14 @@
 'use strict';
 
 /* Controllers */
+
+var phonecatApp = angular.module('phonecatApp', []);
+
+phonecatApp.controller('PhoneListCtrl', ['$scope', '$http', 
+  function($scope, $http) {
+    $http.get('phones/phones.json').success(function(data) {
+      $scope.phones = data;
+    });
+
+    $scope.orderProp = 'age';
+  }]);
diff --git a/test/e2e/scenarios.js b/test/e2e/scenarios.js
@@ -2,10 +2,55 @@
 
 /* http://docs.angularjs.org/guide/dev_guide.e2e-testing */
 
-describe('my app', function() {
+describe('PhoneCat App', function() {
 
-  beforeEach(function() {
-    browser.get('app/index.html');
-  });
+  describe('Phone list view', function() {
+
+    beforeEach(function() {
+      browser.get('app/index.html');
+    });
+
+
+    it('should filter the phone list as a user types into the search box', function() {
+
+      var phoneList = element.all(by.repeater('phone in phones'));
+      var query = element(by.model('query'));
+
+      expect(phoneList.count()).toBe(20);
+
+      query.sendKeys('nexus');
+      expect(phoneList.count()).toBe(1);
+
+      query.clear();
+      query.sendKeys('motorola');
+      expect(phoneList.count()).toBe(8);
+    });
 
+
+    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"
+      ]);
+    });
+  });
 });
diff --git a/test/unit/controllersSpec.js b/test/unit/controllersSpec.js
@@ -1,11 +1,33 @@
 'use strict';
 
 /* jasmine specs for controllers go here */
+describe('PhoneCat controllers', function() {
 
-describe('controllers', function() {
+  describe('PhoneListCtrl', function(){
+    var scope, ctrl, $httpBackend;
 
-  it("should do something", function() {
+    beforeEach(module('phonecatApp'));
+    beforeEach(inject(function(_$httpBackend_, $rootScope, $controller) {
+      $httpBackend = _$httpBackend_;
+      $httpBackend.expectGET('phones/phones.json').
+          respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
 
-  });
+      scope = $rootScope.$new();
+      ctrl = $controller('PhoneListCtrl', {$scope: scope});
+    }));
+
+
+    it('should create "phones" model with 2 phones fetched from xhr', function() {
+      expect(scope.phones).toBeUndefined();
+      $httpBackend.flush();
 
+      expect(scope.phones).toEqual([{name: 'Nexus S'},
+                                   {name: 'Motorola DROID'}]);
+    });
+
+
+    it('should set the default value of orderProp model', function() {
+      expect(scope.orderProp).toBe('age');
+    });
+  });
 });