Question

这个问题与How do I inject a mock dependency into an angular directive with Jasmine on Karma有些关系。但我无法弄明白。继承人：

我有一个简单的角度指令，用于使用多个参数渲染我的应用程序的头部。一个通过，两个来自URL vie $ location和$ routeParam。该指令如下所示：

    'use strict';
myApp.directive('appHeader', ['$routeParams', '$location', function ($routeParams, $location) {
    return {
        restrict: 'E',
        templateUrl: 'path/to/partials/template.html',
        scope: {
            icon: '@icon'
        },
        link: function (scope, element, attributes) {
            var lastUrlPart = $location.path().split('/').pop();
            scope.project = $routeParams.itemName;
            scope.context = lastUrlPart === scope.project ? '' : lastUrlPart;
        }
    };
}]);

这是通过<app-header icon="bullhorn"></app-header>调用的。

现在我想添加一些测试。至于模板渲染，我完成了。以下工作与预期的一样。测试通过了。

describe('appHeader', function () {
    var element, scope;

    beforeEach(module('myApp'));
    beforeEach(module('myAppPartials'));

    beforeEach(inject(function ($rootScope, $compile) {
        element = angular.element('<app-header icon="foo"></app-header>');
        scope = $rootScope;
        $compile(element)(scope);
        scope.$digest();
    }));

    it('should contain the glyphicon passed to the directive', function () {
        expect(element.find('h1').find('.glyphicon').hasClass('glyphicon-foo')).toBeTruthy();
    });

});

现在我想测试一下scope.context和scope.project是根据依赖关系$ location和$ routeParams设置的，我当然要模拟它们。我怎么能解决这个问题呢。

我尝试了上面提到的问题的答案：

beforeEach(module(function ($provide) {
        $provide.provider('$routeParams', function () {
            this.$get = function () {
                return {
                    itemName: 'foo'
                };
            };
        });
    }));

但在我的测试中

it('should set scope.project to itemName from $routeParams', function () {
        expect(scope.project).toEqual('foo');
});

scope.project未定义：

Running "karma:unit:run" (karma) task
Chrome 35.0.1916 (Mac OS X 10.9.3) appHeader should set scope.project to itemName from routeParams FAILED
        Expected undefined to equal 'foo'.
        Error: Expected undefined to equal 'foo'.

至于位置依赖，我试图像这样设置一个Mock mysel：

var LocationMock = function (initialPath) {
            var pathStr = initialPath || '/project/bar';
            this.path = function (pathArg) {
                return pathArg ? pathStr = pathArg : pathStr;
            };
        };

然后在每个之前注入$ location并将spyOn设置为调用path（），如下所示：

spyOn(location, 'path').andCallFake(new LocationMock().path);

但是，scope.context也是未定义的。

it('should set scope.context to last part of URL', function () {
    expect(scope.context).toEqual('bar');
});

有人可以指出我在这里做错了吗？

Answer 1

提供者的模拟工作正常，但问题在于范围。您的指令具有孤立的范围。因此，该指令的范围是test中定义的范围的子节点。快速但不推荐的解决方案是：

it('should set scope.project to itemName from $routeParams', function () {
    expect(scope.$$childHead.project).toEqual('foo'); });

在测试指令时尽量避免使用范围。更好的方法是模拟模板并检查其中的数据。对于你的情况，它将是这样的：

    var viewTemplate = '<div>' +
        '<div id="project">{{project}}</div>' +
    '</div>';

    beforeEach(inject(function ($templateCache) {
        $templateCache.put('path/to/partials/template.html', viewTemplate);
    }));

并测试：

    it('should set scope.project to itemName from $routeParams', function () {
        expect(element.find('#project').text()).toEqual('foo');
    });

对于上下文它将是相同的。

使用$ location和$ routeParams等依赖项测试Angular Directive

1 个答案: