jquery-jasmine unable to load json files - angularjs

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/',
}