QUnit Fixtures

by ramyaaviji

HTML

<script src="http://code.jquery.com/qunit/qunit-1.12.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/qunit/qunit-1.12.0.css">
<h1 id="qunit-header">Test Suite</h1>

 <h2 id="qunit-banner"></h2>

<div id="qunit-testrunner-toolbar"></div>
 <h2 id="qunit-userAgent"></h2>

<ol id="qunit-tests"></ol>
<div id="qunit-fixture">
    <ul class="nav">' +
        '<li class="nav-item first">1</li>' +
        '<li class="nav-item ">2</li>' +
        '<li class="nav-item ">3</li>' +
        '<li class="nav-item last">4</li>' +
    </ul>
</div>

JavaScript

test("ul should have children", 1, function() {
    
    var $fixture = $( "#qunit-fixture" );
   
    equal($('ul', $fixture).children().length, 4, "ul should have 4 children");
    
    $('ul > li:last', $fixture).remove();
    
});

test("ul first/last have matching class", 2, function() {
    
    var $fixture = $( "#qunit-fixture" );
   
    ok($('ul > li:first', $fixture).hasClass('first'), "first li should have 'first' class'");
    ok($('ul > li:last', $fixture).hasClass('last'), "last li should have 'first' last'");
    
});