Qunit with ajax animation extender

I have an ajax animation extender on my page which changes button color on different events like this :

button and extender code is:

 asp:Button ID="target" runat="server" Text="Animate Me" OnClientClick="return false;">
        /asp:Button>
        aspext:AnimationExtender ID="extender" runat="server" TargetControlID="target">
            Animations>
                OnLoad><StyleAction Attribute="backgroundColor" Value="red" /></OnLoad>
                OnClick><StyleAction Attribute="backgroundColor" Value="blue" /></OnClick>
                OnMouseOver><StyleAction Attribute="backgroundColor" Value="blue" />/OnMouseOver>
                <OnMouseOut><StyleAction Attribute="backgroundColor" Value="green" /></OnMouseOut>
                OnHoverOver><StyleAction Attribute="color" Value="blue" /></OnHoverOver>
                OnHoverOut><StyleAction Attribute="color" Value="yellow" /></OnHoverOut>
            /Animations>
        /aspext:AnimationExtender>

I have Qunit test written on document.ready which matches the background color of button with expected value on load like this.

开发者_运维问答    $(document).ready(function () {
        module('Animation OnLoad tests');
        test(' Animation OnLoad ', function () {
                panel = $('#target');
                var actual = panel.css("background-color");
                equals(actual, "red", 'Event failed to fire');                           
        });
    });  

but problem is that test run before extender changes color of button, I also tried page load instead of document.ready but same issue. Please suggest me solution to this.

Thanks.

---

Take a look at how to write async tests with stop() and start(). You need a callback for the call to start though.