1

I'm writing unit tests for a project the requires some fairly complex json objects. They have become too verbose to plug into the spec file and I'd like to import local json files into my tests. I've tried a number of solutions that don't really work for this project: Loading a mock JSON file within Karma+AngularJS test Angular-Jasmine, loading json How to load external Json file using karma+Jasmine for angularJS testing?/ and using javascript with XMLHttpRequest().... What's the proper way to go about loading external files into the spec without creating new dependencies?

Community
  • 1
  • 1
arturobelano
  • 125
  • 11

2 Answers2

1

I think the best way for testing in your case is to use $httpBackend. It allows to use your $resource or $http and provide them with test data.

And if you have to deal with large json objects you can define them in separate js files (in functions), include those files in your test js bundle and just call those functions to return your json when you setup $httpBackend service. Hope this helps.

Update Since tests are just plain old js you can create a separate js file. And declare a function in it which will return your json.

(function (window) {
    'use strict';

    if (!window.myJsonMocks){
      window.myJsonMocks = {}; //creating the object that will contain all the functions with json
    }

    window.myJsonMocks.myCustomersQueryResultJson = function(){
      return '{"value":[{"CategoryInfo":{"Id":1,"Type":1},"Caption":"Test","Path":"1/#/1"},{"CategoryInfo":{"Id":2,"Type":1},"Caption":"new","Path":"2/#/2"},{"CategoryInfo":{"Id":3,"Type":2},"Caption":"Another one","Path":"3/#/3"}]}'
    };
})(window);

Since you declare it as IIFE it will register your function in Global scope so that it will be available in your Tests. Just make sure you include it before your test scenarios. And then you just call 

$httpBackend.when('GET', 'api/customerssdata').respond(window.myJsonMocks.myCustomersQueryResultJson());
Denis
  • 747
  • 4
  • 13
  • Yeah, I'm using $httpBackend to mock the rest API. I think you're correct, but can you provide a example? – arturobelano Mar 01 '16 at 19:38
  • Yeah, still a bit confused by this. I include the js file via my karma config file, but how do I inject that javascript file into my spec? – arturobelano Mar 02 '16 at 18:18
  • Is there a way to inject the file only into the scope of current spec file? Or is it best just to document the spec 'dependencies' in the comments at the begining of the spec? Is there any consequence of registering a bunch of js files like this into the global scope? – arturobelano Mar 04 '16 at 04:31
  • you can avoid pollution of global scope like jQuery and others do - declare 1 variable in global scope (in case with jQuery it's $) and assign an object to that variable and then assign all your functions to that object. so you'll get just 1 variable in global scope that will contain all your functions that return json. – Denis Mar 04 '16 at 14:31
0
path = basepath;

var json = fixture.load(path + '/login-response.json');

Use fixture. In plugin section, add 'karma-fixture' package and add in karma.conf.js

jsonFixturesPreprocessor: {
  variableName: '__json__'
}
jay rangras
  • 91
  • 1
  • 11