Unit Testing Knockout Binding Handlers with Jasmine

Question

I have created a binding handler dependent on moment which is used for formatting the date. I wanted to unit test this binding handler using Jasmine.

Below is my binding handler code:

define(['knockout', 'moment'], function (ko, moment) {

    'use strict';
    ko.bindingHandlers.date = {
        update: function (element, dateValue, allBindings) {
            var date = ko.utils.unwrapObservable(dateValue()) || '-',
                format = allBindings.get('format'),
                formattedDate = function () {
                    return moment(date).format(format);
                };
            ko.bindingHandlers.text.update(element, formattedDate);
        }
    };

    return {
        dateBinding: ko.bindingHandlers.date
    };
});

I am creating my spec file as below:

define(['testUtils', 'jquery', 'knockout'], function (testUtils, $, ko) {

    'use strict';
    ddescribe('utils/date.binding', function () {

        var testee;

        beforeEach(function (done) {
            testUtils.loadWithCurrentStubs('utils/date.binding', function (dateUtils) {
                testee = dateUtils;
                done();
            });
        });

        afterEach(function () {
            testUtils.reset();
        });

        describe('ko.bindingHandlers.date', function () {
            var element = document.createElement();

            it('should be true', function () {
                expect(true).toBe(true);
            });
        });
    });
});

Not sure where to start testing and what parts needs to be tested.

Answer 1

Checked the knockout specs on how they are unit testing the custom bindings.

They create the elements dynamically using javascript and apply KO bindings one them.

define(['testUtils', 'knockout', 'moment', 'utils/date.binding'], function (testUtils, ko, moment) {

    'use strict';
    ddescribe('utils/date.binding', function () {

        var testee,
            targetElement,
            dateValue;

        beforeEach(function (done) {
            testUtils.loadWithCurrentStubs('utils/date.binding', function (dateUtils) {
                testee = dateUtils;
                done();
            });
        });

        afterEach(function () {
            testUtils.reset();
        });

        function createTestNode() {
            targetElement = document.createElement('div');
            targetElement.innerHTML = '<div id="dateBindingElement" data-bind="date: dateValue, format: \'DD MMM YYYY\'"></div>';
            document.body.appendChild(targetElement);
        }

        function deleteTestNode() {
            var element = document.getElementById("dateBindingElement");
            element.parentNode.removeChild(element);
        }

        describe('ko.bindingHandlers.date', function () {

            beforeEach(createTestNode);
            afterEach(deleteTestNode);

            it('should take an observable date 02-01-2017 and format it to DD MMM YYYY format - 01 Feb 2017', function () {
                dateValue = ko.observable('02-01-2017');
                ko.applyBindings({dateValue: dateValue}, targetElement);
                expect(document.getElementById('dateBindingElement').innerHTML).toBe('01 Feb 2017');
            });

            it('should take a string date 02-01-2017 and format it to DD MMM YYYY format - 01 Feb 2017', function () {
                dateValue = '02-01-2017';
                ko.applyBindings({dateValue: dateValue}, targetElement);
                expect(document.getElementById('dateBindingElement').innerHTML).toBe('01 Feb 2017');
            });

            it('should take any date (string or observable) and conver it to requested format. 02-01-2017 to MM DD YY', function () {
                dateValue = '02-01-2017';

                targetElement.innerHTML = '<div id="dateBindingElement" data-bind="date: dateValue, format: \'MM-DD-YY\'"></div>';
                document.body.appendChild(targetElement);

                ko.applyBindings({dateValue: dateValue}, targetElement);
                expect(document.getElementById('dateBindingElement').innerHTML).toBe('02-01-17');
            });

            it('should return - if the date value is null or undefiled or blank', function () {
                dateValue = '';
                ko.applyBindings({dateValue: dateValue}, targetElement);
                expect(document.getElementById('dateBindingElement').innerHTML).toBe('-');
            });
        });
    });
});