+
* Use of `$filter`. The {@link angular.Array.filter $filter} method, uses the `query` value, to
create a new array that contains only those records that match the `query`.
+
`ng:repeat` automatically updates the view in response to the changing number of phones returned
- by the `$filter`. The process is completely transparent to the developer.
+by the `$filter`. The process is completely transparent to the developer.
+
## Test
+
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.
+
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.
+
__`test/e2e/scenarios.js`:__
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);
});
@@ -110,64 +143,109 @@ describe('PhoneCat App', function() {
});
+
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 {@link
https://docs.google.com/document/d/11L8htLKrh6c92foV71ytYpiKkeKpM4_a5-9c3HywfIc/edit?hl=en&pli=1#
angular's end-to-end test runner}.
+
To run the end-to-end test, open the following in a new browser tab:
+
* node.js users: {@link http://localhost:8000/test/e2e/runner.html}
* users with other http servers:
`http://localhost:[*port-number*]/[*context-path*]/test/e2e/runner.html`
* casual reader: {@link http://angular.github.com/angular-phonecat/step-3/test/e2e/runner.html}
+
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.
+
# Experiments
+
* Display the current value of the `query` model by adding a `{{query}}` binding into the
`index.html` template, and see how it changes when you type in the input box.
-* Change `index.html` to reflect the current search query in the html title by replacing the title
-tag in the head section with:
-