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

【问题标题】：Mock document.getElemetById('.form').getContext('2d') using sinon使用 sinon 模拟 document.getElemetById('.form').getContext('2d')
【发布时间】：2015-05-26 08:59:54
【问题描述】：

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

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

【问题讨论】：

标签： html angularjs unit-testing sinon angular-mock

【解决方案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);

【讨论】：

这对我不起作用。我收到一条错误消息：TypeError: Attempted to assign to readonly property
示例的哪一行导致您出现该错误？
document.getElementById.withArgs('canvas')，不过我正在尝试模拟 createElement()

【解决方案2】：

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

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

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

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

【讨论】：