テンプレート

前回ステップで作成したTBDと書かれた一行は端末詳細情報のリストやバインディングに置き換えられている。端末データをモデルからビューに投影する為にどこでAngularの{{expression}}マークアップとngRepeatを使用しているか注目。

app/partials/phone-detail.html:

<img ng-src="{{phone.images[0]}}" class="phone">
 
<h1>{{phone.name}}</h1>
 
<p>{{phone.description}}</p>
 
<ul class="phone-thumbs">
  <li ng-repeat="img in phone.images">
    <img ng-src="{{img}}">
  </li>
</ul>
 
<ul class="specs">
  <li>
    <span>Availability and Networks</span>
    <dl>
      <dt>Availability</dt>
      <dd ng-repeat="availability in phone.availability">{{availability}}</dd>
    </dl>
  </li>
    ...
  </li>
    <span>Additional Features</span>
    <dd>{{phone.additionalFeatures}}</dd>
  </li>
</ul>

テスト

step5でPhoneListCtrlに対して書いたユニットテストと同じ様なものを今回作成した新しいコントローラーの為に作成する。

test/unit/controllersSpec.js:

...
  describe('PhoneDetailCtrl', function(){
    var scope, $httpBackend, ctrl;
 
    beforeEach(inject(function(_$httpBackend_, $rootScope, $routeParams, $controller) {
      $httpBackend = _$httpBackend_;
      $httpBackend.expectGET('phones/xyz.json').respond({name:'phone xyz'});
 
      $routeParams.phoneId = 'xyz';
      scope = $rootScope.$new();
      ctrl = $controller(PhoneDetailCtrl, {$scope: scope});
    }));
 
 
    it('should fetch phone detail', function() {
      expect(scope.phone).toBeUndefined();
      $httpBackend.flush();
 
      expect(scope.phone).toEqual({name:'phone xyz'});
    });
  });
...

ブラウザでKarmaを実行すると以下の出力が確認できるはず。

Chrome 22.0: Executed 3 of 3 SUCCESS (0.039 secs / 0.012 secs)

さらに新しいend-to-endテストも追加する。このテストは"Nexus S"の詳細ページへ遷移し、先頭が"Nexus S"という文字列であることを検証する。

test/e2e/scenarios.js:

...
  describe('Phone detail view', function() {
 
    beforeEach(function() {
      browser().navigateTo('../../app/index.html#/phones/nexus-s');
    });
 
 
    it('should display nexus-s page', function() {
      expect(binding('phone.name')).toBe('Nexus S');
    });
  });
...

./scripts/e2e-test.shまたは、ent-to-endテストランナーのブラウザタブを更新してテストを実行する。またはAngularのサーバーでテスト実行を確認できる。

実験

• Angularのend-to-endテストランナーAPIを使用して、Nexus S詳細ページに4枚のサムネイル画像を表示していることをテストしてみよう。

今日はここまで。次回は「step9 - フィルター」。