Question

我正在使用业力，摩卡，柴，颂和角嘲讽进行单位测试。在我的 $ 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的常规方式模拟这个类。

使用sinon模拟document.getElemetById（'。form'）。getContext（'2d'）

2 个答案: