AngularJS指令测试elm.on()绑定

Question

使用以下指令，Im在单元测试中会出现错误：

.directive('flashMessage', function() {
    return {
        restrict: "E",
        replace: true,
        template: "<div class='alert alert-{{flash.alert}}'>{{flash.msg}}</div>",
        scope: {
            flash: "="
        },
        link: function(scope, elem, attrs)
        {
            elem.on('click', function() {
                elem.hide('slow');
            });

            scope.$watch('flash', function() {
                if (scope.flash) {
                    elem.slideDown('slow');
                } else {
                    elem.hide();
                }
            });
        }
    };
})

单元测试：

describe('Flash Messenger', function()
{
    var elm, html, scope;

    beforeEach(module('common.directives'));

    beforeEach(inject(['$compile', '$rootScope', function($c, $r) {
        $compile = $c;
        $rootScope = $r.$new();
        elm = angular.element('<flash-message flash="flash"></flash-message>');
        console.log('BEFORE', elm);
        $compile(elm)($rootScope);
        $rootScope.$digest();
    }]));

    // tests start here
    it('should have an alert of success', function()
    {
        $rootScope.flash = {"alert":"success", "msg":"Success"};
        $rootScope.$digest();
    });
});

结果：

LOG: 'BEFORE', Object{0: <flash-message flash="flash"></flash-message>, length: 1}
Chrome 34.0.1847 (Windows 8) Flash Messenger should have an alert of success FAILED
        TypeError: undefined is not a function
            at link (E:/Repos/sandown/Source/Dev/site/js/directives.js?80b1c100e6d9acbd3c73fe2379761915ab1e05c0:9:18839)
            at k (E:/Repos/sandown/Source/Dev/site/client-src/angular-1.1.5/angular.min.js?8e113b67065c1c7245ea2e7aa89ea86860f32a85:44:444)
            at e (E:/Repos/sandown/Source/Dev/site/client-src/angular-1.1.5/angular.min.js?8e113b67065c1c7245ea2e7aa89ea86860f32a85:40:139)
            at E:/Repos/sandown/Source/Dev/site/client-src/angular-1.1.5/angular.min.js?8e113b67065c1c7245ea2e7aa89ea86860f32a85:39:205
            at null.<anonymous> (E:/Repos/sandown/Source/Dev/site/tests/unit/directives.test.js:12:16)
            at Object.d [as invoke] (E:/Repos/sandown/Source/Dev/site/client-src/angular-1.1.5/angular.min.js?8e113b67065c1c7245ea2e7aa89ea86860f32a85:28:304)
            at workFn (E:/Repos/sandown/Source/Dev/site/tests/lib/angular/angular-mocks.js:1876:20)
        Error: Declaration Location
            at window.inject.angular.mock.inject (E:/Repos/sandown/Source/Dev/site/tests/lib/angular/angular-mocks.js:1862:25)
            at null.<anonymous> (E:/Repos/sandown/Source/Dev/site/tests/unit/directives.test.js:7:13)
            at E:/Repos/sandown/Source/Dev/site/tests/unit/directives.test.js:1:1

从我所看到的是，elm没有.on函数或.slideDown函数。我该如何测试这个呢？

Answer 1

问题在于加载到karma.conf.js文件中的文件的顺序是问题所在。我对其进行了更改，以便首先加载jquery，现在问题得到了解决:)