如何為包含另一個類/文件中的全局變量的方法編寫茉莉花測試？

Question

我的測試失敗的原因如下：

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

Answer 1

它已在全球范圍內宣布並在現實中起作用

好了，測試運行時也需要聲明它。 因此，您可能缺少對在測試裝置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();
};

您可以使用jasmine模擬canvas參數，並Canvas_Actions測試Canvas_Actions 。

可以注意到，此代碼可能會挖掘 Canvas類，並且您可能會發現clear_canvas屬於該類。 使用測試一次指導您的設計。

Answer 2

喬丹（Jordão）絕對正確，但是還有一個丑陋的選擇。
使用beforeEach方法將全局對象附加到窗口。 下面的代碼可能無法運行（尚未對其進行測試），但應該足以理解如何解決此茉莉花全局對象問題。

(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 ： window.Canvas_Actions更改為global.Canvas_Actions

Answer 3

看起來 JasmineJS使用了global屬性。 因此，盡管有@Jordão的回答，您也可以替換

window.Canvas_Actions = (function() {

與

global.Canvas_Actions = (function() {