如何对具有父共享范围的 AngularJS 指令进行单元测试

Question

我有一个包含错误处理指令的父视图，如下所示：

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

});

Answer 1

是的

    element = angular.element('<service-error the-errors="serviceErrors"></service-error>');
    scope = _$rootScope_.$new();
    scope.serviceErrors = ...;
    template = $compile(element)(scope);
    scope.$digest();