Yeoman, Karma, jQuery, Require, Backbone, SASS, Mocha, Dust, i18n... oh my!

I've added a skeleton file directory / config to github in order to perhaps save you time in setting up an application using the tools listed in the title. https://github.com/mrforbes/yeoman-backbone-stack

The main reason I added it was because getting Testacular Karma working with require was not as straightforward as I had originally assumed it would be, owing to the fact that you need to tell Karma which files to include, but require wants to include them all asynchronously. The workaround is in the karma.conf.js file:

files = [
  MOCHA,
  MOCHA_ADAPTER,
  REQUIRE,
  REQUIRE_ADAPTER,
  'app/scripts/config.js',
  {pattern: 'test/lib/chai.js', included: false},
  {pattern: 'test/test.js', included: false},
  {pattern: 'app/nls/*', included: false},
  {pattern: 'app/nls/**/*', included: false},
  {pattern: 'app/templates/*', included: false},
  {pattern: 'app/scripts/*.js', included: false},
  {pattern: 'app/scripts/libs/*.js', included: false},
  {pattern: 'app/scripts/plugins/*.js', included: false},
  {pattern: 'test/spec/*.js', included: false},
  'test/test-main.js'
];

 

The included:false command tells Karma the files will be there, but it doesn't inject them into the head, which leaves require to do its thing.

The second spot to notice is test/test-main.js... This is where all of the actual test files need to be added, instead of in the karma.conf.js file. You still need to alert Karma to them ( {pattern: 'test/spec/*.js', included: false} ), but you don't want them loaded that way.

Here's test-main.js:

require({
  // !! Karma serves files from '/base'
  deps: ['app','main'],
  baseUrl: '/base/app/scripts'
}, [
/* test runners go in here */
'../../test/spec/example',
'../../test/spec/i18n',
'../../test/spec/router',
'../../test/spec/index'
], function() {
  window.__karma__.start();
});

 

Pretty self-explanatory. Karma will wait to start until all of the specs have been loaded.

So.. if you have the need, grab the repo. Keep in mind this is a skeleton not a finished app, so some of the structure decisions are likely not optimal, and definitely not final. Move stuff around to suit your style / needs.

 

UPDATE 3/11/2013: I've updated the git repository to the Yeoman 1.0 beta. The 1.0 version of yeoman has some major changes in it, so the new application framework reflects those changes.

I've also added the following:

  1. JsHint watching
  2. Karma through Grunt (watching through Grunt)
  3. Debug code removal (grunt-groundskeeper)
  4. Backbone form validation, model binding, and deep model libraries
  5. Dust templates were always there, but I never mentioned them in the original post

UPDATE 5/3/2013: Testacular has been renamed Karma (for which I am thankful). I changed my references to match.

Getting Started with Testacular - A Tutorial

I've recently discovered the Testacular javascript unit testing test runner. It's built on node.js, and if you're into unit testing (you should be) and streamlining your workflow (you should be), it will really help light a fire under your butt and jack your productivity. This tutorial is for basic installation only. The best place to learn more is to watch the screencast.

If you haven't already, you'll need to install node.js.  You can get it here for the OS of your choice.

Once you have node installed, you just need to follow the simple install instruction on the testacular web site. I'll save you the click though, just do this:

node install -g testacular

 

Ok, it's not THAT simple, but only because you also have the option of installing the unstable build. If you'd like to use qunit, you'll want to do that (at least at the time of this writing). Here's the command:

node install -g testacular@canary

  As of the writing of this post, stable is at 0.4, unstable at 5.8 (stables are always even). If you want stable with qunit support, wait for 0.6. you can check your version once you install with:

testacular --version

  Ok, so the next thing you need to do is set up the config file. You can do this from the command line via:

testacular init

  This will give you a nice setup flow where you can choose to do some stuff. Or you can skip it all and fill in the resulting .js file yourself.  Here are the 3 most important config settings (remember, this is a basics tutorial)

files = [
    QUNIT,
    QUNIT_ADAPTER,
    ..
]

browsers = ['PhantomJS'];

// enable / disable watching file and executing tests whenever any file changes
autoWatch = true;

  The first two files are variables set in testacular which wire up your testing framework. 0.5.8 has OOTB support for jasmine, mocha, and qunit. The rest of the files would be your scripts and their tests. At this point, you'll want to add your files. For example if you had a helloWorld.js and a spec/helloWorld.js file, you would do:

files = [
    QUNIT,
    QUNIT_ADAPTER,
    helloWorld.js,
    spec/helloWorld.js
]

 

If you know your tests will all be in the spec folder, you can also use wildcards:

files = [
    QUNIT,
    QUNIT_ADAPTER,
    helloWorld.js,
    spec/*.js
]

 

Next, you need to choose the browsers you want to run the tests in. You do this by either adding environment paths to the browser application/exe, or by setting symlinks. I've only done this in windows so far, by adding (for example) CHROME_BIN = 'path to chrome.exe' to my local environment variables (you can go to control panel/search and type in 'environment variable' if you aren't sure where to add this).

browsers = ['PhantomJS'];

  One of the best things about testacular is that you can have it watch for file changes, and rerun your tests when it detects a change. This way you have a constant monitor to whether or not you are screwing anything up, and can react immediately without having to launch a browser or type into the command line. Awesome.

// enable / disable watching file and executing tests whenever any file changes
autoWatch = true;

  So, now you have your test runner setup, you have your testing framework ready to go.. all you have to do is start the test server:

testacular start

  Now go in and add some tests, save your files, and watch the magic happen. Testacular can also integrate with build servers like Jenkins (which we use at Linksys), but that's perhaps fodder for another post.

Also of note, Testacular is a part of the awesome Yeomen, which I'll be diving into soon.