Hi, I’m Jason Johnson with unmatchedstyle. I am going to take five minutes of your time today and talk to you about QUnit. QUnit is a sub project of jQuery. Of course, jQuery needs no introduction.

You can go right to it. If you go to the documentation, you’re not going to find QUnit on the menu here. They actually don’t list if, for whatever reason. But it certainly is helpful. You search for QUnit. The QUnit API reference will come up.

You see for any test driven developers out there…this example will make plenty of sense to you. Simple tests, modules that categorize tests together and assertions like OK and equals. The full reference is down here at the bottom. You have tests, async tests, expect module, et cetera.

You also have start and stop. This helps with asynchronous tests that have to run. You can stop the execution of java script to one for weight for an AJAX call to come back. And that timeout is specified in milliseconds you want JavaScript to wait for the response to come back.

Now what we’re going to do is, we’re going to take the source of their example and we’re going to modify it slightly so that we can play with it. First, let’s just get this running. It’s a pretty good example. Shows a couple tests. Save that. I already have it open here. Take a look at that.

We have a couple modules that they specified. A basic test example. Module A. Module A again. A second test within that same module. We also have a failing test here. I suppose we could mess with that but we are going to go ahead and dump all of their tests. We’re going to write our own tests.

First, let’s fix their indentation. Their indentation is less than good. Now you see here at the top of our file we have two script tags. jQuery, the latest jQuery being pulled in from jquery.com and we also having QUnit being pulled directly from GitHub. We also have the QUnit CSS file which is also being pulled in from GitHub. Those are the only three files. I guess if you don’t really want it to look very good you could remove the CSS file. But the two java script files are, of course, required.

Now, let’s write our first test. The syntax for this or the format for this is the name of the test and the test you want to run. You just pass it in in a call back fashion like this. Let’s call it something — our first test with QUnit. QUnit T? No.

OK, so our first test is going to be something really simple. We’re just going to check the sanity of a true statement. This should always be fun. Now if we go back to our test in our browser here, we see our first test is fun.

Now, this is fairly trivial. Let’s actually do a little test driven development. We want to write a function that will calculate a value. So “calc a value” is our function. This first expression always has to evaluate to true. So if “calc a value” returns say the number 42, we want to test for that. [Typing] This should always return 42. That’s a pretty poorly worded test. [Typing] Function should always return 42. Whatever, that’s good enough for now. Let’s not forget our semicolon.

Now, this should fail, say, if we just add the name of the function or just define the function for our calc. A value equals function and let’s not have it return anything. This should be red. It should fail. Now this is the sort of mantra of test driven development, red, green refactor. So here we are at red. We want to make this green. We’ve defined our test. We’ve defined our function. Our test is failing because our function hasn’t been implemented yet. But let’s implement function. Now if we just do “return forty plus two” that should be green. Good, everything passed.

Zero tests failed. Two tests passed. Two tests run. Those are the numbers that we’re seeing there.

Now let’s change it up a little bit. Let’s add some complexity. What if we wanted to add a parameter that we could pass and we want the function to return that value that we passed as its result. Ah, so let’s say 52. But that’s only when we pass an argument. [Typing] Function should return it’s argument as it’s value. Let’s not forget our semicolon again.

Now let’s say, if there’s an argument return the argument, simple enough. This should pass as well. Good. Three tests passed. Three tests run.

And this is a very simple introduction to QUnit. There are also interesting ports of QUnit, two things like “no to JS”. You might want to look into that. But, otherwise, there is our brilliant introduction to QUnit.

I hope you enjoyed this. Thanks for watching.