如何单元测试的setInterval因果报应angularjs [英] how to unit-test setInterval in karma angularjs

问题描述

app.directive('shuffleBlocks', function($timeout){
    return {
        link: function(sco,ele,att){
            if (itemCnt <= 1) return;

            /*Trigger function*/
            function triggerEvent(){
                ...
            }
            ele.bind('click', triggerEvent);

            setInterval(triggerEvent, 5000);
        }
    }
})

在这里我写的测试

here I wrote the test

        var elem = '<div shuffle-blocks><div>';
        elem = mockCompile(elem)(rootScope.$new());
        setInterval(function(){
            expect(......).toBe(....)
        });

显然，这不是正确的方法，
没有人知道如何测试因果报应$超时和setInterval？

Obviously this is not the right method, does anyone know how to test $timeout and setInterval in karma?

推荐答案

更新：在角1.2+应用嘲讽的setInterval的正确方法是使用角的 $间隔服务。使用 $间隔服务提供了许多好处，但在这种情况下最普遍使用的一个是 $ interval.flush（）方法。在编写测试时， $间隔公开了一个 .flush（）方法，它可以让你的模拟时钟JS

UPDATE: The proper method of mocking setInterval in an angular 1.2+ application is to use angular's $interval service. Using the $interval service provides a number of benefits, but the one of most use in this situation is the $interval.flush() method. When writing tests, $interval exposes a .flush() method which allows you to mock the JS clock.

app.directive('shuffleBlocks', function($timeout, $interval){
    return {
        link: function(sco,ele,att){
            if (itemCnt <= 1) return;

            /*Trigger function*/
            function triggerEvent(){ ... }
            ele.bind('click', triggerEvent);

            $interval(triggerEvent, 5000);
        }
    }
});

，然后在你的单元测试：

and then in your unit test:

var elem = '<div shuffle-blocks><div>';
elem = mockCompile(elem)(rootScope.$new());
$interval.flush(5000); // flush accepts the # of ms to be flushed
expect(......).toBe(....);

希望这是有帮助的人谁​​查找在未来这个答案。我会离开我的previous答案为那些还在使用1.1​​X。

Hope that's helpful to anyone who looks up this answer in the future. I'll leave my previous answer for those still using 1.1X.

previous答：根据茉莉文档，你应该能够只使用 jasmine.Clock.useMock（）函数模拟典型的JavaScript时钟和人工时间间隔的工作方式。由于角只是包裹本地的setTimeout 功能，我很积极的，应该让这个工作，虽然我没有测试它是肯定的。

Previous Answer: According the jasmine docs, you should be able to just use the jasmine.Clock.useMock() function to mock the typical javascript clock and manually work your way through the interval. Since angular is just wrapping the native setTimeout function, I'm quite positive it should allow this to work, though I haven't tested it to be sure.

1.3版本茉莉花文档是这里。以下是一个演示它是如何工作的code的例子。

The jasmine docs for version 1.3 are here. Here's the code example that demonstrates how it works.

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();
});

我看到的唯一的问题是，你的 triggerEvent时（）的功能是您的本地链接功能，所以我不知道该怎么你就可以去它嘲笑它。但希望指向你在正确的方向。如果没有，对不起，我试过了。

The only issue I see is that your triggerEvent() function is local to your link function, so I don't know how you'll be able to get to it to mock it. But hopefully that points you in the right direction. If not, sorry, I tried.

更新：作为嘲讽时钟的语法已在改变茉莉花2.0 。如果使用的是2.0，请参阅最新的文档<一个href=\"http://jasmine.github.io/2.0/introduction.html#section-Mocking_the_JavaScript_Timeout_Functions\"相对=nofollow>这里。

UPDATE: The syntax for mocking the clock has changed in Jasmine 2.0. If you are using 2.0, please see the updated docs here.

这篇关于如何单元测试的setInterval因果报应angularjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！