matched / Tutorial / 7 - XHR & Dependency Injection, ut with karma and it with protractor passed.

Signed-off-by: wefine <wang.xiaoren@zte.com.cn>

Author: wefine

src/app/phone-list/phone-list.component.js

@@ -1,19 +1,15 @@
 export class PhoneListController {
-    constructor() {
-        this.phones = [
-            {
-                name: 'Nexus S',
-                snippet: 'Fast just got faster with Nexus S.'
-            }, {
-                name: 'Motorola XOOM\u2122 with Wi-Fi',
-                snippet: 'The Next, Next Generation tablet.'
-            }, {
-                name: 'MOTOROLA XOOM\u2122',
-                snippet: 'The Next, Next Generation tablet.'
-            }
-        ];
+    /**
+     * @param {!angular.$http} $http
+     * @ngInject
+     */
+    constructor($http) {
+        let self = this;
+        self.orderProp = 'age';
 
-        this.orderProp = 'age';
+        $http.get('phones/phones.json').then(function(response) {
+            self.phones = response.data;
+        });
     }
 }
 

src/app/phone-list/phone-list.component.spec.js

@@ -13,19 +13,30 @@ describe('phoneList', function () {
     // Test the controller
     describe('PhoneListController', function () {
 
-        let ctrl;
+        let $httpBackend, ctrl;
+
+        // The injector ignores leading and trailing underscores here (i.e. _$httpBackend_).
+        // This allows us to inject a service and assign it to a variable with the same name
+        // as the service while avoiding a name conflict.
+        beforeEach(inject(function($componentController, _$httpBackend_) {
+            $httpBackend = _$httpBackend_;
+            $httpBackend.expectGET('phones/phones.json')
+                .respond([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
 
-        beforeEach(inject(function ($componentController) {
             ctrl = $componentController('phoneList');
         }));
 
-        it('should create a `phones` model with 3 phones', function () {
-            expect(ctrl.phones.length).toBe(3);
+        it('should create a `phones` property with 2 phones fetched with `$http`', function() {
+            expect(ctrl.phones).toBeUndefined();
+
+            $httpBackend.flush();
+            expect(ctrl.phones).toEqual([{name: 'Nexus S'}, {name: 'Motorola DROID'}]);
         });
 
-        it('should set a default value for the `orderProp` model', function () {
+        it('should set a default value for the `orderProp` property', function() {
             expect(ctrl.orderProp).toBe('age');
         });
+
     });
 
 });

src/app/phone-list/phone-list.e2e.js

@@ -15,14 +15,14 @@ describe('PhoneCat Application', function () {
             let phoneList = element.all(by.repeater('phone in $ctrl.phones'));
             let query = element(by.model('$ctrl.query'));
 
-            expect(phoneList.count()).toBe(3);
+            expect(phoneList.count()).toBe(20);
 
             query.sendKeys('nexus');
             expect(phoneList.count()).toBe(1);
 
             query.clear();
             query.sendKeys('motorola');
-            expect(phoneList.count()).toBe(2);
+            expect(phoneList.count()).toBe(8);
         });
 
         it('should be possible to control phone order via the drop-down menu', function () {

src/app/phone-list/phone-list.template.html

@@ -4,16 +4,18 @@
             <!--Sidebar content-->
 
             <p>
-                Search:
-                <input ng-model="$ctrl.query">
+                <label>Search:
+                    <input ng-model="$ctrl.query"/>
+                </label>
             </p>
 
             <p>
-                Sort by:
-                <select ng-model="$ctrl.orderProp">
-                    <option value="name">Alphabetical</option>
-                    <option value="age">Newest</option>
-                </select>
+                <label>Sort by:
+                    <select ng-model="$ctrl.orderProp">
+                        <option value="name">Alphabetical</option>
+                        <option value="age">Newest</option>
+                    </select>
+                </label>
             </p>
 
         </div>
@@ -29,4 +31,4 @@
 
         </div>
     </div>
-</div>
+</div>