使用 Jasmine 对 Knockout Binding 处理程序进行单元测试

Question

我创建了一个依赖于用于格式化日期的时刻的绑定处理程序。我想使用 Jasmine 对这个绑定处理程序进行单元测试。

以下是我的绑定处理程序代码：

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
    };
});

我正在创建我的规范文件如下：

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);
            });
        });
    });
});

不确定从哪里开始测试以及需要测试哪些部分。

Answer 1

检查了淘汰规范，了解他们如何对自定义绑定进行单元测试。

他们使用 javascript 动态创建元素并应用 KO 绑定。

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('-');
            });
        });
    });
});