Unit test Javascript with HTML context

Question

I'm currently writing a javascript game module that takes the following parameter as constructor argument:

{
  gameId : "string for unique game id",
  cssSelector: "selector for target (used to initialze game)"
 }

I have found a way to get around this, see new comment below

I have a pretty good test coverage on everything else, but I can't figure out how to write the following Jasmine test:

describe("Initialization of game", function() {
        it("Should throw expection if css selector is not found", function() {

           // what goes here?

            //negative scenario
           expect(function(){
                          var game = new Game({gameId : '1', cssSelector : "#not-found"});
                        }).toThrow("Cannot find the element corresponding to cssSelector");

          //positive senario
           expect(function(){
                          var game = new Game({gameId : '1', cssSelector : "#found"});
                        }).not.toThrow("Cannot find the element corresponding to cssSelector");
        });

"Solution" I say "solution", because it feels a bit like a hack to get around this. I use the fact that the test is run in HTML and that I can manipulate the environment. So what I did was:

In the negative scenario, use a specifier that is not found. The first expectation will then not fail.
In between on the positive and negative test case, I used jQuerys .append() method to add a div with id "found" to the body

That's it!

the selector itself is a string. What are you using to select DOM element? jQuery,pure js,... — kidwon
– kidwon, Commented Jan 10, 2013 at 11:43
the module itself is dependent on jQuery, so I'll just select the element like '$(cssSelector)'. Have not heard about jQuery.pure.js -- I'll check if out to see if solves my problem - thanks! — pardahlman
– pardahlman, Commented Jan 10, 2013 at 12:11

freethejazz · Accepted Answer · 2013-01-10 15:12:11Z

1

If you need more in depth DOM testing, Jasmine won't do it alone.

For a simple DOM requirements and single test, you can continue doing what you're doing.

For simple, but repeated tests, use beforeEach and afterEach to set up and destroy the DOM elements you need during testing.

For anything but the most simple DOM tests, you could use something like: https://github.com/jeffwatkins/jasmine-dom to extend Jasmine in to the DOM.

answered Jan 10, 2013 at 15:12

freethejazz

2,27516 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pardahlman Over a year ago

jasmine-dom is what I was looking for. I still don't find it elegant, but it will definityly do the trick. Thanks!

Enthusiasmus · Accepted Answer · 2013-01-10 11:41:36Z

0

Maybe because you are missing a ); after the "#not-found"}?

answered Jan 10, 2013 at 11:41

Enthusiasmus

3431 gold badge2 silver badges9 bronze badges

1 Comment

pardahlman Over a year ago

thanks for the post, sorry that's not the problem though -- I removed some code to get it more clear what I'm trying to do and the ); disappeared in that process.

kidwon · Accepted Answer · 2013-01-10 12:15:49Z

0

In jQuery this will work. If there's such DOM node it will have length greater than 0.

var exists = $('cssSelector').length > 0;

answered Jan 10, 2013 at 12:15

kidwon

4,5425 gold badges31 silver badges46 bronze badges

2 Comments

pardahlman Over a year ago

thanks, that's what I ended up using. however, I needed one more thing to get everything right -- I've updated my post with that.

kidwon Over a year ago

I really don't get it, maybe you could be more specific

Collectives™ on Stack Overflow

Unit test Javascript with HTML context

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related