What do you want to learn?
Skip to main content
by Shawn Wildermuth
Start CourseBookmarkAdd to Channel
Table of contents
How Large is Large?
Frameworks and Libraries
What about Single Page Applications?
The Problems of Scale
What is Unit Testing?
Writing Unit Tests
Running Tests with GruntJS
Regardless of which testing library you're using, you're going to need a way to run your tests. Now depending on your environment, you may already have another way of doing this, but I'm going to highlight GruntJS as a way to run Jasmine tests. Grunt also supports other testing frameworks like Mocha and QUnit, but I'll show you Jasmine so you can see an example of what it probably will look like regardless of which testing library you end up using. If you haven't viewed the third module in this course, you may want to go back and revisit that. That's where I introduce you to what Grunt is and what Grunt configuration is like. I'm going to just talk about the configuration for Jasmine itself. The first thing we'll need is the contrib project for Jasmine. This will actually bring in not only the Grunt pieces for Jasmine, but also Jasmine itself, so with this line we don't need to worry about going to the Jasmine github repository and getting a copy of the source code, it's all included in this one package here. Once we have that, we can enter our Grunt file .js, we can tell it that these are the Jasmine settings we want to use. We want to specify what our code is. This is the code where we want to test. These aren't the tests, this is the code we want to test and so, you'll include any of the source files you want to include there. Notice that wildcards are supported. We also need to tell it what code needs to load before our own code. This is typically going to be vendor libraries like Angular, jQuery, Underscore, whatever libraries are necessary for your source code to actually work, and then finally, the specs is a list of the tests. So in my case, I like putting specs in their own directory, that way I can just include to go get all the specs at once and run all the tests in my system. The last piece here is the loadNpmTask function of Grunt and that simply tells it that we want to use Jasmine as part of our grunt script. Once we've made these changes to the gruntfile.js, we can just use Grunt and give it the name of Jasmine to tell it we want to run the actual tests. Let's see what this looks like in practice.
Demo: GruntJS + Jasmine
Let's show you very briefly how GruntJS and Jasmine work together. See here I happen to be using sublime text, though you could be using really any project, and I have that gruntfile.js project, and down here I have a set of Jasmine settings. I've got a number of sources, and notice I'm using wildcards for most of the folders I'm using to define the kinds of modular pieces of my project. I'm also including a number of libraries that my code actually requires, and then finally, the specs directory is looking at the actual tests that I'm running. If we look under public we can see that I've got tests for a number of different libraries. If I look at my tripNameValidation this is going to be one of the test suites I have that's going to test a bunch of the different kinds of tripNameValidations, so I might have one of these for each of the kind of validators or services I'm running. Once I have these, it's simply a matter of running Grunt. All I need to do is type in grunt and then the task I'm asking it to do is jasmine, which is the test suite. It's going to go out, find, and collect all the objects it's going to use the PhantomJS library to run these headless without an actual browser popping up and then we see here that it ran 12 specs in just over one tenth of a second with 0 failures. If there we're failures, we'd actually be able to see the error code and what line it occurred and those sorts of things. In this small example we only have about 12 specs, but in a larger system you might have hundreds, or even thousands, of tests as you get into a large scale situation. Now coming back here and running this every time I make my change might be a little tedious. There might be a better way. Let's see how that works.
Automating Testing with GruntJS
One of the important ideas here is that you want your test to be automated, so that as you make changes that the tests are run for you, but if you're used to working with a strongly type language like java or C# or VB or one of those, you might think of this as something that happens at the build step, so we want to run these even if we're not really doing a full build. We want to find out a test has failed as early as possible in the operation and this automation is going to allow us to simplify the writing of tests, so that we don't write the test, go in, run it, see if it fails, and have that sort of loop of switching tasks over and over again. We want this re-execution of tests as source code or specs are changed and I like it that this actually gives us an audible call if a failure happens. So as GruntJS runs, if there's an error, the error console tends to give me little beep so I know that a test actually failed so I don't even have to see it to watch it happen. This is also another function of GruntJS and it's using a contrib project called watch. Now watch isn't tied to Jasmine it's actually used to execute a task when files change so we can install it by just including the grunt-contrib-watch project, and then inside of initConfig it's a pretty simple idea. We're simply telling it that when any of the files here change, and notice I'm using the two star wildcard that tells it to not only look in the JS directory, but any subdirectories as well, when any of those files change, when someone saves a source file, a spec file, any of those files, to go ahead and run this or these tasks. This could be a list of tasks or could be a single task in itself. In that way, we're just going to call grunt watch and grunt will sit there in a loop and run it as soon as the tasks have been changed, and then go back into another waiting state watching those files, waiting for that change to happen. Let's see this in action.
Demo: GruntJS + Watch
What is NodeJS?
Is NodeJS Magically Scalable?
Performance Tips for Google's V8
Shawn Wildermuth has been tinkering with computers and software since he
got a Vic-20 back in the early '80s. As a Microsoft MVP since 2002, he's
also involved with Microsoft as an ASP.NET...
Released24 Jan 2014