Come si scrive un test al gelsomino per un metodo che contiene una variabile globale da un'altra classe/file?

Question

I miei test non riesce per il seguente motivo:

ReferenceError: Can't find variable: moving_canvas_context in file (line 5)

capisco il motivo per il test sta fallendo. Non capisce la variabile poiché è definita in un file javascript separato. Tuttavia, è dichiarato globalmente e funziona nella realtà.

Come si scrive un test al gelsomino per questa funzione clear_canvas?

Canvas_actions JavaScript:

(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 prova per 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

Beh, ha anche bisogno di essere dichiarato quando il test viene eseguito. Quindi probabilmente ti manca un riferimento allo script in cui è definito nel html della fixing test.

Inoltre, le variabili globali non sono normalmente una buona idea, tendono a creare bug difficili. Dato che stai già usando jasmine come framework di testing, prova ad astrarre la dipendenza da quella variabile globale in qualcosa che passi al tuo codice sotto test. Quindi, usa le abilità di derisione del gelsomino per testarlo.

Se si rimuove i riferimenti a livello mondiale da Canvas_Actions, potrebbe assomigliare a questo:

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

È possibile prendere in giro l'argomento canvas con gelsomino e prova Canvas_Actions in isolamento.

Come si può notare, questo codice potrebbe dissotterrare una classe Canvas, e si potrebbe scoprire che clear_canvas appartiene in là. Usa i test per guidare il tuo design, un passo alla volta.

Answer 2

Jordão ha assolutamente ragione, tuttavia c'è anche una brutta opzione.
Collegare l'oggetto globale alla finestra in base al metodo Before. Il codice qui sotto probabilmente non funziona (non l'ho testato), ma dovrebbe essere abbastanza buono da capire come aggirare questo problema globale dell'oggetto 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);