Question

我正在弄清楚如何获得一个有效的Qunit测试，以验证作用于元素的.slideToggle（）会对其进行上/下调整。我已经制作了一个非常基本的Qunit测试夹具，如图所示。第一个问题是测试阴影，不可见＆＃39;失败。第二个问题是，将QUnit.test放在done（）{}函数调用中看起来很糟糕。我尝试了几种不正确的策略，包括测试是（＆＃39;：可见＆＃39;），。css（＆＃39;身高＆＃39;），我以为我通过测试显示来测试：无，所以我对如何通过测试感到茫然。

我准备了一个JSFiddle，显示我认为应该通过的问题测试。 https://jsfiddle.net/chrismcginlay/tjLeqj01/1/

<!DOCTYPE html>                                                                              
<html>                                                                                       
<head>                                                                                       
    <meta charset="utf-8">                                                                   
    <title>Shading tests</title>                                                             
    <link rel="stylesheet" href="qunit.css">                                                 
</head>                                                                                      

<body>                                                                                       
    <div id="qunit"></div>                                                                   
    <div id="qunit-fixture">                                                                 
        <div id="shade">                                                                     
            <p>Some text to test</p>                                                         
        </div>                                                                               
    </div>                                                                                   
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>                      
    <script src="qunit.js"></script>                                                         
    <script>                                                                                 

QUnit.module("Shading Tests");                                                               
QUnit.test("shade, visible", function( assert ) {                                            
    assert.ok( $( '#shade' ).length, "div exists" );                                         
    assert.ok( $( '#shade' ).css( 'height' ) > '0px', "div has height" );                    
    assert.notEqual( $( '#shade' ).css( 'display' ), 'none', "div displayed");               
});                                                                                          
$( '#shade' ).slideToggle( "3000" );                                                         
$( '#shade' ).promise().done( function() {                                                   
    alert( 'Done with slideToggle');                                                         
    QUnit.test("shade, not visible", function( assert ) {                                    
        assert.ok( $( '#shade' ).length, "div exists" );                                     
        assert.equal(                                                                        
            $( '#shade' ).css( 'display' ), 'none', "div not displayed");                    
    });                                                                                      
});                                                                                          
    </script>                                                                                
</body>                                                                                      
</html>

Answer 1

解决方案，感谢shoky_和robertmaxrees对IRC #jquery聊天。如您所见，我没有正确部署异步测试。将我的问题中链接的小提琴更新为工作版本。

QUnit.module("Shading Tests");
QUnit.test("shade, visible", function( assert ) {
  assert.ok( $( '#shade' ).length, "div exists" );
  assert.ok( $( '#shade' ).css( 'height' ) > '0px', "div has height" );
  assert.notEqual( $( '#shade' ).css( 'display' ), 'none', "div displayed");
});
QUnit.test("shade, not visible", function( assert ) {
    var done1 = assert.async();
    $( '#shade' ).slideToggle( 3000 );
    $( '#shade' ).promise().done( function() {
    assert.ok( $( '#shade' ).length, "div exists" );
    assert.equal( $( '#shade' ).css( 'display' ), 'none', "div not displayed");
  });
});

如何通过Qunit正确测试jQuery .slideToggle（）

1 个答案: