JavaScript - это язык динамического типа, который дает ее сильную способность производительности, но также делает компилятор практически невозможной, чтобы оказать какую -либо помощь разработчикам. По этой причине мы считаем, что написание любого кода JavaScript должен иметь мощный и полный набор тестов. У Angular есть много функций, которые облегчают нам тестирование наших приложений. У нас не должно быть оправдания не писать тесты (вот и все ...).
1. Это все о том, чтобы не смешивать проблемы (все дело в том, чтобы избежать сложных отношений кода ...)
Единое тестирование, как и название, посвящено тестированию одного «единицы». Единое тестирование стремится ответить на эти вопросы: я уже прав в своих логических соображениях? Получены ли результаты методом сортировки? Чтобы ответить на эти вопросы, особенно важно их разделить. Это связано с тем, что когда мы тестируем метод сортировки, мы не хотим заботиться о других связанных фрагментах, таких как элементы DOM или инициировать запросы XHR, чтобы получить данные и т. Д. Очевидно, что обычно трудно вызвать функцию отдельно в типичном проекте. Эта проблема вызывает то, что разработчики часто усложняют отношения и в конечном итоге делают фрагмент, как будто он может сделать все. Он получает данные через XHR, сортирует данные, а затем манипулирует DOM. Вместе с Angular мы можем легче писать лучший код, поэтому Angular обеспечивает нам впрыск зависимости от XHR (что мы можем имитировать), а Angular также создает абстракции, которые позволяют нам сортировать модель без необходимости манипулировать DOM. Таким образом, в конце мы можем просто написать метод сортировки, а затем создать набор данных через тестовый пример для метода сортировки, который будет использоваться при тестировании, а затем определить, соответствует ли модель результата ожиданиями. Тест не требует ожидания XHR для создания соответствующего DOM, и определить, правильно ли функционирует DOM. Основная идея угловой включает в себя тестируемость кода, но также требует от нас правильных вещей. Angular стремится упростить способ поступить правильно, но Angular не волшебство, что означает, что мы можем получить неосновное приложение, если мы не будем следить за следующими моментами.
1. Внедрение зависимости
Есть много способов получить ресурсы зависимости: 1) мы можем использовать нового оператора; 2) мы используем хорошо известный метод под названием «Глобальный синглтон»; 3) Мы можем запросить его из службы реестра (но как мы получаем реестр? Вы можете проверить следующие главы); 4) Мы можем ожидать, что он будет пройден.
Из перечисленных выше методов только последний тестируется, давайте посмотрим, почему:
1) Использование нового оператора
При использовании нового оператора нет ошибок, но проблема в том, что вызов конструктора через новый будет навсегда связывать вызывающего абонента с типом. Например, мы стараемся создавать экземпляр объекта XHR, чтобы мы могли получить некоторые данные с сервера.
function myClass () {this.dowork = function () {var xhr = new xrh (); xhr.open (метод, url, true); xhr.onreadystatechange = function () {…}; xhr.send (); }}Проблема заключается в том, что при тестировании нам обычно нужно создавать экземпляр виртуального XHR, который может возвращать тестовые данные или сетевые ошибки. Называя новый XHR (), мы навсегда связываем настоящий XHR, и нет хорошего способа заменить его. Конечно, есть плохое средство, и есть много причин доказать, что это плохая идея:
var oldxhr = xhr; xhr = new mockxhr () {}; myclass.dowork (); // судить, вызывает ли Mockxhr xhr = oldxhr через обычные параметры; // Если вы забудете этот шаг, легко вызвать печальные вещи.2) Глобальный поиск
Другим способом решения проблемы является получение ресурсов зависимости в известном месте.
function myClass () {this.dowork = function () {global.xhr ({…}); };}Без создания экземпляра нового зависимого объекта проблема в основном такая же, как и новая, и нет хорошего способа перехватить вызовы Global.xhr при тестировании. Самая основная проблема с тестированием заключается в том, что глобальные переменные необходимо изменить на вызов виртуальных методов и изменены. Чтобы узнать больше о его недостатках, посетите здесь: http://misko.hevery.com/code-reviewers-guide/flaw-brittle-global-state-singletons/
Приведенный выше код трудно проверить, поэтому мы должны изменить глобальное состояние:
var oldxhr = global.xhr; global.xhr = function mockxhr () {…}; var myclass = new myclass (); // судить, называет ли Mockxhr Global.xhr = Oldxhr через обычные параметры; // Если вы забудете этот шаг, легко вызывать печальные вещи.3) Реестр услуг
Наличие реестра со всеми услугами, по -видимому, решает проблему, а затем заменит необходимую услугу в тестовом коде.
function myClass () {var serviceRegistry = ???; this.dowork = function () {var xhr = serviceRegistry.get ("xhr"); …};}Но откуда беруется служебнаяерегистика? Если это так: * в новом, тест не имеет возможности сбросить услуги для тестирования * глобального поиска, то возвращаемая услуга также является глобальной (но сброс проще, так как есть только одна глобальная переменная, которую нужно сбросить) (текст здесь такой же, как искаженно ... я не понимаю)
Согласно этому методу, измените приведенный выше класс на следующий метод:
var OldServiceLocator = global.serviceLocator; Global.serviceLocator.set ('xhr', function mockxhr () {}); var myclass = new myclass (); myclass.dowork (); // судит ли Mockxhr Global.serviceLocator = Oldservicelocator; // Если вы забудете этот шаг, легко вызвать грустные вещи.4) Прохождение зависимостей
Наконец, ресурсы зависимости могут быть переданы.
function myClass (xhr) {this.dowork = function () {xhr ({…}); };}Это предпочтительный метод, потому что код не должен обращать внимания на то, откуда взялся XHR, и не заботится о том, кто создал передачу XHR. Поэтому создатель класса может быть закодирован отдельно от потребителя класса, что отделяет ответственность создания от логики, которая представляет собой перевод инъекции зависимости.
Этот класс легко проверить, и мы можем написать его так в тесте:
function xhrmock (args) {…} var myclass = new myclass (xhrmock); myclass.dowrok (); // вынести несколько суждений ... Благодаря этому тестовому коде мы можем понять, что никакие глобальные переменные не повреждены.Инъекция зависимости (//www.vevb.com/article/91775.htm) включен в Angular, код, написанный таким образом, облегчает написание тестового кода. Если мы хотим написать код, который очень тестируется, нам лучше его использовать.
2. Контроллеры
Логика делает каждое приложение уникальным, и это то, что мы хотим проверить. Если наша логика смешана с операциями DOM, это будет так же трудно проверить, как и следующий пример:
function passwordController () {// Получить ссылку на объект dom var msg = $ ('. ex1 span'); var input = $ ('. ex1 input'); сила варина; this.grade = function () {msg.removeclass (withe); var pwd = input.val (); password.text (pwd); if (pwd.length> 8) {alfer = 'strong'; } else if (pwd.length> 3) {inform = 'medium'; } else {withe = 'слабый'; } msg.addclass (сила) .Text (сила); }}Приведенный выше код будет столкнуться с проблемами при тестировании, потому что он требует, чтобы мы имели правильный DOM при выполнении теста. Тестовый код будет следующим:
var input = $ ('<<input type = "text"/>'); var span = $ ('<pan>'); $ ('body'). html ('<div>'). Найти ('div'). Приложение (input) .append (span); var pc = new PasswordController (); input.val ('abc'); pc.grade (); wearm (span.text ()). Toecoal ('sleed'); $ ('body'). Html ('');В Angular контроллер строго разделяет логику работы DOM, которая значительно уменьшит сложность написания тестовых случаев. Взгляните на следующий пример:
Функция PasswordCntrl ($ scope) {$ scope.password = ''; $ scope.grade = function () {var size = $ scope.password.length; if (size> 8) {$ scope.strength = 'strong'; } else if (size> 3) {$ scope.strength = 'medium'; } else {$ scope.strength = 'sleed'; }};}Тестовый код прост:
var pc = new PasswordController ($ scope); pc.password ('abc'); pc.grade (); weals ($ scope.strength) .toequal ('shabe');Стоит отметить, что тестовый код не только более прерывистый, но и легче отслеживать. Мы всегда говорили, что тестовые случаи рассказывают истории, а не оценивают другие неактуальные вещи.
3. Фильтры
Filter (http://docs.angularjs.org/api/ng.$filter) используется для преобразования данных в удобный формат. Они важны, потому что они отделяют ответственность за преобразование форматов из логики приложения, дополнительно упрощая логику приложения.
mymodule.filter ('length', function () {return function (text) {return (''+(text || '').)4. Директивы
5. издевательства
6. Глобальная изоляция государства
7. Предпочтительный способ тестирования
8. javascripttestdriver
9. Жасмин
10. Образец проекта
Мы будем продолжать обновлять связанные статьи в будущем. Спасибо за поддержку этого сайта!