Ember CLI, EmberScript, Emblem, and Karma: not loading plugins

Testing
1

Am using Ember CLI and trying to use Karma with EmberScript, Emblem, and Mocha. If this works, it’s going to be epic! So far, however, no joy.

When I run karma start I get this:

INFO [karma]: Karma v0.12.16 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
WARN [preprocess]: Can not load "ember-script", it is not registered!
  Perhaps you are missing some plugin?
WARN [preprocess]: Can not load "emblem"!
  ReferenceError: file is not defined
    at createEmblemPreprocessor (/Users/aries/Workspace/paperhat/paperhat/node_modules/karma-emblem-preprocessor/lib/main.js:25:146)
    at Array.invoke [as 0] (/Users/aries/Workspace/paperhat/paperhat/node_modules/karma/node_modules/di/lib/injector.js:75:15)
    at get (/Users/aries/Workspace/paperhat/paperhat/node_modules/karma/node_modules/di/lib/injector.js:48:43)
    at instantiatePreprocessor (/Users/aries/Workspace/paperhat/paperhat/node_modules/karma/lib/preprocessor.js:65:37)
    at Array.forEach (native)
    at /Users/aries/Workspace/paperhat/paperhat/node_modules/karma/lib/preprocessor.js:86:31
    at /Users/aries/Workspace/paperhat/paperhat/node_modules/karma/lib/file_list.js:219:17
    at Object.oncomplete (fs.js:107:15)
INFO [PhantomJS 1.9.7 (Mac OS X)]: Connected on socket rH4Ye5MolJkmrMdVOZaH with id 3064553
PhantomJS 1.9.7 (Mac OS X) ERROR
  SyntaxError: Parse error
  at /Users/aries/Workspace/paperhat/paperhat/app/app.em:1

Clearly, it is not loading the EmberScript and Emblem plugins. But I installed these using:

npm install karma-ember-preprocessor --save-dev
npm install karma-emblem-preprocessor --save-dev

My karma.conf file looks like this:

module.exports = function(config) {
  config.set({
    basePath: '',
    frameworks: ['mocha'],
    files: [
      'vendor/jquery/dist/jquery.min.js',
      'vendor/handlebars/handlebars.js',
      'vendor/ember/ember.js',
      'app/app.em',
      'tests/*.em',
      'app/templates/*.emblem'
    ],
    browsers: ['PhantomJS'],
    singleRun: true,
    autoWatch: false,
    plugins: [
      'karma-mocha',
      'karma-ember-preprocessor',
      'karma-emblem-preprocessor',
      'karma-phantomjs-launcher'
    ],
    exclude: [],
    preprocessors: {
      "**/*.emblem": 'emblem',
      '**/*.em': ['ember-script']
    },
    emberScriptPreprocessor: {
      // options passed to the ember script compiler
      options: {
        bare: true,
        sourceMap: true
      },
      // transforming the filenames
      transformPath: function(path) {
        return path.replace(/\.em/, '.js');
      }
    },
    reporters: ['progress'],
    port: 9876,
    colors: true,
    logLevel: config.LOG_INFO
  });
};

The package.json file contains this (among other things, of course):

  "devDependencies": {
    "body-parser": "^1.2.0",
    "broccoli-coffee": "^0.1.0",
    "broccoli-ember-hbs-template-compiler": "^1.5.0",
    "broccoli-ember-script": "^0.1.1",
    "broccoli-emblem-compiler": "^0.3.16",
    "broccoli-stylus-single": "^0.1.2",
    "ember-cli": "0.0.28",
    "express": "^4.1.1",
    "glob": "^3.2.9",
    "karma": "^0.12.16",
    "karma-chrome-launcher": "^0.1.4",
    "karma-ember-preprocessor": "^1.5.0",
    "karma-ember-script-preprocessor": "^0.1.3",
    "karma-emblem-preprocessor": "^0.1.3",
    "karma-jasmine": "^0.1.5",
    "karma-mocha": "^0.1.3",
    "karma-phantomjs-launcher": "^0.1.4",
    "karma-qunit": "^0.1.1",
    "loom-generators-ember-appkit": "^1.1.1",
    "mocha": "^1.19.0",
    "originate": "0.1.5",
    "qunitjs": "^1.12.0"
  }

And bower.json includes this:

  "dependencies": {
    "handlebars": "~1.3.0",
    "jquery": "^1.11.1",
    "qunit": "~1.12.0",
    "ember-qunit": "~0.1.5",
    "ember": "1.5.1",
    "ember-data": "1.0.0-beta.7",
    "ember-resolver": "stefanpenner/ember-jj-abrams-resolver#master",
    "ic-ajax": "~1.x",
    "loader": "stefanpenner/loader.js#1.0.0",
    "ember-cli-shims": "stefanpenner/ember-cli-shims#0.0.1",
    "ember-load-initializers": "stefanpenner/ember-load-initializers#0.0.1",
    "bootstrap": "~3.1.1",
    "mocha": "~1.19.0"
  }

Is there something I’m missing on the front end? I can find no documentation on this at all. Anyone?

TIA, Chas.

2

OK, I discovered that I needed to add the following to my karma.conf.js file:

    karmaEmblemPreprocessor: {
      paths: {
        jquery: 'vendor/jquery/dist/jquery.js',
        ember: 'vendor/ember/ember.js',
        handlebars: 'vendor/handlebars/handlebars.js',
        mocha: 'vendor/mocha/mocha.js',
        emblem: 'vendor/emblem.js/emblem.js'
      }
    },

And I needed to install emblem on the front end with:

bower install --save emblem.js

That fixed the missing emblem processing. Then I discovered that the ember-script preprocessor wasn’t listed in my plugins in karma.conf.js, so I added it:

    plugins: [
      'karma-mocha',
      'karma-ember-preprocessor',
      'karma-emblem-preprocessor',
      'karma-ember-script-preprocessor',
      'karma-phantomjs-launcher'
    ],

That seemed to work. But now I get syntax errors in every em file (apparently after conversion to JS). Perhaps I didn’t need the ember-script preprocessor? Hmm.

PhantomJS 1.9.7 (Mac OS X) ERROR
  SyntaxError: Parse error
  at /Users/aries/Workspace/paperhat/paperhat/app/app.js:4

Sigh…

3

I had a similar issue - it has been discussed on the ember-cli issue #694

4

Thanks. It appears that the solution was no solution? Use Testem or else?

Chas.

5

As you wrote, solution was no solution, I’m using now testem (I didn’t wanted to waste much time). But as I realized, I’m using the runner to run in CI mode only. The testing itself cover completley ember-cli via the tiny-lr. The reason why, I was reaching out to karma was that I prefer Jasmine over Qunit (or Mocha would still be a win). So I thought at the beginning that the test fw relies on the test runner which I was using. Now I configured ember-cli (mainly the Brocfile) to prepare the jasmine stuff into the tmp/output/assets folder and I’ve load the manually into the tmp/output/tests/index.html

Hope this was a quite explanatory and maybe you will soon resolve this “quest”.

6

It’s Mocha I want more than Karma, so maybe I’ll try Mocha with Testem. Thanks!

It does seem to me that this sort of thing should be designed from day one to be pluggable. Why hard code it in and then have to back it out again?

7

ember-mocha-adapter is probably what you need (thx to @teddyzeenny)

Ad to the bound of testem with ember-cli, from my point of view, testem is more lightweight than karma, but does almost the same thing. I’ve tried out testem on a separate project, and it’s really simple (but hasn’t so much plugins available as karma). but as stated in my post before, when you run ember serve then on the /tests url you’ll see the current runner output (can be mocha runner via the adapter as well).

8

I looked at that but couldn’t make it work with Ember CLI. I’ll give it another chance.

Will Testem work with EmberScript and Emblem?

9

I haven’t tried yet Emblem and EmberScript, but you point the testem.json conf to the tmp/output/assets directory where everything is compile, transpilled whatever, there is the huge app.js with everything packed. So you have this file and add the tests to this and it should work. Something different is, when you’re testing the templates itself, then you need add the compiler into the tmp/output/assets too.

10

Thank you much, vire. This is very helpful. Will try it and report back for the benefit of anyone else reading.