How to Unit Test with Qunit a Knockout View Model

Question

Supposed this is my view model

function VM()
{
    var self = this;

    this.Status = ko.observable(false);

    this.A = ko.observable();

    this.B = ko.computed(
        function()
        {
            return self.A();
        }
    ).extend( throttle: 200 );

    this.B.subscribe(
        function()
        {
            self.Status(true);

            setTimeout( //ajax simulation
                function(){
                    self.Status(false);
                }

            ,200)
        }
    );

}

I want a test that verifies status toggles between true and false as A is set but i can't get past the dual async nature of the VM. Is there a way to test this with multiple stop()/start() calls?

Answer 1

If you only what to test that the Status toggles between true and false I would just subscribe on the Status change and check in the change callback that the first time I get the value true and the second time the value false.

Writing your test this way you would need to have one start/stop pair, something like this:

asyncTest("computed with ajax", function () {
    expect(2); // expecting two asserts, so the Status only changes twice
    var sut = new VM();
    // multiple calls to A to test the throttle behavior
    sut.A('something');
    sut.A('something2');
    sut.A('something3');
    stop();
    var callCount = 0;
    var expectedValues = [true, false];
    sut.Status.subscribe(function (value) {
        start();
        equal(sut.Status(), expectedValues[callCount]);
        callCount++;
    });
});

Demo JSFiddle.