HTML Canvas 单元测试 [英] HTML Canvas Unit testing

问题描述

如何对在 HTML 画布上绘制的 Javascript 进行单元测试?应检查画布上的绘图.

How can I unit-test Javascript that draws on an HTML canvas? Drawing on the canvas should be checked.

推荐答案

正如问题评论中所讨论的，检查某些函数是否已使用合适的参数调用是很重要的.pcjuzer 提出了使用代理模式.以下示例(RightJS 代码)展示了一种方法:

As discussed in the question comments it's important to check that certain functions have been invoked with suitable parameters. pcjuzer proposed the usage of proxy pattern. The following example (RightJS code) shows one way to do this:

var Context = new Class({
    initialize: function($canvasElem) {
        this._ctx = $canvasElem._.getContext('2d');

        this._calls = []; // names/args of recorded calls

        this._initMethods();
    },
    _initMethods: function() {
        // define methods to test here
        // no way to introspect so we have to do some extra work :(
        var methods = {
            fill: function() {
                this._ctx.fill();
            },
            lineTo: function(x, y) {
                this._ctx.lineTo(x, y);
            },
            moveTo: function(x, y) {
                this._ctx.moveTo(x, y);
            },
            stroke: function() {
                this._ctx.stroke();
            }
            // and so on
        };

        // attach methods to the class itself
        var scope = this;
        var addMethod = function(name, method) {
            scope[methodName] = function() {
                scope.record(name, arguments);

                method.apply(scope, arguments);
            };
        }

        for(var methodName in methods) {
            var method = methods[methodName];

            addMethod(methodName, method);
        }
    },
    assign: function(k, v) {
        this._ctx[k] = v;
    },
    record: function(methodName, args) {
        this._calls.push({name: methodName, args: args});
    },
    getCalls: function() {
        return this._calls;
    }
    // TODO: expand API as needed
});

// Usage
var ctx = new Context($('myCanvas'));

ctx.moveTo(34, 54);
ctx.lineTo(63, 12);

ctx.assign('strokeStyle', "#FF00FF");
ctx.stroke();

var calls = ctx.getCalls();

console.log(calls);

您可以在此处找到功能演示.

You can find a functional demo here.

我使用了类似的模式来实现 API 中缺少的一些功能.您可能需要稍微修改一下以符合您的目的.祝你好运！

I have used a similar pattern to implement some features missing from the API. You might need to hack it a bit to fit your purposes. Good luck!

这篇关于HTML Canvas 单元测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！