Question

我是JavaScript单元测试的新手。

我们正在将PHP遗留应用程序转换为Symfony2框架。我们计划使用旧版JavaScript库。 TDD方法适用于控制器和服务（PHP代码）。

对于Javascript函数，TDD不是必需的，因为我们成功地使用旧的Javascript函数，使得新的Symfony2表格（twigs）中的旧代码类似于旧代码。

对于javascript代码的未来增强和单元测试，我们还需要为这些遗留函数编写单元测试用例。我们计划使用Qunit进行此操作。

示例函数是

function DetailDrop(fieldname) {
  fn = fieldname.id;
  var field = fn.substring(0, fn.length - 2);
  if (document.getElementById(field + "_C") && document.getElementById(field + "_C").checked == true && document.getElementById(field + "_D")) {
    document.getElementById(field + "_D").style.display = 'inline';
  }
  else if (((document.getElementById(field + "_Y") && document.getElementById(field + "_Y").checked == true) || (document.getElementById(field + "_/") && document.getElementById(field + "_/").checked == true)) && document.getElementById(field + "_D")) {
    document.getElementById(field + "_D").style.display = 'none';
    document.getElementById(field + "_D").selectedIndex = 0;
  }
  else if (((document.getElementById(field + "_N") && document.getElementById(field + "_N").checked == true) || (document.getElementById(field + "_P") && document.getElementById(field + "_P").checked == true)) && document.getElementById(field + "_D")) {
    document.getElementById(field + "_D").style.display = 'inline';
  }
}

给出上面的问题上下文，我无法找到一种单元测试这样的javascript函数的方法，这些函数从Web表单访问HTML元素。

在这种情况下，我应该寻找模拟完整网络表单的选项

或我在这里完全脱离了背景吗？

Answer 1

您正在谈论关于DOM的keeping your tests atomic，这太棒了！不要放弃！

基本思想是在＆＃34; fixture＆＃34;中设置一个版本的表单。在每次测试之前/之后重置，以便没有一个测试影响另一个测试（确保原子性）。你可以这两种方式：（1）将HTML代码添加到＆＃34; #qunit-fixture＆＃34;您的QUnit HTML文件中的div，或者（2）只需访问模块beforeEach()和afterEach()中的元素即可创建所需内容。

（1）HTML方法：将<form>添加到#qunit-fixture：

<html>
  ...
  <body>
    <div id="qunit"></div>
    <div id="qunit-fixture">
      <form ...>
        <!-- only what MUST be there for JS to work -->
      </form>
    </div>
    ...
  </body>
</html>

在每次测试运行之前，QUnit会重置#qunit-fixture元素内的任何内容，因此您根本不必担心它。这可能是最简单的方法，但并不能为您提供广泛的控制。

（2）使用模块beforeEach()和afterEach()方法设置HTML（请注意我的代码使用jQuery，但您不需要）：

//在您的JavaScript测试文件中......

var fixture = $( "#qunit-fixture" );
QUnit.module("form tests", {
  beforeEach: function() {
    fixture.html("<form> ..... </form>");
  },
  afterEach: function() {
    fixture.find("form").remove();
    // any other cleanup (events maybe?)
  }
});

在任何一种情况下，您现在都可以访问测试中的<form>，它将会刷新＆＃34;＆＃34;每次运行之前：

QUnit.test("test form submission", function(assert) {
  $("form").submit();
  // maybe make sure an Ajax call was made?
  // or that there is an error on the page?
});

用于从FORM访问HTML元素的JavaScript函数的单元测试用例

1 个答案: