3

angularjsディレクティブでカルマ単体テストを実行するのに本当に苦労しています。これが私のセットアップです：

var scope, ele;
    var template = '<div data-my-directive data="data" config="config"></div>';

    beforeEach(function () {
        // Load directive's module
        module('dashboard');
        module('templates-dev');

        // Load mock services/data (overriding real implementation)
        module(function($provide) {
            $provide.value("MockWidgetData", new MockWidgetData());
        });

        // Construct services/data to be available
        // inside each testing block.
        inject(function($rootScope, $compile, MockWidgetData) {
            // Create a fresh scope
            scope = $rootScope.$new();
            ele = angular.element(template);

            // Fill that scope with mock data
            scope.config = MockWidgetData.config;
            scope.data = MockWidgetData.data;

            // Compile the element and attach our scope
            $compile(ele)(scope);

            // Digest the scope to trigger a scope update
            // and attach our directive's link function
            scope.$digest();
        });
    });

私のディレクティブは 'data' オブジェクトと 'config' オブジェクトをその子に渡しますが、それらはたまたま他のディレクティブです。ディレクティブ自体は を使用します。これが、html2jsをtemplateUrl提供する理由です。これが私のディレクティブのサンプルです:module(templates-dev)$templateCachetemplateUrl

<div id="container">
        <button id="my-btn" ng-click="doSomething('parameter')"></button>
        <div other-dir data="data" config="config"></div>
</div>

これが私のディレクティブのサンプルです：

angular.module('dashboard').directive('myDirective', function() {
    return {
        restrict: 'A',
        templateUrl: 'my-dir-template.html',
        scope: { // 
            data: '=',
            config: '='
        },
        replace: true,
        link: function(scope, element, attrs) {

            scope.someFunc() = { ... },
            scope.someFunc1() = { ... },

        });

問題：

  • $compile(ele)(scope) の後、要素の .log() は、あらゆる種類の angular.js ディレクティブやその他の奇妙な情報を含む DOM 全体を示します。ディレクティブのテスト テンプレートが上記の templateUrl と一緒にマッシュアップされることを期待しています。
  • スコープの .log() は、完全なデータ オブジェクトと構成オブジェクトを、期待される値と共に示します。また、予想どおり、ディレクティブのリンク関数内で使用可能な関数も表示されます。ただし、テスト ブロック内では、スコープ オブジェクトが空であるかのようです... ディレクティブの関数にアクセスできません (すべて未定義を返します)。
  • を介してディレクティブの html の一部の要素をキャプチャできますがele.find("#my-btn").eq(0)、通常の機能 (.click() など) はどれも機能しません。

私は何を間違っていますか？コンパイルプロセスに何か問題がありますか？テストの構造が間違っていますか? リンク機能を削除してコントローラーに置き換えてみてはいかがでしょうか? 私のスコープはちょうど並んでいません、そして私はこれで2日間失敗しています...ちょっと迷惑です.

詳細な検査の後... 「データ」および「構成」オブジェクトを子スコープに正しく伝播するscope.$digest()前にできるようです。$compile(ele)(scope)ただし、スコープは、ディレクティブのリンクで定義された関数へのアクセスを失います。

4

1 に答える 1

0

scope.$digest()の後に電話する必要があります$compile(ele)(scope)。ディレクティブのコンパイルを進めるにはダイジェストが必要です。ディレクティブには分離されたスコープがあるため、関数にアクセスできません。それらを取得するには、これを試してください：

var elScope = element.isolateScope(); ここにあなたがいますelScope.someFunc();

単体テスト ディレクティブのこの例を確認してください。

http://best-web-creation.com/articles/view/id/angular-js-unit-test-directive?lang=en

于 2015-07-23T11:11:13.200 に答える