AngularJS karma过滤器未知提供者。

5

我无法让它工作!我已经在互联网上搜索了很久,并尝试了其他解决方案,但我无法让它工作。

我有一个过滤器,并且我想使用Karma和Jasmine进行测试。这是我的代码:

app.js:

var services = angular.module('myApp.services', [ 'ngResource' ]);

angular.module('myApp', [
    'ngRoute',
    'myApp.filters',
    'myApp.services',
    'myApp.directives',
    'myApp.controllers'
]).

filters.js

'use strict';

/* Filters */

angular.module('myApp.filters', [])

.filter(
    'lowerAndCapital',
    [ function() {
        return function(text) {
            if (text != undefined) {
                var str = text.toLowerCase();
                var arreglo = str.split(" ");
                var result = "";
                for (var i = 0; i < arreglo.length; i++) {
                    result += " "
                            + arreglo[i].charAt(0).toUpperCase()
                            + arreglo[i]
                                    .substring(1, arreglo[i].length + 1);
                }
                return result;
            }
        }
    }]);

filterSpecs.js

'use strict';

/* Jasmine specification for filters go here */

describe('filter', function() {

    beforeEach(function () {
        module('myApp.filters');
    });

    describe('lowerAndCapital', function() {
        it('deberia de convertir le texto a minuscula y con letra capital',
            inject(function(lowerAndCapital) {
                expect(lowerAndCapital("john")).toEqual(
                         "John");
        }));
    });
});

karma.config.js

module.exports = function(config){
    config.set({

        basePath : '../',

        files : [
            'main/webapp/resources/scripts/angular/angular.js',
            'main/webapp/resources/scripts/angular/angular-route.js',
            'main/webapp/resources/scripts/angular/angular-mocks.js',
            'main/webapp/resources/js/*.js',
            'test/unit/*.js'
        ],

        autoWatch : true,

        frameworks: ['jasmine'],

        browsers : ['Chrome'],

        plugins : [
                'karma-chrome-launcher',
                'karma-firefox-launcher',
                'karma-jasmine',
                'karma-junit-reporter'
                ],

        junitReporter : {
          outputFile: 'test_out/unit.xml',
          suite: 'unit'
        }
    });
};

以下是错误信息:

Chrome 36.0.1985 (Windows 7) filter lowerAndCapital deberia de convertir le text
o a minuscula y con letra capital FAILED
        Error: [$injector:unpr] Unknown provider: lowerAndCapitalProvider <- low
erAndCapital
        http://errors.angularjs.org/1.2.16/$injector/unpr?p0=lowerAndCapitalProv
ider%20%3C-%20lowerAndCapital
            at E:/workspace/GPS/src/main/webapp/resources/scripts/angular/angula
r.js:78:12
            at E:/workspace/GPS/src/main/webapp/resources/scripts/angular/angula
r.js:3705:19
            at Object.getService [as get] (E:/workspace/GPS/src/main/webapp/reso
urces/scripts/angular/angular.js:3832:39)
            at E:/workspace/GPS/src/main/webapp/resources/scripts/angular/angula
r.js:3710:45
            at getService (E:/workspace/GPS/src/main/webapp/resources/scripts/an
gular/angular.js:3832:39)
            at Object.invoke (E:/workspace/GPS/src/main/webapp/resources/scripts
/angular/angular.js:3859:13)
            at workFn (E:/workspace/GPS/src/main/webapp/resources/scripts/angula
r/angular-mocks.js:2147:20)
        Error: Declaration Location
            at window.inject.angular.mock.inject (E:/workspace/GPS/src/main/weba
pp/resources/scripts/angular/angular-mocks.js:2132:25)
            at null.<anonymous> (E:/workspace/GPS/src/test/unit/filtersSpec.js:1
5:5)
            at null.<anonymous> (E:/workspace/GPS/src/test/unit/filtersSpec.js:1
2:2)
            at E:/workspace/GPS/src/test/unit/filtersSpec.js:5:1
Chrome 36.0.1985 (Windows 7): Executed 1 of 1 (1 FAILED) ERROR (0.359 secs / 0.0
14 secs)
1个回答

12

你应该尝试注入filterprovider并获得lowerAndCapital过滤器。

var $filter;

beforeEach(function () {
   module('app');
});

beforeEach( inject(function (_$filter_) { //<-- Get the filter provider
   $filter = _$filter_;
}));

it('deberia de convertir le texto a minuscula y con letra capital',function(){
   expect($filter('lowerAndCapital')("john")).toEqual("John");
});

Plnkr

或者在过滤器名称后面加上“Filter”,然后使用它。

beforeEach( inject(function (_lowerAndCapitalFilter_) {
   $filter = _lowerAndCapitalFilter_;
}));

筛选器只是将输入转换为输出的函数。但是,筛选器需要进行依赖注入。为此,筛选器定义包括一个工厂函数,该函数带有依赖项的注释,并负责创建筛选器函数。

但是,由于split(" ")存在错误,因此您可能希望修剪返回的结果。

演示


谢谢你的回答,非常完美!现在我明白了,我需要注入过滤器提供程序,只有一个问题?为什么您在过滤器提供程序上使用“_”符号?非常感谢! - David Sttivend
@user3299573 没关系。是的,您不必这样做。但是,在编写单元测试时,我们通常会将变量名称与服务或提供程序等相同。因此,如果我们使用相同的名称进行注入,则上层作用域中具有相同名称的变量将不会被分配,因此这是通过提供 "_" 作为前/后缀来进行注入的另一种方式。没什么大不了的...正如我所提到的,您还可以在过滤器后缀中加上 "Filter" 并将其用作过滤器。 - PSL
我可以问你其他问题吗?我能够理解你提供给我的演示,但当我尝试在我的代码中使用它时,当我添加 beforeEach(module('myApp.filters')); ,karma 会说找不到该模块的消息,但在我的 app.jsfilter.js 中,我使用的是相同的名称。我不知道一个好的方法来调试 karma,对不起我的提问方式不太合适哈哈哈。 - David Sttivend
忘记在过滤器名称后缀中添加“Filter”让我为解决无提供程序错误而烦恼。非常感谢! - demisx

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接