Question

我试图在单元测试中访问scope.loading变量。我的想法是测试$ on on listener是否正确触发。

scope.loading在我的指令的link函数中默认为false。当$ on函数收到“loadingPosts”时，它应该更新为true。 $ $来自$ rootScope。

但是，测试用例始终无法说明scope.loading未定义。我哪里错了？

这是我的测试用例：

'use strict';

describe('ngPress', function()
{
    beforeEach(module('ngPress'));

    describe('ngpLoader directive', function()
    {
        it('loading event fires', function()
        {
            inject(function($compile, $rootScope)
            {
                var scope = $rootScope.$new();

                var element = $compile('<ngp-loader type=\"posts\"></ngp-loader>')(scope);

                $rootScope.$broadcast( 'loadingPosts' );

                expect( scope.loading ).toEqual( true );
            });
        });
    });
});

这是指令：

(function ()
{
    angular.module('ngPress').directive('ngpLoader',
        [function ()
        {
            var link = function(scope, element, attrs)
            {
                scope.loading = false;

                scope.$on( 'loading'+scope.type.capitalizeFirstLetter(), function()
                {
                    scope.loading = true;
                });

                scope.$on( scope.type+'Loaded', function()
                {
                    scope.loading = false;
                });

                scope.$on( scope.type+'LoadFailed', function()
                {
                    scope.loading = false;
                });
            };

            return {
                link: link,
                restrict: 'E',
                replace: true,
                template: '<div class="loader" ng-show="loading"></div>',
                scope: {
                    type: '@'
                }
            };
        }]);
}());

Answer 1

您的指令使用范围选项scope: { type: '@' }

创建isolate scope

您可以使用element.isolateScope()：

在测试中访问此范围

var scope = $rootScope.$new();

var element = $compile('<ngp-loader type=\"posts\"></ngp-loader>')(scope);

$rootScope.$broadcast( 'loadingPosts' );

var isolateScope = element.isolateScope();
isolateScope.$apply();
expect( isolateScope.loading ).toEqual( true );

See angular.element docs：

isolateScope（） - 检索隔离范围（如果已连接）直接到当前元素

单元测试中的访问范围变量

1 个答案: