qunitjs / qunit

🔮 An easy-to-use JavaScript unit testing framework.

QUnit is a powerful, easy-to-use JavaScript testing framework. It was originally developed for the jQuery project and has since evolved to test any client-side or server-side JavaScript code. QUnit has no dependencies and supports Node.js, SpiderMonkey, and all major web browsers.

Documentation

• API documentation
• Guides how-to
• Browser support
• Integrations

Support

To report a bug or request a new feature, open an issue.

If you need help using QUnit, chat with us on Gitter.

Contribute

If you are interested in helping develop QUnit, check out our contributing guide.

qunit's Issues

start configuration

when the page initially displays it has the 'Hide passed tests' check-box unchecked. It would be more in-line with TDD to have it checked initially. How the hell did this get closed.

Add "start" callback

The browser automation integration callbacks are asymmetric. There's testStart/testDone, moduleStart/moduleDone, but no counterpart for "done". It would make sense to have a start callback for the testsuite in total.

QUnit.reset() removes global jQuery ajax event handlers

While testing my global ajax event support library, found the following problem.

Global jQuery ajax event handlers will be "unbound" after the firs test() has completed.

I do something like this in my library:
jQuery(document).ajaxStart(function() { /* do something */ })

This seems to be the cause of the problem in qunit.js reset() :
jQuery.event.global = {};

Output location in addition to useragent for rerunning tests

It would be handy to get the URL into the markup when looking at results in TestSwarm, which are just static html. In order to interact with the results, I'd want to rerun the test in that browser, and would want to have the URL that TestSwarm used.

Failed tests expanded on load

For the UI - how do people feel about having tests that have failing items initially set to expanded? I find when I'm writing tests and code, I'm regularly refreshing content as I tweak items, and would like to not have to click into each failed item. Was going to add this, but didn't want to without a bit of concensus first - could potentially add a checkbox to toggle the preference?

Output long expected/actual values with fixed-width font and next to each other

A full diff library would be overkill, but the current output could be improved to make it more readable and easier to see differences.

misuse of stop()/start() breaks test independence

Accidentally calling start() twice in an asynchronous test can cause the subsequent test to fail nondeterministically. In the code sample below, the first test will always succeed, but the second will sometimes fail because the expected assertion was not run. Obviously, the short answer is that I shouldn't call start() twice, but the fact that one test can break another is still unpleasant. Would it be possible to limit the scope of start() and stop() so they don't leak from one test to another?

asyncTest("Test1", function() { expect(2); setTimeout(function() { ok(true, 'Test1 assertion 1'); start(); }, 10); setTimeout(function() { ok(true, 'Test1 assertion 2'); start(); }, 10); });

asyncTest("Test2", function() {
expect(1);
setTimeout(function() {
ok(true, 'Test2 assertion');
start();
}, 10);
});


Custom matchers

Would be great to define custom matchers like this:

QUnit.sameOwnProperties = function(actual, expected, message) {
  QUnit._push(myCompare(actual, expected), actual, expected, message);
}

To do that we have to move push function from the closure into QUnit._push (or QUnit.push, whatever).

Update API docs

equals => equal, same => deepEqual

Should have an assertion for locating an item in a list

I've found this to be very useful in my work, so I thought I'd share it with you guys. Sometimes you need to check if a particular item shows up in a list. This is implemented using underscore.js. You guys can probably remove that dependency easily enough though.

qunit.js:296
contains: function(a, b, message) {
push( _.any(a, function(x){ return QUnit.equiv(x, b) }), a, b, message);
},

Unfortunately, this prints [object Object] in the test's summary. Can this be fixed?

qunit.js raises 1 JS error and 2 JS warnings in Eclipse

Hello,
Ity is a minot thing but today I found that:

COMPLAINS THAT "Syntax Error on token Undefined"

    parsers:{
        window: '[Window]',
        document: '[Document]',
        error:'[ERROR]', //when no parser is found, shouldn't happen
        unknown: '[Unknown]',
        'null':'null',
        undefined:'undefined',                                 COMPLAINS THAT "Syntax Error on token Undefined"
        'function':function( fn ) {

Also warnging for missing ";" at:

number:literal,
'boolean':literal
},
DOMAttrs:{//attributes to dump from nodes, name=>realName
id:'id',
name:'name',
'class':'className'
},
HTML:false,//if true, entities are escaped ( <, >, \t, space and \n )
indentChar:' ',//indentation unit
multiline:false //if true, items in a collection, are separated by a \n, else just a space.
};

Also

"// Load paramaters" should be "//Load parameters"

" * Prefered to ok( actual == expected, message )" should be

" * Preffered to ok( actual == expected, message )"

Modify location.search instead of location.href on test double-click

Double-clicking a test when the URL has a hash doesn't work as the ?testName is put after the hash. Modifying location.search instead would put it before the hash.

Commenting inside tests

Hi,

It would be nice, if there was some function to create comments inside the test, e.g.:

module('User List');
test('single user', function () {
    info('Creating new User'); // <-- new function here
    var user = new User('Chris');
    equals(typeof user, 'object', 'new User has been created');
    equals(user.name, 'Chris', 'User name is correct');

    info('Hovering User'); // <-- new function here
    // etc.
});

It is sometimes useful to make a comment about what is happening before specific assertion. It also makes it quicker to find possible mistake. I know that one can use:
ok(true, 'Creating new User');
But disadvantage of the above approach is, that these type of comments are mixed with informations from assertions and harder to find, the comments are also counted to passed tests and have to be included in value passed to the 'expect()' function.

I made it working in quick and very dirty way in my copy of QUnit, but it would be nice, if this function was included to the main copy.
I'm, personally, using following style to distinguish those comments:

#qunit-tests li li.info {
    color: blue;
    background-color: #fff;
    border-left: 13px solid blue;
}

Best regards,
ChrisRaven

QUnit.moduleDone logs bogus module at start

If module() is used from the beginning, there is one bogus log entry with that name of the last module and stats all at zero. If module() isn't used before the first test, those tests get grouped into a log entry, again with the name of the last module().

The issue lies in the fact that test() accesses config.currentModule for determining whether to run the current test or not. Therefore module() has to assign config.currentModule twice: Once before and once within the synchronizer. The check within the synchronized-module() code wrongly assumes that config.currentModule is undefined for the first module().

"raises" assertion

It would be useful for QUnit to provide an assertion to test for the occurrence of exceptions.
original ticket

patch

Provide Getting Started example

Source of the current example contains document-ready code, thats misleading. Should provide an example of the minimal necessary markup.

"too much recursion" problem

Hi,

When I have following objects and test, I get "too much recursion" error in FF (probably in other browsers too):

function ElemList() {
    this.elements = {};
    this.selected = null;
}

ElemList.prototype.addElement(data) {
    var
        element = new Element(data, this);

    this.elements[data.id] = element;
};

ElemList.prototype.selectElement(id) {
    this.selected = this.elements[id];
};

function Element(data, parent) {
    this.data = data;
    this.parent = parent;
}

test('selection', function () {
    var
        elemList = new ElemList();

    elemList.addElement({id:'id1'});
    elemList.selectElement('id1');
    same(elemList.selected, elemList.elements['id1'], 'Selected correctly');
});

The problem is of course, that "element.parent" indicates "elemList", and "elemList.topics" includes pointer to "element", and in this point the circular reference starts. But in program it is perfectly valid (it works in production code), error only appears during testing. The problem is, because the 'same()' function makes deep comparison and follows all pointers, which is a problem in the above example. Maybe adding some mechanism to detect this kind of code would be useful.

Best regards,
ChrisRaven

optimize css selectors

definitely something minor but the css selectors can be made more efficient and readable

ol#qunit-tests li li.fail span.test-actual

=

#qunit-tests .fail .test-actual

Double-clicking test title shows all tests for a given module (change seems in rev 138)

I think this is a regression error, as before double clicking a test title would only display that test (provided the title string was unique). Now double clicking on a test title shows all the tests for that module.

Reduced test case here (http://dl.dropbox.com/u/232025/reduction.html), drop in to qunit src directory.

Thanks Jörn!

An element's child nodes will be gone under certain circumstances in IE (at least 7 & 8)

Consider a test page with a main section as follows:

<div id="main">
    <ul>
        <li>yadda</li>
    </ul>
</div>

And a test script as follows:

jQuery(function($) {
    var $elem = $('#main > ul');
    console.log($elem.children().length);
    module('blub');
    test('yadda', function() {
        console.log($elem.children().length);
});
});

One would expect that this prints two times 1 to the console, which it does in Firefox and Chrome. In Internet Explorer (I've tested 7 & 8) it will print 1 and then 0 though, indicating that the element has somehow been emptied somewhere during starting up test yadda. If I reinforce $elem by putting $elem = $('#main > ul'); in a module setup function, the problem miraculously disappears.

Array equality fails

The following assertion fails, and shouldn't. :)

equals(["a"], ["a"], "arrayfail");

Here's a complete HTML file in case that makes it easier:

<html>
<head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  <link rel="stylesheet" href="qunit.css" type="text/css" media="screen" />
  <script type="text/javascript" src="qunit.js"></script>
</head>
<body>
    <h1 id="qunit-header">Repro</h1>
    <h2 id="qunit-banner"></h2>
    <h2 id="qunit-userAgent"></h2>
    <ol id="qunit-tests"></ol>
<script>
    $(document).ready(function(){
        test("array equality", function() {
            expect(1);
            equals(["a"], ["a"], "a=a");
        });
    });
    </script>

</body>
</html>

Docs page failing

See

http://img529.imageshack.us/img529/5835/picture6rk.png

noglobals GET parameter ignored

QUnit.init overrides the config var, resetting the noglobals config to false. Since the noglobals get parameter is read before QUnit.init, the noglobals parameter is ignored.

Document all assertions

deepEqual, notEqual etc. aren't documented - see http://docs.jquery.com/QUnit

Remove `init` function from a global namespace

QUnit puts a lot of functions to the global namespace. Most of them (ok, equal, module, is) are OK. But init really bugs me. Can we remove it from the global namespace?

Uncaught TypeError: Cannot read property 'checked' of null

A recent commit seems to result in a type error:
Uncaught TypeError: Cannot read property 'checked' of null (line 676)
As a result, tests are not run, but 'stuck' on the first test() call. This is happening in all the browsers I tried (IE8, FF3, Chrome, etc).

To repro:
1 goto http://docs.jquery.com/Qunit
2 note the first test in the QUnit example is halted at 'Running a basic test example'.

It looks like this is related to #45, because the adding the toolbar element to the html template resolved the error in my unit tests. e.g.

QUnit.done gets called too often, at least outside the browser

Must be called only at the end of running the suite.

Running on serverside

Currently QUnit still has various calls to window.setTimeout/Interval, those need to be removed/replaced/checked.

One of them may be a bit harder to get rid of:

js: "../qunit/qunit.js", line 1021: Java class "[B" has no public instance field or method named "setInterval".
    at ../qunit/qunit.js:1021
    at ../qunit/qunit.js:1002
    at ../qunit/qunit.js:1085
    at ../qunit/qunit.js:1085
    at ../qunit/qunit.js:1085
    at ../qunit/qunit.js:110
    at ../qunit/qunit.js:712 (process)
    at ../qunit/qunit.js:304
    at suite.js:84

Output exception stacktrace

Currently exceptions will get logged to the console, if available, making the stacktrace browsable (at least in Firebug). When browsing scraped test results or no console is available, that isn't available, so a static output would be useful.

Test reordering for faster results

After a testrun with failing tests, the next run could provide useful results faster by running the failed tests first. Within the two categories, failed and passed, tests could be ordered by runtime, running tests that take less time first.

Need to figure something out to gather the necessary stats and persist them. Idea: Hidden input/textarea, filled with joined-array of testname|pass/fail|runtime, eg. "jsDump.parse|pass|12". Read that before running tests again, eg. in QUnit.init().

Non-browser runtimes would require a different storage, so the persistance should be abstracted.

expect() broken

The expect() code runs too late now, see http://forum.jquery.com/topic/latest-version-no-longer-fails-on-mismatched-expected#14737000001570197

The assesrtions inside an QUnit.asyncTest are not evaluated asynchronously

Hi!

As far as I can understand from the code*, the assertions are always evaluated at the parsing time even if the test is asynchronous. One would expect them to be evaluated at the time QUnit.start() is called.

• http://github.com/jquery/qunit/blob/master/qunit/qunit.js#L261
• http://github.com/jquery/qunit/blob/master/qunit/qunit.js#L279
• http://github.com/jquery/qunit/blob/master/qunit/qunit.js#L283

BlackBerry 5.0 and stop()

In unit testing jQuery hashchange event in BlackBerry 4.6.1 and 5.0, I found that the tests would only run all the way through in 5.0 if I called QUnit.stop() explicitly instead of just stop().

I only mention this in case jQuery mobile will be tested in BlackBerry 5.0 with QUnit. See the commit if you're curious.

Persist "Hide passed tests" checkbox state across test runs

Figure out a way to make the setting persistent, similar to the Eclipse JUnit runner. When enabled, you don't see successful tests at all. Summary is enough to ensure that tests were ran at all.

add "notequals" assertion

It would be nice if we could test for inequality.

Example of simulate plugin with QUnit

Maybe even bundle simulate with QUnit - at least make it a proper plugin with a release and docs.

qunit throws syntax error on Safari 2.0.4

It is not possible to use qunit to run tests in the Safari 2.0.4 browser, which is still a Level 2 browser here at the BBC. This is because qunit uses a function declaration pattern that Safari 2.0.4 considers to be a "syntax error."

// snip
test: function test (testName, callback) { // throws error
}

Rewriting those function declarations to be like the following example will allow qunit to run in Safari 2.0.4.

//snip
test: function (testName, callback) { // runs
}

QUnit.log outputs HTML, but it shouldn't

QUnit.log = function(a, msg){
  console.log(msg)
}

test("some test", function(){
  equals(1, 2);
});

Console:

<span class="test-message">undefined</span>, expected: <span class="test-expected">2</span> result: <span class="test-actual">1</span>, diff: <del>2 </del><ins>1 </ins>

I'm using qunit-tap and it outputs HTML into terminal.

Example for mocking

Provide an example for mocking with QUnit, eg. via mockjax

Make reset work without jQuery

Currently the reset implementation relies on jQuery's html-method. As reset does nothing without jQuery being present, all the qunit-fixture stuff is pretty useless.

Drop "Hide missing tests" toolbar feature

Was built for jQuery UI, where it isn't used anyway. Too much overhead for very little to no value.

Show diff if equal() or deepEqual() failed

Quickly, can you figure out what's wrong here? I don't.

Add a README file

module name is not shown

When modules are defined, their names do not appear (for me) next to the test names in the output.

The config object is defined on line 353, and config is assigned to in QUnit.init config.currentModule is set in the module function and accessed in the test function. It looks like a different config object is being referenced in each of the different functions.

Async setup and teardown

Guys,

I've had to run some async code on my setup and teardown methods but QUnit wasn't handling it properly.

Here's a simple patch to make it run and the corresponding test cases:

http://github.com/fgrehm/qunit/compare/2dbf6037778266fa01a1...master

not*Equal should show both args in success case (and possibly one in fail case)

E.g. strictEqual gives both args, if the comparison fails. But f there is a notStrictEqual comparison, it would be interesting to know both arg vals in the success case, since they differ then (in opposite to strictEqual). In the fail case one arg would be sufficient for nonStrictEqual (similar to strictEqual in the success case): but then there are two same values...
In this sense the not*Equal comparison variants are complement to their opposite - without 'not' at the beginning - ones.

Output is broken

http://elv1s.ru/x/qunit/equals.html

Test Suite URL Params need their own query string

If you use qunit with testswarm it fails to run tests because testswarm adds url params to the tests. So instead of just looking for /test?this is a test, it should be something like /test?t=this is a test

dog-fooding qunit

I would like for all the private functions to be made public (ex. done(), validTest(), process(), etc.). This would make it an easier chore to start using jquery to unit test the display portion of qunit. Right now the code mixes presentation with testing-logic.

Outdated Documentation

Unfortunately the example at http://docs.jquery.com/QUnit#source is out of date. You simply have to update the body according to https://github.com/jquery/qunit/blob/master/test/index.html to make the example working. I would have updated the page if it were a wiki...