如何测试onready之前执行的代码部分?

时间:2016-06-19 06:37:31

标签: javascript qunit blanket.js qunit-bdd

我写了一个小页面来学习BDD / TDD。它位于http://duolingo.howyousay.it/link.html

我的测试(目前只有一个文件)位于http://duolingo.howyousay.it/tests/test.html?coverage&hidepassed&noglobals

除了http://duolingo.howyousay.it/duolingo_link_fixer.js

中的5行之外,我设法获得100%的代码覆盖率
   1  var DuolingoLinkFixer = function() {
   2    this.data = {};
   3    var self = this;
   4
   5    document.onreadystatechange = function () {
*  6      self.init();
   7    }
   8  };
   9
  10  DuolingoLinkFixer.prototype.init = function() {
* 11    if (document.readyState == "complete") {
* 12      this.setOriginalUrl();
* 13      this.setAlternateText();
* 14      this.setFixedUrl();
  15    }
  16  }

第6行和第11-14行未经过测试,但如果删除它们,则代码无效。我正在使用QUnit,QUnit-BDD和Blanket.js。我如何测试在onready之前运行的代码部分,因为似乎测试仅在onready之后开始运行?

我的测试代码目前是这样开始的:

describe("DuolingoLinkFixer", function() {
  describe("new", function() {
    it("should create a new instance of DuolingoLinkFixer", function() {
      expect(new DuolingoLinkFixer instanceof DuolingoLinkFixer).to.be.true();
    });
  });

});

这是我的测试HTML页面的来源:

<!DOCTYPE html>
<html>
  <head>
    <title>Duolingo JavaScript tests</title>

    <script type="text/javascript" src="/lib/jquery/jquery-3.0.0.js"></script>
    <script type="text/javascript">
      $.holdReady(true);
    </script>

    <link type="text/css" rel="stylesheet" href="/lib/qunit/qunit-1.23.1.css">
    <script type="text/javascript" src="/lib/qunit/qunit-1.23.1.js"></script>
    <script type="text/javascript" src="/lib/qunit-bdd/qunit-bdd.js"></script>

    <script type="text/javascript" src="/lib/blanket.js/blanket.min.js"></script>

    <script type="text/javascript" data-cover src="../url_helper.js"></script>
    <script type="text/javascript" data-cover src="../duolingo_link_fixer.js"></script>

    <script type="text/javascript" src="test_url_helper.js"></script>
    <script type="text/javascript" src="test_duolingo_link_fixer.js"></script>
  </head>
  <body>
    <div id="qunit"></div>
  </body>
</html>

我尝试按照另一篇文章中的建议添加jQuery的$.holdReady(true);,但它没有帮助。我不需要使用jQuery,所以我试图避免它用于这个项目。

1 个答案:

答案 0 :(得分:0)

事实证明,我只需要在测试代码中添加一行来测试以前不可测试的代码:

describe("DuolingoLinkFixer", function() {
  describe("new", function() {
    it("should create a new instance of DuolingoLinkFixer", function() {
      expect(new DuolingoLinkFixer instanceof DuolingoLinkFixer).to.be.true();
      document.onreadystatechange();
    });
  });

});

添加document.onreadystatechange();运行的代码与readyStateChange事件触发的代码完全相同。