Loading External File From Karma/jasmine Test

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 t

Solution 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 }
    ],

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

Solution 3:

If you are trying to load a HTML file and want to avoid using jasmine-jquery, you may take advantage of the karma-ng-html2js-preprocessor.

In your karma.conf.js :

// generate js files from html templates
preprocessors: {
    'resources/*.html': 'ng-html2js'
},

files: [
    ...
    'resources/*.html'
],

plugins: [
    ...
    'karma-ng-html2js-preprocessor'
],

In your jasmine spec :

beforeEach(module('resources/fragment.html'));

var $templateCache;
beforeEach(inject(function (_$templateCache_) {
    $templateCache = _$templateCache_;
}));

describe('some test', function () {
    it('should do something', function () {
        // --> load the fragment.html content from the template cache <--
        var fragment = $templateCache.get('resources/fragment.html');
        expect(fragment).toBe(...);
    });
});

Solution 4:

Have you tried simply requiring the json file and storing it as a global variable in your test?

I'm developing an Angular2 project right now (using the Angular CLI), and with this setup it works:

// On the very beginning of the file let mockConfig = require('./test/config.json');