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?

Try calling `Tracker.flush();` between the two lines in your test. Does that help? — colllin, Nov 27 '14 at 02:58
Otherwise it would help to see your code that handles the 'click' event. — colllin, Nov 27 '14 at 02:59
@colllin it didn't work :-( this is my js code http://pastebin.com/axrZWJiK (relevant code) and this is my template http://pastebin.com/p3f8ApRX — juanp_1982, Nov 27 '14 at 14:18

score -1 · Answer 1 · edited May 23 '17 at 12:16

-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

edited May 23 '17 at 12:16

Community

1
1

answered Nov 28 '14 at 04:14

colllin

9,442
9
49
65

it didn't work :-( I even tried with `done()` and `this.timeout(10000)` . I also tried something like this http://pastebin.com/7EdA5jc5 . the first `console.log()` is displayed but the sencond one isn't. that makes me think that the program get lost somewhere inside the click event... – juanp_1982 Nov 28 '14 at 18:43
Well, now your second function is being bound as a click handler, right? Not calling the click method. So you're no longer triggering a click. – colllin Nov 28 '14 at 23:53
I don't know enough about Mocha to help you, but if you think your code is working right, then the problem is that the test is checking the `':visible'` state of the element before the animation has had a chance to make it visible. You need to figure out how to delay the check until after the animation has started. – colllin Nov 28 '14 at 23:57
This example might be helpful too: http://lostechies.com/derickbailey/2012/08/17/asynchronous-unit-tests-with-mocha-promises-and-winjs/ – colllin Nov 28 '14 at 23:58
@juanp_1982 Did you see these comments? – colllin Dec 01 '14 at 01:07
Hi $collin thanks for you help, I also tried what you suggested in you pastebin and I never get to see the second message, I even increase the time to `this.timeout(10000);` and didn't work, my guess is that faking a click is disrupting the app – juanp_1982 Dec 01 '14 at 14:28
`timeout` increases the allowed timeout, but does not seem to cause the script to "wait". – Luke Sep 21 '16 at 19:05
@Luke Then do you need to put the assertion in a setTimeout? See updated answer. – colllin Sep 22 '16 at 00:39

how to test showing an element after a click?

1 Answers1

Linked