单元测试自定义knockoutjs绑定

时间:2013-05-27 13:05:35

标签: unit-testing knockout.js

我怎样才能测试这个knockoutjs绑定,当我在触摸板上刷一个元素时,我调用某个函数'myValueAccessor'?

我也不确定该单位应该或能够在这里测试什么。

第一次断言myValueAccessor被调用就可以了。

但我怎么能触发/模仿,或者我应该说嘲笑... swiperight事件?

ko.bindingHandlers.tap = {
    'init': function (element, valueAccessor) {
        var value = valueAccessor();    

        var hammertime1 = Hammer(element).on("swiperight", function (event) {
            $(element).fadeOut('fast', function () {
                value();
            });
        });
    }
};

 self.myValueAccessor = function () {
    location.href = 'set a new url'
};

更新

我已经在这里使用mocha.js进行单元测试

我可以在绑定中取消'value()',但测试仍然是奇怪的。

把它作为测试是不正确的:

function (element,args) {
                    alert('assertion here');
                }

作为ko.test函数的第3个参数?

  ko.bindingHandlers.tap = {
                    'init': function (element, valueAccessor) {
                        var value = valueAccessor();

                        var hammertime1 = $(element).on("swiperight", function (event) {
                            $(element).fadeOut('fast', function () {
                                //value();
                            });
                        });
                    }
                };

                // Subscribe the swiperight event to the jquery on function
                $.fn.on = function (event, callback) {
                    if (event === "swiperight") {
                        callback();
                    }
                };

                // Subscribe the fadeOut event to the jquery fadeOut function
                $.fn.fadeOut = function (speed, callback) {
                    callback();
                };


                ko.test("div", {
                    tap: function () {
                        assert.ok(true, "It should call the accessor");
                    }
                }, function () {
                });

更新:

custom.bindings.js:

define(['knockout','hammer'], function (ko,Hammer) {
    return function Bindings() {

        ko.bindingHandlers.tap = {
            'init': function (element, valueAccessor) {
                var value = valueAccessor();

                var hammertime1 = Hammer(element).on("swiperight", function (event) {
                    $(element).fadeOut('fast', function () {
                        value();
                    });
                });
            }
        };
    };
});

unittest.js:

如何在测试中将此代码连接到淘汰赛?

更新

Bindings是通过我的bindings.js文件中的require.js注入的:

describe("When swiping left or right", function () {
            it("then the accessor function should be called", function () {

                ko.bindingHandlers.tap = new Bindings();

                Hammer.Instance.prototype.on = function (event, callback) {
                    if (event === "swiperight") {
                        callback();
                    }
                };

                $.fn.fadeOut = function (speed, callback) {
                    callback();
                };
                var accessorCalled = false;
                ko.test("div", {
                    tap: function () {
                        accessorCalled = true;
                    }
                }, function () {
                    assert.ok(accessorCalled, "It should call the accessor");
                });

            });
        });

bindings.js

define(['knockout','hammer'], function (ko,Hammer) {
    return function () {

        return {
            'init': function (element, valueAccessor) {
                var value = valueAccessor();

                var hammertime1 = Hammer(element).on("swiperight", function (event) {
                    $(element).fadeOut('fast', function () {
                        value();
                    });
                });
            }
        };
    };
});

myviewmodel.js

...

ko.bindingHandlers.tap = new Bindings();

...

1 个答案:

答案 0 :(得分:5)

您可以检查我的绑定集合以了解如何测试 https://github.com/AndersMalmgren/Knockout.Bindings/tree/master/test

这是我使用

进行所有测试的功能
ko.test = function (tag, binding, test) {
    var element = $("<" + tag + "/>");
    element.appendTo("body");
    ko.applyBindingsToNode(element[0], binding);
    var args = {
        clean: function () {
            element.remove();
        }
    };
    test(element, args);

    if (!args.async) {
        args.clean();
    }
};

编辑:抱歉忘了嘲笑,你只是做

$.fn.on = function() {
}

我不知道你想在该代码中测试什么样的逻辑,因为几乎没有,但是这样的东西 http://jsfiddle.net/Akqur/

修改 如果我挂钩你的装订,你会感到困惑吗?它在这里完成了

{ 
   tap: function() {
      ok(true, "It should call the accessor");
   }
}

我告诉ko连接一个“tap”绑定,而不是挂钩到一个observable我使用一个mocking函数,当你的自定义bindnig从fadeout函数调用value()时,测试断言将触发

修改 也许这个approuch对你更有意义? http://jsfiddle.net/Akqur/5/ 请注意,它仅在您的代码执行同步时才有效

修改 在这里,我使用ko.test的第三个参数 http://jsfiddle.net/Akqur/8/