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.