I am getting into Angular Testing with Karma and Jasmine. After doing the karma init and writing the first test for a home controller, I keep getting Executed 0 of 0 ERROR. It does not seem like it's being picked up in the files.
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
'public/assets/libs/angular/angular.min.js',
'bower_components/angular-mocks/angular-mocks.js',
'public/app/app.module.js',
'public/app/app.config.js',
'public/app/**/*.js',
'test/unit/**/*.spec.js'
],
exclude: [
],
preprocessors: {
},
reporters: ['progress'],
port: 3030,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false
}); //config.set
} //module.export
The test (fixed)
describe('HomeController', function() {
//Inject 'app' module into this spec.
beforeEach(module('app'));
//Inject instance of Scope.
var homeController;
beforeEach(inject(function($rootScope, $controller) {
//create a new scope
scope = $rootScope.$new();
//create new controller, using the newly created scope
HomeController = $controller('HomeController', {
$scope: scope
});
}));
//Set expectations
it('the message should say Hello World', function(HomeController) {
expect(scope.message).toBe('Hello World');
});
});
And the HomeController:
(function() {
'use strict';
angular
.module('app')
.controller('HomeController', HomeController);
HomeController.$inject = ['$scope', '$log'];
function HomeController($scope, $log) {
/*jshint validthis: true*/
var vm = this;
vm.message = 'Hello World';
} //HomeController()
})(); //Controller
Thanks for helping.
I figured it out. The test it('...') was inside the beforeEach() block, so there were 0 tests. It is now in it's own separate block, below.
To all those also experiencing the "Executed 0 of 0 ERROR" issue:
Here is how to better debug this error since the log message in the command line might be truncated or not helpful enough:
In the Browser instance of karma (e.g. Chrome), set a breakpoint in karma.js in the following function:
this.error = function (msg, url, line) {
Since the string representation of the msg that will be transported to the command line log is not very helpful, analyze it here.
Had the same problem testing typescript - I found the problem in the chrome console:
Refused to execute script from 'xxx' because its MIME type ('video/mp2t') is not executable.
The fix turned out to be adding
mime: {
'text/x-typescript': ['ts', 'tsx']
}
into karma.conf.js.
Related
I'm quite new to unit testing of AngularJS, and have been pulling my hair figuring things out. I am currently testing a simple controller that produces some outputs, which I need to unit test.
controller: SummaryController
(function(app) {
'use strict';
function SummaryController($scope, $stateParams, $state, $interval, $payments, $cashierApp, $window, $banks, $prepaidcards, $flash, $player, $cookies, $rootScope, $filter) {
// lots of stuff going on here, but I only need this part
$scope.showQR = $payments.get('paymentoption').content.field_display_qrcode;
// a basic assignment of a boolean value which I need to check if it is defined
}
app.controller('depositStatusCtrl', ['$scope', '$stateParams', '$state', '$interval', '$payments', '$cashierApp', '$window', '$banks', '$prepaidcards', '$flash', '$player', '$cookies', '$rootScope', '$filter', SummaryController]);
})(angular.module('cashierApp'));
spec (unit test): controller.spec.js
'use strict';
describe('Cashier App: Deposit Status Page', function() {
var service,
ctrl,
scope;
beforeEach(module('cashierApp'));
beforeEach(inject(function($rootScope, $controller, SummaryController) {
scope = $rootScope.$new();
mockSummaryCtrl = SummaryController;
spyOn(mockSummaryCtrl, 'save').andCallThrough();
firstController = $controller('depositStatusCtrl', {
$scope: scope,
SummaryController: mockSummaryCtrl
});
}));
it('should check if qrcode display is enabled', function() {
expect(scope.showQR).toBeDefined();
// expect(scope.showQR).toBe(true);
// expect(scope.showQR).toBe(false);
});
});
I've tried every possible approach I can find on the web, and this one I tried to use was based on an example here.
I cannot get this to work at all. How do you properly test controllers and/or providers in AngularJS? When I run karma start (I'm using karma-jasmine, btw), I always get the same error of:
Error: [$injector:unpr] Unknown provider: SummaryControllerProvider <- SummaryController
EDIT: Here's my karma.conf.js just in case you need to know how I use my dependencies.
'use strict';
module.exports = function(config) {
var configuration = {
autoWatch: true,
frameworks: ['jasmine'],
files: [
'node_modules/angular/angular.js',
'node_modules/angular-mocks/angular-mocks.js',
'node_modules/angular-ui-router/release/angular-ui-router.js',
'bower_components/angular-carousel/dist/angular-carousel.js',
'bower_components/angular-cookies/angular-cookies.js',
'bower_components/angular-messages/angular-messages.js',
'bower_components/ngclipboard/src/ngclipboard.js',
'bower_components/angular-qrcode/angular-qrcode.js',
'bower_components/angular-sanitize/angular-sanitize.min.js',
'bower_components/ng-file-upload/ng-file-upload-all.min.js',
'bower_components/ng-device-detector/ng-device-detector.min.js',
'bower_components/re-tree/re-tree.min.js',
'bower_components/angular-timer/dist/angular-timer.min.js',
'bower_components/angular-touch/angular-touch.min.js',
'bower_components/highlightjs/highlight.pack.min.js',
'bower_components/moment/moment.js',
'src/app/app.js',
'src/app/core/cashier.core.js',
'src/app/core/directives/modal/modal.js',
'src/app/pages/deposit/deposit.js',
'src/app/pages/withdrawal/withdrawal.js',
'src/app/paymentoptions/alipaywap/alipaywap.js',
'src/app/paymentoptions/alipaywap/alipaywap.confirm.js',
'src/app/paymentoptions/astropay/astropay.js',
'src/app/paymentoptions/atmotc/atmotc.js',
'src/app/paymentoptions/atmotc/atmotc.confirm.js',
'src/app/paymentoptions/banktransfer/banktransfer.js',
'src/app/paymentoptions/banktransfer/banktransfer.confirm.js',
'src/app/paymentoptions/bitcoin/bitcoin.js',
'src/app/paymentoptions/bitcoinwithdrawal/bitcoinwithdrawal.js',
'src/app/paymentoptions/debitcard/debitcard.js',
'src/app/paymentoptions/lbtwithdrawal/lbtwithdrawal.js',
'src/app/paymentoptions/prepaidcard/prepaidcard.js',
'src/app/paymentoptions/qqpay/qqpay.js',
'src/app/paymentoptions/unionpay/unionpay.js',
'src/app/paymentoptions/wcnp/wcnp.js',
'src/app/paymentoptions/wechat/wechat.js',
'src/app/pages/deposit/deposit.status/deposit.status.controller.js',
'src/app/pages/deposit/deposit.status/deposit.status.controller.spec.js'
],
reporters: ['progress', 'coverage', 'junit'],
ngHtml2JsPreprocessor: {
stripPrefix: 'src/',
moduleName: 'templates'
},
// browsers: ['PhantomJS','Chrome'],
browsers: ['Chrome'],
plugins: [
'karma-chrome-launcher',
'karma-phantomjs-launcher',
'karma-angular-filesort',
'karma-jasmine',
'karma-ng-html2js-preprocessor',
'karma-junit-reporter',
'karma-coverage'
],
junitReporter: {
outputFile: 'target/unittest-results.xml',
suite: ''
},
preprocessors: {
'src/**/*.html': ['ng-html2js'],
'src/**/*.js': ['coverage']
},
coverageReporter: {
reporters: [{
type: 'cobertura',
dir: 'target/coverage/'
},
{
type: 'html',
dir: 'target/coverage/'
}
]
}
};
// This block is needed to execute Chrome on Travis
// If you ever plan to use Chrome and Travis, you can keep it
// If not, you can safely remove it
// https://github.com/karma-runner/karma/issues/1144#issuecomment-53633076
if (configuration.browsers[0] === 'Chrome' && process.env.TRAVIS) {
configuration.customLaunchers = {
'chrome-travis-ci': {
base: 'Chrome',
flags: ['--no-sandbox']
}
};
configuration.browsers = ['chrome-travis-ci'];
}
config.set(configuration);
};
Try to start from this. The reason you get not an error that angular's injector works with only known "types" - controller, services, e.t.c. And in your example you tried to get some function, that it does not now. However, it knows this function by controllers name - depositStatusCtrl.
beforeEach(inject(function($rootScope, $controller, depositStatusCtrl) {
spyOn(depositStatusCtrl, 'save').andCallThrough();
}));
it('should check if qrcode display is enabled', function() {
expect(depositStatusCtrl).toBeDefined();
});
I was trying out jasmine with karma. I have a custom service
ApiService which i need to inject in my spec file. But when am trying
to inject the ApiService i get Error: [$injector:unpr] Unknown
provider: ApiService <- ApiService
this is my controller
'use strict';
angular.module('assessmentApp')
.controller('NewUserController', NewUserController)
.run(["$rootScope", "$anchorScroll", function($rootScope, $anchorScroll) {
$rootScope.$on("$locationChangeSuccess", function() {
$anchorScroll();
});
}]);
NewUserController.$inject = ['$scope', '$rootScope', '$location', '$timeout', 'ApiService'];
function NewUserController($scope, $rootScope, $location, $timeout, ApiService) {
//console.log("innn NewUserController2 ::::")
var vm = this;
var boardsClassSubjectCombinations = [];
var studentId = $rootScope.globals.studentId;
var assessmentCampaignId = $scope.assessmentCampaignId = $rootScope.globals.assessmentCampaignId;
vm.currentQuestion = 1;
//sanity check if the user already has academics added
ApiService.getAll('students/' + studentId + '/latest-student-academic', true, ['students/{{id}}/academic'])
.then(function(res) {
if (res.data) {
//send this guy to home page
$location.url('/home');
}
});
function getStates() {
ApiService.getAll('states', true).then(function(response) {
$scope.states = response.data;
});
}
getStates();
}
this is my test file
describe('NewUserController Test', function() {
beforeEach(module('assessmentApp'));
// beforeEach(module('assets'));
//beforeEach(module('ApiService'))
var scope, location, timeout,apiService, q, authenticationService;
beforeEach(inject(function($location,$rootScope,$timeout, ApiService){
scope = $rootScope.$new();
location = $location;
timeout = $timeout;
q = _$q_;
console.log(ApiService)
//spyOn(ApiService, 'ApiService');
//spyOn(Point, 'method');
// console.log("ApiService :::"+ApiService)
//$controller = _$controller_('NewUserController', { $scope: $scope });
//console.log("NewUserController======="+$controller)
}));
describe('$scope.grade', function() {
it('sets the strength to "strong" if the password length is >8 chars', function() {
console.log("$location ::::"+location)
console.log("scope ::::"+scope)
console.log("timeout ::::"+timeout)
console.log("ApiService ::::"+ApiSrvce)
console.log("q ::::"+q)
//console.lopg("authenticationService :::"+authenticationService)
//console.log("$scope ::::::"+$scope)
expect(true).toEqual(true);
});
});
});
This is my karma.conf.js file
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: [
//'test-main.js',
'../bower_components/jquery/dist/jquery.js',
'../bower_components/angular/angular.js',
'../bower_components/bootstrap/dist/js/bootstrap.js',
'../bower_components/angular-route/angular-route.js',
'../bower_components/particles.js/particles.js',
'../bower_components/angular-cookies/angular-cookies.js',
'../bower_components/toastr/toastr.js',
'../bower_components/angular-sanitize/angular-sanitize.js',
'../bower_components/d3/d3.js',
'../bower_components/c3/c3.js',
'../bower_components/moment/moment.js',
'../bower_components/humanize-duration/humanize-duration.js',
'../bower_components/angular-timer/dist/angular-timer.js',
'../bower_components/underscore/underscore.js',
'../bower_components/scrollreveal/dist/scrollreveal.js',
'../bower_components/lodash/lodash.js',
'../bower_components/angular-youtube-mb/src/angular-youtube-embed.js',
'../bower_components/angular-mocks/angular-mocks.js',
//'../assets/**/*.js',
//'../assets/**/*.html',
//'../bower_components/angular/angular.js',
//'../bower_components/angular-mocks/angular-mocks.js',
'../app/scripts/app.js',
'../app/scripts/controllers/**/*.js',
'../app/scripts/directives/**/*.js',
'../app/scripts/services/**/*.js',
'../app/scripts/**/*.js',
'../../assets/src/assets/services/*.js',
'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: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['PhantomJS'],
// 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
})
}
What i see is, when i try to inject any custom service it skips the beforeEach function and the logs i get in it function is
LOG: '$location ::::undefined'
LOG: 'scope ::::undefined'
LOG: 'timeout ::::undefined'
LOG: 'ApiService ::::undefined'
So I would suggest this kind of structure:
angular.mock.module(function($provide) {
apiService = jasmine.createSpy('apiService', ['getAll']);
$provide.value('apiService', apiService);
// Mock out other services here in the same fashion;
});
inject(function(_$controller_, _$rootScope_) {
$controller =
_$controller_('NewUserController', { $scope: _$rootScope_.$new() });
});
Then in your tests, you would refer to the apiService like this. Ideally you would make an it() statement for each bit you want to test, like say, the return value of getState(), but we'll do it all in one here:
it ('calls getState()', function () {
// Mock out what the apiService will do; you only care what comes back
// so you can see what $scope.states looks like in the end;
apiService.getAll.and.returnValue({ Promise.resolve({ foo: 1 }) });
// Spy on the controller's own getState method;
spyOn($controller, 'getState').and.callFake(() => true);
// Store the return value of the getState call;
expect($controller.getState).toHaveBeenCalled();
// Overall the calls count for getAll on the apiService should be two;
expect(apiService.getAll.calls.count()).toEqual(2);
// getState() will have been called, and should return the object;
expect($controller.states).toEqual({ foo: 1 });
});
I'm using Angular 1.5.8. Here is my code:
describe('My Controller', function() {
var MyController;
var $controller;
var $rootScope;
var $state;
beforeEach(angular.mock.module('ui.router'));
beforeEach(module('app.my.ctrl'));
beforeEach(inject(function(_$controller_, _$rootScope_, _$state_) {
$controller = _$controller_;
$rootScope = _$rootScope_;
$state = _$state_;
MyController = $controller('MyController', { scope: $rootScope.$new() });
}));
describe('#init', function() {
it('should do something', function() {
console.log('logStatement', MyController);
MyController.init();
expect(true).toBe(true);
})
})
});
The test runner is able to locate all files, so this isnt a case of forgetting to load something. When I run this test, not only does the logStatement never appear, I get this error:
Argument 'MyController' is not a function, got undefined
This is my controller:
(function() {
'use strict';
angular
.module('app.my.ctrl')
.controller('MyController', MyController);
MyController.$inject = [
'$scope'
];
/* ngInject */
function MyController($scope) {
var vm = this;
vm.hello = 'world';
vm.init = function() {
return true;
}
}
})();
and this is my karma conf file:
// Karma configuration
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: [
'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
'bower_components/angular-ui-router/release/angular-ui-router.js',
'src/controllers/MyController.js',
'tests/unit/**/*.spec.js',
],
// list of files to exclude
exclude: [
'**/*.swp'
],
// 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: ['spec'],
// Spec Reporter Config
specReporter: {
// suppressErrorSummary: false,
// suppressFailed: false,
// suppressPassed: false,
suppressSkipped: true
// showSpecTiming: false
},
// 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: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: true,
// Concurrency level
// how many browser should be started simultaneous
concurrency: Infinity
})
};
What does this mean?? I can't find anything in the documentation that would explain this.
UPDATE:
I've read this answer and the answer has not worked.
Trying change the service injected in the controller from scope to $scope
beforeEach(inject(function(_$controller_, _$rootScope_, _$state_) {
$controller = _$controller_;
$rootScope = _$rootScope_;
$state = _$state_;
MyController = $controller('MyController', { $scope: $rootScope.$new()});
}));
Did you try to make your pb as simple as possible? Inside the application can you successfully make this call? $controller('MyController', { $scope: $rootScope.$new()}); . If this works (it actually should), the problem definitively comes from your test/jasmin/karma/gulp/grunt configuration and you shouldn't dig into angular direction anymore. Can you give us a look at how you define the app.my.ctrl module in your application? Maybe this module depends on more modules than only ui.router that you mock in your test. If it's the case, the module can't be loaded, and any controller inside can't be created either.
describe('My Controller', function() {
var MyController;
var scope;
beforeEach(angular.mock.module('ui.router'));
beforeEach(module('app.my.ctrl'));
beforeEach(inject(function($rootScope) {
scope = $rootScope.$new();
}));
describe('#init', function() {
it('should do something', function($componentController) {
var MyController = $componentController('MyController', {
$scope : scope
});
MyController.init();
expect(true).toBe(true);
})
})
});
am setting up unit test for Angular application build with webpack how ever am getting this error when am running my first simple test.
TypeError: $controller is not a function
The controller code like this :
(function() {
'use strict';
angular
.module('dpServerV2WebappRev2App.controllers')
.controller('MainCtrl', MainCtrl);
MainCtrl.$inject = ['$scope'];
function MainCtrl($scope) {
$scope.x = 'x';
}
})();
Where the test look like this:
describe('MainCtrl', function () {
beforeEach(module('dpServerV2WebappRev2App.controllers'));
var $controller;
beforeEach(inject(function(_$controller_){
$controller = _$controller_;
}));
describe('$scope.brand', function () {
it('should match the brand portal name', function () {
var $scope = {};
var controller = $controller('MainCtrl', { $scope: $scope });
expect($scope.x).toEqual('x');
});
});
});
Just to clear things more I have comment out the test code where I test the $scope.x and replace it with this:
expect(1).toEqual(1);
Therefor I got this error
at Error (native)
at node_modules/angular/angular.min.js:6:412
at node_modules/angular/angular.min.js:40:134
at r (node_modules/angular/angular.min.js:7:355)
at g (node_modules/angular/angular.min.js:39:222)
at Object.db [as injector] (node_modules/angular/angular.min.js:43:246)
at Object.workFn (node_modules/angular-mocks/angular-mocks.js:3067:5
I have commented out my module injection in the test and now the test is passing however when including the module is still getting the above error:
The new test code that cause no problems:
describe('MainCtrl', function () {
describe('$scope.brand', function () {
it('should match the brand portal name', function () {
expect(1).toEqual(1);
});
});
Since it seems config problem to me I'll add my Karma config file:
var webpackConfig = require('./webpack.config.js');
webpackConfig.entry = {};
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: [
'node_modules/angular/angular.min.js',
'node_modules/angular-mocks/angular-mocks.js',
'assets/app.bundle.js',
'app/*.js',
'tests/**/*.test.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: {
'./assets/app.bundle.js': ['webpack'],
},
webpack: webpackConfig,
webpackMiddleware: {
noInfo: true
},
// 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: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Chrome'],
// 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
})
}
Working with the angular mocks, sometimes is very strange when we deal with services. Try this
describe('MainCtrl', function () {
beforeEach(module('dpServerV2WebappRev2App.controllers'));
var controllerInjector, myController;
beforeEach(inject(function($controller){
controllerInjector = $controller;
}));
describe('$scope.brand', function () {
it('should match the brand portal name', function () {
var $scope = {};
myController = controllerInjector('MainCtrl', { $scope: $scope });
expect($scope.x).toEqual('x');
});
});
});
Demo : http://codepen.io/gpincheiraa/pen/jAgNpW
I am getting following service undefined error when i try to unit test a service call return in my app . I spend several hours on this , but i couldn't really isolate where the issue comes from . Appreciate if anyone could help me out with this .
Firefox 38.0.0 (Windows 8.1) companyService should return a promise for getCompany function FAILED
minErr/<#C:/Users/user1m/Documents/mycompany/WebApiRole/bower_components/angular/angular.js:63:12
loadModules/<#C:/Users/user1m/Documents/mycompany/WebApiRole/bower_components/angular/angular.js:4138:15
forEach#C:/Users/user1m/Documents/mycompany/WebApiRole/bower_components/angular/angular.js:323:11
loadModules#C:/Users/user1m/Documents/mycompany/WebApiRole/bower_components/angular/angular.js:4099:5
createInjector#C:/Users/user1m/Documents/mycompany/WebApiRole/bower_components/angular/angular.js:4025:11
workFn#C:/Users/user1m/Documents/mycompany/WebApiRole/node_modules/angular-mocks/angular-mocks.js:2409:44
TypeError: companyService is undefined in C:/Users/user1m/Documents/mycompany/WebApiRole/test/company/Compa
nyServiceSpec.js (line 15)
#C:/Users/user1m/Documents/mycompany/WebApiRole/test/company/CompanyServiceSpec.js:15:16
Firefox 38.0.0 (Windows 8.1): Executed 1 of 1 (1 FAILED) ERROR (0.031 secs / 0.014 secs)
My karma.conf.js file
// Karma configuration
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: [
'node_modules/requirejs/require.js',
'bower_components/angular/angular.js',
'node_modules/angular-mocks/angular-mocks.js',
'bower_components/ng-file-upload/**/*.js',
'bower_components/angular-ui-router/release/**/*.js',
'bower_components/angular-bootstrap/**/*.js',
'bower_components/angular-translate/**/*.js',
'bower_components/angular-translate-loader-static-files/**/*.js',
'bower_components/angular-pnotify/src/**/*.js',
'bower_components/angular-local-storage/**/*.js',
'bower_components/angular-loading-bar/build/**/*.js',
'app/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
hostname: 'localhost',
port: 44555,
// 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: true,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Firefox'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false
});
};
CompanyServiceSpec.js file
'use strict';
describe('companyService', function() {
var $httpBackend, companyService;
beforeEach(angular.mock.module('mycompany'));
beforeEach(angular.mock.inject(function(_$httpBackend_, _companyService_) {
$httpBackend = _$httpBackend_;
companyService = _companyService_;
}));
it('should return a promise for getCompany function', function() {
expect(typeof companyService.getCompany('foobar').then).toBe('function');
});
});
CompanyService.js file
angular.module('mycompany').factory('companyService',
function($http, mycompanyApiProvider, $upload) {
'use strict';
var _company = null;
function getCompany(companyId) {
return $http.get(mycompanyApiProvider.url('companies/' + companyId));
}
});
app.js file
angular.module('mycompany', [
'ui.router',
'ui.router.util',
'angularFileUpload',
'pascalprecht.translate',
'jlareau.pnotify',
'LocalStorageModule',
'angular-loading-bar',
'ui.bootstrap',
'angularMoment',
'frapontillo.bootstrap-switch'
]);
angular.module('mycompany').run(function (mycompanyApiProvider, $state, userService, localStorageService,
$translate, $rootScope, $window, $timeout) {
'use strict';
mycompanyApiProvider.setEndpoint('/api/');
mycompanyApiProvider.loginUrl = '/home/login';
});
mycompanyApiProvider.js file
'use strict';
angular.module('mycompany')
.provider('mycompanyApiProvider', function($httpProvider, $provide) {
$provide.factory('jsonHeaderInterceptor', function() {
return {
'request': function(config) {
// config.headers['Content-Type'] = 'application/json';
return config;
}
};
});
});
Folder structure
Folder structure :
|WebApiRole/Karma.Conf.js
|WebApiRole/app/app.js
|WebApiRole/app/company/CompanyService.js
|WebApiRole/app/common/services/mycompanyApiProvider.js
|WebApiRole/test/company/CompanyServiceSpec.js
The companyService factory doesn't return anything, so it's treated as having returned undefined. The test seems to be testing that it returns an object with a getCompany function, so you can change it so it does:
angular.module('mycompany').factory('companyService', function($http, mycompanyApiProvider, $upload) {
'use strict';
var _company = null;
function getCompany(companyId) {
return $http.get(mycompanyApiProvider.url('companies/' + companyId));
}
return {
getCompany: getCompany
};
});