Как проверить показ элемента после клика?

Question

Я работаю с модульным тестом мокко, и мне нужно проверить, виден ли элемент после щелчка по переключателю. Другими словами, у меня есть две переключатели, которые переключают два элемента с помощью JavaScript, и я хотел бы проверить это.

это мой тест:

it("Checking #completed-task existance", function (done) {
    chai.assert.equal($("#completed-task").length, 1);
    done();
});

it("Checking #completed-task is visible", function (done) {
    $("#master div.onoffswitch").find("input[data-id='completed-task']").click();
    chai.assert.equal($("#completed-task").is(":visible"), true);
});

первый тест проходит, а второй - нет. проблема в том, что $("#completed-task").is(":visible") всегда ложно, на реальной странице это работает просто отлично, какие-либо предложения?

Answer 1

У вас есть анимация на элемент, который отображается / скрывается. Вы должны поставить свое утверждение после тайм-аута. Поскольку вы только проверяете, является ли он "видимым", вам не нужно ждать завершения всей анимации. Я бы начал с 100 мс (или даже 0 мс), а затем посмотреть, если вам нужно больше.

Например:

it("Checking #completed-task is visible", function (done) {
    $("#master div.onoffswitch").find("input[data-id='completed-task']").click();

    // This may be needed to increase the mocha timeout.        
    //this.timeout(100);

    setTimeout(function() {
        chai.assert.equal($("#completed-task").is(":visible"), true);
        done();
    }, 100);
});

Этот ответ содержит более подробную информацию и ссылку на документы: /questions/2840755/kak-uvelichit-vremya-ozhidaniya-dlya-odnogo-testa-v-mokko/2840762#2840762