如何通过 Qunit 正确测试 jQuery .slideToggle()

Question

我正在弄清楚如何获得一个有效的 Qunit 测试来验证作用于元素的 .slideToggle() 对其进行着色 up/down。我已经制作了一个非常基本的 Qunit 测试夹具，如此处所示。第一个问题是测试 'shade, not visible' 失败。第二个问题是，将 QUnit.test 放在 done() {} 函数调用中看起来很糟糕。我尝试了几种不正确的策略，包括测试 is( ':visible'), .css('height')，我认为我通过测试 display:none 得到了它，所以我'我不知道如何让这个测试通过。

我准备了一个 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

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

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

How to properly test jQuery .slideToggle() via Qunit

jquery

slidetoggle

qunit