html - 模拟 document.getElemetById ('.form' ).getContext ('2d' ) 使用 sinon

Question

我使用 karma、mocha、chai、sinon 和 Angular 模拟进行单元测试。在我的 $scope.loadChart 中，我正在 Canvas 标签中绘制图表。我正在使用 http://www.chartjs.org/绘制图表。

Chartjs 需要这段代码，document.getElemetById('#canvas').getContext('2d')。我如何在 Sinon 中 stub 这个？我的测试卡在了这一行。

Answer 1

您可以 stub document.getElementById 并让它返回一个 Canvas 对象，该对象被 stub 并编程为返回您选择的上下文对象...

//Create your fake canvas and context objects
var canvas = document.createElement('canvas');
var fakeContext = {}; //Replace this with whatever you want your fake context to be

//Have `canvas.getContext('2d')` return your fake context
sinon.stub(canvas, 'getContext');
canvas.getContext.withArgs('2d').returns(fakeContext);

//Have `document.getElementById('canvas')` return your canvas
sinon.stub(document, 'getElementById');
document.getElementById.withArgs('canvas').returns(canvas);