使用 $timeout 和 Jasmine 的模拟时钟的单元测试 Angular 服务

Question

我的一个 Angular 服务中有一个函数，我希望定期重复调用该函数。我想使用 $timeout 来做到这一点。它看起来像这样：

var interval = 1000; // Or something

var _tick = function () {
     $timeout(function () {
        doStuff();
        _tick();
    }, interval);
};

_tick();

目前，我对如何使用 Jasmine 进行单元测试感到困惑 - 我该怎么做？如果我使用$timeout.flush()，那么函数调用会无限期地发生。如果我使用 Jasmine 的模拟时钟，$timeout 似乎不受影响。基本上，如果我能做到这一点，我应该很高兴：

describe("ANGULAR Manually ticking the Jasmine Mock Clock", function() {
    var timerCallback, $timeout;

    beforeEach(inject(function($injector) {
        $timeout = $injector.get('$timeout');
        timerCallback = jasmine.createSpy('timerCallback');
        jasmine.Clock.useMock();
    }));

    it("causes a timeout to be called synchronously", function() {
        $timeout(function() {
            timerCallback();
        }, 100);
        expect(timerCallback).not.toHaveBeenCalled();
        jasmine.Clock.tick(101);
        expect(timerCallback).toHaveBeenCalled();
    });
});

这两种变体有效，但对我没有帮助：

describe("Manually ticking the Jasmine Mock Clock", function() {
    var timerCallback;

    beforeEach(function() {
        timerCallback = jasmine.createSpy('timerCallback');
        jasmine.Clock.useMock();
    });

    it("causes a timeout to be called synchronously", function() {
        setTimeout(function() {
            timerCallback();
        }, 100);
        expect(timerCallback).not.toHaveBeenCalled();
        jasmine.Clock.tick(101);
        expect(timerCallback).toHaveBeenCalled();
    });
});

describe("ANGULAR Manually flushing $timeout", function() {
    var timerCallback, $timeout;

    beforeEach(inject(function($injector) {
        $timeout = $injector.get('$timeout');
        timerCallback = jasmine.createSpy('timerCallback');
    }));

    it("causes a timeout to be called synchronously", function() {
        $timeout(function() {
            timerCallback();
        }, 100);
        expect(timerCallback).not.toHaveBeenCalled();
        $timeout.flush();
        expect(timerCallback).toHaveBeenCalled();
    });
});

提前致谢！

Answer 1

不要使用 Jasmine 的时钟使您的测试异步。相反，使用$timeout.flush() 来同步维护测试流程。设置起来可能有点棘手，但一旦你得到它，你的测试会更快，更可控。

下面是一个使用这种方法进行测试的示例： https://github.com/angular/angular.js/blob/master/test/ngAnimate/animateSpec.js#L618

Answer 2

@matsko 的回答让我走上了正确的道路。我想我会发布我的“完整”解决方案，以便更轻松地找到答案。

要测试的东西

angular.module("app").service("MyService", function() {
    return {
        methodThatHasTimeoutAndReturnsAPromise: function($q, $timeout) {
            var deferred = $q.defer();
            $timeout(function() {
                deferred.resolve(5);
            }, 2000);
            return deferred.promise;
        }
    };
});

测试

describe("MyService", function() {
    var target,
        $timeout;
    beforeEach(inject(function(_$timeout_, MyService) {
        $timeout = _$timeout_;
        target = MyService;
    }));
    beforeEach(function(done) {
        done();
    });
    it("equals 5", function(done) {
        target.methodThatHasTimeoutAndReturnsAPromise().then(function(value) {
            expect(value).toBe(5);
            done();
        });
        $timeout.flush();
    });
});