I'm figuring out how to get a working Qunit test to verify that .slideToggle() acting on a element shades it up/down. I've made a very basic Qunit test fixture as shown here. The first problem is that the test 'shade, not visible' fails. The second problem is, it looks horrible to have the QUnit.test sitting inside the done() {} function call. I've tried several incorrect strategies, including testing for is( ':visible'), .css('height'), I thought I had it by testing for display:none, so I'm at a loss on how to get this test to pass.
I have prepared a JSFiddle showing the problem test which I think should pass. 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>
Solution, thanks to shoky_ and robertmaxrees on IRC #jquery chat. As you can see, I had not properly deployed asynchronous testing. Updated the fiddle linked in my question to a working version.
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");
});
});