Question

我有两个测试，test1和test2。当我运行测试时，test1将成功，test2将失败或test2将成功，而test1将失败。这两个测试都涉及单击一个按钮，该按钮通过一些jquery方法更新DOM。似乎只有首先运行的测试会触发这些方法，有没有人知道为什么会这样？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Javascript tests</title>
    <link rel="stylesheet" href="http://code.jquery.com/qunit.css">
  </head>

  <body>
    <div id="qunit"></div>
    <div id="qunit-fixture">
      <div id="div1">
        <button class="selected">Property1</button>
        <button >Property2</button>
      </div> <!-- div1 -->

      <div id="div2">
        <table>
          <tbody>
            <tr>
              <th>Name</th>
              <td></td>
            </tr>
          <tbody>
        </table>
      </div> <!-- div2 -->

      <script src="http://code.jquery.com/jquery.min.js"></script>
      <script>
        $("#div1 button").click(function(){
          console.log("button clicked");
          $(this).addClass("selected"); // clicked button   is set to selected
          var nameElement = $("#div2 table td");
          nameElement.text($(this).text()); // updates the nameElement to   the text contents of the button clicked
          var buttons = $(this).parent().find("button");
          for(i=0; i<buttons.length; i++){
            if(buttons[i] != $(this)[0]){
              $(buttons[i]).removeClass("selected") // other buttons are set to unselected
            }
          }
        });
      </script>
    </div> <!-- qunit-fixture -->

    <script src="http://code.jquery.com/qunit/qunit-1.19.0.js"></script>

    <script>
      test("test clicking on a property button adds the selected class to it", function(){
      console.log("test1");

      var buttons = $("#div1 button");

      $(buttons[1]).click();
      equal($(buttons[0]).hasClass("selected"), false);
      equal($(buttons[1]).hasClass("selected"), true);

      $(buttons[0]).click();
      equal($(buttons[0]).hasClass("selected"), true);
      equal($(buttons[1]).hasClass("selected"), false);

      console.log("end of test1");
      });

      test("test clicking on a property button updates the property details", function(){

      console.log("test2");

      var buttons = $("#div1 button");
      var name = $("#div2 table td");

      buttons[1].click()
      equal(name.text(), "Property2")

      console.log("end of test2");
      });

    </script>

  </body>
</html>

控制台的输出显示按钮单击仅在运行的第一个测试中注册。 e.g。

test.html:49 test1
test.html:31 button clicked
test.html:31 button clicked
test.html:61 end of test1
test.html:66 test2
test.html:74 end of test2

Answer 1

QUnit将实例化qunit-fixture并在每次测试之前重置它，但它只会重置该元素的DOM部分。您已将整个应用程序/脚本放在该夹具内进行测试，但在第二次测试运行后不会重新加载。

相反，尝试将您的应用程序代码移动到单独的文件或至少一个单独的脚本块，并稍微重写它，以便它可以被引导到某个容器，例如：

function myApp(container) {
    $(container).find("#div1 button").click(function(){
      console.log("button clicked");
      $(this).addClass("selected"); // clicked button   is set to selected
      var nameElement = $(container).find("#div2 table td");
      nameElement.text($(this).text()); // updates the nameElement to   the text contents of the button clicked
      var buttons = $(this).parent().find("button");
      for(i=0; i<buttons.length; i++){
        if(buttons[i] != $(this)[0]){
          $(buttons[i]).removeClass("selected") // other buttons are set to unselected
        }
      }
    });
}

在您的实际应用中，您必须触发该功能，并且在测试中确保它在每次测试之前被解雇，以便您开始干净。 E.g：

QUnit.module("MyApp", {
    beforeEach: function () {
        myApp($("#qunit-fixture"));
    }
});

这样你所有的测试都是干净利落的，并且不会重复使用每个DOM。

这是一个完整的示例：

＆＃13;

function myApp(container) {
  $(container).find("#div1 button").click(function(){
    console.log("button clicked");
    $(this).addClass("selected"); // clicked button   is set to selected
    var nameElement = $(container).find("#div2 table td");
    nameElement.text($(this).text()); // updates the nameElement to   the text contents of the button clicked
    var buttons = $(this).parent().find("button");
    for(i=0; i<buttons.length; i++){
      if(buttons[i] != $(this)[0]){
        $(buttons[i]).removeClass("selected") // other buttons are set to unselected
      }
    }
  });
}

QUnit.module("MyApp", {
  beforeEach: function () {
    myApp($("#qunit-fixture"));
  }
});

test("test clicking on a property button adds the selected class to it", function(){
  console.log("test1");

  var buttons = $("#div1 button");

  $(buttons[1]).click();
  equal($(buttons[0]).hasClass("selected"), false);
  equal($(buttons[1]).hasClass("selected"), true);

  $(buttons[0]).click();
  equal($(buttons[0]).hasClass("selected"), true);
  equal($(buttons[1]).hasClass("selected"), false);

  console.log("end of test1");
});

test("test clicking on a property button updates the property details", function(){

  console.log("test2");

  var buttons = $("#div1 button");
  var name = $("#div2 table td");

  buttons[1].click()
  equal(name.text(), "Property2")

  console.log("end of test2");
});

＆＃13;

<link href="https://code.jquery.com/qunit/qunit-1.19.0.css" rel="stylesheet"/>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://code.jquery.com/qunit/qunit-1.19.0.js"></script>

<div id="qunit"></div>
<div id="qunit-fixture">
  <div id="div1">
    <button class="selected">Property1</button>
    <button >Property2</button>
  </div> <!-- div1 -->
  <div id="div2">
    <table>
      <tbody>
        <tr>
          <th>Name</th>
          <td></td>
        </tr>
      <tbody>
    </table>
  </div> <!-- div2 -->
</div> <!-- qunit-fixture -->

＆＃13;

qunit测试交替失败

1 个答案: