Loading a mock JSON file within Karma+AngularJS test

by

I’m using an angular setup with angular seed. I ended up solving this with straight .json fixture files and jasmine-jquery.js. Others had alluded to this answer, but it took me a while to get all the pieces in the right place. I hope this helps someone else.

I have my json files in a folder /test/mock and my webapp is in /app.

my karma.conf.js has these entries (among others):

basePath: '../',

files: [
      ... 
      'test/vendor/jasmine-jquery.js',
      'test/unit/**/*.js',

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

then my test file has:

describe('JobsCtrl', function(){
var $httpBackend, createController, scope;

beforeEach(inject(function ($injector, $rootScope, $controller) {

    $httpBackend = $injector.get('$httpBackend');
    jasmine.getJSONFixtures().fixturesPath="base/test/mock";

    $httpBackend.whenGET('http://blahblahurl/resultset/').respond(
        getJSONFixture('test_resultset_list.json')
    );

    scope = $rootScope.$new();
    $controller('JobsCtrl', {'$scope': scope});

}));


it('should have some resultsets', function() {
    $httpBackend.flush();
    expect(scope.result_sets.length).toBe(59);
});

});

The real trick was the jasmine.getJSONFixtures().fixturesPath="base/test/mock";
I had originally set it to just test/mock but it needed the base in there.
Without the base, I got errors like this:

Error: JSONFixture could not be loaded: /test/mock/test_resultset_list.json (status: error, message: undefined)
at /Users/camd/gitspace/treeherder-ui/webapp/test/vendor/jasmine-jquery.js:295

More Related Contents:

  1. Karma throws error: Can not load “ng-html2js”, it is not registered
  2. File Upload using AngularJS
  3. AngularJS Multiple ng-app within a page
  4. AngularJS: ng-model not binding to ng-checked for checkboxes
  5. Filtering by Multiple Specific Model Properties in AngularJS (in OR relationship)
  6. How to use a keypress event in AngularJS?
  7. Enforcing unique usernames with Firebase simplelogin
  8. How to Loop through items returned by a function with ng-repeat?
  9. What’s the difference between ng-model and ng-bind
  10. Easiest way to pass an AngularJS scope variable from directive to controller?
  11. How not to change url when show 404 error page with ui-router
  12. How to access global js variable in AngularJS directive
  13. if a ngSrc path resolves to a 404, is there a way to fallback to a default?
  14. How do I ignore the initial load when watching model changes in AngularJS?
  15. Angular and UI-Router, how to set a dynamic templateUrl
  16. AngularJS not detecting Access-Control-Allow-Origin header?
  17. AngularJS – How can I do a redirect with a full page load?
  18. How to simulate a drag and drop action in protractor?
  19. How do I store a current user context in AngularJS?
  20. Modules and namespace / name collision in AngularJS
  21. What is the Angular ui-router lifecycle? (for debugging silent errors)
  22. How do I create an AngularJS UI bootstrap popover with HTML content?
  23. How to getText on an input in protractor
  24. How do I handle right-click events in angular.js?
  25. AngularJS – wait for multiple resource queries to complete
  26. AngularJS $watch vs $watchCollection: which is better for performance?
  27. How to highlight a selected row in ngRepeat?
  28. How to implement an ng-change for a custom directive
  29. How does AngularJS $watch these cases in an ng-repeat?
  30. Inject module dynamically, only if required

Leave a Comment