Podcast/lib/angular/docs/partials/tutorial/step_03.html

<h1><code ng:non-bindable=""></code>
<span class="hint"></span>
</h1>
<div><a href="http://github.com/angular/angular.js/edit/master/docs/content/tutorial/step_03.ngdoc" class="improve-docs btn btn-primary">Improve this doc</a><ul doc-tutorial-nav="3"></ul>

<p>We did a lot of work in laying a foundation for the app in the last step, so now we'll do something
simple; we will add full text search (yes, it will be simple!). We will also write an end-to-end
test, because a good end-to-end test is a good friend. It stays with your app, keeps an eye on it,
and quickly detects regressions.</p>

<div doc-tutorial-reset="3">
</div>

<p>The app now has a search box. Notice that the phone list on the page changes depending on what a
user types into the search box.</p>

<p>The most important differences between Steps 2 and 3 are listed below. You can see the full diff on
<a href="https://github.com/angular/angular-phonecat/compare/step-2...step-3">GitHub</a>:</p>

<h3>Controller</h3>

<p>We made no changes to the controller.</p>

<h3>Template</h3>

<p><strong><code>app/index.html</code>:</strong>
<pre class="prettyprint linenums">
  &lt;div class="container-fluid"&gt;
    &lt;div class="row-fluid"&gt;
      &lt;div class="span2"&gt;
        &lt;!--Sidebar content--&gt;

        Search: &lt;input ng-model="query"&gt;

      &lt;/div&gt;
      &lt;div class="span10"&gt;
        &lt;!--Body content--&gt;

        &lt;ul class="phones"&gt;
          &lt;li ng-repeat="phone in phones | filter:query"&gt;
            {{phone.name}}
            &lt;p&gt;{{phone.snippet}}&lt;/p&gt;
          &lt;/li&gt;
        &lt;/ul&gt;

      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
</pre>

<p>We added a standard HTML <code>&lt;input&gt;</code> tag and used Angular's
<a href="api/ng.filter:filter"><code>$filter</code></a> function to process the input for the
<a href="api/ng.directive:ngRepeat"><code>ngRepeat</code></a> directive.</p>

<p>This lets a user enter search criteria and immediately see the effects of their search on the phone
list. This new code demonstrates the following:</p>

<ul>
<li><p>Data-binding: This is one of the core features in Angular. When the page loads, Angular binds the
name of the input box to a variable of the same name in the data model and keeps the two in sync.</p>

<p>In this code, the data that a user types into the input box (named <strong><code>query</code></strong>) is immediately
available as a filter input in the list repeater (<code>phone in phones | filter:</code><strong><code>query</code></strong>). When
changes to the data model cause the repeater's input to change, the repeater efficiently updates
the DOM to reflect the current state of the model.</p>

<p><img  class="diagram" src="img/tutorial/tutorial_03.png"></p></li>
<li><p>Use of the <code>filter</code> filter: The <a href="api/ng.filter:filter"><code>filter</code></a> function uses the
<code>query</code> value to create a new array that contains only those records that match the <code>query</code>.</p>

<p><code>ngRepeat</code> automatically updates the view in response to the changing number of phones returned
by the <code>filter</code> filter. The process is completely transparent to the developer.</p></li>
</ul>

<h3>Test</h3>

<p>In Step 2, we learned how to write and run unit tests. Unit tests are perfect for testing
controllers and other components of our application written in JavaScript, but they can't easily
test DOM manipulation or the wiring of our application. For these, an end-to-end test is a much
better choice.</p>

<p>The search feature was fully implemented via templates and data-binding, so we'll write our first
end-to-end test, to verify that the feature works.</p>

<p><strong><code>test/e2e/scenarios.js</code>:</strong>
<pre class="prettyprint linenums">
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);
    });
  });
});
</pre>

<p>Even though the syntax of this test looks very much like our controller unit test written with
Jasmine, the end-to-end test uses APIs of <a href="guide/dev_guide.e2e-testing">Angular's end-to-end test runner</a>.</p>

<p>To run the end-to-end test, open one of the following in a new browser tab:</p>

<ul>
<li>node.js users: <a href="http://localhost:8000/test/e2e/runner.html">http://localhost:8000/test/e2e/runner.html</a></li>
<li>users with other http servers:
<code>http://localhost:[port-number]/[context-path]/test/e2e/runner.html</code></li>
<li>casual reader: <a href="http://angular.github.com/angular-phonecat/step-3/test/e2e/runner.html">http://angular.github.com/angular-phonecat/step-3/test/e2e/runner.html</a></li>
</ul>

<p>Previously we've seen how Testacular can be used to execute unit tests. Well, it can also run the
end-to-end tests! Use <code>./scripts/e2e-test.sh</code> script for that. End-to-end tests are slow, so unlike
with unit tests, Testacular will exit after the test run and will not automatically rerun the test
suite on every file change. To rerun the test suite, execute the <code>e2e-test.sh</code> script again.</p>

<p>This test verifies that the search box and the repeater are correctly wired together. Notice how
easy it is to write end-to-end tests in Angular. Although this example is for a simple test, it
really is that easy to set up any functional, readable, end-to-end test.</p>

<h2>Experiments</h2>

<ul>
<li><p>Display the current value of the <code>query</code> model by adding a <code>{{query}}</code> binding into the
<code>index.html</code> template, and see how it changes when you type in the input box.</p></li>
<li><p>Let's see how we can get the current value of the <code>query</code> model to appear in the HTML page title.</p>

<p>You might think you could just add the {{query}} to the title tag element as follows:</p>

<pre><code>  &lt;title&gt;Google Phone Gallery: {{query}}&lt;/title&gt;
</code></pre>

<p>However, when you reload the page, you won't see the expected result. This is because the "query"
model lives in the scope defined by the body element:</p>

<pre><code>  &lt;body ng-controller="PhoneListCtrl"&gt;
</code></pre>

<p>If you want to bind to the query model from the <code>&lt;title&gt;</code> element, you must <strong>move</strong> the
<code>ngController</code> declaration to the HTML element because it is the common parent of both the body
and title elements:</p>

<pre><code>  &lt;html ng-app ng-controller="PhoneListCtrl"&gt;
</code></pre>

<p>Be sure to <strong>remove</strong> the <code>ng-controller</code> declaration from the body element.</p>

<p>While using double curlies works fine within the title element, you might have noticed that
for a split second they are actually displayed to the user while the page is loading. A better
solution would be to use the <a href="api/ng.directive:ngBind"><code>ngBind</code></a> or <a href="api/ng.directive:ngBindTemplate"><code>ngBindTemplate</code></a> directives, which are invisible to the user while the page is loading:</p>

<pre><code>  &lt;title ng-bind-template="Google Phone Gallery: {{query}}"&gt;Google Phone Gallery&lt;/title&gt;
</code></pre></li>
<li><p>Add the following end-to-end test into the <code>describe</code> block within <code>test/e2e/scenarios.js</code>:</p>

<pre class="prettyprint linenums">
    it('should display the current filter value within an element with id "status"',
        function() {
      expect(element('#status').text()).toMatch(/Current filter: \s*$/);

      input('query').enter('nexus');

      expect(element('#status').text()).toMatch(/Current filter: nexus\s*$/);

      //alternative version of the last assertion that tests just the value of the binding
      using('#status').expect(binding('query')).toBe('nexus');
    });
  </pre>

<p>Refresh the browser tab with the end-to-end test runner to see the test fail. To make the test
pass, edit the <code>index.html</code> template to add a <code>div</code> or <code>p</code> element with <code>id</code> <code>"status"</code> and content
with the <code>query</code> binding, prefixed by "Current filter:". For instance:</p>

<pre><code>  &lt;div id="status"&gt;Current filter: {{query}}&lt;/div&gt;
</code></pre></li>
<li><p>Add a <code>pause()</code> statement inside of an end-to-end test and rerun it. You'll see the runner pause;
this gives you the opportunity to explore the state of your application while it is displayed in
the browser. The app is live! You can change the search query to prove it. Notice how useful this
is for troubleshooting end-to-end tests.</p></li>
</ul>

<h2>Summary</h2>

<p>We have now added full text search and included a test to verify that search works! Now let's go on
to <a href="tutorial/step_04">step 4</a> to learn how to add sorting capability to the phone app.</p>

<ul doc-tutorial-nav="3"></ul></div>