AngularJS 单元测试 DateTimePicker答案

【问题标题】：AngularJS unit test DateTimePickerAngularJS 单元测试 DateTimePicker
【发布时间】：2015-07-04 19:51:40
【问题描述】：

我正在尝试为使用 eonasdan-bootstrap-datetimepicker (https://github.com/Eonasdan/bootstrap-datetimepicker) 的指令编写单元测试。该指令的代码如下所示：

'use strict';

angular.module('directives')
.directive('datepicker', ['$moment', function ($moment) {
    return {
        restrict: 'A',
        require: 'ngModel',
        link: function (scope, element, attributes, ctrl) {
            angular.element(document).ready(function(){
                var jElem = $(element);
                jElem.datetimepicker({
                    icons: {
                        time: "fa fa-clock-o",
                        date: "fa fa-calendar",
                        up: "fa fa-arrow-up",
                        down: "fa fa-arrow-down",
                        next: "fa fa-arrow-right",
                        previous: "fa fa-arrow-left"
                    },
                    format: 'D MMMM'
                });
                var picker = jElem.data("DateTimePicker");

                ctrl.$parsers.push(function (value) {
                    var date = $moment(value);
                    if (date.isValid()) {
                        return date.format('D/M');
                    }
                    return '';
                });

                $(element).on('dp.change', function (event) {
                    scope.$apply(function() {
                        var date = picker.date();
                        if (date && date.valueOf) {
                            ctrl.$setViewValue(date.valueOf());
                        }
                    });
                    element[0].blur();
                });
            });
        }
    };
}]);

我正在尝试对事件 dp.change 进行报道，但我不知道如何触发 jQuery 事件。我试着做这样的事情：

'use strict';

describe('Specs for datepicker', function()
{
    var scope;
    var $compile;
    var form;

    beforeEach(module('directives'));
    beforeEach(inject(function($rootScope, _$compile_) {
        $compile = _$compile_;
        scope = $rootScope.$new();
        var html =  "<form name='test_form'"+
                          " novalidate>"+
                          "<fieldset>"+
                                "<input type='text' "+
                                       "ng-model='dt' "+
                                       "datepicker "+
                                       "class='form-control date' "+
                                       "name='date' "+
                                       "value=''/>"+
                          "</fieldset>"+
                    "</form>"
        form = $compile(angular.element(html))(scope);
        scope.$digest();
    }))

    it('should react to dp.change', function()
    {
        scope.test_form.date.$setViewValue('1 Jan');
        scope.$digest();
        var element = $(form).find('input');
        var dp = $(element.find('datepicker'));
        dp.triggerHandler(new $.Event('dp.change'));
        scope.$digest();
        expect(scope.dt).toEqual('1/1');
    });
});

我尝试了很多其他的东西，但没有什么能让我在处理程序中得到覆盖。有什么建议可以解决这个问题吗？

【问题讨论】：

标签： jquery angularjs unit-testing jasmine jquery-events

【解决方案1】：

在你的测试中，替换

form = $compile(angular.element(html))(scope);

任一个

form = $compile(angular.element('<div>' + html + '</div>'))(scope);

或简单地通过

form = $compile(html)(scope);

问题是angular.element 在传递给$compile 之前剥离了顶部父元素。

【讨论】：

【解决方案2】：

你应该试试

scope.test_form.date.$setViewValue('1 Jan');
scope.$digest();
var element = $(form).find('input');
element.triggerHandler(new $.Event('dp.change'));
expect(scope.dt).toEqual('1/1');

【讨论】：