使用 Mocha 测试样式集

Question

我正在尝试测试一些“样式集”功能，但我遇到了一些问题，因为我需要等到元素完全呈现后，然后读取其属性并检查它是否已成功更改。我知道这很明显，但我想知道是否有办法做到这一点而无需等待。

比如我想测试这个功能：

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

我在 Mocha 中使用了这个测试：

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

该断言将始终返回false。以下测试将起作用：

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

它必须是一种更好的方式来完成相同的任务，而无需使用超时。有人可以指导我吗？谢谢！

Answer 1

我注意到了两件事：

1. 不，您不能强制同步进行渲染。浏览器决定，所以测试将是异步的并且有点混乱。话虽这么说，有（有点）比setTimeout 更优雅的答案。
2. 您的测试是同步的，而逻辑是异步的。这意味着您的测试将始终通过，因为在测试完成后会调用断言（请参阅this）。您需要将回调传递给测试完成后可以调用的测试。

您可以使用requestAnimationFrame 进行更简洁的测试。只需创建一个帮助程序，它将在单独的动画帧中运行传递给它的每个函数，并且您将保证单独的渲染阶段。

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