Loading external file from Karma/Jasmine test

Question

I'm trying to accomplish a Jasmine test (using Karma and IntelliJ 13) to validate JSON files. Ideally, my test would simply load a JSON file into a data object, then let me parse through to check for valid formatting and data. I don't need to validate functions before or after, nor do I need to test against a server.

My basic setup is like this:

it("should load an external file", function(){ var asyncCallComplete, result,             _this = this;         // asyncCallComplete is set to true when the ajax call is complete         asyncCallComplete = false;          // result stores the result of the successful ajax call         result = null;          // SECTION 1 - call asynchronous function         runs(function() {             return $.ajax('/test/config.json', {                 type: 'GET',                 success: function(data) {                     asyncCallComplete = true;                     result = data;                 },                 error: function() {                     asyncCallComplete = true;                 }             });         });          // SECTION 2 - wait for the asynchronous call to complete         waitsFor(function() {             return asyncCallComplete !== false;         }, "async to complete");          // SECTION 3 - perform tests         return runs(function() {             return expect(result).not.toBeNull();         }); } 

The problem is that no matter what path I use, I get a 404 error and the file won't load. I've tried loading an external JSON result from a remote server using this test service:

http://date.jsontest.com/

And this works.

My test file is named /test/mySpec.js and my karma.conf.js file is on the root. I have moved around the JSON file to all of these locations with no luck. What am I doing wrong?

UPDATE WITH ANSWER:

Per the answer below, I added this to my karma.conf.js:

// fixtures { pattern: 'test/*.json',     watched: true,     served:  true,     included: false } 

Then, I wrote my test this way:

    var json:any;     it("should load a fixture", function () {         jasmine.getFixtures().fixturesPath = "base/test/"         var f = readFixtures("registration.json");         json = JSON.parse(f);         expect(json).toBeDefined();      })      it("should have a title", function () {         expect(json.title).toNotBe(null);     })     etc... 

And it passes.

Answer 1

Are you serving the JSON file via karma.config.js?

You can serve JSON files via fixture:

files: [       // angular        'angular.min.js',       'angular-route.js',       'angular-mocks.js',        // jasmine jquery helper      'jquery-1.10.2.min.js',      'jasmine-jquery.js',        //  app       '../../public/js/app.js',        // tests       '*-spec.js',        // JSON fixture       { pattern:  '/test/*.json',         watched:  true,         served:   true,         included: false }     ], 

Answer 2

Serving JSON via the fixture is the easiest but because of our setup we couldn't do that easily so I wrote an alternative helper function:

Install

bower install karma-read-json

Usage

1. Put karma-read-json.js in your Karma files, Example:

   files = [ ... 'bower_components/karma-read-json/karma-read-json.js', ... ] 

2. Make sure your JSON is being served by Karma, Example:

   files = [ ... {pattern: 'json/**/*.json', included: false}, ... ] 

3. Use the readJSON function in your tests. Example:

   var valid_respond = readJSON('json/foobar.json'); $httpBackend.whenGET(/.*/).respond(valid_respond);