qunit測試交替失敗

我有兩個測試，test1和test2。當我運行測試時，測試1將成功，測試2將失敗或測試2將成功，而測試1將失敗。這兩個測試都涉及點擊一個按鈕，通過一些jquery方法更新DOM。看起來只有首先運行的測試纔會觸發這些方法，有沒有人知道這是爲什麼？qunit測試交替失敗

<!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>

控制檯的輸出顯示按鈕點擊僅在第一個運行的測試中註冊。例如

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

來源

2015-10-27 scruffyDog

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 
     } 
     } 
    }); 
}

在您的實際應用程序，你必須解僱這個功能，並且在你的測試中，你要確保它在每次測試前都被觸發所以你開始乾淨。例如：

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

有了這個所有的測試都乾淨分離，不會重複使用eachothers 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 
 
     } 
 
    } 
 
    }); 
 
} 
 

 
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"); 
 
});

<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 -->

來源

2015-10-30 16:02:51 Jeroen

謝謝，這是做了很大的意義。我正在修改我在教科書中閱讀的代碼，但我想這只是一個非常簡單的例子。很高興能更深入地瞭解這裏發生的事情，並提供大量幫助。 – scruffyDog

qunit測試交替失敗

回答

相關問題