qunit-assert-canvas

A QUnit plugin for asserting individual pixel values within a Canvas element.

QUnit Canvas assertion plugin

This plugin for QUnit adds pixelEqual and notPixelEqual (plus alias pixelNotEqual) assertion methods to test individual pixel values in a given canvas.

assert.pixelEqual(canvas, x, y, r, g, b, a, message);
assert.notPixelEqual(canvas, x, y, r, g, b, a, message);  // Alias: `assert.pixelNotEqual` 

Where:

  • canvas: Reference to a canvas element
  • x, y: Coordinates of the pixel to test
  • r, g, b: The color value (0-255) of the pixel that you expect
  • a: The opacity value (0-255) of the pixel that you expect; may be omitted or passed undefined if you want to ignore it
  • message: Optional message, same as for other assertions
module('Example module', {
  setupfunction() {
    var canvas, context,
        fixtureEl = document.getElementById('qunit-fixture');
    fixtureEl.innerHTML = '<canvas width="5" height="5"></canvas>';
 
    canvas = fixtureEl.firstChild;
    try {
      context = canvas.getContext('2d');
    }
    catch(e) {
      // probably no canvas support, just exit 
      return;
    }
 
    this.canvas = canvas;
    this.context = context;
  }
});
 
test('Example unit test', function(assert) {
  this.context.fillStyle = 'rgba(0, 0, 0, 0)';
  this.context.fillRect(0, 0, 5, 5);
 
  assert.pixelEqual(this.canvas, 0, 0, 0, 0, 0, 0);
  assert.notPixelEqual(this.canvas, 0, 0, 1, 1, 1, 0);
});

For more examples, refer to the unit tests.

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using grunt.