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

您说要对功能进行单元测试，但实际上是集成测试：使用单元测试时，您将重点放在在一小段代码中查找这些错误，这些错误可以通过隔离测试代码来找到。您可以结合几个浏览器测试代码，以查看它是否可以与所有这些浏览器一起使用，这是集成测试。没关系-进行集成测试在原则上没有错。

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

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

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

1 个答案: