如何测试JavaScriptSVG/Canvas应用程序

How to test a JavaScript SVG/Canvas application?

本文关键字：JavaScriptSVG Canvas 应用程序 测试 何测试      更新时间：2024-02-06

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

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

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

提前感谢！

我很感激这并不能完全回答您的问题，但就单元测试而言，JavaScripts松散类型使生成mock对象变得非常容易，以确保您的应用程序逻辑与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的用武之地

相关文章：