如何爲包含來自其他類/文件的全局變量的方法編寫茉莉花測試？

Question

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

ReferenceError: Can't find variable: moving_canvas_context in file (line 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

it is declared globally and works in reality

嗯，它也需要被宣佈爲測試運行時。所以你可能會錯過對腳本的引用，它在測試夾具html中定義。

此外，全局變量通常不是一個好主意，它們往往會產生困難的錯誤。由於您已經在使用茉莉花作爲測試框架，因此嘗試在您傳遞給測試代碼的某些內容中抽象該全局變量的依賴關係。然後，用茉莉花的嘲諷能力來測試它。

如果從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參數茉莉和隔離測試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);