Question

我使用QUnit进行单元测试js和jquery。我的HTML看起来像这样：

<!DOCTYPE html>
<html>
<head>
<title>QUnit Test Suite</title>

 <script src="../lib/jquery.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.16.0.css" type="text/css" media="screen">

  <script type="text/javascript" src="http://code.jquery.com/qunit/qunit-1.16.0.js"></script>

  <!--This is where I may have to add startPage.html--->
  <script src="../login.js"></script>

  <script src="../test/myTests.js"></script>


</head>
<body>
    <div id="qunit"></div>
    <div id="qunit-fixture"></div>
</body>
</html>

目前，我正在添加如图所示的login.js，并且我正确地获取了对login.js中定义的对象的引用。

但是，login.js中的函数包含对startPage.html中定义的某些dom元素的引用，这些元素位于其他位置。

所以，如果我说$('#login-btn')，它就会抛出一个错误。有没有什么办法解决这一问题？

我能吗？（a）将startPage.html引用到我上面给出的qunit页面？（b）在我运行测试的文件（myTests.js）中引用或加载startPage.html：

QUnit.test( "a test", function( assert ) {
    assert.equal( 1, "1", "String '1' and number 1 have the same value" );//works
    assert.equal( login.abc, "abc", "Abc" );//works with attributes
    assert.equal(($("#userid").val()),'',  'Userid field is present');//fails
    assert.equal( login.ValidUserId(), true, "ValidUserId" );//fails with functions
});

QUnit是否提供加载Html / php文件的任何方法，以便在测试之前定义它们。喜欢＆＃39;灯具＆＃39;在茉莉花？

编辑：如果我有startPage.php，还请告诉我该怎么做

Answer 1

有几种方法可以做到这一点。最简单的就是使用内置的QUnit "fixtures" element。在您的QUnit HTML文件中，只需在id为qunit-fixture的div中添加您想要的任何HTML。您放入的任何HTML都会在每次测试之前（自动）重置为加载时的HTML。

<html>
  ...
  <body>
    <div id='qunit'></div>
    <div id='qunit-fixture'>
      <!-- everything in here is reset before each test -->
      <form>
        <input id='userid' type='text'>
        <input id='login-btn' type='submit'>
      </form>
    </div>
  </body>
</html>

请注意，灯具中的HTML并不真正与您在制作中的HTML相匹配，但显然您可以这样做。实际上，您应该添加最少的必要HTML，以便最大限度地减少对测试的任何副作用。

第二个选项是实际从该登录页面和delay the start of the QUnit tests拉入HTML，直到HTML加载完成：

<html>
  <head>
    ...
    <script type="text/javascript" src="http://code.jquery.com/qunit/qunit-1.16.0.js"></script>
    <script>
    // tell QUnit you're not ready to start right away...
    QUnit.config.autostart = false;

    $.ajax({
      url: '/path/to/startPage.html',
      dataType: 'html',
      success: function(html) {
        // find specific elements you want...
        var elem = $(html).find(...);
        $('#qunit-fixture').append(elem);

        QUnit.start();  // ...tell QUnit you're ready to go
      }
    });
    </script>

    ...
  </head>

  ...
</html>

Answer 2

不使用jquery的另一种方法如下

QUnit.config.autostart = false;

window.onload = function() {
    var xhr  = new XMLHttpRequest();
    if (xhr) {
        xhr.onloadend = function () {
            if(xhr.status == 200) {
                var txt = xhr.responseText;
                var start = txt.indexOf('<body>')+6;
                var end = txt.indexOf('</body>');;
                var body_text = txt.substring(start, end);
                var qunit_fixture_body = document.getElementById('qunit-fixture');
                qunit_fixture_body.innerHTML = body_text;
            }
            QUnit.start();
        }

        xhr.open("GET", "index.html");
        xhr.send();
    } else {
        QUnit.start(); //If getting the html file from server fails run tests and fail anyway
    }
}

如何在QUnit中加载不同的html文件？

2 个答案: