javascript - 测试使用 jQuery 的 Angular 指令

Question

我在为一些 Angular 指令编写单元测试时遇到问题。特别是那些在指令中使用 jQuery 的。我设计了一个下面的最小示例来说明我的问题。

这个愚蠢的指令将点击事件绑定(bind)到元素。单击时，它会隐藏元素。 According to Angular ，传递给指令的元素将被包装为 jQuery 元素。如果 jQuery 可用，它将使用 jQuery，否则它将使用 Angular 的 jQuery Lite。实际上，如果我在包含 jQuery 的浏览器中使用此指令，该指令会起作用并将隐藏被单击的元素。

angular.module('myApp').directive('clickhide', function() { return {
    link: function(scope, element, attrs) { 
        element.bind('click', function(e) {
            element.hide();
            scope.$digest();
        });
    }
}});

这是该指令的 Karma 单元测试规范:

describe('clickhide', function() {
    var scope, elm;

    beforeEach(module('MyApp'));

    beforeEach(inject(function($rootScope, $compile) {
        scope = $rootScope;
        elm = angular.element('<div clickhide></div>');
        $compile(elm)(scope);
        scope.$digest();
    }));

    it('should do a click', function() {
        elm[0].click();
        //OOPS: undefined is not a function error
        expect($(elm).find(":hidden").length).toBe(1);
    });
});

当我运行此测试时，它失败并出现“undefined is not a function”错误，这意味着未加载 jQuery 并且 Angular 使用了 jQuery Lite，它没有定义 hide()。

我找到了两种方法来解决这个问题。

1. 不要使用 jQuery。需要重写我不想做的指令。

2. 在我的指令中显式包装元素以使其成为 jQuery 元素:$(element).hide()。还需要修改我的指令，我不想这样做。如果没有办法，我当然可以这样做。

我觉得应该可以让 Angular 在单元测试时自动在指令中使用 jQuery，就像在 Web 浏览器中使用时一样。我认为关键点是 Angular 文档中的这一行:

To use jQuery, simply load it before DOMContentLoaded event fired.

当 DOMContentLoaded 在运行单元测试时发生时，我不清楚。我的 karma 配置文件包括 jQuery 作为第一个文件，在 Angular 之前:

module.exports = function(config) {
  config.set({
    basePath: '../../',
    frameworks: ['jasmine', 'ng-scenario'],
    files: [
      'app/bower_components/jquery/dist/jquery.min.js',
      'app/bower_components/angular/angular.js',
      'app/bower_components/angular-route/angular-route.js',
      'app/bower_components/angular-sanitize/angular-sanitize.js',
      'app/bower_components/angular-mocks/angular-mocks.js',
      ...
    ],
    exclude: [],
    reporters: ['progress'],
    port: 9876,
    runnerPort: 9100,
    colors: true,
    logLevel: config.LOG_INFO,
    autoWatch: true,
    browsers: ['Chrome'],
    captureTimeout: 60000,
    singleRun: false
  });
};

我需要在测试中注入(inject) jQuery 吗？也许这是 karma 的限制？有人知道吗？

Answer 1

尝试在 beforeEach 测试 block 中覆盖 $。

beforeEach(function() {
  $.fn.hide = function() {
    this.css( "display", "none" )
  };
});