https://github.com/Swiip/generator-gulp-angular
When doing your unit tests, it is quite convenient to mock HTTP responses using JSON files. However, having your unit tests load additional (JSON) files may not be super obvious using the Karma test runner.
bower.json
For the task at hand, I am using jasmine-jquery which provides “jQuery matchers and fixture loader for Jasmine framework”. Add that dependency to your bower.json file:
"devDependencies": {
…
"jasmine-jquery": "2.1.1"
}
karma.conf.js
Now we need to do some additional configuration for Karma. By default, generator-gulp-angular wires the needed files up with:
return wiredep(wiredepOptions).js
.concat([
path.join(conf.paths.tmp, '/serve/app/index.module.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, '../mocks/**/*.json'), watched: false, included: false, served: true}
]);
In order to make your JSON file available, add
{
pattern: path.join(conf.paths.src, '../mocks/**/*.json'),
watched: false,
included: false,
served: true
}
So that it becomes:
return wiredep(wiredepOptions).js
.concat([
path.join(conf.paths.tmp, '/serve/app/index.module.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, '../mocks/**/*.json'), watched: false, included: false, served: true}]);
Mocks is a directory in my project’s root folder. Customize as needed. For further details see:
http://karma-runner.github.io/0.13/config/files.html
Now, you're ready for testing. In your spec aka unit test file, in the beforeEach:
beforeEach(inject(function (_$httpBackend_, _$rootScope_, $controller) {
…
}));
you can now mock up the $httpBackend:
jasmine.getJSONFixtures().fixturesPath='/base/mocks';
$httpBackend.whenGET('http://localhost:9876/api/plants').respond(
getJSONFixture('plants.json')
);
$httpBackend.whenGET('app/components/plants/plants.html').respond('');
$httpBackend.flush();
