Loading a mock JSON file within Karma+AngularJS test

前端 未结 8 1463
星月不相逢
星月不相逢 2020-11-28 18:57

I have an AngularJS app set up with tests using Karma+Jasmine. I have a function I want to test that takes a large JSON object, converts it to a format that\'s more consumab

相关标签:
8条回答
  • 2020-11-28 19:35

    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
    
    0 讨论(0)
  • 2020-11-28 19:35

    I've been struggling to find a solution to loading external data into my testcases. The above link: http://dailyjs.com/2013/05/16/angularjs-5/ Worked for me.

    Some notes:

    "defaultJSON" needs to be used as the key in your mock data file, this is fine, as you can just refer to defaultJSON.

    mockedDashboardJSON.js:

    'use strict'
    angular.module('mockedDashboardJSON',[])
    .value('defaultJSON',{
        fakeData1:{'really':'fake2'},
        fakeData2:{'history':'faked'}
    });
    

    Then in your test file:

    beforeEach(module('yourApp','mockedDashboardJSON'));
    var YourControlNameCtrl, scope, $httpBackend, mockedDashboardJSON;
    beforeEach(function(_$httpBackend_,defaultJSON){
        $httpBackend.when('GET','yourAPI/call/here').respond(defaultJSON.fakeData1);
        //Your controller setup 
        ....
    });
    
    it('should test my fake stuff',function(){
        $httpBackend.flush();
        //your test expectation stuff here
        ....
    }
    
    0 讨论(0)
提交回复
热议问题