Please help configuring tests from ES6 project

kburson commented 9 years ago

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.

I am trying to build an application using gulp, Angular 1.3+, ES6, traceur, SystemJS, es_module_loader and http-server.

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.

Here is my project structure:

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
                    ...

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:

_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

The compiled layout is not identical to the source layout, but it is very close:

The vendor libs are in the lib folder and come from 3 different places (npm, bower and a custom download).
The fonts, css and img folders are collected from several sources.
The _build/js folder is nearly identical to the client/src/app folder, except the index.html file is one level up.
The html template files (*.tpl) {some call these partials} are all compiled into a $templateCache module saved under _build/js/modules/common/templates/templates.module.js

then I serve it up using http-server. The index.html loads up the runtime infrastructure and finally the bootstrap.js, which uses SystemJs to bootstrap angular starting with the /modules/.

<!doctype html>
<head>
    <title>App</title>

    <link rel="icon" type="image/png" href="/favicon.png">
    <link rel="stylesheet" href="/css/app.css">

    <script src="/js/lib/traceur-runtime.js"></script>
    <script src="/js/lib/system.js"></script>
    <script src="/js/system.config.js"></script>

</head>
<body>
<div ui-view="main" class="root-view"></div>
<script src="/js/bootstrap.js"></script>
</body>
</html>

This works great. Everything loads and present as it should.

Now I go to test it... Because I am using SystemJs to load all dependencies (identified using import in each module and subsequent src file) I need to use karma-systemjs to help karma find and load those same files.
Here is my karma.config.js, which is stored at client/src/tests/karma/karma.config.js

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
  });
};

after I build the app and run gulp karma I get this incredibly useful error message:

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.<anonymous> (/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.<anonymous> (/Users/kpburson/projects/ver-client/node_modules/karma/lib/server.js:231:9)
    at Server.g (events.js:199:16)

The system.config.js file is:

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']}
  }
});

and the bootstrap.js file is:

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);
  }
);

I am at my wits end. Please help me figure out how to get the tests from the client/src folder to compile in memory and execute against the pre-compiled code in _build/js.

rolaveric commented 9 years ago

OK, that's very different from the examples I'm used to. In all of them, SystemJS takes care of calling Traceur or Babel to transpile ES6 down to ES5. And systemjs-builder for production workflow (ie. Concatenation and minification). eg. https://github.com/rolaveric/angular-phonecat/tree/es6

I'll create a branch to try and reproduce your setup, and work from there.

rolaveric commented 9 years ago

Still working on that branch, but I might have an idea as to what's going wrong here. I think you need to set the "baseURL" to "/" in the systemjs config within your karma config, since karma is running from a different base directory to your http-server. So under "systemjs.config" add: "baseURL": "/"

kburson commented 9 years ago

Thank you so much for the quick reply. I am on the West Coast, near Seattle, you must be several hours ahead of me.

Anyway, I made the change you suggested (baseUrl: '/') Basically the same results:

WARN [config]: urlRoot normalized to "/"
INFO [karma]: Karma v0.12.31 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 41.0.2272 (Mac OS X 10.10.2)]: Connected on socket pcmKA3nlk7WZmiFjUtQS with id 56656884
Chrome 41.0.2272 (Mac OS X 10.10.2) ERROR
  Uncaught TypeError: Illegal module name "/base/client/src/app/modules/home/greeting/GreetingController.spec"
  at /Users/Shared/projects/ver-client/node_modules/es6-module-loader/dist/es6-module-loader.src.js:2667
Chrome 41.0.2272 (Mac OS X 10.10.2) ERROR
  Uncaught TypeError: Illegal module name "/base/client/src/app/modules/home/greeting/GreetingController.spec"
  at /Users/Shared/projects/ver-client/node_modules/es6-module-loader/dist/es6-module-loader.src.js:2667

Chrome 41.0.2272 (Mac OS X 10.10.2): Executed 0 of 0 ERROR (0.288 secs / 0 secs)

[11:08:40] 'karma' errored after 6.13 s
[11:08:40] Error: 1
    at formatError (/Users/kburson/.nvm/versions/node/v0.12.0/lib/node_modules/gulp/bin/gulp.js:169:10)
    at Gulp.<anonymous> (/Users/kburson/.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/Shared/projects/ver-client/node_modules/orchestrator/index.js:264:8)
    at /Users/Shared/projects/ver-client/node_modules/orchestrator/index.js:275:23
    at finish (/Users/Shared/projects/ver-client/node_modules/orchestrator/lib/runTask.js:21:8)
    at cb (/Users/Shared/projects/ver-client/node_modules/orchestrator/lib/runTask.js:29:3)
    at removeAllListeners (/Users/Shared/projects/ver-client/node_modules/karma/lib/server.js:220:7)
    at Server.<anonymous> (/Users/Shared/projects/ver-client/node_modules/karma/lib/server.js:231:9)
    at Server.g (events.js:199:16)

kburson commented 9 years ago

I am interested in your earlier comment:

In all of them, SystemJS takes care of calling Traceur or Babel to transpile ES6 down to ES5.
And systemjs-builder for production workflow (ie. Concatenation and minification).

I will study these examples again, but I was not aware that they pre-compiled the ES6 to ES5 into a test folder. It seemed to me that they pre-compiled then bundled them. During testing and debugging you worked with the bundled js (with sourcemaps).

I was attempting to work with individual files from abuild folder, then later think about optimizing with a bundler like systemjs-builder. I am questioning whether bundling is still a necessary practice or not when using amd/es6 modules.

I am curious what is the most efficient method. SystemJS provides wonderful functionality for loading modules using the module dependency tree (from the various import statements). With this I only need to point to an initial point of entry module that starts the tree. Previously I would have to order my scripts in dependency order, and later when I did bundle I would need to make sure they concatenated in this same order. I like the SystemJS utility much better.

That being said, balancing between dev/runtime and karma test runs... I would love to load all the es6 scripts from my src folder and have them pre-compiled into ES5 then loaded into the karma iframe in dependency order, along with all my templates and config files. This is the holy grail for me, not sure if it is attainable.

Your guidance and experience is much appreciated.

thanks.

rolaveric commented 9 years ago

I am on the West Coast, near Seattle, you must be several hours ahead of me.

I'm actually in Sydney, Australia. I first replied at about 10:30pm I had to go to bed soon after, but I'm up now and will try to debug your scenario when I can today.

I will study these examples again, but I was not aware that they pre-compiled the ES6 to ES5 into a test folder

They don't precompile them into a folder, just in memory. The idea is if you SystemJS comes across an ES6 module at any point during the dependency tree, it will transpile it to ES5. Now this would get expensive at runtime for multiple reasons: cost of loading the transpiler to the browser, multiple round-trips to the server (eg. Load A, realise it needs B -> load B, realise it needs C, etc.) systemjs-builder does the exact same thing as SystemJS would do live in the browser, but just once, with everything precompiled into a single file.

Either way, you shouldn't have to change your setup unless you really want to, and it sounds like the problem is just a matter of paths getting mixed up somewhere - so we'll find a way to fix it. And maybe work in some better debugging output too. :)

rolaveric commented 9 years ago

Ok, good news and bad.

I've recreated your setup, so to speak - hard coded the "_build" folder with a lot of "The X module was loaded" console outputs. I managed to reproduce the issue, then workaround it by doing the following:

The tests are no longer run through "karma-traceur-preprocessor" first. I just used SystemJS directly and had them reference the compiled modules in under "_build/".
Added "baseURL: '/'" to the SystemJS config in karma.config.js, which is how the tests can reference the "_build/" folder.
Had to change the test file extensions to ".js" - something kept looking for looking for "{moduleName}.js". https://github.com/rolaveric/karma-systemjs/tree/issue7

Hopefully that helps you get going with your own project. I'm going to see if I can fix the ".es6" extension thing (I personally stick to ".js" - but I'm not everyone :) ) and try to create better error messages or at least some README doco for debugging the original issue.

rolaveric commented 9 years ago

I've added some hints to the errors I could reproduce on how to fix them. And it looks like adding ".js" to end of modules names to resolve them to paths is something SystemJS does by default. It's an easy fix to add {".es6": ".es6"} to the maps config in SystemJS. Let me know if that solves the issues with your karma setup.

kburson commented 9 years ago

Thank you, I will try to make those changes and see what happens.

kburson commented 9 years ago

Jason,

Thanks for your help. I made the modifications you showed in your branch. This stopped the errors from showing up, but I do not have any tests executing. Not sure why. So, I still need help getting the unit tests to execute.

I took my current application and sanitized it (removing all corporate identity) and pushed it to github so it can be focus of discussion.

https://github.com/kburson/Angular-ES6-starter.git

You should be able to clone my repo and run my scripts en-toto to verify what I am doing wrong.

I updated my package.json to point to your issue7 branch of the karma-systemjs repo (you have not publshed the fix yet.) When I run the test using the karma-cli I get no tests executed.

% karma start client/src/tests/karma/karma.conf.js
=== projectRoot =  /Users/kpburson/projects/Angular-ES6-starter
WARN [config]: urlRoot normalized to "/"
INFO [karma]: Karma v0.12.31 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 41.0.2272 (Mac OS X 10.10.2)]: Connected on socket 3bd41C7x5i-_36-1cmeQ with id 47389693

Chrome 41.0.2272 (Mac OS X 10.10.2): Executed 0 of 0 ERROR (0.002 secs / 0 secs)

when I run with gulp, that simply runs the karma start with the specified config, i get an error:

% gulp karma 
[00:18:27] Using gulpfile ~/projects/Angular-ES6-starter/gulpfile.js
[00:18:27] Starting 'karma'...
=== projectRoot =  /Users/kpburson/projects/Angular-ES6-starter
WARN [config]: urlRoot normalized to "/"
INFO [karma]: Karma v0.12.31 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 41.0.2272 (Mac OS X 10.10.2)]: Connected on socket QW8SvN3_JdJ3hyD4crLR with id 70642824

Chrome 41.0.2272 (Mac OS X 10.10.2): Executed 0 of 0 ERROR (0.002 secs / 0 secs)

[00:18:29] 'karma' errored after 2.09 s
[00:18:29] Error: 1
    at formatError (/Users/kpburson/.nvm/versions/node/v0.12.0/lib/node_modules/gulp/bin/gulp.js:169:10)
    at Gulp.<anonymous> (/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/Angular-ES6-starter/node_modules/orchestrator/index.js:264:8)
    at /Users/kpburson/projects/Angular-ES6-starter/node_modules/orchestrator/index.js:275:23
    at finish (/Users/kpburson/projects/Angular-ES6-starter/node_modules/orchestrator/lib/runTask.js:21:8)
    at cb (/Users/kpburson/projects/Angular-ES6-starter/node_modules/orchestrator/lib/runTask.js:29:3)
    at removeAllListeners (/Users/kpburson/projects/Angular-ES6-starter/node_modules/karma/lib/server.js:220:7)
    at Server.<anonymous> (/Users/kpburson/projects/Angular-ES6-starter/node_modules/karma/lib/server.js:231:9)
    at Server.g (events.js:199:16)

kburson commented 9 years ago

When I cloned your repo, checkout branch issue7, npm install and run karma tests it failed. I had to updated the package.json to pull the top of branch issue7 rather than the published 1.6 version.

When will you have this fix published?

rolaveric commented 9 years ago

Going through your example I've found a number of things:

Way too many npm dependencies - It pretty much locked up my IDE...
console.out is undefined
GreetingController.spec.es6 doesn't import angular-mocks anywhere
The home angular module in home.modules.es6 should include ui.router as a dependency
You haven't included any of your third-party libraries under "files" in karma.conf.js
the "baseUrl" property in karma.config.js should be "baseURL"
Test file suffix is set to ".spec.js" when it should be ".spec.es6"
Typo in the path for "statehelper" in karma.conf.js

Point 7 is why you were getting "Executed 0 of 0 ERROR" - it couldn't find any test suites to run.

kburson commented 9 years ago

1) Yes, I was adding npm dependencies that I was interested in but not yet using. I shelved some off to a "pending" block to trim down to what I am using now.

2) console.out is part of xcon-0.6.0.min.js (extended console) which is included in the index.html, but I guess I missed it in the karma config. xcon adds some nice console debugging features. It is not necessary, I was merely playing around with the idea.

3) Hmm, I thought it was globally included. oops.

4) oops, same as #3.

5) I had "_build/js/lib/*/.js" to include all dependent libraries, I have changed this to specifically include each from the node_modules or bower_components (not from the build folder).

6) baseUrl --> baseURL: Good catch.

7) ouch, ".spec.js" <--> ".spec.es6", I keep bouncing back and forth trying to get something to work.

8) type: nice catch.

This is why I need a second pair of eyes; acute myopia.

I was able to get your issue 7 compiling and running tests. I followed the steps you outlayed to massage my starter app into shape. It still compiles and hosts the app correctly, but the tests are not running... For some reason the { ".es6": ".es6" } is not catching, Karma is still trying to load *.js files.

% karma start client/src/tests/karma/karma.conf.js
=== projectRoot =  /Users/kpburson/projects/Angular-ES6-starter
WARN [config]: urlRoot normalized to "/"
INFO [karma]: Karma v0.12.31 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 41.0.2272 (Mac OS X 10.10.2)]: Connected on socket shyPelNuxoA_pU7jgirm with id 50820101
WARN [web-server]: 404: /base/client/src/app/modules/app.module.js
WARN [web-server]: 404: /base/lib/angular-mocks.js
Chrome 41.0.2272 (Mac OS X 10.10.2) ERROR
  Error loading "client/src/app/modules/app.module" at /Users/kpburson/projects/Angular-ES6-starter/client/src/app/modules/app.module.js
  Error loading "client/src/app/modules/app.module" from "client/src/app/modules/home/greeting/GreetingController.spec.es6" at /Users/kpburson/projects/Angular-ES6-starter/client/src/app/modules/home/greeting/GreetingController.spec.es6
  Not Found: /Users/kpburson/projects/Angular-ES6-starter/client/src/app/modules/app.module.js
Chrome 41.0.2272 (Mac OS X 10.10.2) ERROR
  Error loading "client/src/app/modules/app.module" at /Users/kpburson/projects/Angular-ES6-starter/client/src/app/modules/app.module.js
  Error loading "client/src/app/modules/app.module" from "client/src/app/modules/home/greeting/GreetingController.spec.es6" at /Users/kpburson/projects/Angular-ES6-starter/client/src/app/modules/home/greeting/GreetingController.spec.es6
  Not Found: /Users/kpburson/projects/Angular-ES6-starter/client/src/app/modules/app.module.js

Chrome 41.0.2272 (Mac OS X 10.10.2): Executed 0 of 0 ERROR (0.357 secs / 0 secs)

I have pushed all changes up to github. I am working from the 'gulp' branch, although I am pushing most changes out to master.

kburson commented 9 years ago

I am also interested in creating a branch that bundles with systemjs, and another that does all this with webpack. Then this public repository can be a comparison of building manually with gulp, using systemjs for module loading and testing, using systemjs-builder for bundling, and using webpack for bundling... An interesting comparison of the various patterns used in development and testing of SPA apps.

I do very much appreciate your help in all this.

Thanks.

rolaveric commented 9 years ago

For some reason the { ".es6": ".es6" } is not catching

Damn... What's happened is it works when karma-systemjs tries to convert file paths to module names, but the module names used in your 'import' statements don't include '.es6' - so it defaults back to regular old "add .js to the end" behaviour. One option would be to try {"*/src/*": "*/src/*.es6"}, but then karma-system would try to import module src/something.spec.es6, which would get mapped to src/something.spec.es6.es6... Maybe try a rule for both - It should be the more specific rule (ie. Longer string, less wildcards) wins: {"*/src/*": "*/src/*.es6", "*/src/*.spec.es6": "*/src/*.spec.es6"}

It also looks like the SystemJS team are talking about removing the default "add .js to module names" behaviour: https://github.com/systemjs/systemjs/issues/319 That should simplify things, eventually. But for now you'll need that work around. The joys of living on the edge :grinning:

kburson commented 9 years ago

Trying the{"*/modules/*": "*/modules/*.es6"}

Only one wildcard in a path is permitted

% karma start client/src/tests/karma/karma.conf.js
=== projectRoot =  /Users/kpburson/projects/Angular-ES6-starter
WARN [config]: urlRoot normalized to "/"
INFO [karma]: Karma v0.12.31 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 41.0.2272 (Mac OS X 10.10.2)]: Connected on socket TNr1PKd_cW8N20t3poYz with id 41159743
Chrome 41.0.2272 (Mac OS X 10.10.2) ERROR
  TypeError: Error loading "client/src/app/modules/home/greeting/GreetingController.spec.es6" at <unknown>
  Only one wildcard in a path is permitted
Chrome 41.0.2272 (Mac OS X 10.10.2) ERROR
  TypeError: Error loading "client/src/app/modules/home/greeting/GreetingController.spec.es6" at <unknown>
  Only one wildcard in a path is permitted

Chrome 41.0.2272 (Mac OS X 10.10.2): Executed 0 of 0 ERROR (0.3 secs / 0 secs)

kburson commented 9 years ago

Perhaps I need to give up the ghost on using .es6 to identify ES6 vs ES5 files and normalize on .js and simply transpile everything... Although the system.config.js and bootstrap.js are ES5, so I do not want them wrapped in amd defines... Is there a better way around this?

I am going to try the experiment in the gulp branch to rename the .es6 to .js

rolaveric commented 9 years ago

Only one wildcard in a path is permitted

OK, then try: {"client/src/app/modules/*": "client/src/app/modules/*.es6", "client/src/app/modules/*.spec.es6": "client/src/app/modules/*.spec.es6"}

Although the system.config.js and bootstrap.js are ES5...

Yes, but all your ES6 code is inside client/src/app/modules/, and both of those files are in client/src/app/, so you can easily exclude your ES5 files from any ES6 based processing you want to do. And besides - SystemJS will only wrap modules that are imported. If you never import client/src/app/bootstrap.js from another module or directly from System.import(), you'll be fine.

kburson commented 9 years ago

Cool, thanks, I will try some of that... Check back with you tomorrow after I complete some more experiments.

kburson commented 9 years ago

I made the suggested change. No dice. I started to look thru your plugin code (Karma-systemjs). IT does indeed overlay all karma.config.systemjs.config settings ontop of the systemjs.config settings, thus I can use systemjs as a default setup and override with karma when I am testing.

I continued to run into the problem with the file extensions, so I changed them all to js, then it would not load the pre-compiled templates cache file, so I removed the template cache and reconfigured the entire site to import templates using systemjs. I also reconfigured the routing to be more distributed (each module defines it's own route with lineage relative to the root level. This seems to be the way people like to do things ( I studied a few of your sample projects).

I am now running into a new problem, and it is probably something stupid (it is 3:40 am here).

GET http://localhost:8000/json.js 404 (Not Found)
es6-module-loader.src.js:140 Potentially unhandled rejection [5] Error loading "resources.json!json" at <unknown>
Error loading "json" at http://localhost:8000/json.js
Not Found: http://localhost:8000/json.js (WARNING: non-Error used)

I know the plugin is in _build/js/lib/json.js. The systemjs.config.js has baseURL set to ./, so all files should load relative to the index.html (or is it relative to the systemjs.config.js ?)

The project is all pushed to github if you can please take a look at branch SystemJS

https://github.com/kburson/Angular-ES6-starter.git#SystemJS

Thanks, I appreciate any help you can give me getting this thing working.

kburson commented 9 years ago

What do you use to debug the karma-systemjs plugin with? When I was writing grunt tasks I used node-debug grunt {task}, but gulp and karma do not seem to stop on any set breakpoints I had to use console.log to see what was going on (very old school). What is the proper way?

Thanks

rolaveric commented 9 years ago

I honestly don't know how (or if) a baseURL of "./" works. ie. What it's relative to. I know "/" is relative to the webroot for your web server, and I'm guessing it's treating "./" the same way.

I'll take a look at your SystemJS branch tomorrow and see if I can find the problem.

What do you use to debug the karma-systemjs plugin with?

console.log() I actually don't do much NodeJS coding - just build process stuff, so I've never needed anything more sophisticated for debugging.

kburson commented 9 years ago

I have refactored the project to load templates using systemjs import rather than the ngtemplate template cache. I have also created module files in each folder to register providers and dependencies for that specific folder, allowing for children folders to export their own module defs with deps and all. It is moving closer to what I see you do in ngbp and angular-seed, although a little more complex.

Now I am getting $inject errors. I have double checked the dependency graph and all imports line up correctly, so there should be no problems with DI... puzzled.

rolaveric commented 9 years ago

If you get an injector error, best thing to do is switch back to the unminified version of Angular. It'll give you more detailed error messages.

I've fixed up the issues - expect a PR soon.

kburson commented 9 years ago

Jason, Thanks so much! That was what I needed, a pairing partner that could see what I could not see. I was so close, but could not see the trees thru the forest!

rolaveric commented 9 years ago

No need. It helps me fire proof karma-systemjs anyway.

playground commented 8 years ago

Hi I'm trying to set up my test suite using karma-systemjs, when execute my gulp task, none of the files from 'src/' get loaded. What am I doing wrong or missing? Thanks.

gulp test-dev  18:05:21 [18:05:23] Using gulpfile ~/git_repo/sandbox/wu/angular2-unit-testing/gulpfile.js [18:05:23] Starting 'test-dev'... [2016-02-05 18:05:23.087] [DEBUG] config - Loading config /Users/jefflu/git_repo/sandbox/wu/angular2-unit-testing/karma.config.js 05 02 2016 18:05:23.940:WARN [karma]: No captured browser, open http://localhost:9876/ 05 02 2016 18:05:23.961:INFO [karma]: Karma v0.13.19 server started at http://localhost:9876/ 05 02 2016 18:05:23.964:INFO [launcher]: Starting browser Chrome 05 02 2016 18:05:24.646:INFO [Chrome 48.0.2564 (Mac OS X 10.11.2)]: Connected on socket /#BRcO-yHPTmRwIvOKAAAA with id 41213352 Chrome 48.0.2564 (Mac OS X 10.11.2): Executed 0 of 0 ERROR (0.004 secs / 0 secs)

and here is my karma.config.js

module.exports = function(config) { config.set({ basePath: './', frameworks: ['systemjs', 'jspm', 'jasmine'], plugins:[ "karma-jspm", 'karma-jasmine', 'karma-chrome-launcher', "karma-systemjs" ], systemjs: { configFile: "config.js", files: [ 'src//' ], config: { paths: { 'systemjs': 'jspm_packages/system.js', 'system-polyfills': 'jspm_packages/system-polyfills.js', 'typescript': 'node_modules/typescript/lib/typescript.js', 'es6-module-loader': 'node_modules/es6-module-loader/dist/es6-module-loader.js', 'reflect-metadata': 'jspm_packages/npm/reflect-metadata@0.1.3/Refect.js', 'fs': 'jspmpackages/github/jspm/nodelibs-fs@0.1.2' }, packages: { "src": { //"defaultExtension": false } }, testFileSuffix: '.spec.js' } }, files: [ //'src/**/.js' ], jspm: { //packages: 'jspm_packages/', loadFiles: ['src/_/.spec.js'], serveFiles: ['src/**/.js', 'src//_.map', 'src/_/.ts'] } , proxies : { // avoid Karma's ./base virtual directory '/src/': '/base/src/' //'/test/': '/base/test/', //'/jspm_packages/': '/base/jspm_packages/' }, reporters: ['progress'], port: 9876, // enable / disable colors in the output (reporters and logs) colors: true, // level of logging // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG logLevel: config.LOG_INFO, browsers: ['Chrome'] }) }

and the config.js file

System.config({ baseURL: "/", defaultJSExtensions: true, transpiler: "typescript", paths: { "npm:_": "jspmpackages/npm/", "github:_": "jspmpackages/github/" },

packages: { "src": { "defaultExtension": "js" } },

map: { "angular2": "npm:angular2@2.0.0-beta.2", "css": "github:systemjs/plugin-css@0.1.20", "es6-shim": "github:es-shims/es6-shim@0.34.2", "reflect-metadata": "npm:reflect-metadata@0.1.3", "typescript": "npm:typescript@1.8.0", "zone.js": "npm:zone.js@0.5.13", "github:jspm/nodelibs-assert@0.1.0": { "assert": "npm:assert@1.3.0" }, "github:jspm/nodelibs-buffer@0.1.0": { "buffer": "npm:buffer@3.6.0" }, "github:jspm/nodelibs-constants@0.1.0": { "constants-browserify": "npm:constants-browserify@0.0.1" }, "github:jspm/nodelibs-crypto@0.1.0": { "crypto-browserify": "npm:crypto-browserify@3.11.0" }, "github:jspm/nodelibs-events@0.1.1": { "events": "npm:events@1.0.2" }, "github:jspm/nodelibs-path@0.1.0": { "path-browserify": "npm:path-browserify@0.0.0" }, "github:jspm/nodelibs-process@0.1.2": { "process": "npm:process@0.11.2" }, "github:jspm/nodelibs-stream@0.1.0": { "stream-browserify": "npm:stream-browserify@1.0.0" }, "github:jspm/nodelibs-string_decoder@0.1.0": { "string_decoder": "npm:string_decoder@0.10.31" }, "github:jspm/nodelibs-util@0.1.0": { "util": "npm:util@0.10.3" }, "github:jspm/nodelibs-vm@0.1.0": { "vm-browserify": "npm:vm-browserify@0.0.4" }, "npm:angular2@2.0.0-beta.2": { "crypto": "github:jspm/nodelibs-crypto@0.1.0", "es6-promise": "npm:es6-promise@3.0.2", "es6-shim": "npm:es6-shim@0.33.13", "process": "github:jspm/nodelibs-process@0.1.2", "reflect-metadata": "npm:reflect-metadata@0.1.2", "rxjs": "npm:rxjs@5.0.0-beta.0", "zone.js": "npm:zone.js@0.5.10" }, "npm:asn1.js@4.4.0": { "assert": "github:jspm/nodelibs-assert@0.1.0", "bn.js": "npm:bn.js@4.10.1", "buffer": "github:jspm/nodelibs-buffer@0.1.0", "inherits": "npm:inherits@2.0.1", "minimalistic-assert": "npm:minimalistic-assert@1.0.0", "vm": "github:jspm/nodelibs-vm@0.1.0" }, "npm:assert@1.3.0": { "util": "npm:util@0.10.3" }, "npm:bn.js@4.10.1": { "buffer": "github:jspm/nodelibs-buffer@0.1.0" }, "npm:browserify-aes@1.0.6": { "buffer": "github:jspm/nodelibs-buffer@0.1.0", "buffer-xor": "npm:buffer-xor@1.0.3", "cipher-base": "npm:cipher-base@1.0.2", "create-hash": "npm:create-hash@1.1.2", "crypto": "github:jspm/nodelibs-crypto@0.1.0", "evp_bytestokey": "npm:evp_bytestokey@1.0.0", "fs": "github:jspm/nodelibs-fs@0.1.2", "inherits": "npm:inherits@2.0.1", "systemjs-json": "github:systemjs/plugin-json@0.1.0" }, "npm:browserify-cipher@1.0.0": { "browserify-aes": "npm:browserify-aes@1.0.6", "browserify-des": "npm:browserify-des@1.0.0", "buffer": "github:jspm/nodelibs-buffer@0.1.0", "crypto": "github:jspm/nodelibs-crypto@0.1.0", "evp_bytestokey": "npm:evp_bytestokey@1.0.0" }, "npm:browserify-des@1.0.0": { "buffer": "github:jspm/nodelibs-buffer@0.1.0", "cipher-base": "npm:cipher-base@1.0.2", "crypto": "github:jspm/nodelibs-crypto@0.1.0", "des.js": "npm:des.js@1.0.0", "inherits": "npm:inherits@2.0.1" }, "npm:browserify-rsa@4.0.0": { "bn.js": "npm:bn.js@4.10.1", "buffer": "github:jspm/nodelibs-buffer@0.1.0", "constants": "github:jspm/nodelibs-constants@0.1.0", "crypto": "github:jspm/nodelibs-crypto@0.1.0", "randombytes": "npm:randombytes@2.0.2" }, "npm:browserify-sign@4.0.0": { "bn.js": "npm:bn.js@4.10.1", "browserify-rsa": "npm:browserify-rsa@4.0.0", "buffer": "github:jspm/nodelibs-buffer@0.1.0", "create-hash": "npm:create-hash@1.1.2", "create-hmac": "npm:create-hmac@1.1.4", "crypto": "github:jspm/nodelibs-crypto@0.1.0", "elliptic": "npm:elliptic@6.2.3", "inherits": "npm:inherits@2.0.1", "parse-asn1": "npm:parse-asn1@5.0.0", "stream": "github:jspm/nodelibs-stream@0.1.0" }, "npm:buffer-xor@1.0.3": { "buffer": "github:jspm/nodelibs-buffer@0.1.0", "systemjs-json": "github:systemjs/plugin-json@0.1.0" }, "npm:buffer@3.6.0": { "base64-js": "npm:base64-js@0.0.8", "child_process": "github:jspm/nodelibs-child_process@0.1.0", "fs": "github:jspm/nodelibs-fs@0.1.2", "ieee754": "npm:ieee754@1.1.6", "isarray": "npm:isarray@1.0.0", "process": "github:jspm/nodelibs-process@0.1.2" }, "npm:cipher-base@1.0.2": { "buffer": "github:jspm/nodelibs-buffer@0.1.0", "inherits": "npm:inherits@2.0.1", "stream": "github:jspm/nodelibs-stream@0.1.0", "string_decoder": "github:jspm/nodelibs-string_decoder@0.1.0" }, "npm:constants-browserify@0.0.1": { "systemjs-json": "github:systemjs/plugin-json@0.1.0" }, "npm:core-util-is@1.0.2": { "buffer": "github:jspm/nodelibs-buffer@0.1.0" }, "npm:create-ecdh@4.0.0": { "bn.js": "npm:bn.js@4.10.1", "buffer": "github:jspm/nodelibs-buffer@0.1.0", "crypto": "github:jspm/nodelibs-crypto@0.1.0", "elliptic": "npm:elliptic@6.2.3" }, "npm:create-hash@1.1.2": { "buffer": "github:jspm/nodelibs-buffer@0.1.0", "cipher-base": "npm:cipher-base@1.0.2", "crypto": "github:jspm/nodelibs-crypto@0.1.0", "fs": "github:jspm/nodelibs-fs@0.1.2", "inherits": "npm:inherits@2.0.1", "ripemd160": "npm:ripemd160@1.0.1", "sha.js": "npm:sha.js@2.4.4" }, "npm:create-hmac@1.1.4": { "buffer": "github:jspm/nodelibs-buffer@0.1.0", "create-hash": "npm:create-hash@1.1.2", "crypto": "github:jspm/nodelibs-crypto@0.1.0", "inherits": "npm:inherits@2.0.1", "stream": "github:jspm/nodelibs-stream@0.1.0" }, "npm:crypto-browserify@3.11.0": { "browserify-cipher": "npm:browserify-cipher@1.0.0", "browserify-sign": "npm:browserify-sign@4.0.0", "create-ecdh": "npm:create-ecdh@4.0.0", "create-hash": "npm:create-hash@1.1.2", "create-hmac": "npm:create-hmac@1.1.4", "diffie-hellman": "npm:diffie-hellman@5.0.2", "inherits": "npm:inherits@2.0.1", "pbkdf2": "npm:pbkdf2@3.0.4", "public-encrypt": "npm:public-encrypt@4.0.0", "randombytes": "npm:randombytes@2.0.2" }, "npm:des.js@1.0.0": { "buffer": "github:jspm/nodelibs-buffer@0.1.0", "inherits": "npm:inherits@2.0.1", "minimalistic-assert": "npm:minimalistic-assert@1.0.0" }, "npm:diffie-hellman@5.0.2": { "bn.js": "npm:bn.js@4.10.1", "buffer": "github:jspm/nodelibs-buffer@0.1.0", "crypto": "github:jspm/nodelibs-crypto@0.1.0", "miller-rabin": "npm:miller-rabin@4.0.0", "randombytes": "npm:randombytes@2.0.2", "systemjs-json": "github:systemjs/plugin-json@0.1.0" }, "npm:elliptic@6.2.3": { "bn.js": "npm:bn.js@4.10.1", "brorand": "npm:brorand@1.0.5", "hash.js": "npm:hash.js@1.0.3", "inherits": "npm:inherits@2.0.1", "systemjs-json": "github:systemjs/plugin-json@0.1.0" }, "npm:es6-promise@3.0.2": { "process": "github:jspm/nodelibs-process@0.1.2" }, "npm:es6-shim@0.33.13": { "process": "github:jspm/nodelibs-process@0.1.2" }, "npm:evp_bytestokey@1.0.0": { "buffer": "github:jspm/nodelibs-buffer@0.1.0", "create-hash": "npm:create-hash@1.1.2", "crypto": "github:jspm/nodelibs-crypto@0.1.0" }, "npm:hash.js@1.0.3": { "inherits": "npm:inherits@2.0.1" }, "npm:inherits@2.0.1": { "util": "github:jspm/nodelibs-util@0.1.0" }, "npm:miller-rabin@4.0.0": { "bn.js": "npm:bn.js@4.10.1", "brorand": "npm:brorand@1.0.5" }, "npm:parse-asn1@5.0.0": { "asn1.js": "npm:asn1.js@4.4.0", "browserify-aes": "npm:browserify-aes@1.0.6", "buffer": "github:jspm/nodelibs-buffer@0.1.0", "create-hash": "npm:create-hash@1.1.2", "evp_bytestokey": "npm:evp_bytestokey@1.0.0", "pbkdf2": "npm:pbkdf2@3.0.4", "systemjs-json": "github:systemjs/plugin-json@0.1.0" }, "npm:path-browserify@0.0.0": { "process": "github:jspm/nodelibs-process@0.1.2" }, "npm:pbkdf2@3.0.4": { "buffer": "github:jspm/nodelibs-buffer@0.1.0", "child_process": "github:jspm/nodelibs-child_process@0.1.0", "create-hmac": "npm:create-hmac@1.1.4", "crypto": "github:jspm/nodelibs-crypto@0.1.0", "path": "github:jspm/nodelibs-path@0.1.0", "process": "github:jspm/nodelibs-process@0.1.2", "systemjs-json": "github:systemjs/plugin-json@0.1.0" }, "npm:process@0.11.2": { "assert": "github:jspm/nodelibs-assert@0.1.0" }, "npm:public-encrypt@4.0.0": { "bn.js": "npm:bn.js@4.10.1", "browserify-rsa": "npm:browserify-rsa@4.0.0", "buffer": "github:jspm/nodelibs-buffer@0.1.0", "create-hash": "npm:create-hash@1.1.2", "crypto": "github:jspm/nodelibs-crypto@0.1.0", "parse-asn1": "npm:parse-asn1@5.0.0", "randombytes": "npm:randombytes@2.0.2" }, "npm:randombytes@2.0.2": { "buffer": "github:jspm/nodelibs-buffer@0.1.0", "crypto": "github:jspm/nodelibs-crypto@0.1.0", "process": "github:jspm/nodelibs-process@0.1.2" }, "npm:readable-stream@1.1.13": { "buffer": "github:jspm/nodelibs-buffer@0.1.0", "core-util-is": "npm:core-util-is@1.0.2", "events": "github:jspm/nodelibs-events@0.1.1", "inherits": "npm:inherits@2.0.1", "isarray": "npm:isarray@0.0.1", "process": "github:jspm/nodelibs-process@0.1.2", "stream-browserify": "npm:stream-browserify@1.0.0", "string_decoder": "npm:string_decoder@0.10.31" }, "npm:reflect-metadata@0.1.2": { "assert": "github:jspm/nodelibs-assert@0.1.0", "process": "github:jspm/nodelibs-process@0.1.2" }, "npm:reflect-metadata@0.1.3": { "assert": "github:jspm/nodelibs-assert@0.1.0", "process": "github:jspm/nodelibs-process@0.1.2" }, "npm:ripemd160@1.0.1": { "buffer": "github:jspm/nodelibs-buffer@0.1.0", "process": "github:jspm/nodelibs-process@0.1.2" }, "npm:rxjs@5.0.0-beta.0": { "buffer": "github:jspm/nodelibs-buffer@0.1.0", "process": "github:jspm/nodelibs-process@0.1.2" }, "npm:sha.js@2.4.4": { "buffer": "github:jspm/nodelibs-buffer@0.1.0", "fs": "github:jspm/nodelibs-fs@0.1.2", "inherits": "npm:inherits@2.0.1", "process": "github:jspm/nodelibs-process@0.1.2" }, "npm:stream-browserify@1.0.0": { "events": "github:jspm/nodelibs-events@0.1.1", "inherits": "npm:inherits@2.0.1", "readable-stream": "npm:readable-stream@1.1.13" }, "npm:string_decoder@0.10.31": { "buffer": "github:jspm/nodelibs-buffer@0.1.0" }, "npm:util@0.10.3": { "inherits": "npm:inherits@2.0.1", "process": "github:jspm/nodelibs-process@0.1.2" }, "npm:vm-browserify@0.0.4": { "indexof": "npm:indexof@0.0.1" }, "npm:zone.js@0.5.10": { "es6-promise": "npm:es6-promise@3.0.2", "process": "github:jspm/nodelibs-process@0.1.2" }, "npm:zone.js@0.5.13": { "es6-promise": "npm:es6-promise@3.0.2", "process": "github:jspm/nodelibs-process@0.1.2" } } });

playground commented 8 years ago

I finally resolved this by moving the systemjs.files[] to files[] in karma.config.js and added includeFiles: [ 'jspm_packages/npm/reflect-metadata@0.1.3/Reflect.js' ], fix the reflect-metadata shim is required error.

rolaveric / karma-systemjs

Please help configuring tests from ES6 project #7