HTML-Canvas-Unit-Tests

Diskutiert, wie in der Frage Kommentare es ist wichtig zu prüfen, dass bestimmte Funktionen aufgerufen worden mit passenden Parametern. pcjuzer vorgeschlagen, die Verwendung von proxy-pattern. Das folgende Beispiel (RightJS code) zeigt eine Möglichkeit, dies zu tun:

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);

Finden Sie eine funktionsfähige demo -hier.

Habe ich ähnliche Muster zu implementieren einige features fehlen in der API. Müssen Sie möglicherweise, es zu hacken, ein bisschen zu passen Ihre Zwecke. Viel Glück!

InformationsquelleAutor Juho Vepsäläinen

Ich machen es wirklich einfach, Leinwände und testen mit mocha. Ich mache es ähnlich wie Juho Vepsäläinen, aber meine sieht ein wenig einfacher. Ich schrieb es in ec2015.

CanvasMock Klasse:

import ContextMock from './ContextMock.js'

export default class {
  constructor (width, height)
  {
    this.mock = [];
    this.width = width;
    this.height = height;
    this.context = new ContextMock(this.mock);
  }

  getContext (string)
  {
    this.mock.push('[getContext ' + string + ']')
    return this.context
  }
}

ContextMock Klasse:

export default class {
  constructor(mock)
  {
    this.mock = mock
  }

  beginPath()
  {
    this.mock.push('[beginPath]')
  }

  moveTo(x, y)
  {
    this.mock.push('[moveTo ' + x + ', ' + y + ']')
  }

  lineTo(x, y)
  {
    this.mock.push('[lineTo ' + x + ', ' + y + ']')
  }

  stroke()
  {
    this.mock.push('[stroke]')
  }
}

einige Mokka-tests, bewertet die Funktionalität der mock selbst:

describe('CanvasMock and ContextMock', ()=> {
    it('should be able to return width and height', ()=> {
      let canvas = new CanvasMock(500,600)
      assert.equal(canvas.width, 500)
      assert.equal(canvas.height, 600)
    })
    it('should be able to update mock for getContext', ()=> {
      let canvas = new CanvasMock(500,600)
      let ctx = canvas.getContext('2d')
      assert.equal(canvas.mock, '[getContext 2d]')
    })
})

Einen Mokka-tests zur Evaluierung der Funktionalität einer Funktion zurückgibt, Leinwand:

import Myfunction from 'MyFunction.js'

describe('MyFuntion', ()=> {
it('should be able to return correct canvas', ()=> {
  let testCanvas = new CanvasMock(500,600)
  let ctx = testCanvas.getContext('2d')
  ctx.beginPath()
  ctx.moveTo(0,0)
  ctx.lineTo(8,8)
  ctx.stroke()
  assert.deepEqual(MyFunction(new CanvasMock(500,600), 8, 8), canvas.mock, [ '[getContext 2d]', '[beginPath]', '[moveTo 0, 0]', [lineTo 8, 8]', '[stroke]' ])
})

so, in diesem Beispiel meinefunktion nimmt die Leinwand, die Sie übergeben als argument ( Myfunction(neue CanvasMock(500,600), 8, 8) ) und die schreibt eine Zeile von 0,0 auf das, was Sie übergeben Sie als Argumente ( Myfunction(neue CanvasMock(500,600),** 8, 8**) ) und dann gibt die bearbeitete Leinwand.

so, wenn Sie die Funktion im realen Leben, die Sie übergeben können eine tatsächliche Leinwand, keine Leinwand mock-und dann wird es laufen die gleichen Methoden, aber tatsächlichen Leinwand Dinge.

Lesen über mocks hier

InformationsquelleAutor Sam

Da die "Formen" und "Linien" gezeichnet auf einer Leinwand sind nicht die tatsächlichen Objekte (es ist wie Tinte auf Papier), wäre es sehr schwer (unmöglich?) eine normale unit-test.

Die besten, die Sie tun können mit standard-canvas-Sie analysieren die pixel-Daten (aus der putImageData/getImageData. Wie das, was bedraw sagte).

Nun, ich habe dies noch nicht ausprobiert, aber es könnte mehr sein, was Sie brauchen. Kuchen ist eine Bibliothek für die Leinwand. Es ist über eine Menge von den putImageData/getImageData. Dieses Beispiel helfen könnte, mit dem, was Sie zu tun versuchen, mit einem test.

Hoffe, das hilft, Ihre Frage zu beantworten.

InformationsquelleAutor JT703

Aus Entwickler-Sicht ist die Leinwand fast nur schreiben, weil Sie einmal gezogen, ist es schwierig programmgesteuert zu bekommen, etwas sinnvolles zurück. Sicher kann man eine Punkt-für-Punkt Anerkennung, aber das ist zu mühsam und solche tests sind schwer zu geschrieben und gepflegt.

Ist es besser, das abfangen der Anrufe, die auf ein canvas-Objekt und untersuchen diese. Hier sind ein paar Optionen:

1. Erstellen Sie ein wrapper-Objekt, das zeichnet alle Anrufe. Juho Vepsäläinen geschrieben ein Beispiel.
2. Wenn möglich, benutzen Sie eine Bibliothek wie frabric.js das bietet eine höhere Ebene der Abstraktion, zur Zeichnung. Die "Zeichnungen" sind in JS Objekte, die untersucht werden können, die direkt oder in SVG konvertiert die einfacher zu überprüfen und zu testen.
3. Verwenden Kantine zu fangen alle der Funktionsaufrufe und änderungen der attribute von einem canvas-Objekt. Dies ist vergleichbar mit option 1.
4. Verwenden Kantine mit Kaninchen, die bietet Ihnen eine Reihe von Jasmine custom Matcher für die Größe und Ausrichtung und eine Funktion getBBox (), die verwendet werden können, um zu bestimmen, die Größe und die position von dem Zeug gezeichnet wird, auf die Leinwand.

InformationsquelleAutor Cristi Ingineru