Search jQuery

jQuery Forum

QUnit and Testing

north

Issue when using qunit-fixture container

Answered

Need more info
Answered
Working on it

in QUnit and Testing • 1 year ago

Hi,

I have just started writing two small unit tests.

The first one checks if elements of a list get appended with a container each.

The second one is supposed to check for the existence of a CSS class on a list element when the mouse enters that element. I use the trigger function for this.

In the beginning I just copied the HTML somewhere into the page, and both tests passed.

Then I packed the HTML into the qunit-fixture container, to remove it from sight, and now the second test fails for some reason. It doesn't fail though, if I remove the first test or if I reverse the order of the tests.

Here is the JS code (original order):

test('loadNavi', function() {
var $elemsWithSubnav = $('#nav').find('li[id$="Nav"]');
var idCount = $elemsWithSubnav.length;
var divCount = $elemsWithSubnav.find('div').length;
expect(2);
ok( $('#nav').find('> li').length > 0, "selector returns elements / navigation is present" );
equals( divCount, idCount, "subnav gets appended to appropriate list elems" );
});
test('hoverNavi', function() {
var $firstNavElem = $('#nav').find('> li:first');
var enterClass, leaveClass;
var handler = function(event) {
if (event.type == 'mouseenter' && $(this).hasClass('over')) {
enterClass = 'over';
}
else if (event.type == 'mouseleave' && !$(this).hasClass('over')) {
leaveClass = '';
}
};
expect(2);
$firstNavElem.bind('mouseenter mouseleave', handler);
$firstNavElem.trigger('mouseenter');
equals( enterClass, 'over', 'over class added on mouseenter');
$firstNavElem.trigger('mouseleave');
equals( leaveClass, '', 'over class removed on mouseleave');
});

So far I couldn't figure out what the problem is. Anybody?

Thanks!

Replies(4)

joern.zae..

Re: Issue when using qunit-fixture container

1 year ago

Could you provide a complete testpage, maybe via jsbin.com? Can't see anything wrong in just the JavaScript code.

north

Re: Issue when using qunit-fixture container

1 year ago

Hi Joern,

this is a condensed version of the test page:

<!DOCTYPE html>
<html>
<head>
<title>QUnit Test Suite</title>
<link rel="stylesheet" href="static/css/layout.css" type="text/css" media="screen">
<link rel="stylesheet" href="static/css/qunit.css" type="text/css" media="screen">
<script type="text/javascript" src="static/source/qunit.js"></script>
<script type="text/javascript" src="static/js/min.js"></script>
<script type="text/javascript" src="static/source/tests.js"></script>
</head>
<body>
<div id="qunit-fixture">
<div class="navigation sprite">
    <ul id="nav">
        <li id="test1Nav" class="level0 main">Test1</li>
        <li id="test2Nav" class="level0 main">Test2</li>
        <li id="test3Nav" class="level0 main">Test3</li>
    </ul>
</div>
<script type="text/javascript">
//<![CDATA[
var OBJ = OBJ || {};
OBJ.test1Nav = '<div>Test1</div>';
OBJ.test2Nav = '<div>Test2</div>';
OBJ.test3Nav = '<div>Test3</div>';
//]]>
</script>
</div>
<h1 id="qunit-header">QUnit Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
</body>
</html>

What the min.js does is pipe the code from the Obj.test1Nav etc. into the list elements having the corresponding ID, attach the event handler for the mouseenter/-leave etc. All the code in min.js seems to work.

Hope that gives you a better picture...

joern.zae..

Re: Issue when using qunit-fixture container

1 year ago

I highly recommend refactoring your code into some kind of library, that you load on both your testpage as well as in your actual application. If you have code that both sides can call, you can actually write unit tests, instead of just testing random code on a page where you never know when or how often its actually run.

In other words, don't put any script elements into the fixture, that's not something QUnit supports.

north

Re: Issue when using qunit-fixture container

1 year ago

Thanks for the hint, Joern. The case with the JS in the fixture is a bit complicated. On our site that JS can't be put into min.js (our library) since it comes from a CMS, and it needs to be in the CMS so that certain people can edit it (don't ask me about the details ;) The only thing I could do was to at least add the strings to our namespace (called OBJ in the example code above), so that they don't lie around in the global namespace.

I could put it into a separate file or add it to the head for testing the code though. But the failure still occurs even when I remove the JS from the fixture.

Somehow the mouseenter doesn't seem to get triggered in the second test. If I add it to the first test, or even run it in between tests, it works as expected.

My guess now is, that since the QUnit reset function removes the content from the fixture and then adds it to the DOM again, the events from the library cannot be triggered anymore.

Top Reply

Response title

Attachments

jQuery Forum

Issue when using qunit-fixture container

Answered

Replies(4)

Re: Issue when using qunit-fixture container

Re: Issue when using qunit-fixture container

Re: Issue when using qunit-fixture container

Re: Issue when using qunit-fixture container

Statistics

Tags

Actions

Related Posts