javascript - 在不重新排序属性的情况下获取 HTML

Question

我使用测试驱动开发来测试一些 JS 功能。

这是JS

CardReader.prototype.lockDevice = function() {
    this._buttonElement.disabled = true;
    this._statusElement.innerHTML = " ";
    this._statusElement.innerHTML = 'Waiting for NFC card <img id="image" alt="Waiting" src="/img/waiting.gif" height="16" width="16">';
    this._hardwareAccessor.lockDeviceRequest(this.lockDeviceCallback, this);
};

这是测试：

CardReaderTestCase.prototype.assertWaitingMessageIsAsExpected = function() {
    assertEquals('Waiting for NFC card <img id="image" alt="Waiting" src="/img/waiting.gif" height="16" width="16" />', this.statusElement.innerHTML);
};

但是当我运行测试时，结果显示属性宽度和高度已重新排序到开头，导致断言失败。

有没有办法在不混淆属性的情况下获取 HTML？

Answer 1

没有保证属性的顺序，您正在处理 XML 的序列化。你应该只检查你需要的属性，比如图像宽度。

CardReaderTestCase.prototype.assertWaitingMessageIsAsExpected = function() {
    assertEquals(this.statusElement.childNodes[1].width, 16);
    // Even check the HTML but be more relaxed
    assertEquals(this.statusElement.innerHTML.indexOf("Waiting for NFC card"), 0);
}