Javascript 使用templateUrl在angular指令中绑定单元测试数据

我试图用一个非常简单的角度指令对数据绑定进行单元测试：

指示

<uri></uri>

.directive('uri', function () {
    return {
        restrict: 'E',
        templateUrl: 'views/partials/directives/uri.html',
        transclude: false,
        replace: false,
        scope: false,
        controller: function ($scope) {
            $scope.uri = null;
        }
    };
});

模板

<h2>url</h2>
<input type="text" placeholder="{{uri}}" class="form-control" ng-readonly="true">

单元测试

describe('Directive: uri', function () {

    // we declare some global vars to be used in the tests
    var elem,
        scope,
        $compile,
        directive = angular.element('<uri></uri>'),
        template = 'views/partials/directives/uri.html';

    // load the module / template we want to test
    beforeEach(module('app', template));

    // before each test, creates a fresh scope
    beforeEach(inject(function ($rootScope, _$compile_, $templateCache) {
        //assign the template to the expected url called by the directive and put it in the cache
        var tplCache = $templateCache.get(template);
        $templateCache.put(template, tplCache);
        console.log(tplCache);

        scope = $rootScope.$new();
        $compile = _$compile_;
    }));

    function compileDirective() {
        //create the element with the directive template
        elem = $compile(directive)(scope);
        scope.$digest();
    }

    it('should set the input value to the scope.uri value', function () {
        // add uri to scope
        var uri = 'test-uri';
        scope.uri = uri;
        // then produce our directive using it
        console.log(scope.uri);
        compileDirective();
        console.log(scope.uri);
        console.log(elem);
        // this should impact the input value value
        var templateAsHtml = elem.html();
        expect(templateAsHtml).toContain(scope.uri);
    });
});

templateCache缓存模板。 使用提供的指令在作用域上编译元素。 但不知何故，uri属性没有链接到我的指令。另外，在作用域之后。$digest scope.uri为空

业力测试结果

LOG: '<h2>url</h2>
<input type="text" class="form-control" placeholder="{{uri}}" ng-readonly="true">'
LOG: 'test-uri'
LOG: null
LOG: Object{0: <uri class="ng-scope"><h2>url</h2>
<input type="text" class="form-control" placeholder="" ng-readonly="true" readonly="readonly"></uri>, length: 1}

PhantomJS 1.9.7 (Mac OS X) Directive: uri should set the input value to the scope.uri value FAILED
    Expected '<h2>url</h2>
    <input type="text" class="form-control" placeholder="" ng-readonly="true" readonly="readonly">' to contain null.

PhantomJS 1.9.7 (Mac OS X): Executed 6 of 6 (1 FAILED) (0.03 secs / 0.026 secs)

Warning: Task "karma:unit" failed. Use --force to continue.

Aborted due to warnings.

---

为完整起见：我的指令初始化为$scope.uri=null。这将覆盖摘要循环中的测试

指令：

.directive('uri', function () {
    return {
        restrict: 'E',
        templateUrl: 'views/partials/directives/uri.html',
        transclude: false,
        replace: false,
        scope: false,
        controller: function ($scope) {
            $scope.uri = null;
        }
    };
});

将新值重新应用于范围的固定单元测试：

it('should set the input value to the scope.uri value', function () {
    // produce our directive
    compileDirective();
    // add uri to scope
    var uri = 'test-uri';
    scope.uri = uri;
    scope.$digest();
    // check the html
    var templateAsHtml = elem.html();
    expect(templateAsHtml).toContain(uri);
});

---

你能把你的指令定义包括进去吗？好的，谢谢国泰航空。。。你看，我的指令初始化为uri=null。这将覆盖摘要循环中的测试。嗯。。。