How do I check if an item is shown after a click?
I am working with a mocha unit test and I need to check if an element is visible after clicking 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 fails. problem is $("#completed-task").is(":visible")
always false, on real page this works fine, any suggestions?
source to share
You have an animation of an element that is shown / hidden. You must add your assertion after the timeout. Since you are checking if it is: visible, you do not need to wait for the entire animation to complete. I'll 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 docs link: fooobar.com/questions/24592 / ...
source to share