AngularJS:测试指令，承诺完成后不重新渲染 HTML [英] AngularJS : Testing directive, HTML not re-rendered after promise completion

问题描述

我正在为我的 AngularJS 应用编写一些基本的单元测试.我在 UI 上有一些绑定，我的指令中有一个范围变量，该变量在承诺完成时填充.

HTML:

<div id="child" ng-repeat="l in aud">//其他的东西

指令:

link: function(scope){service.getArray().$promise.then(function(data){scope.aud = 数据}

测试:

describe('my module', function () {var $compile: ICompileService, $rootScope: IScope, 指令: JQuery;//加载包含指令的 myApp 模块beforeEach(angular.mock.module('my-module'));beforeEach(angular.mock.module(($provide) => {$provide.service('service', () => {返回 {getArray: () =>{返回 Promise.resolve([项目 1"，项目 2"]);}}});//存储对 $rootScope 和 $compile 的引用//因此它们可用于此描述块中的所有测试beforeEach(inject(($httpBackend: IHttpBackendService, _$compile_: ICompileService, _$rootScope_: IRootScopeService) => {$compile = _$compile_;$rootScope = _$rootScope_.$new();指令 = $compile('<my-directive></my-directive>')($rootScope)$rootScope.$apply();}));describe('account-utility 指令', function () {it('帐户实用程序指令详细信息面板在点击时显示', function () {let list = directive.find("parent");//找到这个let listItems = list.find("child");//找不到这个.抛出错误.控制台日志(列表)；//innerHTML 仍然显示 ngrepeat 未被 div 替换期望(listItems.length).toBe(2);});});});

我调试了整个事情，承诺得到解决，数据被分配给范围变量aud".但是，我的测试范围副本和应用程序似乎不同.这是怎么回事?

解决方案

beforeEach((done) => {指令 = $compile('<my-directive></my-directive>')($rootScope);$rootScope.$digest();setTimeout(() => {$rootScope.$digest();完毕();});});

Done 帮助您等待所有异步任务从堆栈中取出.

<块引用>

应用()

也可以

I am writing some basic unit tests for my AngularJS app. I have some bindings on the UI with a scope variable inside my directive whichis populated on the completion of a promise.

HTML:

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

Directive:

link: function(scope){
  service.getArray().$promise.then(function(data){
   scope.aud = data;
}

Test:

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

});

I debugged the whole thing and the promise is resolved and the data is assigned to the scope variable 'aud'. However seems like my copy of scope for the test and the app are different. Whats going on here?

解决方案

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

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

Done helps you wait till all asynchronous tasks are picked up from the stack.

apply()

works too

这篇关于AngularJS:测试指令，承诺完成后不重新渲染 HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！