茉莉花测试元素是否淡出

Question

I have the following two functions that I'm writing some Jasmine tests for:

var showSpinner = function () {
    $('#spinner').remove();
    $('<div id="spinner"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></div>')
        .appendTo('body')
        .hide()
        .fadeIn();
};

var hideSpinner = function () {
    $('#spinner').fadeOut(function () {
        $(this).remove();
    });
};

and my tests are as follows:

it('show spinner', function () {
    showSpinner();
    expect($('#spinner').length).toEqual(1);
});

it('hide spinner', function () {
    hideSpinner();
    expect($('#spinner').length).toEqual(0);
});

The first test works fine. However due to the fadeOut on the hideSpinner the second test fails.

I tried to amend it to use a timeout eg

it('hide spinner', function () {
    hideSpinner();
    setTimeout(function () {
        expect($('#spinner').length).toEqual(0);
    }, 100);
});

But that causes the test to pass but with a warning about having no expectations...

How can I test this?

Answer 1

You should read about Jasmine's Asynchronous Support :

it('hide spinner', function(done) {
    hideSpinner();
    setTimeout(function() {
        expect($('#spinner').length).toEqual(0);
        done();
    }, 400);
});

400 ms is the default timeout for $.fadeOut .