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); 
    }); 

}); 

答えて

1

それは

element = angular.element('<service-error the-errors="serviceErrors"></service-error>'); 
    scope = _$rootScope_.$new(); 
    scope.serviceErrors = ...; 
    template = $compile(element)(scope); 
    scope.$digest(); 
です
関連する問題