Angular 指令的 Jasmine 单元测试

Question

我有以下角度指令，当我将鼠标悬停在跨度上时会添加一个工具提示。

angular.module('mainMod')
    .directive('toolTip', [function() {
        return {
            restrict: 'A',
            scope: {
                theTooltip: '@toolTip'
            },
            link: function(scope, element, attrs){
                element.tooltip({ 
                        delay: 0, 
                        showURL: false, 
                        bodyHandler: function() {
                            return jQuery('<div class="hover">').text(scope.theTooltip);
                        } 
                });
            }
        }
    }])
    ;


<span ng-show="data.tooltip" class="icon" tool-tip="{{data.tooltip}}"></span>

我正在为此指令编写单元测试，atm 我不能使用jasmine-jquery。

我对编写单元测试还很陌生，谁能帮帮我？

给我一​​些建议或指向一些有用的资源？

任何意见或建议将不胜感激。

我的atm并不多......

describe('Unit testing tooltip', function() {
    var $compile;
    var $rootScope;

    // Load the myApp module, which contains the directive
    beforeEach(module('mainMod'));

    // Store references to $rootScope and $compile
    // so they are available to all tests in this describe block
    beforeEach(inject(function(_$compile_, _$rootScope_){
      // The injector unwraps the underscores (_) from around the parameter names when matching
      $compile = _$compile_;
      $rootScope = _$rootScope_;
    }));


    it(' ', function() {
        // Compile a piece of HTML containing the directive
        FAILS HERE --> var element = $compile("<span class='icon' tool-tip='{{data.tooltip}}'></span>")($rootScope); 

        $rootScope.$digest();

    });
});

失败并显示

消息

TypeError: undefined is not a function

我认为这是由我上面指定的行末尾的 ($rootScope) 引起的。

Answer 1

在编译之前，你必须先用 angular.element 包装你的 DOM 内容。我不确定您使用的是什么工具提示模块，但我使用了 jQuery UI 工具提示。

    //create a new scope with $rootScope if you want
    $scope  = $rootScope.$new();

    var element = angular.element("<span class='icon' tool-tip='This is the tooltip data'></span>");

    //use the current scope has just been created above for the directive
    $compile(element)($scope);

还有一件事，因为您在指令中使用了隔离作用域，要从指令中获取当前作用域，您需要调用

   element.isolateScope()

基于此参考：How to Unit Test Isolated Scope Directive in AngularJS

对于一个工作小提琴，你可以在这里找到它：http://jsfiddle.net/themyth92/4w52wsms/1/

Answer 2

任何单元测试基本上都是一样的——模拟环境，构建单元，检查单元是否以预期的方式与环境交互。在这种情况下，您可能想要模拟工具提示创建者

spyOn(jQuery.fn, 'tooltip');

然后使用指令编译一些模板（你已经在做），然后在编译的元素上模拟悬停事件，然后检查是否以预期的方式调用了工具提示创建者

expect(jQuery.fn.tooltip).toHaveBeenCalledWith(jasmine.objectContaining({
    // ... (expected properties)
}));

如何模拟事件取决于element.tooltip 应该如何工作。如果它真的像你在问题代码中使用的那样工作，你根本不需要模拟任何东西，只需在模板编译后检查预期的交互即可。