QUnit

Quick overview

Assertions

  • ok(state, message)
  • equal(actual, expected, message)
  • notEqual
  • deepEqual
  • notDeepEqual
  • strictEqual // most useful ===
  • notStrictEqual
  • raises

Examples

// succeeds if true
// fails if false, 0, NaN, "", null, undefined
assert.ok(true, 'true succeeds'); 

 // succeeds if ==
 // fails if !==
assert.equal(0, false, 'equal succeeds');

// uses ===
assert.deepEqual(obj, {foo: 'bar']}, 'Objects are equal');

// for synchronous callbacks - define the expected number of assertions
assert.expect(2)
var body = $('body);
$body.on('click', function() {
    assert.ok(true, 'body was clicked');
});
$body.trigger('click');

Module

QUnit.module('actions');
QUnit.test('basic', function(assert) {
     assert.ok(true, 'OK);
});

Test UI

QUnit.module('createButton() with .controls: it appends a button', {
    beforeEach: function() {

        $('#qunit-fixture').append('<div class="controls"></div>');

        //////////////////////////////////
        // DEFINE VARIABLES
        //////////////////////////////////
        parentDiv = 'qunit-fixture';
        classValue = 'next';
        iconName = 'done';
        //////////////////////////////////

        window.createButton({
                classValue: classValue,
                icon: iconName,
                player: parentDiv
            });

        // BROWSER TEST
        // window.createButton({
        //         classValue: 'next',
        //         icon: 'done',
        //         player: 'qunit-fixture'
        //     });
    },
    afterEach: function() {
        $( ".controls" ).remove();
    }
});

QUnit.test('createButton()', function (assert) {

    var expected = '<button class="' + classValue + '"><i class="material-icons">' + iconName + '</i></button>';
    assert.strictEqual($("#" + parentDiv + " .controls").html(), expected);
});