Question

我尝试测试这段代码的行为：

function SinglePageNoUrl(){

    $("*[data-page=\"container\"] *[data-page=\"page\"]").on('page-change',function(e,preCallback,postCallback){
       var target=e.target;

       if(preCallback){
        preCallback(target);
       }

       $("*[data-page=\"container\"] *[data-page=\"page\"]").not(target).attr("data-page-status","destroyed");
       $("*[data-page=\"container\"] *[data-page=\"page\"]").not(target).trigger("page-destroy");

       $("*[data-page=\"spinner\"").show();
       $(target).attr("data-page-status","loading");

       $(target).trigger('page-init',[function(err){
           if(!err){
            console.log("Shown");

           $(target).removeAttr("data-page-status");
            $("*[data-page=\"spinner\"").hide();
            if(postCallback){
               postCallback(null,target);
            }

           } else {
               console.error("Error Occured during page load:",err);
               if(postCallback){
                postCallback(error,target);
              }
           }
       }]);

    });

    $("*[data-page-options=\"default\"]").trigger('page-change');
}

通过以下测试：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>QUnit Example</title>
  <link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css">
</head>
<body>
  <div id="qunit"></div>
  <div id="qunit-fixture">
    <div data-page="container">
        <div id="spinner" data-page="spinner">
            Please Wait...
        </div>
        <div id="page1" data-page="page" data-page-options="default">
            <h1>PAGE 1</h1>
        </div>
        <div id="page2" data-page="page">
            <h1>PAGE 2</h1>
        </div>    
    </div>
  </div>
  <script src="../node_modules/qunit/qunit/qunit.js"></script>
  <script src="../node_modules/qunit-dom/dist/qunit-dom.js"></script>
  <script src="../node_modules/jquery/dist/jquery.js"></script>
  <script src="../lib/no_url_pager.js"></script>

  <script>
      QUnit.testStart(function(){
        $("#page1").on('page-init',function(e,callback){
            callback(null);
        });

        $("#page2").on('page-init',function(e,callback){
            callback(null);
        });

        SinglePageNoUrl();
      });

      QUnit.test( "Is shown the default page.", function( assert ) {
        assert.notOk($('#page1').attr('data-page-status') !== undefined,"Shown page does not have attribute data-page-status");
      });
  </script>
</body>
</html>

测试背后的想法是，默认页面（#page1具有属性data-page-options="default"）没有属性data-page-status。

我通过gulp运行测试，如下所示：

const gulp = require('gulp');
const qunit = require('node-qunit-phantomjs');
const fs = require('fs');

gulp.task('test', (done) => {
    fs.readdir('./tests', (err, files) => {
        files.forEach(file => {
          qunit('./tests/'+file);
        });
        done();
    });
});

所有测试都位于文件夹tests中，如下结构所示：

- .
-- tests
--- simple_basic.html <<< Test file

但是运行gulp test时出现以下问题：

> no_url_page@0.1.0 test /home/pcmagas/Kwdikas/Javascript/no_url_page
> gulp test

[23:20:46] Using gulpfile ~/Kwdikas/Javascript/no_url_page/gulpfile.js
[23:20:46] Starting 'test'...
Testing file:////home/pcmagas/Kwdikas/Javascript/no_url_page/tests/simple_basic.html
[23:20:46] Finished 'test' after 16 ms
The specified timeout of 5 seconds has expired. Aborting...
phantomjs://code/runner-json.js:89

据我了解，断言以某种方式不起作用或测试根本没有运行。另外，我可以通过将测试代码替换为以下内容来证明此错误：

  QUnit.test( "Is shown the default page.", function( assert ) {
      console.log("Test Running");
    assert.notOk($('#page1').attr('data-page-status') !== undefined,"Shown page does not have attribute data-page-status");
    console.log("Test has executed");
  });

那么您知道为什么测试根本不运行以及为什么吗？

QUnit测试带有gulp测试超时，测试根本无法运行

0 个答案: