7

Angular-シナリオは、AngularアプリがDOM対応で準備ができている場合にうまく機能します。requirejsまたは他のAMDlibを使用する場合はそうではありません。角度シナリオでAMDのサポートを追加するにはどうすればよいですか？

4

3 に答える 3

9

あなたがしなければならないことは、デフォルトのフレームロード動作をオーバーライドし、amdアプリの準備ができたときに新しいイベントを発行することです。

最初に、angular.bootstrap呼び出しとともに、Angularアプリケーションに次の行を追加します。このデータは、角度シナリオで必要です。

angular.bootstrap(document, ['app']);

var html = document.getElementsByTagName('html')[0];

html.setAttribute('ng-app', 'app');
html.dataset.ngApp = 'app';

if (top !== window) {
    top.postMessage({
        type: 'loadamd'
    }, '*');
}

次に、e2eランナーに、これらの行を含める必要があります。外部スクリプトの場合は、angular-scenarioの後にロードする必要があり、DOMの準備が整う前に解析する必要があります。

/**
 *  Hack to support amd with angular-scenario
 */
(function() {
    var setUpAndRun = angular.scenario.setUpAndRun;

    angular.scenario.setUpAndRun = function(config) {
        if (config.useamd) {
            amdSupport();
        }
        return setUpAndRun.apply(this, arguments);
    };

    function amdSupport() {
        var getFrame_ = angular.scenario.Application.prototype.getFrame_;

        /**
         *  This function should be added to angular-scenario to support amd. It overrides the load behavior to wait from
         *  the inner amd frame to be ready.
         */
        angular.scenario.Application.prototype.getFrame_ = function() {
            var frame = getFrame_.apply(this, arguments);
            var load = frame.load;

            frame.load = function(fn) {
                if (typeof fn === 'function') {
                    angular.element(window).bind('message', function(e) {
                        if (e.data && e.source === frame.prop('contentWindow') && e.data.type === 'loadamd') {
                            fn.call(frame, e);
                        }
                    });
                    return this;
                }
                return load.apply(this, arguments);
            }

            return frame;
        };
    }
})();

最後に、amd構成を有効にするには、属性ng-useamdをangular-scenarioのスクリプトタグに追加する必要があります。

<script type="text/javascript" src="lib/angular-1.0.3/angular-scenario.js" ng-autotest ng-useamd></script>

これで準備が整いました

角度シナリオv1.0.3でテスト済み

于 2013-03-19T12:50:13.750 に答える
4

上記の答えは、私のシナリオ（Angular 1.1.4、新鮮なKarma）では部分的に失敗しました。デバッグビューでは正常に実行されましたが、通常の概要ページでは失敗しました。余分なネストに気づきました。

テストしたアプリケーションの親iframeにメッセージを送信するようにコードを変更しました。

if (top !== window) {
    window.parent.postMessage({
        type: 'loadamd'
    }, '*');
}
于 2013-05-14T18:18:44.947 に答える
1

受け入れられた答えは絶対に正しいですが、そのコードをページに入れなければならないのは残念です。

それで、それが助けになるなら、私はカルマがテスト実行の一部として「修正」を注入するためのプリプロセッサを作成しました。

コード：https ：//github.com/tapmantwo/karma-ng-bootstrap-fix-preprocessor npm：https ://www.npmjs.org/package/karma-ng-bootstrap-fix-preprocessor

これは、カルマを介してファイルを提供している場合にのみ機能することに注意してください。それらをプロキシしている場合、それらはプリプロセッサを通過しません。したがって、別の方法として、手動でブートストラップされたサイトを実行できるようにするのと同様のことを行うng-scenarioのフォークがあります。

https://github.com/tapmantwo/karma-ng-scenario

これはノードモジュールではないため、手動で設定する必要がありますが、テストに合格するためだけに本番コードに何かを感染させるのではなく、このようなものを配置する方が適切です（IMHO）。

于 2014-06-06T13:22:02.943 に答える