Test in the browser

Introduction to QUnit

Disclaimer

  • I am no expert, I'm just sharing what I discovered few weeks ago
  • If you use or know of QUnit, this might be dead boring : check the wifi and read a nice blog post on http://waitbutwhy.com about Elon Musk ...

What is QUnit?

  • A unit testing framework
  • Written in JavaScript by members of the JQuery team
  • The official test suite for JQuery itself

Unit testing

  • Unit testing makes sure every unit of an application is tested
  • In practice, it's often considered as testing each function, methods and routine in a project
  • Unit testing makes re-factoring easy and drastically reduces chances of regressions

Testing Javascript code

  • JS like any other piece of code deserves unit testing
  • It brings same benefits as UT for back end code
  • It has a plus one : cross browser compatibility testing is easier ( http://swarm.jquery.org/)

Hands on!

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Introduction to QUnit</title>
    <link rel="stylesheet" href="style/qunit/qunit-1.18.0.css" type="text/css" media="screen" >
    <script type="text/javascript" src="resources/qunit/qunit-1.18.0.js" ></script>
    <!-- Your project file goes here -->
    <script type="text/javascript" src="application.js"></script>
    <!-- Your tests file goes here -->
    <script type="text/javascript" src="applicationTests.js"></script>

</head>
<body>
	<div id="qunit"></div>

</body>
</html>
module("Module A");
QUnit.test('Testing the isEven() function. ', function(assert) {
    assert.ok(isEven(0), 'Zero is an even number');
	//testing non even numbers
    assert.ok(!isEven(3), 'Three is not an even number');
    assert.notOk(isEven(3), 'Three is an odd number');
	
});
module("Module B");
QUnit.test('The comparison assertion: equal. It displays actual and expected values.', function(assert) {
	var actual = 1;
	var expected = 2/2;
    	assert.equal( actual, expected, 'Variables are equal.');
	var actual = 3;
	assert.equal( actual, expected,'', 'Variables are not equal.Here you can see what was expected VS the actual result.');
});
module("Module C");
QUnit.test('The equal assertion compares primitive variables, it does not perform objects comparison', function(assert) {
	var expectedObject = {};
	var actualObject = {};
    	assert.equal( actualObject, expectedObject, 'Those objects are different.');
	var expectedArray = [1,2];
	var actualArray = [1,2];
    	assert.equal( actualArray, expectedArray , 'Arrays are not equal.');
    });
module("Module D");
QUnit.test('The deepEqual assertion compares objects, Instead of calling the (==) comparison operator, it uses the more accurate comparison operator (===)', function(assert) {
	var expectedObject = {};
	var actualObject = {};
    	assert.deepEqual( actualObject, expectedObject, 'Those objects have same props.');
	var expectedArray = [1,2];
	var actualArray = [1,2];
    	assert.deepEqual( actualArray, expectedArray , 'Object are of same type and contain same objects.');
    });
module("Module E");
QUnit.test('Lets test asynchronous javascript!', function(assert) {
    setTimeout(function() {
        assert.ok(true, 'setTimeout assertion is triggered.This assertion is called after the test has run');
    }, 100);
    });
module("Module F");
QUnit.test('Lets test synchronous callback..., What do you notice?', function(assert) {

    var result = calc( 2, function( x ) {
	assert.ok( true, "Our calc() method invoked the callback function." );
	return x * x;
	});
    var anotherResult = calc( 'NaN', function( x ) {
	var calcResult = x * x;
	assert.ok( true, "Our calc() method invoked the callback function again." );
	return calcResult;
	});
	assert.equal( result, 4, "2 square equals 4" );
    });
module("Module F");
QUnit.test('Lets test synchronous callback..., What do you notice?', function(assert) {
    //assert.expect(3);
    var result = calc( 2, function( x ) {
	assert.ok( true, "Our calc() method invoked the callback function." );
	return x * x;
	});
    var anotherResult = calc( 'NaN', function( x ) {
	var calcResult = x * x;
	assert.ok( true, "Our calc() method invoked the callback function again." );
	return calcResult;
	});
	assert.equal( result, 4, "2 square equals 4" );
    });
module("Module G");
QUnit.test("Lets test asynchronous javascript with ajax! stop() will pause the test, and hang it if start() isn't called", function(assert) {
    stop();
    ajaxExample(function(result) {
        assert.ok( true, "The ajax callback is invoked. " + result.advice );
 	start();
    });

})
QUnit.test('Lets test asynchronous javascript with ajax!For every asynchronous operation in your QUnit.test() callback, use assert.async(), which returns a "done" function that should be called when the operation has completed.', function(assert) {
    //assert.expect(0);
    var done = assert.async();
    ajaxExample(function(result) {
        assert.ok( true, "The ajax callback is invoked. the result is : " + result.note );
 	done();
    });

    });

Intro to QUnit

By hkoundi

Made with Slides.com

Intro to QUnit

Short Introduction to Unit Testing JavaScript code with QUnit.

  • 717

More from hkoundi