Why is Karma refusing to serve my JSON fixture (which I'd like to use in my jasmine / angularjs tests)

Question

As indicated in this stackoverflow answer, it looks like Karma will serve JSON fixtures. However, I've spent too many hours trying to get it to work in my environment. Reason: I'm doing angular testing and need to load mock HTTP results into the test, as Jasmine doesn't support any global setup/teardown with mock servers and stuff.

In my karma config file, I'm defining a fixture as so:

files: [
  // angular 
  'angular/angular.min.js',
  'angular/angular-route.js',
  'angular/mock/angular-mocks.js',

  // jasmine jquery helper
 'jquery-1.10.2.min.js',
 'angular/jasmine-jquery.js',

  // our app
  '../public/js/FooApp.js',

  // our tests
  'angular/*-spec.js',

  // fixtures
  { pattern: 'node/mock/factoryResults.json',
    watched: 'true',
    served:  'true',
    included: 'false' }
]

Before I even attempt to use jasmine-jquery.js in my jasmine test to load the JSON, I see karma choking on trying to serve it:

...
DEBUG [web-server]: serving: /Users/XXX/FooApp/spec/node/mock/factoryResults.json
Firefox 25.0.0 (Mac OS X 10.8) ERROR
    SyntaxError: missing ; before statement
    at /Users/XXX/FooApp/spec/node/mock/factoryResults.json:1
...

Here's what factoryResults.json looks like:

{ "why": "WHY" }

Any idea what's going on here? I see plenty of examples on the web of folks successfully loading JSON into jasmine tests via karma fixtures. Karma can see the file; if I put the wrong path in my fixture block, I see an error stating that it couldn't find any files that match my fixture pattern. I've tried reformatting the .json file in different ways... Any ideas?

Answer 1

Your problem is that 'false' has to be a boolean, not a string.

There is already an issue to validate the config better and fix such a mistakes.

Also, you might write a simple "json" preprocessor (similar to karma-html2js) that would make it valid JS and put the JSON into some global namespace so that you can keep the tests synchronous...

Answer 2

I also needed json fixtures in my karma test suite. I ended up just using the html2js preprocessor with json files as well as html.

karma.conf.js:

module.exports = function (config) {
  config.set({
    frameworks: ["jasmine"],
    files: [
        '**/*.js',
        '**/*.html',
        '**/*.json',
        '**/*.spec.js'
    ],
    plugins: [
        'karma-html2js-preprocessor'
    ]
    preprocessors: {
        '**/*.html': ['html2js'],
        '**/*.json': ['html2js']
    }
  });
};

Then it is just a matter of getting the json from the __html__ global.

e.g.

var exampleJson = __html__['example.json'];
var jsonObj = JSON.parse(exampleJson);
var exampleHtml = __html__['example.html'];
document.body.innerHTML = exampleHtml;

Answer 3

So, I had a lot of issues with jasmine-jquery and I got a pretty decent workaround.

It's a little hacky, but it works. Basically, I just create a function accessible on the window, then stack the JSON fixtures inside a little switch:

if (typeof(window.fixtures === "undefined")) {
  window.fixtures = {};
}

window.setFixture = function(type) {
  var json;

  if (type == "catalog") {
    json = { ... }
  }

if (typeof(type) !== "undefined") {
  window.fixtures[type] = json;
}
  return json;

}

Then, I can just stub it inline in the view:

describe "App.Models.Catalog", ->
  it "provides the 'App.Models.Catalog' function", ->
    expect(App.Models.Catalog).toEqual(jasmine.any(Function))

  it "sets up a fixture", ->
    setFixture("catalog")
    console.log(fixtures["catalog"])
    expect(fixtures["catalog"]).toBeDefined()

Boom, tests pass, and the object comes out in the log:

{
  catalog_id: '2212',
  merchant_id: '114',
  legacy_catalog_id: '2340',
  name: 'Sample Catalog',
  status: '1',
  description: 'Catalog Description ',
}

Now, it's accessible within my test.

It's of course not perfect or ideal, but I kept hitting strange matchErrors and the like with the jasmine-jquery plugin, and it's simple enough (and fast) for me to paste in a couple of JSON blocks and get moving.

You also save yourself the time fiddling around with the configuration and making any changes to the files for Karma.

Anyone have any better suggestions or have any luck getting jasmine-jquery to work?