测试外部脚本是否被有效加载

AngularJS: test that an external script is effectively loaded

本文关键字：有效 加载 是否 外部 脚本 测试      更新时间：2023-09-26

我正在使用一个外部脚本(来自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);
};

如果文件留下一个全局变量，您可以简单地查找window。随便看看有没有上膛。

我使用的一种非常灵活的跨浏览器模式是我所说的前哨式。在执行自定义代码之前，使用包装器函数等待依赖项到达。 例如，如果我动态地将jQuery注入到页面中，并且我知道它需要用于其他动态的东西: 
(function waiter(){
  if(!window.jQuery){ return setTimeout(waiter, 37); }
  $("#myDiv").fadeOut();
}())

此模式独立于任何脚本加载器或浏览器特定事件而工作，并且不需要修改依赖文件，非常适合等待库的CDN副本。

你可以很容易地扩展这个概念，等待几个依赖使用现代数组方法:

(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();
}())

有人在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;
        });
    }));
相关文章：