0

我这里有一个超级边缘案例。

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

<div my-directive>DirectiveContent</div>

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

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

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

<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);
        });
    });
});
4

1 回答 1

0

事实证明，有问题的插件不能很好地与 angular-mocks 配合使用。

该插件更像是一个具有全局初始化功能的内部库。出于某种原因，角度模拟在最初的调用后弄乱了它，从而扼杀了未来的调用。

我能够找到解决方法：内部库有一个非常错误的全局初始化函数。我能够使用更传统的$("#el").pluginName();

结案。

于 2013-07-13T19:14:31.653 回答