title: How to configure karma and systemjs to run tests for angular ES6 transpiled by traceur into amd format ES5 modules
body: <p>Ok, I have been pounding my head against the desk for far too long, it is time to ask for help.
  Maybe I am way off base, or I just cannot see the trees in the forest.  Please help.</p>
  
  <p>I am trying to build an application using gulp, Angular 1.3+, ES6, traceur, SystemJS, es_module_loader and http-server.  </p>
  
  <p>So far the app is looking good, it compiles and runs and hosts just fine from the compiled folder location, but I cannot get Karma to run a single test within my compiled project.</p>
  
  <p>Here is my project structure:</p>
  
  <pre><code>gulpfile.js
  client/
      - src
          - app/
              - bootstrap.js
              - system.config.js
              - index.html
              - modules/
                    - app.module.es6
                    - AppRouter.es6
                    - app.less
                    - common/
                         - common.module.es6
                         - masterTemplate/
                                 - MasterTemplateController.es6
                                 - MasterTemplateController.spec.es6
                                 - masterTemplate.tpl
                                 - masterTemplate.less
                    - home/
                        - home.module.es6
                        - home.less
                        - greeting/
                              - GreetingController.es6
                              - GreetingController.spec.es6
                              - greeting.less
                              - greeting.tpl
                      ...
  </code></pre>
  
  <p>using gulp and traceur I am able to transpile all the es6 code to es5 modules with amd wrappers. 
  The compiled artifacts are laid out in a build folder as such:</p>
  
  <pre><code>_build/
     - css/
     - fonts/
     - img/
     - js/
        - lib/...
        - modules/
           - common/...
           - home/
               - greeting/
                    - GreetingController.js
               - home.module.js
           - app.module.js
           - AppRouter.js
           - mock.app.module.js
        - bootstrap.js
        - system.config.js
     - index.html
  </code></pre>
  
  <p>The compiled layout is not identical to the source layout, but it is very close: </p>
  
  <ul>
  <li>The vendor libs are in the <code>lib</code> folder and come from 3 different places (npm, bower and a custom download).  </li>
  <li>The <code>fonts</code>, <code>css</code> and <code>img</code> folders are collected from several sources.  </li>
  <li>The <code>_build/js</code> folder is nearly identical to the <code>client/src/app folder</code>, except the <code>index.html</code> file is one level up.</li>
  <li>The html template files (<code>*.tpl</code>) {some call these partials} are all compiled into a $templateCache module 
  saved under <code>_build/js/modules/common/templates/templates.module.js</code></li>
  </ul>
  
  <p>then I serve it up using http-server.  The <code>index.html</code> loads up the runtime infrastructure 
  and finally the <code>bootstrap.js</code>, which uses SystemJs to bootstrap angular starting with the <code>/modules/</code>.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;head&gt;
      &lt;title&gt;App&lt;/title&gt;
  
      &lt;link rel="icon" type="image/png" href="/favicon.png"&gt;
      &lt;link rel="stylesheet" href="/css/app.css"&gt;
  
      &lt;script src="/js/lib/traceur-runtime.js"&gt;&lt;/script&gt;
      &lt;script src="/js/lib/system.js"&gt;&lt;/script&gt;
      &lt;script src="/js/system.config.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div ui-view="main" class="root-view"&gt;&lt;/div&gt;
      &lt;script src="/js/bootstrap.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This works great.  Everything loads and present as it should.</p>
  
  <p>Now I go to test it...  Because I am using SystemJs to load all dependencies (identified using <code>import</code> in each module and subsequent src file) I need to use <strong>karma-systemjs</strong> to help karma find and load those same files.<br>
  Here is my <code>karma.config.js</code>, which is stored at <code>client/src/tests/karma/karma.config.js</code></p>
  
  <pre><code>module.exports = function (config) {
    config.set({
      basePath: '../../../../,
      urlRoot: '',
      hostname: 'localhost',
      frameworks: [ 'systemjs','mocha','chai','chai-as-promised','sinon-chai'],
      plugins: [
        'karma-mocha',
        'karma-chai',
        'karma-chai-plugins',
        'karma-systemjs',
        'karma-traceur-preprocessor',
        'karma-chrome-launcher',
        'karma-firefox-launcher',
        'karma-spec-reporter',
        'karma-junit-reporter',
        'karma-failed-reporter'
      ],
      systemjs: {
        configFile: '_build/js/system.config.js',
        files: [
          '_build/js/lib/*.js',
          '_build/js/modules/**/*.js',
          'client/src/app/**/*Spec.es6'
        ],
        config: {
          transpiler: 'traceur',
          paths: {
            'angular':           '_build/js/lib/angular.min.js',
            'angular-animate':   '_build/js/lib/angular-animate.min.js',
            'angular-messages':  '_build/js/lib/angular-messages.min.js',
            'angular-aria':      '_build/js/lib/angular-aria.min.js',
            'angular-resource':  '_build/js/lib/angular-resource.min.js',
            'angular-cookies':   '_build/js/lib/angular-cookies.min.js',
            'angular-storage':   '_build/js/lib/angular-storage.min.js',
            'angular-material':  '_build/js/lib/angular-material.min.js',
            'angular-mocks':     '_build/js/lib/angular-mocks.js',
            'angular-ui-router': '_build/js/lib/angular-ui-router.min.js',
            'statehelper':       '_build/js/lib/statehelper.min.js',
          }
        },
        testFileSuffix: '.spec.js'
      },
      preprocessors: {
        'client/src/app/**/*.spec.es6': ['traceur']  // pre-compile tests
      },
      traceurPreprocessor: {
        options: {
          modules: 'amd',
        },
      },
      client: {
        mocha: {
          reporter: 'html',
          ui: 'bdd'
        }
      },
      reporters: ['junit', 'spec', 'failed'],
      reportSlowerThan: 1000,
      junitReporter: {
        outputFile: 'reports/unit-test-results.xml',
        suite: ''
      },
      colors: true,
      logLevel: config.LOG_INFO,
      autoWatch: false,
      browsers: [
         'Chrome'
      ],
      captureTimeout: 10000,
      port: 9876,
      runnerPort: 9100,
      singleRun: true,
      background: false
    });
  };
  </code></pre>
  
  <p>after I build the app and run <code>gulp karma</code> I get this incredibly useful error message:</p>
  
  <pre><code>ERROR [karma]: Uncaught TypeError: Illegal module name "/base/client/src/app/modules/home/greeting/GreetingController.spec"
  at http://localhost:9876/base/node_modules/es6-module-loader/dist/es6-module-loader.src.js?3aac9167d6f21486de90ab673ff41c414843e2b4:2667
  
  Chrome 41.0.2272 (Mac OS X 10.10.2): Executed 0 of 0 ERROR (0.399 secs / 0 secs)
  
  
  [02:17:59] 'karma' errored after 1.81 s
  [02:17:59] Error: 1
      at formatError (/Users/kpburson/.nvm/versions/node/v0.12.0/lib/node_modules/gulp/bin/gulp.js:169:10)
      at Gulp.&lt;anonymous&gt; (/Users/kpburson/.nvm/versions/node/v0.12.0/lib/node_modules/gulp/bin/gulp.js:195:15)
      at Gulp.emit (events.js:107:17)
      at Gulp.Orchestrator._emitTaskDone (/Users/kpburson/projects/ver-client/node_modules/orchestrator/index.js:264:8)
      at /Users/kpburson/projects/ver-client/node_modules/orchestrator/index.js:275:23
      at finish (/Users/kpburson/projects/ver-client/node_modules/orchestrator/lib/runTask.js:21:8)
      at cb (/Users/kpburson/projects/ver-client/node_modules/orchestrator/lib/runTask.js:29:3)
      at removeAllListeners (/Users/kpburson/projects/ver-client/node_modules/karma/lib/server.js:220:7)
      at Server.&lt;anonymous&gt; (/Users/kpburson/projects/ver-client/node_modules/karma/lib/server.js:231:9)
      at Server.g (events.js:199:16)
  </code></pre>
  
  <p>The <code>system.config.js</code> file is:</p>
  
  <pre><code>System.config({
    baseURL: '/js/', 
    paths: {
      'angular':          '/js/lib/angular.js',
      'angular-animate':  '/js/lib/angular-animate.js',
      'angular-aria':     '/js/lib/angular-aria.js',
      'angular-cookies':  '/js/lib/angular-cookies.js',
      'angular-material': '/js/lib/angular-material.js',
      'angular-messages': '/js/lib/angular-messages.js',
      'angular-mocks':    '/js/lib/angular-mocks.js',
      'angular-resource': '/js/lib/angular-resource.js',
      'angular-storage':  '/js/lib/angular-storage.js',
      'angular-ui-router':'/js/lib/angular-ui-router.js',
      'statehelper':      '/js/lib/statehelper.js'
    },
    meta: {
      'angular': {format: 'global', exports: 'angular'},
      'angular-ui-router': {format: 'global', deps: ['angular']},
      'statehelper': {format: 'global', deps: ['angular', 'angular-ui-router']}
    }
  });
  </code></pre>
  
  <p>and the <code>bootstrap.js</code> file is:</p>
  
  <pre><code>System.import('app.module').then(
    function (a) {
      angular.element(document).ready(
        function () {
          angular.bootstrap(document, ['app']);
        }
      );
    },
    function (a, b, c) {
      console.out('\na:', a, '\nb:', b, '\nc:', c);
    }
  );
  </code></pre>
  
  <p>I am at my wits end. Please help me figure out how to get the tests from the <code>client/src</code> folder 
  to compile in memory and execute against the pre-compiled code in <code>_build/js</code>.</p>