step-12 Event Handlers

- Make the thumbnail images in the phone detail view clickable:
  - Introduce a `mainImageUrl` property on `PhoneDetailController`.
  - Implement the `setImage()` method for changing the main image.
  - Use `ngClick` on the thumbnails to register a handler that changes the main image.
  - Add an end-to-end test for this feature.

app/app.css

@@ -51,6 +51,7 @@ h1 {
 .phone-thumbs li {
   background-color: white;
   border: 1px solid black;
+  cursor: pointer;
   display: inline-block;
   margin: 1em;
 }

app/phone-detail/phone-detail.component.js

@@ -9,8 +9,13 @@ angular.
       function PhoneDetailController($http, $routeParams) {
         var self = this;
 
+        self.setImage = function setImage(imageUrl) {
+          self.mainImageUrl = imageUrl;
+        };
+
         $http.get('phones/' + $routeParams.phoneId + '.json').then(function(response) {
           self.phone = response.data;
+          self.setImage(self.phone.images[0]);
         });
       }
     ]

app/phone-detail/phone-detail.component.spec.js

@@ -8,10 +8,14 @@ describe('phoneDetail', function() {
   // Test the controller
   describe('PhoneDetailController', function() {
     var $httpBackend, ctrl;
+    var xyzPhoneData = {
+      name: 'phone xyz',
+      images: ['image/url1.png', 'image/url2.png']
+    };
 
     beforeEach(inject(function($componentController, _$httpBackend_, $routeParams) {
       $httpBackend = _$httpBackend_;
-      $httpBackend.expectGET('phones/xyz.json').respond({name: 'phone xyz'});
+      $httpBackend.expectGET('phones/xyz.json').respond(xyzPhoneData);
 
       $routeParams.phoneId = 'xyz';
 
@@ -22,7 +26,7 @@ describe('phoneDetail', function() {
       expect(ctrl.phone).toBeUndefined();
 
       $httpBackend.flush();
-      expect(ctrl.phone).toEqual({name: 'phone xyz'});
+      expect(ctrl.phone).toEqual(xyzPhoneData);
     });
 
   });

app/phone-detail/phone-detail.template.html

@@ -1,12 +1,12 @@
-<img ng-src="{{$ctrl.phone.images[0]}}" class="phone" />
+<img ng-src="{{$ctrl.mainImageUrl}}" class="phone" />
 
 <h1>{{$ctrl.phone.name}}</h1>
 
 <p>{{$ctrl.phone.description}}</p>
 
 <ul class="phone-thumbs">
   <li ng-repeat="img in $ctrl.phone.images">
-    <img ng-src="{{img}}" />
+    <img ng-src="{{img}}" ng-click="$ctrl.setImage(img)" />
   </li>
 </ul>
 

e2e-tests/scenarios.js

@@ -77,6 +77,23 @@ describe('PhoneCat Application', function() {
       expect(element(by.binding('$ctrl.phone.name')).getText()).toBe('Nexus S');
     });
 
+    it('should display the first phone image as the main phone image', function() {
+      var mainImage = element(by.css('img.phone'));
+
+      expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
+    });
+
+    it('should swap the main image when clicking on a thumbnail image', function() {
+      var mainImage = element(by.css('img.phone'));
+      var thumbnails = element.all(by.css('.phone-thumbs img'));
+
+      thumbnails.get(2).click();
+      expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.2.jpg/);
+
+      thumbnails.get(0).click();
+      expect(mainImage.getAttribute('src')).toMatch(/img\/phones\/nexus-s.0.jpg/);
+    });
+
   });
 
 });