在 Grunt、qUnit 和 PhantomJS 中测试 HTML5 画布答案

【问题标题】：Testing HTML5 canvas in Grunt, qUnit and PhantomJS在 Grunt、qUnit 和 PhantomJS 中测试 HTML5 画布
【发布时间】：2015-02-08 18:55:45
【问题描述】：

我正在尝试创建一个简单的 qUnit 测试，该测试应该使用 grunt-contrib-qunit 在 grunt 和 phantomJs 中运行。

测试在 qUnit 中运行良好，但在使用 grunt 和 phantomJS 时失败。

测试代码为：

  test("testing the filter", function() {
    var img = new Image(3, 2);
    // this is a 3x2 image
    img.src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAIAAAASFvFNAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wIFDScubGmL8QAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAG0lEQVQI1wXBAQ0AAAwCINz7hzKZhwzDLjTaPDVzBUhAyQZRAAAAAElFTkSuQmCC";
    var canvas = document.createElement('canvas');
    canvas.width = 3,
    canvas.height = 2;
    var ctx = canvas.getContext('2d');
    ctx.drawImage(img, 0, 0);
    ok(ctx.getImageData(0,0,1,1).data[0] === 255, 'Expected red-pixel to be 255, actually is ' + ctx.getImageData(0,0,1,1).data[0])
  })

当我在基于浏览器的 qUnit 中运行它时，测试通过了。当我在 Grunt 中使用 PhantomJS 和 qUnit 运行它时，测试失败了。据我所知，drawImage 正在默默地失败，所以它没有写入像素。

其他一切似乎都正常工作。我所有的其他测试都运行良好，包括 DOM 操作测试。只是这一项功能似乎无法正常工作。

【问题讨论】：

恐怕这可能只是 Phantom 的限制...
@jakerella - 谢谢，我希望我刚刚错过了什么:)

标签： gruntjs phantomjs qunit

【解决方案1】：

事实证明，我做的比它必须的要复杂得多。在我尝试绘制画布时，图像根本没有加载。幸运的是，有一种方法可以在 qUnit 中进行异步测试，所以我所要做的就是在加载图像后运行测试。

奇怪的是它在基于浏览器的 qUnit 测试中正确运行，但不是 phantomJs。

工作代码如下：

  test("testing the filter", function( assert ) {
    var done = assert.async();
    var img = document.createElement('img');
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = 3,
    canvas.height = 2;
    img.addEventListener("load", function() {
      ctx.drawImage(img, 0, 0);
      ok(ctx.getImageData(0,0,1,1).data[0] === 255, 'Expected red-pixel to be 255, actually is ' + ctx.getImageData(0,0,1,1).data[0]);
      done();
    })
    // this is a 3x2 image
    img.src = "data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAIAAAASFvFNAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wIFDScubGmL8QAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAG0lEQVQI1wXBAQ0AAAwCINz7hzKZhwzDLjTaPDVzBUhAyQZRAAAAAElFTkSuQmCC";
  })

【讨论】：