如何通过浏览器特定的执行来测试功能？答案

【问题标题】：How to test function with browser specific execution?如何通过浏览器特定的执行来测试功能？
【发布时间】：2018-12-24 22:28:19
【问题描述】：

我有下一个功能：

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 上失败了。

如何正确测试该功能？

【问题讨论】：

标签： javascript unit-testing testing cross-browser

【解决方案1】：

您说您想对您的功能进行单元测试，但实际上您所做的是集成测试：通过单元测试，您可以专注于在一小段代码中发现这些错误，而这些错误可以通过单独测试代码来找到。相反，您可以结合几个浏览器测试代码，看看它是否可以与这些浏览器中的每一个一起工作，这就是集成测试。没关系 - 进行集成测试原则上没有错。

然而，问题在于您的测试非常脆弱：测试被过度指定。返回确切的值并不重要，并且值更改的情况并不表示错误，无论是在您的隔离代码中，还是在与浏览器的交互中，也不是在浏览器本身中：这些值很可能在不同的浏览器之间（如您所知）不同，但也可能在同一浏览器的不同版本之间，在某些字体文件的不同版本之间，甚至可能在同一浏览器的不同启动之间，甚至在不同的执行之间同一浏览器的同一会话中的代码，例如，如果在会话期间更改了其他参数，例如默认字体。

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

【讨论】：