AngularJS: директива тестирования, HTML не визуализируется после выполнения обещания

Question

Я пишу несколько базовых модульных тестов для моего приложения AngularJS.У меня есть некоторые привязки к пользовательскому интерфейсу с переменной области действия в моей директиве, которая заполняется при выполнении обещания.

HTML:

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

Директива:

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

});

Я все отладил, и обещание было выполнено, и данные были назначены переменной области «aud».Однако, похоже, что моя копия области для теста и приложения разные.Что здесь происходит?

Answer 1

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

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

Готово помогает подождать, пока все асинхронные задачи не будут выбраны из стека.

apply ()

тоже работает

Answer 2

Когда обещание Angular будет выполнено, вам нужно уведомить его, чтобы он запустил свою грязную проверку.

Для этого вам нужно вызвать $rootScope.apply() внутри вашего it предложения.

Думайте об этом так, ваш $rootScope.apply() вызов в перед каждым предложением вызывает функцию link вашей директивы, эта функция регистрирует разрешение Promise в очереди Angulars, но она не обработана.