Question

我最近开始尝试进行qunit测试，但遇到很多困难。

我编写了一个测试，该测试应首先检查<div id='optional_fields'>的类在页面加载时是否设置为none（因为第一个javascript代码应该如此），然后将其设置为在按下时阻塞复选框按钮（第二段JavaScript代码）。

我的问题是，第一次测试始终失败，而第二次测试通过并不是因为$('#id_taken_test_before').click();将div更改为block，而是因为其始终显示为block而按下按钮却无济于事。

此外，如果我移动结束的<div id="qunit-fixture">格，使其不在测试代码（<div id="qunit-fixture"></div>）的周围，则$('#id_taken_test_before').click();可以正常工作。我不知道如果整个代码都被<div id="qunit-fixture">标记包围，为什么它不起作用。

tests.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>QUnit Example</title>
  <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.10.0.css">
  <script src="https://code.jquery.com/jquery-3.5.0.js" integrity="sha256-r/AaFHrszJtwpe+tHyNi/XCfMxYpbsRg2Uqn0x3s2zc=" crossorigin="anonymous"></script>
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture">

  <!-- page content -->
  <div id="div_id_taken_test_before" class="custom-control custom-checkbox">
    <input type="checkbox" name="taken_test_before" class="checkboxinput custom-control-input" id="id_taken_test_before" checked="">
    <label for="id_taken_test_before" class="custom-control-label">
    Have you taken the test before
    </label>
  </div> <!-- div_id_taken_test_before -->

  <div id='optional_fields'></div>
  <!-- /page content -->

  </div><!-- /qunit-fixture -->

  <script src="https://code.jquery.com/qunit/qunit-2.10.0.js"></script>
  <script src='../javascript.js'></script>

  <script>
    QUnit.test("optional_fields hidden on page load", function (assert) {
      assert.equal($('#optional_fields').css('display'), 'none');
    });

    QUnit.test("optional_fields visible when checkbox selected", function (assert) {
      $('#id_taken_test_before').click();
      assert.equal($('#optional_fields').css('display'), 'block')
    });
  </script>

</body>
</html>

javascript.js

/* hide 'taken the test before' questions on load if unchecked */
$(document).ready(function(){
    var questions = document.getElementById("optional_fields");

    if (document.getElementById("id_taken_test_before").checked == false) {
        questions.style.display = "none";
    }
})

/* hide 'taken the test before' on toggle */
$("#div_id_taken_test_before").change(function(){
    var questions = document.getElementById("optional_fields");

    if($('#id_taken_test_before').is(':checked')){
       questions.style.display = "block";
    }else{
        questions.style.display = "none";
    }
});

谢谢。

Qunit测试始终失败

0 个答案: