Question

我正在尝试创建一个简单的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操作测试。只是这一个功能似乎无法正常工作。

Answer 1

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

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

工作代码如下：

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

在Grunt，qUnit和PhantomJS中测试HTML5画布

1 个答案: