In order to kick-off AngularJS projects, I have been looking at
generator-gulp-angular lately, which you can find at:
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();