如何测试 angular $compile 结果？

Question

我编写了简化测试来研究如何测试编译指令。
但我做不到：

    fit('debug compile', function(){
        var el = compile('<div></div>')(scope);

        backend.expectGET('/index.tpl');

        scope.name = 'World';
        scope.$digest();

        http.get('/index.tpl').success(function(html){
            expect(html).toBe('<h1>Hello, {{name}}!</h1>'); //ok
            var compiled = compile(html)(scope);
            expect(scope.name).toBe('World'); // ok
            expect(compiled.text()).toBe('Hello, World!'); // Expected 'Hello, {{name}}!' to be 'Hello, World!'
        });
        backend.flush();
    });

这里发生了什么：$http 从 $httpBackend 收到正确的模板。
但是当我用 $compile 编译它时，它在没有范围替换的情况下呈现。

这里如何实现正确的行为？

如您所见，范围变量在这里没有被替换。
我试图在编译后添加 scope.$digest，但它给了我另一个错误 digest in progress.
我假设，这来自 $http scope.$apply 调用。

Answer 1

因为它不是异步代码，所以打开 promise

var html;
http.get('/index.tpl').then(function(result){
    html = result;
});
backend.flush();

只有那时

        var compiled = compile(html)(scope);
        scope.$digest();
        expect(scope.name).toBe('World');
        expect(compiled.text()).toBe('Hello, World!');

$http 是多余的，根本不需要在这里，除非你想测试 Angular 服务（你很可能不想）。

Answer 2

我用指令测试创建了一个 codepen：

  it('assigns "anonimous" to the name', function() {
    var $scope = $rootScope.$new();
    var $el = $compile('<div test-dir></div>')(scope);
    $scope.$digest();
    expect($el.text()).toBe("Hello anonymous");
  });

如何测试 angular $compile 结果？

How to test angular $compile result?

unit-testing

angularjs

karma-jasmine