How To Test Showing An Element After A Click?

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 j

Solution 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