使用 Jasmine 测试工厂时如何模拟 $compile 函数答案

【问题标题】：How to mock $compile function when testing a factory with Jasmine使用 Jasmine 测试工厂时如何模拟 $compile 函数
【发布时间】：2016-04-04 13:59:43
【问题描述】：

我的问题与this post 非常相似，但只是不同，以至于接受的答案对我不起作用。本质上，我有一个使用 $compile 的 Angular 工厂，它返回一个承诺，我想在 Jasmine 中模拟它。这是工厂的简化版本：

angular.module('app.common')
.factory('myFactory', myFactory);

myFactory.$inject = ['$compile', '$rootScope'];
function myFactory($compile, $rootScope) {
    var factory = {
        testFunc: testFunc
    }
    return factory;

    function testFunc(stuff) {
        angular.element(document.body).append($compile(stuff)($rootScope));
    }
}

这是我的测试：

describe("Common", function() {
    // I have many common services
    beforeEach(function() {
        angular.mock.module('app.common');
    });

    describe("Factory Example: ", function() {
        var mockCompile, mockRoot, aFactory;

        beforeEach(function() {
            module(function($provide) {
                $provide.value('$compile', jasmine.createSpy('$compile'));
                $provide.value('$rootScope', jasmine.createSpy('$rootScope'));
            });
        });

        beforeEach(inject(function($compile, $rootScope, myFactory, $q) {
            mockCompile = $compile;
            mockCompile = function() {
                var deferred = $q.defer();
                deferred.resolve('remote call result');
                return deferred.promise;
            };
            mockRoot = $rootScope;
            aFactory = myFactory;
        }));

        it('should work', function() {

            aFactory.testFunc('stuff');
            expect(true).toBe(true);
        });
    });
});

这段代码向我抱怨 $compile 没有返回承诺。 $provide 似乎不知道注入的新函数分配。我一直在研究它，但我是 Jasmine 的新手，所以我真的不知道我在做什么。任何帮助将不胜感激 - 如果有更简单的方法来做我想做的事情，请告诉我！

【问题讨论】：

标签： javascript angularjs jasmine

【解决方案1】：

好的，万岁，我解决了！

对于那些可能对未来感兴趣的人：第一个问题是我错误地假设 $compile 返回了一个承诺，但事实并非如此。它返回一个以作用域为参数的函数。如果您确实需要模拟返回 Promise 的函数，请查看 this post，它帮助我了解如何操作。

当然，这对我不起作用，因为我需要做的就是让我的模拟 $compile 返回一个函数。以下代码对我有用：

describe("Common", function() {
// I have many common services
beforeEach(function() {
    angular.mock.module('app.common');
});

describe("Factory Example: ", function() {
    var mockCompile, mockRoot, aFactory;

    beforeEach(function() {
        module(function($provide) {
            // Just use callFake to have $compile return a function
            $provide.value('$compile', jasmine.createSpy().and.callFake(function() {
                return function(scope) { scope(); };
            });
            $provide.value('$rootScope', jasmine.createSpy());
        });
    });

    beforeEach(inject(function($compile, $rootScope, myFactory, $q) {
        mockCompile = $compile;
        mockRoot = $rootScope;
        aFactory = myFactory;
    }));

    it('should work', function() {

        aFactory.testFunc('stuff');
        expect(mockCompile).toHaveBeenCalled();
        expect(mockRoot).toHaveBeenCalled();
    });
});

【讨论】：