无法在运行Karma的Jasmine中测试angularjs指令的多个实例

Question

我这里有一个超大案例。

我正在围绕jQuery插件编写包装指令，该指令将简单的html元素转换为面向反馈的正式视图。

<div my-directive>DirectiveContent</div>

由于插件不知道如何处理。 我的指令将其转换为如下形式：

<div my-directve><div class='myPlugin' ng-include></div></div>

这时我触发插件的init函数进行最终渲染。 （除其他外，它还会创建一个title元素。）

<div my-directve><div class='feedback feedbackSuccess' ng-include>
    <h2>Title</h2>
    My Content
</div></div>

问题是在我的业力茉莉花测试中，我可以做一个测试。 如果我再做一次，将无法正常工作。

这是我的指令：

module.directive("feedback", function(){
    return {
        restrict : "EA",
        replace : false,
        transclude : true,
        require : "feedback",
        template : "<div class='feedback' ng-transclude></div>",
        controller : function(){
            this.init = function(element){
                plugin.init(element);
            }
        },
        link : function(scope, element, attrs, cntrl){
            var feedback = element.find(".feedback");
            var type = scope.$eval(attrs.type) || "";
            var title = scope.$eval(attrs.title) || "";

            //route standard ric:xxx to actual child feedback element
            feedback.attr("ric:title", title );
            feedback.attr("ric:type", type );

            cntrl.init(feedback);
        }
    };
});

这是我的karma.conf.js：

basePath = '';

files = [
    JASMINE,
    JASMINE_ADAPTER,
    "path/to/plugin.js",
    "components/angular-unstable/angular.js",
    "components/angular-mocks/angular-mocks.js",
    {
        "pattern" : "./src/FeedbackDirective.js",
        "watched" : true,
        "included" : true,
        "served" : true
    },
    {
        "pattern" : "./tests/app.js",
        "watched" : true,
        "included" : true,
        "served" : true
    },
    {
        "pattern" : "./tests/fixtures/*.html",
        "watched" : true,
        "included" : true,
        "served" : true
    },
    './tests/**/*Spec.js'
];


// list of files to exclude
exclude = [];

preprocessors = {
  './tests/fixtures/*.html': 'html2js'
};

reporters = ['progress'];

port = 9876;

runnerPort = 9100;

colors = true;

logLevel = LOG_INFO;

autoWatch = true;

browsers = ['Chrome'];

captureTimeout = 60000;

singleRun = false;

最后是我的测试：

   describe('Feedback', function(){
    var $compile;
    var $rootScope;
    var $templateCache;
    var $timeout;
    var testWrap;

    beforeEach(module(
            'app',
            "tests/fixtures/vanilla.html"
        ));

    beforeEach(function(){
        inject(function(_$compile_, _$rootScope_, _$templateCache_, _$timeout_){
            $compile = _$compile_;
            $rootScope = _$rootScope_;
            $templateCache = _$templateCache_;
            $timeout = _$timeout_;

            testWrap = angular.element("<div id='test-wrap'></div>");
        });
    });

    afterEach(function(){
        $rootScope.$destroy();
        testWrap.remove();
    });
    /**
     * Test ONE
     */
    describe("'Vanilla'", function(){
        it("will be instantiated with a 'feedbackSuccess' class", function(){
            var tmpl = angular.element('<div my-feedback>Test Content</div>');

            element = $compile(tmpl)($rootScope);
            testWrap.append(element);
            $rootScope.$digest();
            expect( testWrap.find(".feedback").length ).toBe(1);
            expect( testWrap.find(".feedbackSuccess").length ).toBe(1);
        });
    });
    /**
     * Test TWO
     */
    describe('With attributes', function(){
        it("should pass the title and type to the child feedback element", function(){
            var tmpl = angular.element('<div my-feedback ric:title="\'Static Title\'" ric:type="\'error\'">Test Content</div>');

            element = $compile(tmpl)($rootScope);
            testWrap.append(element);
            $rootScope.$apply();
            expect( testWrap.find(".feedbackError").length ).toBe(1);
        });
    });
});

Answer 1

事实证明，所讨论的插件不能很好地配合角mo游戏。

该插件更多是具有全局初始化功能的内部库。 由于某种原因，在最初的通话之后，角mo将其弄乱了，从而杀死了以后的通话。

我能够找到解决方法：内部库具有全局初始化功能，这非常容易出错。 我能够使用更传统的$("#el").pluginName();

案件结案。