3

我们正在评估使用 SVG 和 Canvas 等 HTML5 技术的图形 JavaScript 应用程序的未来工作。一个大问题（与所有以 UI 为中心的应用程序一样）是如何为所有功能编写测试。如果我们只能测试 JavaScript 逻辑是不够的，但我们还需要知道接口是否正常工作。

所以我们至少需要像 Selenium 这样的东西，它使我们能够与 SVG/Canvas 进行交互。另外，当然，必须有某种框架来为绘图背后的逻辑编写普通的单元测试。它应该可以免费使用。

有类似的东西吗？此外，由于我们以前根本没有测试此类软件的经验，因此我们将不胜感激如何解决我们的问题以及通常如何完成的任何提示。我相信，我们不是第一个考虑这个问题的人。

提前致谢！

4

1 回答 1

4

我很欣赏这并不能完全回答您的问题，但是关于单元测试，JavaScript 的松散类型使得生成模拟对象变得非常容易，以确保您的应用程序逻辑与（例如）Canvas 元素正确交互。例如，如果你有一个在 cavas 上绘制东西的函数：

function drawSomething(canvas){
    var ctx = canvas.getContext('2d');
    ctx.fillRect(10, 10, 55, 50);
}

然后你可以像这样测试它：

function testdrawSomething(){
    var mockCanvas = {};
    var mockCtx = {};
    mockCanvas.getContext = function(){
        return mockCtx;
    };
    mockCtx.fillRect = function(a,b,c,d){
        // test values here
    }
    drawSomething(mockCanvas);
}

我已经使用RhinoUnit和这种方法，为 UI 密集型 HTML5 站点生成了一些非常全面的单元测试——如果你仔细编写代码（将所有对 DOM 元素的引用作为参数传递给你想要测试的函数），你可以在浏览器之外运行所有单元测试，让它们成为 CI 管道的一部分。

显然，您还需要运行一些浏览器内测试，这就是 Selenium 的用武之地。

于 2012-07-24T11:52:25.717 回答