step-3 interactive search

petebacondarwin · petebacondarwin · commit 1071c2c5871b · 2015-06-29T13:36:12.000+01:00
- Added a search box to demonstrate how:
  - the data-binding works on input fields
  - to use [filter] filter
  - [ngRepeat] automatically shrinks and grows the number of phones in the view
- Added an end-to-end test to:
  - show how end-to-end tests are written and used
  - to prove that the search box and the repeater are correctly wired together
diff --git a/app/index.html b/app/index.html
@@ -10,12 +10,27 @@
 </head>
 <body ng-controller="PhoneListCtrl">
 
-  <ul>
-    <li ng-repeat="phone in phones">
-      <span>{{phone.name}}</span>
-      <p>{{phone.snippet}}</p>
-    </li>
-  </ul>
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-md-2">
+        <!--Sidebar content-->
+
+        Search: <input ng-model="query">
+
+      </div>
+      <div class="col-md-10">
+        <!--Body content-->
+
+        <ul class="phones">
+          <li ng-repeat="phone in phones | filter:query">
+            <span>{{phone.name}}</span>
+            <p>{{phone.snippet}}</p>
+          </li>
+        </ul>
+
+      </div>
+    </div>
+  </div>
 
 </body>
 </html>
diff --git a/test/e2e/scenarios.js b/test/e2e/scenarios.js
@@ -2,10 +2,28 @@
 
 /* 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(3);
+
+      query.sendKeys('nexus');
+      expect(phoneList.count()).toBe(1);
+
+      query.clear();
+      query.sendKeys('motorola');
+      expect(phoneList.count()).toBe(2);
+    });
+  });
 });
