AngularJS Советы по тестированию: директивы по тестированию

 it('should applied template', function () { expect(directiveElem.html()).not.toEqual(''); }); it('should have another-person element', function () { expect(directiveElem.find('another-directive').length).toEqual(1); }); 

Вам не нужно писать тест для каждого отдельного элемента в шаблоне директивы. Если вы чувствуете, что определенный элемент или директива является обязательным в шаблоне, и без этого директива была бы неполной, добавьте тест для проверки существования такого компонента. При этом ваш тест будет жаловаться, если кто-то случайно удалит его.

Область применения директивы по испытаниям

Область действия директивы может быть одной из следующих:

1. То же, что и объем окружающего элемента
2. Наследуется от объема окружающего элемента
3. Изолированная сфера

В первом случае вы можете не захотеть тестировать область, поскольку директива не должна изменять состояние области, когда она использует ту же область. Но в других случаях директива может добавить в область действия некоторые поля, которые определяют поведение директивы. Нам нужно проверить эти случаи.

Давайте рассмотрим пример директивы, использующей изолированную область видимости. Ниже приведена директива, которую мы должны проверить:

 angular.module('sampleDirectives').directive('fifthDirective', function () { return { scope:{ config: '=', notify: '@', onChange:'&' } } }; }) 

В тестах этой директивы нам нужно проверить, все ли три свойства определены в изолированной области и назначены ли они с правильными значениями. В этом случае нам нужно протестировать следующие случаи:

1. Свойство config для изолированной области должно быть таким же, как свойство в области видимости, и является двусторонним
2. notify свойство в изолированной области должно быть односторонним
3. onChange в изолированной области видимости должно быть функцией, и при onChange должен вызываться метод области видимости.

Директива ожидает чего-то от окружающей области видимости, поэтому она требует немного другой настройки, и нам также нужно получить ссылку на изолированную область видимости.

Фрагмент ниже подготавливает область действия директивы и компилирует ее:

 beforeEach(function() { module('sampleDirectives'); inject(function ($compile, $rootScope) { compile=$compile; scope=$rootScope.$new(); scope.config = { prop: 'value' }; scope.notify = true; scope.onChange = jasmine.createSpy('onChange'); }); directiveElem = getCompiledElement(); }); function getCompiledElement(){ var compiledDirective = compile(angular.element('<fifth-directive config="config" notify="notify" on-change="onChange()"></fifth-directive>'))(scope); scope.$digest(); return compiledDirective; 

Теперь, когда у нас есть готовая директива, давайте проверим, назначена ли выделенная область с правильным набором свойств.

 it('config on isolated scope should be two-way bound', function(){ var isolatedScope = directiveElem.isolateScope(); isolatedScope.config.prop = "value2"; expect(scope.config.prop).toEqual('value2'); }); it('notify on isolated scope should be one-way bound', function(){ var isolatedScope = directiveElem.isolateScope(); isolatedScope.notify = false; expect(scope.notify).toEqual(true); }); it('onChange should be a function', function(){ var isolatedScope = directiveElem.isolateScope(); expect(typeof(isolatedScope.onChange)).toEqual('function'); }); it('should call onChange method of scope when invoked from isolated scope', function () { var isolatedScope = directiveElem.isolateScope(); isolatedScope.onChange(); expect(scope.onChange).toHaveBeenCalled(); }); 

Требуется тестирование

Директива может строго или необязательно зависеть от одной или нескольких других директив. По этой причине у нас есть несколько интересных случаев для тестирования:

1. Должен выдавать ошибку, если строго не указана директива
2. Должен работать, если указана строго необходимая директива
3. Не должен выдавать ошибку, если необязательная директива не указана
4. Должен взаимодействовать с контроллером необязательной директивы, если он найден

Директива ниже требует ngModel и опционально требует form в родительском элементе:

 angular.module('sampleDirectives').directive('sixthDirective', function () { return { require: ['ngModel', '^?form'], link: function(scope, elem, attrs, ctrls){ if(ctrls[1]){ ctrls[1].$setDirty(); } } }; }); 

Как видите, директива взаимодействует с контроллером form только если она найдена. Хотя пример не имеет особого смысла, он дает представление о поведении. Тесты для этой директивы, охватывающие случаи, перечисленные выше, показаны ниже:

 function getCompiledElement(template){ var compiledDirective = compile(angular.element(template))(scope); scope.$digest(); return compiledDirective; } it('should fail if ngModel is not specified', function () { expect(function(){ getCompiledElement('<input type="text" sixth-directive />'); }).toThrow(); }); it('should work if ng-model is specified and not wrapped in form', function () { expect(function(){ getCompiledElement('<div><input type="text" ng-model="name" sixth-directive /></div>'); }).not.toThrow(); }); it('should set form dirty', function () { var directiveElem = getCompiledElement('<form name="sampleForm"><input type="text" ng-model="name" sixth-directive /></form>'); expect(scope.sampleForm.$dirty).toEqual(true); }); 

Тестирование Заменить

Тестирование replace очень просто. Нам просто нужно проверить, существует ли элемент директивы в скомпилированном шаблоне. Вот как вы это делаете:

 //directive angular.module('sampleDirectives').directive('seventhDirective', function () { return { replace: true, template: '<div>Content in the directive</div>' }; }); //test it('should have replaced directive element', function () { var compiledDirective = compile(angular.element('<div><seventh-directive></seventh-directive></div>'))(scope); scope.$digest(); expect(compiledDirective.find('seventh-directive').length).toEqual(0); }); 

Тестирование Transclude

Transclusion имеет два случая: transclude установлено в true и transclude установлено в элемент. Я не видел много случаев использования transclude, установленного в element, поэтому мы обсудим только случай, когда transclude установлено в true .

Мы должны протестировать следующее, чтобы проверить, поддерживает ли директива трансклидированный контент:

1. Если в шаблоне есть элемент с директивой ng-transclude
2. Если содержание сохраняется

Чтобы проверить директиву, нам нужно передать некоторое HTML-содержимое в директиву, которая будет скомпилирована, и затем проверить наличие вышеупомянутых случаев. Это директива, использующая transclude и ее тест:

 //directive angular.module('sampleDirectives').directive('eighthDirective', function(){ return{ transclude: true, template:'<div>Text in the directive.<div ng-transclude></div></div>' }; }); //test it('should have an ng-transclude directive in it', function () { var transcludeElem = directiveElem.find('div[ng-transclude]'); expect(transcludeElem.length).toBe(1); }); it('should have transclude content', function () { expect(directiveElem.find('p').length).toEqual(1); }); 

Вывод

Как вы видели в этой статье, директивы сложнее тестировать по сравнению с другими концепциями в AngularJS. В то же время их нельзя игнорировать, поскольку они контролируют некоторые важные части приложения. Экосистема тестирования AngularJS облегчает нам тестирование любой части проекта. Я надеюсь, что благодаря этому руководству вы сможете более уверенно проверить свои директивы. Дайте мне знать ваши мысли в разделе комментариев.

Если вы хотите поиграть с кодом, разработанным в этом руководстве, вы можете взглянуть на репозиторий GitHub, который я для вас настроил .