指令中的单元测试 $routeParams答案

【问题标题】：Unit Testing $routeParams in directive指令中的单元测试 $routeParams
【发布时间】：2016-04-07 19:38:36
【问题描述】：

我有一个指令可以访问页面的$routeParams：

myApp.directive("myList", function ($routeParams) {
    return {
        restrict: 'E',
        templateUrl: 'tabs/my-list.html',
        link: function (scope) {
            scope.year = $routeParams.year;
       }
    };
});

指令按预期工作并正确访问$routeParams

我正在尝试使用 angular-mock/jasmine 进行测试。我不知道如何将模拟 $routeParams 传递给指令。这就是我所拥有的：

describe('myList', function () {
    var scope, compile, element, compiledDirective;
    var mockParams = { 'year': 1996 };

    beforeEach(function () {
        module('templates', 'MyApp');

        inject(function ($compile, $rootScope, $routeParams) {
            compile = $compile;
            scope = $rootScope.$new();
        });
        element = angular.element('<my-list></my-list>');
        compiledDirective = compile(element)(scope);
        scope.$digest();
    });
    it('should fill in the year', function () {
        expect(scope.year).toEqual(mockParams.year);
    });
});

这显然不起作用，因为我从未将 mockParams 传递给指令。有没有办法做到这一点？

【问题讨论】：

在创建元素之前使用$routeParams.year = 1996;怎么样？

标签： angularjs unit-testing angularjs-directive jasmine angular-mock

【解决方案1】：

使用angular.extend 模拟$routeParams 对象mockParams 或将mockParams 对象直接分配给$routeParams。这样$routeParams 将在指令编译之前可用。

inject(function ($compile, $rootScope, $routeParams) {
    compile = $compile;
    scope = $rootScope.$new();
    angular.extend($routeParams, mockParams);
});

【讨论】：