使用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中存根化这个代码？我的测试在这一行卡住了。

- Norbs Knight

Answer 1

您可以对document.getElementById进行桩处理，并使其返回一个 stubbed 画布对象，该对象经过编程并返回您选择的上下文对象...

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

- philipisapain

---

这对我不起作用。我收到了一个错误消息：TypeError: Attempted to assign to readonly property。 - Pavol

你在示例中哪一行遇到了错误？ - philipisapain

document.getElementById.withArgs('canvas')，我正在尝试模拟createElement()。 - Pavol

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以通常的方式模拟这个类。

- Martin