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

Question

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

Chartjs 需要这段代码document.getElemetById('#canvas').getContext('2d')。我如何在Sinon中存根？我的测试卡在这条线上。

Answer 1

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

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

Answer 2

您应该将该 DOM 访问包装在一个方法中。然后你可以模拟那个方法。

var DomAccess = function() {} 
DomAccess.prototype.get2dCanvas = function() {
    return document.getElementById('#canvas').getContext('2d');
}

var domAccess = new DomAccess();
var context = domAccess.get2dContext();

您现在可以使用 sinon 以通常的方式模拟这个类。