7

我的测试失败，原因如下：

ReferenceError：找不到变量：文件中的moving_canvas_context（第5行）

我理解测试失败的原因。它不理解该变量，因为它是在单独的 JavaScript 文件中定义的。但是，它是全局声明的，并且在现实中有效。

如何为此clear_canvas功能编写茉莉花测试？

JavaScript Canvas_Actions：

(function() {
  window.Canvas_Actions = (function() {
    function Canvas_Actions() {}
    Canvas_Actions.prototype.clear_canvas = function() {
      moving_canvas_context.clearRect(0, 0, moving_canvas.width, moving_canvas.height);
      main_canvas_context.drawImage(window.background_image, 0, 0, main_canvas.width, main_canvas.height);
      return window.canvas_objects = [];
    };
    return Canvas_Actions;
  })();
}).call(this);

茉莉花测试Canvas_Actions：

(function() {
  describe('Canvas Actions', function() {
    return describe('clear_canvas', function() {
      return it('clears the canvases and deletes all objects', function() {
        var actions;
        jasmine.getFixtures().fixturesPath = "../spec/javascript/fixtures";
        loadFixtures("canvas_fixture.html");
        actions = new Canvas_Actions();
        actions.clear_canvas();
        return expect(canvas_objects).toEqual([]);
      });
    });
  });
}).call(this);
4

3 回答 3

11

它在全球范围内声明并在现实中工作

好吧，它还需要在测试运行时声明。因此，您可能缺少对在测试夹具 html 中定义的脚本的引用。

此外，全局变量通常不是一个好主意，它们往往会产生困难的错误。由于您已经在使用 jasmine 作为测试框架，因此请尝试将对该全局变量的依赖关系抽象为传递给被测代码的内容。然后，用茉莉的嘲讽能力来测试一下。

如果从 中删除全局引用Canvas_Actions，它可能如下所示：

var Canvas_Actions = function(canvas) { 
  this.canvas = canvas; 
}
Canvas_Actions.prototype.clear_canvas = function(background_image) {
  var canvas = this.canvas;
  canvas.getContext().clearRect(0, 0, canvas.width, canvas.height);
  canvas.getContext().drawImage(background_image, 0, 0, canvas.width, canvas.height);
  canvas.clearObjects();
};

canvas您可以用 jasmine模拟参数并单独测试Canvas_Actions。

可以注意到，这段代码可能会发现一个Canvas类，您可能会发现它clear_canvas属于其中。使用测试来指导您的设计，一次一步。

于 2011-11-18T01:44:55.577 回答
4

Jordão 是绝对正确的，但也有一个丑陋的选择。
在 beforeEach 方法中将全局对象附加到窗口。下面的代码可能不起作用（还没有测试过），但应该足以理解如何解决这个 jasmine 全局对象问题。

(function() {
  describe('Canvas Actions', function() {
    beforeEach(function () {
        window.Canvas_Actions = (function() {
function Canvas_Actions() {}
Canvas_Actions.prototype.clear_canvas = function() {
  moving_canvas_context.clearRect(0, 0, moving_canvas.width, moving_canvas.height);
  main_canvas_context.drawImage(window.background_image, 0, 0, main_canvas.width, main_canvas.height);
  return window.canvas_objects = [];
};
return Canvas_Actions;
})();
    });
return describe('clear_canvas', function() {

  return it('clears the canvases and deletes all objects', function() {
    var actions;
    jasmine.getFixtures().fixturesPath = "../spec/javascript/fixtures";
    loadFixtures("canvas_fixture.html");
    actions = window.Canvas_Actions;
    actions.clear_canvas();
    return expect(canvas_objects).toEqual([]);
  });
});
  });
}).call(this);

编辑：根据@John Henckel 和@serv-inc 的评论，显然可能有一个错误（ReferenceError: window is not defined）来修复它，而不是像这样window使用global：window.Canvas_Actions更改为global.Canvas_Actions

于 2014-04-14T13:35:30.683 回答
3

似乎JasmineJS使用了该global属性。所以@Jordão 的回答不顾一切，你可以替换

window.Canvas_Actions = (function() {

和

global.Canvas_Actions = (function() {
于 2019-06-26T10:08:02.610 回答