如何测试浏览器特定执行的功能

Question

我有下一个功能：

fillText: function(text) {  
this.node.innerHTML = text;
return {
width: this.node.clientWidth,
height: this.node.clientHeight
};
},

并对其进行单元测试：

it('Should return width and height of text node.', function() {
var sizeInPx = unit.fillText('ABCDEFGHIJKLMNOPQRSTUVWXYZ');
// width and height of text is different for different browsers
var widths = [408, 413, 421];
var heights = [13, 14];
expect(sizeInPx.width).to.be.oneOf(widths);
expect(sizeInPx.height).to.be.oneOf(heights);
});

这个测试是非跨平台的，因为宽度和高度是为不同的浏览器(Chrome，IE…(指定的。现在这个测试在MacOS上失败了。

如何测试该功能？

Answer 1

你说你想对你的功能进行单元测试，但实际上你要做的是集成测试：通过单元测试，你可以专注于在一小段代码中找到那些bug，这些bug可以通过隔离测试代码来找到。相反，您可以将代码与几个浏览器结合起来进行测试，看看它是否能与这些浏览器中的每一个协同工作，这就是集成测试。这是好的——做集成测试原则上没有错。

然而，有问题的是，你的测试非常脆弱：测试过于具体。返回确切的值并不重要，值发生变化的情况并不意味着存在错误，无论是在您的孤立代码中，还是在与浏览器的交互中，还是浏览器本身中：不同浏览器之间的值可能不同(正如您所知(，但同一浏览器的不同版本之间也可能不同，在某些字体文件的不同版本之间，甚至可能在同一浏览器的不同启动之间，甚至在同一个浏览器的同一会话内代码的不同执行之间，例如，如果在会话期间其他参数(如默认字体(发生了更改。

那么，你该如何改进你的测试呢？远离具体的数字，例如，检查a(元素width和height是否都是正整数，b(检查宽度是否大于高度，对于像'ABCDEFGHIJKLMNOPQRSTUVWXYZ'这样的文本应该是这种情况，c(测试'A<br>B<br>C...'的高度是否大于宽度。