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

【问题标题】：AngularJS Directive testing a elm.on() bindingAngularJS 指令测试 elm.on() 绑定
【发布时间】：2014-04-11 13:41:38
【问题描述】：

我在使用以下指令的单元测试中遇到错误：

.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

据我所知，榆树没有 .on 功能或 .slideDown 功能。我该如何进行测试？

【问题讨论】：

slideDown 是一个 jquery 函数，你的测试可以使用 jquery 吗？
是的，还有jquery ui

标签： angularjs unit-testing jasmine karma-runner

【解决方案1】：

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

【讨论】：