1

我正在使用一个外部脚本（来自http://segment.io）并且我正在编写一个 AngularJS 模块来与之交互。

我想知道如何有效地测试他们的脚本是否加载良好（除了运行真正的应用程序）。

我应该编写端到端测试吗？

谢谢你的帮助！

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

如果文件留下一个全局文件，您可以简单地查找 window.whatever 以查看它是否已加载。

我使用的一种非常灵活的跨浏览器模式就是我所说的哨兵模式。在执行自定义代码之前，您使用包装函数等待依赖项到达。

例如，如果我将 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 回答
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 回答