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

Question

我正在使用karma,mocha,chai,sinon和Angular mocks进行单元测试.在我的$ scope.loadChart中,我在canvas标签中绘制了一个图表.我正在使用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 以通常的方式模拟此类。