Using Jasemine with HTML5 Canvas
760 views
Skip to first unread message
aqua
Sep 13, 2011, 5:50:50 AM9/13/11
to Jasmine
Hello all,
i got a new project in which i have to use the html5 canvas element to
draw some stuff in the browser.
now i decided to use the jasmine framework to write some good code,
but im stuck in setting up the tests.
it would be nice if i get some hints in the correct direction, because
im new to javascript and the html DOM
concepts.
so i have a simple html file:
..<body><canvas id="screen"></canvas>...
then i have a js file, which uses some functions from this canvas
object:
var DOM_canvas = document.getElementById( "screen" );
_this.Screen = new cScreen( DOM_canvas );
...
function cScreen( canvas )
{
var _this = this;
_this.support = false;
var canvas = canvas;
var ctx = null;
var ctxType = null;
var init = function()
{
if ( !canvas.getContext ) { return false; } //
_this.support = true;
ctx = canvas.getContext( '2d' );
ctxtype = "2d";
_this.drawTrash("a lot!");
}
...
}
now my problem is: i cant initialize the object without the <canvas>
element in the document. i can append or create the canvas element,
but while initialization, it will draw some trash on my jasmine test
output. so i need to "fake" this DOM element, and append some
functions to it, which i can call.
but when i fake it, i cant capture some events, for example a
mouseclick or keypress event.
how can i do this? i would be very happy about a few pointers in the
right direction, so i can gain the knowledge to do it =)
how is generally the best way to handle DOM elements, which have their
own methods?
thx a lot! :)
ps: i searched one hour, but i didnt find an answer which solves my
prob.
i got a new project in which i have to use the html5 canvas element to
draw some stuff in the browser.
now i decided to use the jasmine framework to write some good code,
but im stuck in setting up the tests.
it would be nice if i get some hints in the correct direction, because
im new to javascript and the html DOM
concepts.
so i have a simple html file:
..<body><canvas id="screen"></canvas>...
then i have a js file, which uses some functions from this canvas
object:
var DOM_canvas = document.getElementById( "screen" );
_this.Screen = new cScreen( DOM_canvas );
...
function cScreen( canvas )
{
var _this = this;
_this.support = false;
var canvas = canvas;
var ctx = null;
var ctxType = null;
var init = function()
{
if ( !canvas.getContext ) { return false; } //
_this.support = true;
ctx = canvas.getContext( '2d' );
ctxtype = "2d";
_this.drawTrash("a lot!");
}
...
}
now my problem is: i cant initialize the object without the <canvas>
element in the document. i can append or create the canvas element,
but while initialization, it will draw some trash on my jasmine test
output. so i need to "fake" this DOM element, and append some
functions to it, which i can call.
but when i fake it, i cant capture some events, for example a
mouseclick or keypress event.
how can i do this? i would be very happy about a few pointers in the
right direction, so i can gain the knowledge to do it =)
how is generally the best way to handle DOM elements, which have their
own methods?
thx a lot! :)
ps: i searched one hour, but i didnt find an answer which solves my
prob.
Derick Bailey
Sep 13, 2011, 8:18:10 AM9/13/11
to jasmi...@googlegroups.com
check out the jasmine-jquery plugin, and it's fixtures feature https://github.com/velesin/jasmine-jquery
this lets you append html elements to your jasmine test runner DOM, without them becoming visible on the screen. it cleans up all of the fixtures in between tests, too.
with that, you could do something like this:
describe("my canvas stuff", function(){
beforeEach(function(){
setFixtures("<canvas id='screen'></canvas>");
});
it("does stuff with the canvas", function(){
// … execute your code here, and it will find the #screen canvas element
});
});
-derick
--
-----------------------
END OF LINE
Derick Bailey
- @derickbailey
- http://derickbailey.lostechies.com
- http://derickbailey.tumblr.com
Muted Solutions, LLC
- @mutedsolutions
- http://mutedsolutions.com
--
You received this message because you are subscribed to the Google Groups "Jasmine" group.
To post to this group, send email to jasmi...@googlegroups.com.
To unsubscribe from this group, send email to jasmine-js+...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/jasmine-js?hl=en.
Robert Ferney
Sep 15, 2011, 3:39:50 PM9/15/11
to jasmi...@googlegroups.com
One thing that I did not see in your sample code was a fixture.
That's the bit where you supply html bits for the code and tests to work on.
- Robert Ferney
- Strategy Game Bags http://gamebag.biz/
Reply all
Reply to author
Forward
0 new messages