1

私は外部スクリプト ( http://segment.ioから) を使用しており、それとやり取りする AngularJS モジュールを作成しています。

スクリプトが適切にロードされていることを効果的にテストするにはどうすればよいでしょうか (実際のアプリを実行する場合を除く)。

end2end テストを作成する必要がありますか?

ご協力いただきありがとうございます！

// Service is a factory
service.load = function(apiKey) {
    // Create an async script element for analytics.js.
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.src = ('https:' === document.location.protocol ? 'https://' : 'http://') +
        'd2dq2ahtl5zl1z.cloudfront.net/analytics.js/v1/' + apiKey + '/analytics.js';

    // Find the first script element on the page and insert our script next to it.
    var firstScript = document.getElementsByTagName('script')[0];
    firstScript.parentNode.insertBefore(script, firstScript);
};
4

2 に答える 2

1

AngularJS IRC チャンネルの誰かが、Jasmine の waitsFor ブロックを使用した実用的なソリューションを教えてくれました: github.com/pivotal/jasmine/wiki/Asynchronous-specs

仕様以下の仕様:

it('should load the API when called with api key', inject(function ($window, segmentio) {
        segmentio.load(apiKey);

        waitsFor(function() {
            return $window.analytics.initialized == true;
        }, "Segmentio never loaded", 10000);

        runs(function () {
            expect($window.analytics).toBeDefined();
            expect($window.analytics.initialized).toBeTruthy();
            // Unload
            $window.analytics = null;
        });
    }));
于 2013-05-07T19:40:41.307 に答える
1

ファイルにグローバルが残っている場合は、単純に window.whatever を探して、ロードされているかどうかを確認できます。

私が使用する非常に柔軟なクロスブラウザー パターンの 1 つは、私がセンチナルと呼んでいるものです。ラッパー関数を使用して、カスタム コードを実行する前に依存関係が到着するのを待ちます。

たとえば、jQuery をページに動的に挿入していて、それが他の動的なものに必要であることを知っていた場合:

(function waiter(){
  if(!window.jQuery){ return setTimeout(waiter, 37); }

  $("#myDiv").fadeOut();

}())

このパターンは、スクリプト ローダーやブラウザー固有のイベントとは無関係に機能し、依存関係ファイルを変更する必要がないため、ライブラリの CDN コピーを待機するのに最適です。

最新の Array メソッドを使用して、いくつかの依存関係を待つという概念を簡単に拡張できます。

(function waiter(){
  if(![ 
       window.jQuery,            // core
       window.jQuery.fn.effect,  // jq ui
       window.jQuery.fn.whizBang // jq ui plugin

   ].every(Boolean)){ return setTimeout(waiter, 37); }

  $("#myDiv").whizBang();

}())
于 2013-05-07T18:07:03.907 に答える