AngularJS：测试指令，承诺完成后不重新呈现HTML

我正在为我的AngularJS应用程序编写一些基本的单元测试。我在UI上有一些绑定，在我的指令中有一个scope变量，它是在承诺完成时填充的

HTML:

<div id="parent">
   <div id="child" ng-repeat="l in aud">
      // Other Stuff
   </div>
</div>

测试：

description（'my module'，function（）{
var$compile:ICompileService，$rootScope:IScope，指令：JQuery；
//加载包含指令的myApp模块
每个之前（angular.mock.module（'my-module'）；
每个之前（角度模拟模块（$PROFECT）=>{
$provide.service（'service'，（）=>{
返回{
getArray:（）=>{
还愿(
[“第1项”、“第2项”]
                    );
                }
            }
        });
//存储对$rootScope和$compile的引用
//因此它们可用于此描述块中的所有测试
在每个之前（注入（$httpBackend:IHttpBackendService、\u$compile\u$ICompileService、\u$rootScope\u$IRootScopeService）=>{
$compile=\$compile；
$rootScope=\$rootScope\$new（）；
指令=$compile（“”）（$rootScope）
$rootScope.$apply（）；
        }));
描述（'account-utility指令'，函数（）{
it（'单击时显示帐户实用程序指令详细信息面板'，函数（）{
let list=directive.find（“parent”）；//查找
让listItems=list.find（“子”）；//找不到此项。抛出错误
console.log（list）；//innerHTML仍然显示未被divs替代的ngrepeat
expect（listItems.length）.toBe（2）；
            });
        });
});

---

我调试了整个过程，承诺得到了解决，数据被分配给范围变量“aud”。但是，我的测试范围副本和应用程序似乎不同。这里发生了什么事？

当Angular的承诺得到解决时，你需要通知它，以便它运行脏检查

为此，您需要在您的

it

子句中调用

$rootScope.apply（）

试想一下，beforeach子句中的

$rootScope.apply（）

调用调用指令的

链接

函数，该函数在Angulars队列中注册承诺解析，但它没有得到处理。

beforeach（（done）=>{
beforeEach((done) => {
        directive = $compile('<my-directive></my-directive>')($rootScope);
        $rootScope.$digest();

        setTimeout(() => {
            $rootScope.$digest();
            done();
        });
    });

指令=$compile（“”）（$rootScope）；
$rootScope.$digest（）；
设置超时（（）=>{
$rootScope.$digest（）；
完成（）；
});
});

“完成”帮助您等待所有异步任务从堆栈中提取

应用（）

也行

describe('my module', function () {
    var $compile: ICompileService, $rootScope: IScope, directive: JQuery<HTMLElement>;

    // Load the myApp module, which contains the directive
    beforeEach(angular.mock.module('my-module'));
    beforeEach(angular.mock.module(($provide) => {

        $provide.service('service', () => {
            return {
                getArray: () => {
                    return Promise.resolve(
                        ["item1", "item2"]
                    );
                }
            }
        });


        // Store references to $rootScope and $compile
        // so they are available to all tests in this describe block
        beforeEach(inject(($httpBackend: IHttpBackendService, _$compile_: ICompileService, _$rootScope_: IRootScopeService) => {
            $compile = _$compile_;
            $rootScope = _$rootScope_.$new();
            directive = $compile('<my-directive></my-directive>')($rootScope)
            $rootScope.$apply();
        }));

        describe('account-utility directive', function () {
            it('account utility directive details panel is shown on click', function () {
                let list = directive.find("parent"); // Finds this
                let listItems = list.find("child"); // Cannot find this. Throws error. 
                console.log(list); // innerHTML still shows ngrepeat unsubstituted by divs
                expect(listItems.length).toBe(2);
            });
        });

});

beforeEach((done) => {
        directive = $compile('<my-directive></my-directive>')($rootScope);
        $rootScope.$digest();

        setTimeout(() => {
            $rootScope.$digest();
            done();
        });
    });