CODEWITHSUNDEEP
qunit
GrantVS
GrantVS

Reputation: 2221

Why is qUnit not recognising my test?

I'm trying-out qUnit for the first time but can't get any tests to run. I created an HTML file added links to the qunit CSS and JavaScript files but when I call test nothing happens. The test run states "0 tests of 0 passed, 0 failed". Any ideas? Here's the source:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
 <link rel="stylesheet" href="http://code.jquery.com/qunit/git/qunit.css" type="text/css" media="screen" />
 <script type="text/javascript" src="http://code.jquery.com/qunit/git/qunit.js"></script>
 <script type="text/javascript">
  $(document).ready(function(){ 
    test("a basic test example", function() {
      ok( true, "this test is fine" );
    });
  });
 </script> 
</head>
<body>
 <h1 id="qunit-header">QUnit example</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">test markup, will be hidden</div>
</body>
</html>

Upvotes: 1

Views: 5164

Answers (1)

Hakan Hastekin
Hakan Hastekin

Reputation: 553

You need to have a html file like this

 <!DOCTYPE html>
    <html>
    <head>
        <title>Test title</title>
        <link href="../../Content/qunit.css" rel="stylesheet" type="text/css" />
        <script src="../../Scripts/jquery-1.7.1.js" type="text/javascript"></script>
        <script src="../../Scripts/qunit.js" type="text/javascript"></script>
        <script src="yourtestfile.js" type="text/javascript"></script>
    </head>
    <body>
        <h1 id="qunit-header">Test title</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">
            <div id="container"></div>
        </div>
    </body>
    </html>

Make a seperate js file which contains your tests. The file should look like

(function ($) {

        module("Your module name", {
            beforeEach: function () {
                 //your setup code goes here
             },
            afterEach: function () {
                //your teardown code goes here
            }
        });

        test("This is your first test", function (assert) {
            assert.ok(true, "this test passed");    
        });

    })(jQuery);

And include this to your html page.

And simply view the html page in a browser.

I warn you, qunit is addictive! :)

Upvotes: 7

Related Questions