3-フィルターリピータ

最後のステップでは、アプリケーションに多くの基礎を築いた.だから今私达はいくつかの简単な事をして、私达は1つの全文の検索を増加します(はい、それはとても简単です)私达も端の対端のテストを书くことができて、1つの端の対端のテストは良い友达なので、彼はあなたの応用に常驻して、彼に関心を持って、急速に回帰を决めます.

現在、アプリケーションには、ページ上の携帯電話のリストの変更がユーザーが入力した検索ボックスに依存していることに注意する検索ボックスがあります.

ワークスペースのリセット紹介ワークスペースを3ステップ目にリセット

git checkout -f step-3

ブラウザをリフレッシュするか、オンラインでチェックアウトします.手順3の例です.ほとんどの重要な修正は以下の通りです.GitHubではすべての違いを見ることができます.

せいぎょそうち

コントローラは変更されていません

かたわく

app/index.html:

<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">
          {{phone.name}}
          <p>{{phone.snippet}}</p>
        </li>
      </ul>

    </div>
  </div>
</div>
</>

標準のラベルを追加し,ngRepearコマンドにAngularフィルタ機能を用いて入力を処理した.ユーザーに検索条件を入力させ、携帯電話のリストの検索効果を直接見る.新しいコードのデモは次のとおりです.

データバインディング:これはAngularのコアフィーチャーであり、Angularバインディング検索ボックスはデータモデルの前の変数と同じであり、両方のステップを維持します.このコードでは、ユーザがボックスに入力したデータ(query)は、リストリピータが直接表示され、（phone in phones | filter: query）である.データモデル修正によってリピータ入力が変更されると、リピータは現在のモデル状態に対応するDOMを有効に更新する.

はfilterフィルタを使用し、フィルタの機能はquery変数を使用して、一致するqueryのレコードを含む新しい配列を生成します.応答ではngRepeatはfilterフィルタを使用して、自動的にビューを更新し、携帯電話の数を変更します.このプロセスは開発者に見られる.

テスト

第2歩では、ユニットテストの書き込みと実行方法を学び、ユニットテストはコントローラを完璧にテストし、JavaScriptで書かれた他のコンポーネントをテストしました.検索フィーチャーはテンプレートとデータバインドによって完璧に実現されるので、最初のエンドツーエンドテストを使用して、フィーチャーの作業を検証します.test/e2e/scenarios.js:

describe('PhoneCat App', function() {

  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);
    });
  });
});

このテストは、検索ボックスとリピータが一緒に動作していることを検証し、Angularでどのようにエンドツーエンドのテストを書きやすいかに注意します.これは簡単なテスト例ですが、彼は本当に実用的で、読み取り可能で、エンドツーエンドのテストを書きやすいです.

Protractorでエンドツーエンドテストを実行する

このテストの文法は私たちがJasmineで書いたコントローラユニットでテストしたように似ていますが、エンドツーエンドはprotractorのAPisを使って、Protractor APIsについてもっと読みます.http://angular.github.io/protractor/#/api. さらにKarmaのようにユニットテストのアクチュエータで、Protractorエンドツーエンドでテストします.npm run protractorを使用してみます.エンドツーエンドのテストは遅いので、ユニットテストとは異なり、Protractorはテストを実行した後に終了し、ファイルが自動実行テストキットを変更することはありません.npm run protractorを再度実行し、テストキットを再実行します.注意:アプリケーションがProtractorを使用してwebサーバサービスを利用していることを確認する必要があります.npm startを使用することができます.protractorをインストールし、npm run protractorを実行する前にネットワークドライバを更新したことを確認する必要があります.端末にnpm installとnpm run update-webdriverを入力することで、これを行うことができます.

じっけん

{{query}}をindex.htmlテンプレートにバインドすると、現在のqueryモデルの値が表示されます.入力ボックスを入力すると、彼がどのように変化するかを観察します.タイトルにクエリーを表示し、現在のquery値を取得してHTMLページのタイトルに表示する方法を見てみましょう.

エンドツーエンドテストをdescribeモジュールに追加します.test/e2e/scenarios.jsは、

describe('PhoneCat App', function() {

  describe('Phone list view', function() {

    beforeEach(function() {
      browser.get('app/index.html');
    });

    var phoneList = element.all(by.repeater('phone in phones'));
    var query = element(by.model('query'));

    it('should filter the phone list as a user types into the search box', function() {
      expect(phoneList.count()).toBe(3);

      query.sendKeys('nexus');
      expect(phoneList.count()).toBe(1);

      query.clear();
      query.sendKeys('motorola');
      expect(phoneList.count()).toBe(2);
    });

    it('should display the current filter value in the title bar', function() {
      query.clear();
      expect(browser.getTitle()).toMatch(/Google Phone Gallery:\s*$/);

      query.sendKeys('nexus');
      expect(browser.getTitle()).toMatch(/Google Phone Gallery: nexus$/);
    });
  });
});

がprotractor{npm run protractor}を実行して、このテストが失敗したことを確認する必要があります.

ページを再ロードすると、queryモデルがbody要素上の{{query}}で定義された範囲で生きているため、ng-controller="PhoneListCtrl"からtitleラベルを追加するだけで、

<title>Google Phone Gallery: {{query}}</title>

と思います.

<body ng-controller="PhoneListCtrl">

queryモデルを<title> にバインドする場合は、bodyとtitlleの共通要素であるため、ngController定義をHTML要素に移動する必要があります.

<html ng-app="phonecatApp" ng-controller="PhoneListCtrl">

body要素からng-controller定義

が上に移動することを確認する.

npm run protractorを再実行し、テストを見て合格しました.

title要素にカッコを使用すると、ページがロードされると、実際に数秒ユーザーに表示されることに気づくかもしれません.より良い方法は、ngBindコマンドまたはngBingTemplateコマンドを使用することです.ページのロードがユーザーに対して表示されない場合です.

<title ng-bind-template="Google Phone Gallery: {{query}}">Google Phone Gallery</title>

まとめ

今、私たちは全文検索を追加して、テストを含んで、検索が正常に動作していることを検証して、今私たちは4歩目に行って、携帯電話のアプリケーションにソート能力を追加する方法を学びましょう.原文住所:https://docs.angularjs.org/tutorial/step_03