How to inject External Providers in karma jasmine test case? - angularjs

Question

I'm new to Angular and karma test cases.
For my application I'm using Angularjs and SweetAlert for displaying alerts. ( SweetAlert Plugin here )
Below is my code for getting the status for the http request and I display the http request status in SweetAlert
(function () {
'use strict';
angular
.module('app.admin')
.controller('TestController', TestController);
TestController.$inject = ['$scope','$http','SweetAlert'];
function TestController($scope,$http,SweetAlert) {
var vm = this;
vm.test = 'hi';
vm.todos = [];
vm.todo = 'Run';
vm.status = '';
vm.GetURL = function(){
$http.get("some url")
.then(function (result) {
vm.status = result.status;
SweetAlert.swal(JSON.stringify(vm.status))
});
};
vm.addTodo = function(){
vm.todos.push(vm.todo);
};
vm.removeTodo = function(index){
vm.todos.splice(index, 1);
};
}
})();
This is working fine without any problems, but I need to test my application, for that I am using karma with jasmine framework. Below is my karma.config.js and test file.
karma.config.js
// Karma configuration
// Generated on Tue Jan 26 2016 21:38:16 GMT+0530 (India Standard Time)
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files, exclude)
basePath: '',
// frameworks to use
// available frameworks: https://npmjs.org/browse/keyword/karma-adapter
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'../app/js/base.js',
'../global_URL.js',
'bower_components/sweetalert/dist/sweetalert.css',
'bower_components/sweetalert/dist/sweetalert.min.js',
'bower_components/angular-mocks/angular-mocks.js',
'../app/js/app.js',
'test/spec/**/*.js'
],
// list of files to exclude
exclude: [
],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
plugins: [
'karma-chrome-launcher',
'karma-firefox-launcher',
'karma-jasmine',
'karma-phantomjs-launcher'
],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
}
test.spec.js
'use strict';
describe('Test Controller', function () {
// load the controller's module
var MainCtrl,
SweetAlert,
URLService,
httpcall,
scope;
beforeEach(module('sample'));
/*beforeEach(inject(function(_SweetAlert_,_URLService_){
URLService = _URLService_;
SweetAlert = _SweetAlert_;
}));*/
// Initialize the controller and a mock scope
beforeEach(inject(function ($rootScope, $controller,$http,_SweetAlert_) {
scope = $rootScope.$new();
MainCtrl = $controller('TestController', {
$scope: scope,
httpcall : $http,
SweetAlert : _SweetAlert_
});
}));
it('should tell hi', function () {
expect(MainCtrl.test).toBe("hi");
});
it('should give the status', function () {
MainCtrl.GetURL();
expect(MainCtrl.status).toBe(200);
});
it('should have no items to start', function () {
expect(MainCtrl.todos.length).toBe(0);
});
it('should add items to the list', function () {
MainCtrl.todo = 'Test 1';
MainCtrl.addTodo();
expect(MainCtrl.todos.length).toBe(1);
});
it('should add then remove an item from the list', function () {
MainCtrl.todo = 'Test 1';
MainCtrl.addTodo();
MainCtrl.removeTodo(0);
expect(MainCtrl.todos.length).toBe(0);
});
});
But it throws the following error:
F:\Projects\Angular\NewSample\Development\test\master>gulp test
[13:06:40] Using gulpfile F:\Projects\Angular\NewSample\Development\test\master\gulpfile.js
[13:06:40] Starting 'test'...
WARN `start` method is deprecated since 0.13. It will be removed in 0.14. Please
use
server = new Server(config, [done])
server.start()
instead.
27 01 2016 13:06:40.250:INFO [karma]: Karma v0.13.19 server started at http://lo
calhost:9876/
27 01 2016 13:06:40.261:INFO [launcher]: Starting browser Chrome
27 01 2016 13:06:41.793:INFO [Chrome 47.0.2526 (Windows 8.1 0.0.0)]: Connected o
n socket /#hmyJFO5x2TLTkMMHAAAA with id 83740230
Chrome 47.0.2526 (Windows 8.1 0.0.0) LOG: 'localhost'
Chrome 47.0.2526 (Windows 8.1 0.0.0) LOG: 'localhost'
Chrome 47.0.2526 (Windows 8.1 0.0.0) Test Controller should tell hi FAILED
Error: [$injector:unpr] Unknown provider: SweetAlertProvider <- SweetAle
rt
http://errors.angularjs.org/1.4.2/$injector/unpr?p0=SweetAlertProvider%2
0%3C-%20SweetAlert
at F:/Projects/Angular/NewSample/Development/test/ap
p/js/base.js:9274:12
I don't know why., How can i solve this?
For this i take long week, is it possible to include third party plugins in karma.
Please help me, Thanks in advance.

Answer 1

Before inject you should add this line.
beforeEach(module('_SweetAlert_'));
And also change karma.config.js file path like below.
bower_components/sweetalert/dist/sweetalert.min.js to app/bower_components/sweetalert/dist/sweetalert.min.js

Answer 2

Try this.(Here I have used $injector to inject the SweetAlert)
describe('Test Controller', function () {
var MainCtrl,
SweetAlert,
URLService,
httpcall,
scope;
beforeEach(module('sample'));
beforeEach(module('SweetAlert'));
beforeEach(inject(function ($injector) {
$rootScope = $injector.get('$rootScope');
$scope = $rootScope.$new();
SweetAlert = $injector.get('SweetAlert');
MainCtrl = $controller('TestController', {
$scope: scope,
httpcall : $http,
SweetAlert : SweetAlert
});
}));
});