|Getting Started With QUnit Testing|
|Written by Ian Elliot|
|Thursday, 09 February 2017|
Page 1 of 2
Available as a Book:
buy from Amazon
buy from Amazon
This sounds sensible but you have enough work writing the code that does useful things without having to write lots of test code as well. This is where QUnit comes in. It makes adding tests easy and quick. What is more as long as you have written your program in a reasonably good style there should be no need to make any changes to it. The tests can all be written in a separate file and run when needed.
testing with QUnit requires no changes to your production code.
All of the tests can be created in a special testing file and run as and when required - no testing code is added to your production code.
Let's see how easy it is.
A First Test
If you are using QUnit for real then it is worth downloading a local copy but the quickest way to get started is to use a content delivery service.
Create a new HTML file containing:
This is a minimal testing web page. Of course you need to change the version numbers to the latest version if you want to but the examples work with the version indicated.
You need to load the QUnit CSS file:
You can just as easily download both files and serve them locally.
The only other detail you need is a div with the id qunit i.e.
This is the element that the QUnit code uses to display its results. You can use a more complicated page layouts but this is the least you can get away with and it will serve us for the rest of the article.
To show how testing works we need something to test.
Of course we actually need to put something in the file to test and in this case we will start with the single function:
which is very simple and unlikely to surprise us in its behavior. It returns the maximum of two numeric values.
to the head section of the testing page.
Now we are ready to write our first test.
So for example we can assert that the maximum of 1 and 2 is 2 using
This is a very simple test but you can see that if myMax doesn't return 2 then there is something seriously wrong.
We have our first assertion and now we have to run the test based on it. QUnit allows you to group a set of assertions together into a complete test. All you have to do is make use of the test function:
The first argument is the name of the set of tests and the second is a function that invokes each of the assertions.
That is a test is a set of assertions and your testing page will consist of a number of tests each with its own list of assertions and other code.
You can place this code anywhere convenient - in the body of the test page if you want to give it center stage. Of course if you are keeping the HTML and the code separate then it should be in a separate file. For the sake of simplicity in this example the code will be placed in the body of the web page.
Now when you load the page you will see that QUnit has formatted and presented you with the results of your test:
You can see that it gives you details of the browser that the page was opened in and the name of the group of tests. What you see other than this depends on what happened when the tests where run. In this case all of the tests passed and so we just see a summary of the situation. - 1 assertion, 1 passed and 0 failed.
When Things Go Wrong
This is more or less all there is too it but we need to find out a little more about the types of assertions we can make and what happens when things go wrong.
We can easily demonstrate what happens when a test fails.
Simply change the test function to read:
Notice that now the second test is a fail because the maximum of -1 and -2 is -1 not -2 or 2.The test is checking that the myMax function is performing an absolute maximum not a signed maximum.
We have also added a second argument to the ok function calls. This is a string which is displayed along side the assertion to give you an idea what the defective test was all about.
If you refresh the page the tests are run again and you will see:
Now we have 2 assertions of which only 1 passes and you can see the descriptions alongside each one.
If the number of assertions gets too big you can click the "Hide passed tests" check box and you will only see the troublesome ones.
|Last Updated ( Sunday, 19 February 2017 )|