javascript - 了解测试中的过滤器注入(inject)

Question

我开始看a tutorial video series在 youtube 上关于 angularJS。在名为“测试概述”的视频中，John Lindquist 创建了一个这样的应用程序:

var myApp = angular.module("myApp", []);
myApp.filter('reverse', function(){
    return function(text)
    {
         return text.split("").reverse().join("");
    }
})
function firstCtrl($scope, Data){
    $scope.data = Data;
}

然后他像这样用 Karma 和 Jasmine 创建了一个单元测试:

describe('filter', function()
{
    beforeEach(module('myApp'));
    describe('reverse', function()
    {
        it('should reverse a string', inject(function(reverseFilter) {
            expect(reverseFilter('ABCD')).toEqual('DCBA');
        }))
    })
})

测试通过，代码没问题，就是找不到原因。

我制作了自己的副本以了解魔法发生的地方......并且听说了 AngularJS 的参数命名事情，我将 inject(function(reverseFilter) 更改为 inject(function(anytext) 并且它停止工作，正如预期的那样。

然后我注意到，如果我像这样重命名我的过滤器 myApp.filter('foe', function()，则必须使用 inject(function(foeFilter) 完成注入(inject)调用。

这是从哪里来的？ AngularJs 的注入(inject)系统似乎使用了一些驼峰式命名法将“Filter”连接到过滤器的名称，但我无法在任何地方找到关于此过程的任何文档。我还发现“有趣”的是，使用 inject(function(foe) 不起作用，而将参数名称与相对依赖项匹配似乎是在 AngularJS 中获取依赖项的最简单方法。对其他类型的依赖项执行此操作？

如有任何帮助，我们将不胜感激。

您可以在 angularJs 官方教程中看到以这种方式测试过滤器的示例 here .

非常感谢。

Answer 1

是的，使用过滤器 Angular 将“过滤器”连接到名称。他们还与提供者一起这样做。当您使用 $provide 创建提供者时或 module.provide您可以通过在名称后附加“提供者”来访问配置 block 中的提供者。我不是 100% 确定原因，但是通过这种方式 angular 可以确定你注入(inject)配置 block 的东西确实被配置为提供者(或常量)并且在过滤器的情况下，当你使用它们时你的 html

<div ng-repeat="stuff in things | filter:model"></div>

angular 肯定会寻找一个名为“filterFilter”的过滤器。如果你在那里放一个名为 filter 的服务，它就不会工作，所以 angular 希望允许使用相同定义的名称创建过滤器和服务，同时用稍微不同的名称保存它们。这有帮助吗？