step-3 interactive search

IgorMinar · IgorMinar · commit 3fc729c8f14f · 2012-10-18T00:02:21.000-07: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">
-      {{phone.name}}
-      <p>{{phone.snippet}}</p>
-    </li>
-  </ul>
+  <div class="container-fluid">
+    <div class="row-fluid">
+      <div class="span2">
+        <!--Sidebar content-->
+
+        Search: <input ng-model="query">
+
+      </div>
+      <div class="span10">
+        <!--Body content-->
+
+        <ul class="phones">
+          <li ng-repeat="phone in phones | filter:query">
+            {{phone.name}}
+            <p>{{phone.snippet}}</p>
+          </li>
+        </ul>
+
+      </div>
+    </div>
+  </div>
 
 </body>
 </html>
diff --git a/test/e2e/scenarios.js b/test/e2e/scenarios.js
@@ -2,7 +2,23 @@
 
 /* http://docs.angularjs.org/guide/dev_guide.e2e-testing */
 
-describe('my app', function() {
+describe('PhoneCat App', function() {
 
+  describe('Phone list view', function() {
 
+    beforeEach(function() {
+      browser().navigateTo('../../app/index.html');
+    });
+
+
+    it('should filter the phone list as user types into the search box', function() {
+      expect(repeater('.phones li').count()).toBe(3);
+
+      input('query').enter('nexus');
+      expect(repeater('.phones li').count()).toBe(1);
+
+      input('query').enter('motorola');
+      expect(repeater('.phones li').count()).toBe(2);
+    });
+  });
 });
