1

I'm trying to test some "style set" functions, and I'm facing issues because I need to wait until the element if fully rendered, then read its property and check if it was sucesfully changed. I know that this is pretty obvious, but I was wondering if there is a way to do the same but without waiting.

For example, I want to test this function:

function changeWidth() {
  document.getElementById('test').style.width = '200px';
}

And I use this test in Mocha:

it('Width should be 200px', () => {
  changeWidth();
  assert.equal(document.getElementById('test').style.width, '200px');
});

That assertion will always returns false. The following test will work:

it('Width should be 200px', () => {
  changeWidth();
  window.setTimeout( () => {
    assert.equal(document.getElementById('test').style.width, '200px');
  }, 1000);
});

It has to be a better way to accomplish the same without using timeouts. Can someone guide me? Thanks!

1

1 Answer 1

1

There are two things I noted:

  1. No, you cannot force a render to happen synchronously. The browser decides, so the test will be async and a bit messy. That being said, there are (a bit) more elegant answers than setTimeout.
  2. Your test is synchronous, while the logic is asynchronous. That means your test will always pass, as the assertion is called after the test has finished (see this). You need to pass a callback to the test that can be called when the test has finished.

You could do the tests somewhat cleaner by using requestAnimationFrame. Just create a helper that will run each function passed to it in a seperate animation frame and you will be guaranteed separate render phases.

function runSteps(fns) {
    if(!fns.length) return;

    var current = fns[0];
    var rest = fns.slice(1);

    requestAnimationFrame(function() {
        current();
        runSteps(rest);
    })
}

// note the `done` argument - it is what makes Mocha able to know
// when the test is finished. See https://stackoverflow.com/questions/20748918/cannot-run-mocha-js-in-synchronous-mode
it('should run dom render steps chronologically', function(done) {
    function assertWidthChanged(){ 
        assert.equal(
            document.getElementById('test').style.width, 
            '200px'
        );
    }

    runSteps([
        changeWidth,
        assertWidthChanged,
        done
    ]);
}
2
  • Thanks for your answer! I'm still a newbie in terms of "testing", so I really appreciate this kind of precision :). Only one question: what do you mean by "testing at the wrong abstraction layer"? In my case I'm developing tests for a jQuery plugin, so I need to be sure that DOM elements have the correct CSS properties. Jun 19, 2017 at 13:29
  • Forget it - I am too tired now to understand it myself, and I am not sure I agree with myself anymore. I'll delete that.
    – oligofren
    Jun 19, 2017 at 13:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.