How to write a jasmine test for a method that contains a global variable from another class / file?

Question

My tests failed because of the following reason:

ReferenceError: Cannot find variable: moving_canvas_context in file (line 5)

I understand the reason the test failed. She does not understand the variable because it is defined in a separate JavaScript file. However, it is announced worldwide and works in reality.

How to write a jasmine test for this clear_canvas function?

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

Jasmine test for 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

declared globally and actually works

Well, it should also be declared when starting the test. Thus, you probably did not provide a link to the script where it is defined in the html test file.

In addition, global variables are usually not a good idea; they tend to create complex errors. Since you already use jasmine as the basis for testing, try to abstract the dependence on this global variable in what you pass into the code under test. Then use the draining powers of jasmine to test it.

If you remove global references from Canvas_Actions , it might look like this:

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

You can mock the canvas argument with jasmine and the Canvas_Actions test in isolation.

As you can see, this code can dig up the canvas class, and you may find that clear_canvas is clear_canvas . Use tests to follow your design step by step.

Answer 2

Giordao is absolutely right, but there is an ugly option.
Attach your global object to the window in the beforeEach method. The code below probably does not work (did not test it), but should be good enough to understand how to get around this global problem with jasmine objects.

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

EDIT: according to the comments of @John Henckel and @ serv-inc, there could obviously be an error ( ReferenceError: window is not defined ) to fix this instead of window use global like: window.Canvas_Actions change to global.Canvas_Actions

Answer 3

JasmineJS seems to be using a global property. Therefore, despite @ Jordão's answer, you can replace

 window.Canvas_Actions = (function() { 

from

 global.Canvas_Actions = (function() {