javascript - JS 单元测试无需将整个 HTML 复制到单元测试中？

Question

我正在一个项目中为每个函数编写 JS 单元测试。假设您有为页面执行某些操作的 JS 代码，例如:

myProject.myPage.onDomReady = function() {
  $("#something").on("click", this.doSomething);
  $("#something-else").on("click", this.doSomethingElse);
}

在单元测试中，项目中的标准做法是将页面的html复制/粘贴到js测试中。喜欢:

module("pages/my_page_test.js", {
  setup: function() {
    this.myPage = Unit.fixture('\
      <div class="container" id="my-form-container" style="display: block;">\
        <div class="container-bg"></div>\
        <div class="container-box" style="width:250px">\
        <div class="container-title">\
          <span class="container-title-text">Engage?</span>\
        </div>\
      </div>\
    ');
  }
);

通常行数比这多得多。

我的问题是:这是为页面函数编写 JS 单元测试的好方法吗？我的意思是你最终将大部分 HTML 页面复制到 JS 中只是为了测试。每次更改 HTML 时，理论上您都应该更新测试中的 HTML。

有更好的方法吗？

Answer 1

使用以下方法之一:

• 通过 DOM 引用 HTML:

  var foo = Unit.fixture(document.getElementById("foo").outerHTML)
  

• 通过 the jQuery constructor 生成标记

  var foo = Unit.fixture($("<span/>", {"class":"foo", "id":"bar", "html": "<span/>"}).get(0).outerHTML )
  

• 通过 strings with Unicode escapes 生成标记

  var foo = Unit.fixture("<label><input type=|radio| name=|bar| value=|baz|>bop</label>").replace(/\|/g,"\u0022")