Question

我有一个指令显示qtip工具提示悬停元素。我想为指令编写jasmine测试用例。但是我无法在html中找到qtip div。

我的代码是

var testModule = require('../Test.js');

testModule.directive('headerTooltip',['$compile','$filter', function($compile,$filter) {
    return {
        restrict: 'E',
        link : function(scope, element) {

            var template =  '<a id="tooltip">Test1</a>';
            element.html('').append( $compile( template )( scope ) );
            var qTipContent = '<div class="qTipContent" style="display: none;">'+
                '<h4>Hello</h4><div class="query content">Test tooltip on hover</div></div>';

            angular.element('#tooltip').qtip({
                id:'data-tooltip',
                overwrite:false,

                content: $compile(qTipContent)(scope),
                hide: { fixed: true, delay: 250 },
                style: { tip:{corner: true, width:22, height:12 }, padding: 10, border: { radius: 5, width: 3 }, width: 340,classes:'tooltip-qtip-data' },
                position: {  my:'bottom center', at:'top center' },
                show: { when: { event: 'mouseover'} }
            });
        }
    };
}]);

我的测试用例类似于

beforeEach(module('myModule'));

describe('headerTooltip Directive', function () {
    var element,scope,$compile,$document;
    beforeEach( inject(function(_$compile_, $rootScope,_$document_) {
    scope = $rootScope;
    $compile = _$compile_;
    $document = _$document_;
    }));

    it('should show tooltip on hover of header', function () {

    element = angular.element('<header-tooltip> </header-tooltip>');
    var template = $compile(element)(scope);
    scope.$digest();
    expect(template.find('a').length).toBe(1);
    expect(template.find('a').text().trim()).toBe('test1');
    template.find('a').trigger('mouseover');
    expect($document.find('body').find('#qtip-data-tooltip')).toBeDefined();
    expect($document.find('body').find('#qtip-data-tooltip').length).toBe(1);
    });

});

但最后期望的长度是失败。我曾尝试过angular.element，但它也没有用。我已经检查过，qtip内容数据直接在body标签中生成。

有人遇到这个问题吗？

感谢任何帮助。

谢谢，杰伊帕特尔

Angular js + jquery qtip和Jasmine Test case

0 个答案: