Angularjs 如何使用Karma和Sinon监视角度过滤器

如果我有这样的服务和过滤器：

angular.module('myApp', [])

.filter('myFilter', [function() {
    return function() { return 1; };
}])

.service('myServiceWhichCallsMyFilter', ['$filter', function($filter) {
    this.callTheFilter = $filter('myFilter');
}]);

describe('myFilterTest', function() {
    var $filter;

    beforeEach(module('myApp'));

    beforeEach(inject(function (_$filter_) {
        $filter = _$filter_;
    }));

    it('should filter correctly', function() {
        var filteredValue = $filter('myFilter')(100);
        expect(filteredValue).to.equal(1); // passes
    });
});

describe('myServiceTest', function() {
    var myServiceWhichCallsMyFilter;
    var myFilterSpy = sinon.spy();

    beforeEach(module('myApp'));

    beforeEach(module(function ($provide) {
        $provide.value('myFilter', myFilterSpy);
    }));

    beforeEach(inject(function (_myServiceWhichCallsMyFilter_) {
        myServiceWhichCallsMyFilter = _myServiceWhichCallsMyFilter_;
    }));

    it('should call myFilter', function() {
        myServiceWhichCallsMyFilter.callTheFilter();
        expect(myFilterSpy.callCount).to.equal(1); // fails - callCount is 0
    });
});

还有这样的测试：

angular.module('myApp', [])

.filter('myFilter', [function() {
    return function() { return 1; };
}])

.service('myServiceWhichCallsMyFilter', ['$filter', function($filter) {
    this.callTheFilter = $filter('myFilter');
}]);

describe('myFilterTest', function() {
    var $filter;

    beforeEach(module('myApp'));

    beforeEach(inject(function (_$filter_) {
        $filter = _$filter_;
    }));

    it('should filter correctly', function() {
        var filteredValue = $filter('myFilter')(100);
        expect(filteredValue).to.equal(1); // passes
    });
});

describe('myServiceTest', function() {
    var myServiceWhichCallsMyFilter;
    var myFilterSpy = sinon.spy();

    beforeEach(module('myApp'));

    beforeEach(module(function ($provide) {
        $provide.value('myFilter', myFilterSpy);
    }));

    beforeEach(inject(function (_myServiceWhichCallsMyFilter_) {
        myServiceWhichCallsMyFilter = _myServiceWhichCallsMyFilter_;
    }));

    it('should call myFilter', function() {
        myServiceWhichCallsMyFilter.callTheFilter();
        expect(myFilterSpy.callCount).to.equal(1); // fails - callCount is 0
    });
});

…我怎样才能通过第二次考试？在该测试中，我只关心服务是否正在调用过滤器（而不是过滤器的正确性，我单独测试），所以我想模拟它。但是，

$provide.value（'myFilter'，myFilterSpy）

似乎不起作用

angular.module('myApp', [])

.filter('myFilter', [function() {
    return function() { return 1; };
}])

.service('myServiceWhichCallsMyFilter', ['$filter', function($filter) {
    this.callTheFilter = $filter('myFilter');
}]);

看，您的服务实际上并没有调用$filter，它只是实例化了它

如下更改行，您的测试将“通过”，尽管您正在更改行为，以便。。。弄清楚你想要它做什么

this.callTheFilter = $filter('myFilter')(100);

---

明白了：在第二次测试中，我需要

$以
myFilterFilter
的名义提供我的间谍过滤器：

describe('myServiceTest', function() {
    var myServiceWhichCallsMyFilter;
    var myFilterSpy  = sinon.spy();

    beforeEach(module('myApp'));

    beforeEach(module(function ($provide) {
        $provide.value('myFilterFilter', myFilterSpy );
    }));

    beforeEach(inject(function (_myServiceWhichCallsMyFilter_) {
        myServiceWhichCallsMyFilter = _myServiceWhichCallsMyFilter_;
    }));

    it('should call myFilter', function() {
        expect(myFilterSpy.callCount).to.equal(0); // callTheFilter has not been called!
        myServiceWhichCallsMyFilter.callTheFilter();
        expect(myFilterSpy.callCount).to.equal(1); // passes
    });
});

文档中确实提到了这一点：。
不，如果我做了更改，测试不会通过。它在调用smyFilter.callTheFilter（）

的MyService上出错，因为

callTheFilter

将被分配给筛选函数1的结果，该函数本身不是一个函数。我不希望服务调用过滤器；我希望它公开一个调用过滤器的函数。然后我想测试调用该函数是否会调用过滤器。