0

ここに超エッジのケースがあります。

単純な html 要素を正式なフィードバック指向のビューに変換する jQuery プラグインのラッパー ディレクティブを作成しています。

<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>

問題は、カルマのジャスミン テストで、1 つのテストを実行できることです。私が別のことをすると、うまくいきません。

これが私の指示です：

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 ではうまく機能しないことがわかりました。

プラグインは、グローバルな初期化機能を持つ内部ライブラリのようなものでした。何らかの理由で、最初の呼び出しの後に angular-mocks が台無しになり、将来の呼び出しが殺されました。

回避策を見つけることができました。内部ライブラリには、非常にバグのあるグローバル初期化関数がありました。より伝統的なものを使用することができました$("#el").pluginName();

ケースを閉じました。

于 2013-07-13T19:14:31.653 に答える