how to test showing an element after a click?

Question

I'm working with mocha unit test and I need to test if an element is visible after click on a radio button. In other words I have two radio buttons that toggle two elements using javascript and I would like to test this.

this is my test:

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);
});

the first test passes but the second one doesn't. the problem is that $("#completed-task").is(":visible") is always false, in the actual page this works just fine, any suggestions?

Answer 1

You've got an animation on the element that is being shown / hidden. You need to put your assertion after a timeout. Since you're only checking if it's ':visible', you don't need to wait for the entire animation to complete. I would start with 100ms (or even 0ms) and then see if you need more.

For example:

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);
});

This answer has more details and a link to docs: https://stackoverflow.com/a/15982893/361609