StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POunit testing custom knockoutjs binding
text
Body
copied!<p>How can I unit test this knockoutjs binding where I call a certain function 'myValueAccessor' when the element is swiped on my touchpad?</p> <p>I am also unsure what the unit should or is able to test at all here.</p> <p>It would be ok for the first time to assert wether myValueAccessor is called.</p> <p>But how can I trigger/imitate or should I say mock... the swiperight event?</p> <pre><code>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' }; </code></pre> <p><strong>UPDATE</strong></p> <p>I have put here my unit test with mocha.js</p> <p>I can outcomment the 'value()' in the binding but still the test succeeded thats odd.</p> <p>Is it not correct to put this (as a test):</p> <pre><code>function (element,args) { alert('assertion here'); } </code></pre> <p>as a 3rd parameter into the ko.test function?</p> <pre><code> 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 () { }); </code></pre> <p>UPDATE:</p> <p>custom.bindings.js:</p> <pre><code>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(); }); }); } }; }; }); </code></pre> <p>unittest.js:</p> <p>how can I connect this code to knockout in my test?</p> <p><strong>UPDATE</strong></p> <p>The Bindings is injected via require.js from my bindings.js file:</p> <pre><code>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"); }); }); }); </code></pre> <p>bindings.js</p> <pre><code>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(); }); }); } }; }; }); </code></pre> <p>myviewmodel.js</p> <pre><code>... ko.bindingHandlers.tap = new Bindings(); ... </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload