kotest

Test Knockout 3.2 components and custom binding handlers with ease.

Dependencies

• KnockoutJS
• Mocha

This library supports loading via AMD or as a global object, but mocha always needs to in the global scope. Knockout's alias should be set to ko.

In the examples below and in unit tests expect.js and jQuery are used for brevity.

Usage

Testing Components

Assume you have a component defined:

function LoginComponent(params) {
    this.username = ko.observable();
    this.password = ko.observable();
    this.onSubmit = params.onSubmit;
}
LoginComponent.prototype.submit = function() {
    this.onSubmit({
        username: this.username(),
        password: this.password()
    });
};

And the template variable containing:

<form data-bind="submit: onSubmit">
    <input name="user" type="text" data-bind="value: username">
    <input name="pass" type="text" data-bind="value: password">
    <input type="submit">
</form>

And you wish to test if it works correctly:

var credentials;
 
var params = {
    onSubmit: function(creds) {
        credentials = creds;
    }
};
 
kotest().defineComponent('login-component', {
    viewModel: LoginComponent,
    template: template
}).component('login-component', params).test('my first test', function(ctx) {
    before(function() {
        var $element = $(ctx.element);
        $element.find('input[name=user]').val('john').change();
        $element.find('input[name=pass]').val('p455w0rd').change();
        $element.find('form').submit();
    });
    it('should have called params.onSubmit() with credentials', function() {
        expect(credentials).to.eql({
            username: 'john',
            password: 'p455w0rd'
        });
    });
});

Note that you can define multiple components with defineComponent(). This is useful if you want to test a component which depends on other components. If all of your components are already loaded, you can omit the defineComponent() call.

The kotest() function accepts an argument. It is the id of the test element in the dom to append the dynamically created elements for the test to. The default value of this argument is 'test', so you should an empty (div) element defined in your main test html file.

Testing Binding Handlers

Let's say you have a custom binding handler:

var multiplier = {
    update: function(element, valueAccessor) {
        element.innerHTML = ko.utils.unwrapObservable(valueAccessor()) * 2;
    }
};

To test it's functionality, type:

var value = ko.observable(5);
 
kotest().defineBinding('multiplier', multiplier)
    .binding('multiplier', value).test('multiplier test', function(ctx) {
        it('should make the value double', function() {
            expect($(ctx.element).text()).to.eql(10);
        });
        it('should make the value double again', function() {
            value(10);
            expect($(ctx.element).text()).to.eql(20);
        });
    });

As with the previous example, you can omit the defineBinding() call if your custom binding handler is already set in ko.bindingHandlers.

For more information clone the repository and view the tests inside the test/js/ folder. The examples from this file can be found in the test/js/readme-examples/ folder. All tests can be run with npm test. See section Cloning and running tests below for more details.

API Reference

Available here.

Installing

bower install kotest

Cloning and running tests

git clone https://github.com/jeremija/kotest.git
npm test

This will also install all depenencies required for testing from the command line. You can also run these tests in browser. You will need to run HTTP server like http-server from the project's root directory:

npm install -g http-server
http-server

And then visit the http://localhost:8080/test/test.html page in your browser. Note that npm test should be performed at least once beforehand because it also downloads and installs all of the necessary dependencies and writes the configuration for tests.

License

MIT