angularjs - 使用$ location和$ routeParams等依赖项测试Angular指令

这个问题与How do I inject a mock dependency into an angular directive with Jasmine on Karma有关。但我不知道。继承人的东西：

我有一个简单的angular指令，可以使用几个参数来渲染我的应用的头部。一个通过，两个来自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，并为调用path（）设置一个spyOn，如下所示：

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

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

最佳答案

提供程序的模拟工作正常，但问题出在范围之内。您的指令具有隔离范围。因此，该指令的作用域是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');
    });

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

关于angularjs - 使用$ location和$ routeParams等依赖项测试Angular指令，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/24722809/