AngularJS + Karma - Loading JSON Files for Mocking HTTP Responses
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:
karma.conf.js
Now we need to do some additional configuration for Karma. By default, generator-gulp-angular wires the needed files up with:
In order to make your JSON file available, add
So that it becomes:
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:
you can now mock up the $httpBackend:
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();
Labels: angularjs, JavaScript, karma, testing
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]
Links to this post:
Create a Link
<< Home