Question

我试图测试一些＆＃34;样式集＆＃34;函数，我面临问题因为我需要等到元素完全渲染，然后读取它的属性并检查它是否被改变了。我知道这很明显，但我想知道是否有办法做同样的事情，但没有等待。

例如，我想测试这个函数：

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

我在摩卡中使用了这个测试：

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

我注意到两件事：

不，您无法强制渲染同步发生。浏览器决定，所以测试将是异步的并且有点混乱。话虽如此，但有一些（{有点）优于setTimeout的答案。
您的测试是同步的，而逻辑是异步的。这意味着您的测试将始终通过，因为在测试结束后调用断言（请参阅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
    ]);
}

使用Mocha设置测试样式

1 个答案: