Мы провели много базовых тренировок на предыдущем шаге, так что теперь мы можем сделать несколько простых вещей. Мы хотим добавить полную функцию поиска текста (да, это действительно очень просто!). В то же время мы также напишем сквозное тест, потому что хороший сквозный тест может очень помочь. Он отслеживает ваше приложение и быстро сообщает, когда происходит регрессия.
Пожалуйста, сбросьте рабочий каталог:
GIT Checkout -f Шаг -3
В нашем приложении теперь есть поле поиска. Обратите внимание, что телефон на странице меняется, когда пользователь входит в поле поиска.
Наиболее важные различия между шагом 2 и шагом 3 перечислены ниже. Вы можете увидеть полную разницу в GitHub.
Контроллер
Мы не вносим никаких изменений в контроллер.
шаблон
app/index.html
<div> <div> <div> <!--Sidebar content--> Search: <input ng-model="query"> </div> <div> <!--Body content--> <ul> <li ng-repeat="phone in phones | filter:query"> {{phone.name}} <p>{{phone.snippet}}</p> </li> </ul> </div> </div> </div>Теперь мы добавляем тег <pint> и используем функцию фильтра AngularJS для обработки ввода директивы NgrePeat.
Это позволяет пользователям вводить критерии поиска и сразу же увидеть результаты поиска для списка телефона. Давайте объясним новый код:
Привязка данных: это основная особенность AngularJS. Когда страница загружена, AngularJS будет связывать ее с переменными с одним и тем же именем в модели данных на основе имени значения свойства блока ввода, чтобы обеспечить синхронизацию между ними.
В этом коде имя данных, введенное пользователем в поле ввода, называется запросом, который будет немедленно использован в качестве входного фильтра в итераторе списка (телефон в телефонах | Фильтр: Query`). Когда модель данных вызывает изменения в входе итератора, итератор может эффективно обновить DOM, чтобы отразить последнее состояние модели данных.
Используйте фильтр фильтра: функция фильтра использует значение запроса для создания нового массива, который соответствует только записям запросов.
Ngrepeat автоматически обновляет представление на основе массивы данных мобильной записи, сгенерированной фильтром фильтра. Весь процесс прозрачен для разработчика.
тест
На шаге 2 мы научились писать и запустить тест. Единоводные тестирование очень удобно для проверки контроллеров и других компонентов, которые мы пишем в JS, но оно не может легко проверить операции DOM и интеграцию приложений. Для этого сквозного тестирования-лучший выбор.
Функции поиска полностью реализованы с помощью шаблона и привязки данных, поэтому наши первые сквозные тесты подтверждают, что эти функции соответствуют нашим ожиданиям.
тест/e2e/scenarios.js:
Описать ('phonecat app', function () {descript ('view списка телефонов', function () {ofeeach (function () {browser (). navigateTo ('../../ app/index.html');}); it ('должен отфильтровать список телефона в виде пользовательских типов в поле поиска, function () {repeater (repeater ('). input (Query '). Enter (' nexus ');Хотя синтаксис этого тестового кода выглядит очень похоже на модульный тест, который мы писали в Жасмине ранее, в сквозном тесте используется интерфейс, предоставляемый AngularJS, тестировщиком.
Запустите сквозное тест и откройте любое из следующего на вкладке «Новый браузер»:
node.js Пользователь: http: // localhost: 8000/test/e2e/runner.html
Пользователи, использующие другие серверы http: http: // localhost: [port-number]/[context-path] /test/e2e/runner.html
Посетитель: http://angular.github.com/angular-phonecat/step-3/test/e2e/runner.html
Этот тест подтверждает, что поле поиска и итератор правильно интегрированы. Вы можете найти, как легко написать сквозное тест в AngularJS. Хотя этот пример является просто простым тестом, легко создать любой сложный, читаемый сквозный тест.
упражняться
Добавьте привязку {{Query}} к шаблону index.html, чтобы отобразить текущее значение модели запроса в режиме реального времени, а затем наблюдать, как они изменяются в соответствии со значением в поле ввода.
Теперь давайте посмотрим, как мы можем сделать значение модели запроса появиться в заголовке HTML -страницы.
Вы можете подумать, что добавление привязки к тегу заголовка как это:
<title> Google Phone Gallery: {{Query}} </title>
Однако, когда вы перезагружаете страницу, вы просто не можете получить желаемый результат. Это связано с тем, что модель запроса действительна только в рамках, определяемой элементом тела.
<body ng-controller = "phonelistctrl">
Если вы хотите, чтобы элемент <Title> связывался с моделью запроса, вы должны перенести объявление Ngcontroller в элемент HTML, потому что это общий предок названия и элемента тела.
<html ng-app ng-controller = "phonelistctrl">
Обязательно удалите объявление NG-контроллера на элементе тела.
Мы можем достичь нашей цели при привязке двух вьющихся скоб на элементе заголовка, но вы можете обнаружить, что они уже отображаются пользователю при загрузке страницы. Лучшее решение - использовать директивы NGBIND или NGBINDTEMPLATE, которые невидимы для пользователя при загрузке страницы:
<title ng-bind-template = "Галерея телефона Google: {{Query}}"> Галерея телефона Google </title>
Добавьте следующие сквозные тестовые коды в описывающий блок Test/e2e/scenarios.js:
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 Тестирует только значение привязки с использованием ('#status'). ожидайте (binding ('Query')). tobe ('nexus');});Обновить браузер, и сквозное тестер сообщит об отказе теста. Чтобы пройти тест, отредактируйте index.html и добавьте элемент Div или P с идентификатором «статус», который является привязкой запроса, и текущий фильтр: префикс. Например:
<div id = "status"> текущий фильтр: {{Query}} </div>
Добавить паузу (); заявление до сквозного теста и запустите его снова. Вы обнаружите, что тестер приостановлен! Это позволяет вам иметь возможность просмотреть состояние вашего приложения во время тестового запуска. Тестирование приложений в режиме реального времени! Вы можете изменить контент поиска, чтобы доказать это. С небольшим опытом вы узнаете, насколько важно быстро найти проблемы в сквозном тестировании.
Суммировать
Теперь мы добавили полнотекстовый поиск и завершили тест, чтобы доказать, что поиск правильный! Теперь давайте перейдем к шагу 4, чтобы увидеть добавление функции сортировки в наше мобильное приложение.
Выше приведено компиляция данных итераторных фильтрации AngularJS, и мы будем продолжать добавлять соответствующую информацию в будущем. Спасибо за поддержку этого сайта!