jquery - AngularJS 单元测试 DateTimePicker

Question

我正在尝试为使用 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');
    });
});

我尝试了很多其他东西，但没有任何东西可以让我覆盖处理程序内部。有什么建议如何解决这个问题吗？

Answer 1

在您的测试中，替换

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

通过任一

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

或者简单地通过

form = $compile(html)(scope);

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