Qunit user actions testing

Question

I am trying to setup Qunit to test user actions like this:

QUnit.test( "Ran user search", function( assert ) {

            assert.greaterThan($('#user-list .list li').length, 0, 'Number of results returned');

            //setup user settings tests
            var testUser = $('#user-list .list li').first();
            testUser.find('.show-hide-more').trigger('click');

            var testSettingsPanel = testUser.find('.show-more').first();
            assert.equal(testSettingsPanel.css('display'), 'block', 'Settings panel should be openable');
        });

The final assert fails because the display style is still none and not block. The click event should be changing it from none to block, and when I run the steps one by one in the console this is what happens, so my guess is there is a race condition happening in here. Anyone see what I need to change?

Edit

Adding this after the trigger:

console.log(testSettingsPanel.css('display'));

Gives me 'none', so there definitely seems to be a race condition or something going on. How can I overcome this?

Answer 1

Worked the issue out. Turns out what I thought was a simple toggle click was actually an ajax call, which I didn't recognise because I'm not yet familiar with the library.

This works fine:

var done = assert.async();
            setTimeout(function() {
                assert.equal(testSettingsPanel.css('display'), 'block', 'Settings panel should be openable');

                done();
            }, 1000);