1
の共有スコープとAngularJSディレクティブ私はそうのようなディレクティブのエラー処理が含ま親ビューました:どのようにユニットテストを親
<service-error the-errors="vm.serviceErrors"></service-error>
サービスエラーがディレクティブで共有して、存在する場合に表示されました:
class ServiceError implements ng.IDirective{
public restrict: string;
public template: string;
public controller: string;
public controllerAs: string;
public bindToController: boolean;
public scope: Object;
constructor(...deps: Array<any>) {
this.restrict = 'E';
this.template = require('./service.error.directive.html');
this.controller = 'ServiceErrorController';
this.controllerAs = 'vm';
this.bindToController = true;
this.scope = {
theErrors: '='
};
}
static factory(...deps: Array<any>) {
return new ServiceError(...deps);
}
}
// Dependency Injection
ServiceError.factory.$inject = [];
export { ServiceError };
<ul class="list-unstyled service-error">
<li class="bg-danger" ng-repeat="error in vm.theErrors track by $index">{{error.message}}</li>
</ul>
私は親からのときvm.serviceErrors
は、サービスエラーのHTMLが正しくコンパイルされたが、これを設定する方法を確認していないされたデータを持っていることをテストしたいです。
私がこれまでに基本的なテストを作成しました:
describe('Directive: Service Error', function() {
var element,
scope,
template;
beforeEach(inject(function(_$rootScope_, $compile) {
element = angular.element('<service-error the-errors="vm.serviceErrors"></service-error>');
scope = _$rootScope_.$new();
template = $compile(element)(scope);
scope.$digest();
}));
it('should compile error list', function(){
var el = element.find('.service-error');
assert.isDefined(el);
});
});