jquery-jasmine unable to load json files

Question

I've seen this question posted but can't seem to resolve the error. I'm trying to use jquery-jasmine to return some fake data and I'm unable to get past the 404 error when trying to load the json file. I'm using yeoman to scaffold my angular-gulp project. Is it not a good idea to put the json file in the module, along side the spec file? Where does karma run from, is this where I should be putting the json file? I tried using an absolute path for jasmine.getJSONFixtures().fixturesPath but still get an error. I added 'base' to the path of the fixture because I saw this fixed the error in another post but it didn't work for me. Any ideas?

WARN [web-server]: 404: /base/src/app/home/home.fixture.json?_=1445293824062
PhantomJS 1.9.8 (Mac OS X) homeController should have some resultsets FAILED
    Error: JSONFixture could not be loaded: base/src/app/home/home.fixture.json (status: error, message: undefined)
    undefined

project/
  src/
    app/home
       home.controller.spec.js
       home.fixture.json
       ...
  gulp/unit-test.js

karma.conf.js
...

karma.conf.js:

'use strict';

module.exports = function(config) {

  config.set({
    basePath: '../',
    autoWatch : true,

    frameworks : ['jasmine'],

    browsers : ['PhantomJS'],

    plugins : [
        'karma-phantomjs-launcher',
        'karma-chrome-launcher',
        'karma-firefox-launcher',
        'karma-safari-launcher',
        'karma-jasmine'
    ],

    exclude : [

    ],

    files : [

        // fixtures
        {
            pattern: 'src/**/*.fixture.json', 
            watched: true, 
            served: true, 
            included: false
        }
    ]
  });
};

home.controller.spec.js

'use strict';

describe('homeController', function(){

    beforeEach(function() {
        module('homeModule');
        var $httpBackend, scope, homeController, storageFactory;
        module(function($provide) {
            $provide.service('storageFactory', storageFactory);
        });

        inject(function($rootScope, $controller, $injector) {
            $httpBackend = $injector.get('$httpBackend');
            jasmine.getJSONFixtures().fixturesPath = 'base/src/app/home';
            $httpBackend.whenGET('http://localhost:3000/my/api/home').respond(
                getJSONFixture('home.fixture.json')
            );
            scope = $rootScope.$new();
            homeController = $controller('homeController', {
                $scope: scope
            });
            storageFactory = $injector.get('storageFactory');
        });

    });


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

});

Answer 1

I had the same setup with yeoman-Angularjs-gulp and jquery-jasmine with the same 404 problem. I solved it in 2 way,

• The basePath was not setup in my karma config.
• The path of the json file were not initially loaded by karma so they never got found.

So I added the line in the file loading:

{pattern: path.join(conf.paths.src, '/mockjson/*.json'), 
watched: false, 
included: false, 
served: true}

This is the basic karma config that was built by yeoman with the 2 extra line:

var path = require('path');
var conf = require('./gulp/conf');
var _ = require('lodash');
var wiredep = require('wiredep');
function listFiles() {
  var wiredepOptions = _.extend({}, conf.wiredep, {
    dependencies: true,
    devDependencies: true
  });
  return wiredep(wiredepOptions).js
    .concat([
      path.join(conf.paths.src, '/app/**/*.module.js'),
      path.join(conf.paths.src, '/app/**/*.js'),
      path.join(conf.paths.src, '/**/*.spec.js'),
      path.join(conf.paths.src, '/**/*.mock.js'),
      path.join(conf.paths.src, '/**/*.html'),
      {pattern: path.join(conf.paths.src, '/mockjson/*.json'), watched: false, included: false, served: true}
    ]);
}

module.exports = function (config) {
  var configuration = {
    files: listFiles(),
    singleRun: true,
    autoWatch: false,
    basePath: '',
    frameworks: ['jasmine', 'angular-filesort'],
    angularFilesort: {
      whitelist: [path.join(conf.paths.src, '/**/!(*.html|*.spec|*.mock).js')]
    },
    ngHtml2JsPreprocessor: {
      stripPrefix: 'src/',
      moduleName: 'pagesBehindCouch'
    },
    browsers: ['PhantomJS'],
    plugins: [
      'karma-phantomjs-launcher',
      'karma-angular-filesort',
      'karma-jasmine',
      'karma-ng-html2js-preprocessor'
    ],
    preprocessors: {
      'src/**/*.html': ['ng-html2js']
    }
  };
  config.set(configuration);
};

I think the pattern: 'src/**/*.fixture.json', might be not at the src location you think it is. Exemple that really helped me: Gunnar Hillert's Blog

Answer 2

In my case, I was loading an environment-configuration.json file in order to bootstrap the AngularJS application. So, I also had to specify the proxy settings.

proxies: {
  '/mockjson/': '/base/src/mockjson/',
}