当使用karma和jasmine&时,document.readyState总是'加载'。 PhantomJS

时间:2015-02-03 15:21:18

标签: javascript phantomjs karma-jasmine

我有一堆commonjs javascript模块。其中一个与文档javascript global交互。为了保持模块化和可测试的一切,我创建了几个包含文档和窗口对象的模块。

// document.js
module.exports = document;

// window.js
module.exports = window;

我的模块placeholderReplacer.js然后将其作为依赖项

包含在内
// palceholderReplacer.js
var document = require('./document');
var window = require('./window');

// replacePlaceholders() & a bunch of private methods live here...

var placeholderReplacer = {
  replace: function() {
    var prerequisitesAvailable = function() {
      return document.addEventListener && document.getElementsByClassName && XMLHttpRequest;
    };

    if (prerequisitesAvailable()) {
      if (document.readyState == "complete") {
        replacePlaceholders();
      } else {
        window.addEventListener('load', function() {
          replacePlaceholders();
        }, false);
      }
    }
  }
};
module.exports = placeholderReplacer;

我遇到的问题是,当我使用PhantomJS和Jasmine对Karma进行单元测试时,document.readyState总是加载,并且永远不会调用replacePlaceholders()。事件监听器也没有被调用,因为我怀疑它已经太晚了。

为简单起见,我已经从placeholderReplacerTest.js中删除了所有测试,我只是:

var $ = require('../vendor/jquery'),
  placeholderReplacer = require('../modules/placeholderReplacer');

placeholderReplacer.replace();

我是javascript单元测试和CommonJS模块的新手,所以非常感谢任何帮助!

1 个答案:

答案 0 :(得分:0)

我设法实现这一目标的唯一方法是设置一个全局函数来返回document.readyState的值并在测试中模拟它。虽然它不是最好的解决方案,但由于你无法改变readyState Is it possible to change document.readyState with JavaScript?,这是我提出的最佳工作。

因此,在您的javascript文件中,添加一个窗口函数以返回document.readyState;

的值
 // palceholderReplacer.js
var document = require('./document');
var window = require('./window');

// Add this
window.getReadyState = function(){
    return document.readyState;
}

// replacePlaceholders() & a bunch of private methods live here...

var placeholderReplacer = {
  replace: function() {
    var prerequisitesAvailable = function() {
      return document.addEventListener && document.getElementsByClassName && XMLHttpRequest;
    };

    if (prerequisitesAvailable()) {
      // change this also
      if (window.getReadyState() == "complete") {
        replacePlaceholders();
      } else {
        window.addEventListener('load', function() {
          replacePlaceholders();
        }, false);
      }
    }
  }
};
module.exports = placeholderReplacer;  

在测试中,在运行测试之前模拟此全局函数的返回值;

var $ = require('../vendor/jquery'),
  placeholderReplacer = require('../modules/placeholderReplacer');

it('should return value complete', function(){
    window.getReadyState = jasmine.createSpy().and.returnValue("complete");
    placeholderReplacer.replace();
});

it('should return value loading', function(){
    window.getReadyState = jasmine.createSpy().and.returnValue("loading");
    placeholderReplacer.replace();
});

希望这会有所帮助,或者如果您找到了答案,请回复