Develop Reference

karma angular templateUrl not found

I've some problems when testing angular directives with karma, the problem is that when comes from templateUrl never translate it.
here is my karma.conf.js
'use strict';
var wiredep = require('wiredep');
var bowerFiles = wiredep().js;
var appFiles = [
'src/modules/**/*-module.js',
'src/modules/**/**/*.js',
{ pattern: 'src/modules/**/*.mol', watched: true, served: true, included: false },
'src/modules/**/**/templates/*.html',
{
pattern: '../src/assets/images/*.*',
watched: false,
included: false,
served: true
},
'src/modules/**/**/templates/*.html'
];
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: [
'mocha',
'chai',
'sinon-chai'
],
junitReporter: {
outputFile: '../reports/test-results/test-results.xml'
},
coverageReporter: {
dir: 'reports/test-coverage/',
subdir: function (browser) {
// normalization process to keep a consistent browser name across different OS
return browser.toLowerCase().split(/[ /-]/)[0];
},
check: {
global: {
statements: 10,
branches: 1,
functions: 10,
lines: 10
},
each: {
statements: 0,
branches: 0,
functions: 0,
lines: 0
}
},
reporters: [
{ type: 'html', file: 'coverage.html' },
{ type: 'cobertura', file: 'coverage.xml' },
{ type: 'json' },
{ type: 'text-summary' }
]
},
reporters: ['junit', 'dots', 'coverage'],
// list of files / patterns to load in the browser
files: [].concat(bowerFiles, appFiles),
// 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: {
'src/modules/**/**/!(*.test).js': 'coverage',
'src/modules/**/**/templates/*.html': ['ng-html2js']
},
ngHtml2JsPreprocessor: {
stripPrefix: 'src/',
moduleName: 'templates'
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
// 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
});
};
And the test ...
'use strict';
describe('dra-header-directive', function () {
var compile;
var rootScope;
var templateCache;
beforeEach(module('dd'));
beforeEach(module('templates'));
beforeEach(inject(function ($compile, $rootScope, $templateCache) {
compile = $compile;
rootScope = $rootScope;
templateCache = $templateCache;
}));
it('Replace the element with the appropiate element', function () {
var scope = rootScope.$new();
var el = angular.element('<testing></testing><dra-header></dra-header><input-bar></input-bar>');
var element = compile(el)(scope);
scope.$digest();
console.log(element);
});
});
The first tag is translated due to is not defined as templateUrl, but the others don't.
if I get the templates with $templateCache I can read the content, so I asume ng-html2js is doing it's job. any ideas?
Thanks for helping!

Its solved, I changed the before each module to avoid importing unnecesary module dependencies, looks like there was something that was modifying my rootScope, I just loaded the module that has the directive, and now works fine
'use strict';
describe('dra-header-directive', function () {
var compile;
var scope;
var templateCache;
beforeEach(module('dra.components.DRAHeaderModule'));
beforeEach(function () {
module('templates');
});
beforeEach(inject(function ($compile, $rootScope, $templateCache) {
compile = $compile;
templateCache = $templateCache;
scope = $rootScope.$new();
}));
it('Replace the element with the appropiate element', function () {
var el = angular.element('<dra-header></dra-header>');
compile(el)(scope);
scope.$digest();
expect(el.find('div')[0]).to.not.be.undefined();
});
});

Testing services from $resource using factory with Karma

I'm new to karma and I'm trying to run tests in order to check if my factories are set to the proper value returned by the API.
apiServices.js :
'use strict';
angular.module('balrogApp.services', ['balrogApp.config'])
.factory('Requests', ['$resource', 'balrogConfig', function($resource, balrogConfig) {
return $resource(balrogConfig.backend + '/requests/:id', {id: '#id'});
}])
.factory('Projects', ['$resource', 'balrogConfig', function($resource, balrogConfig) {
return $resource(balrogConfig.backend + '/projects/:id', {id: '#id'}, {'update': { method:'PUT' }});
}])
.factory('Users', ['$resource', 'balrogConfig', function($resource, balrogConfig) {
return $resource(balrogConfig.backend + '/users/:id', {id: '#id'});
}]);
config.js :
'use strict';
angular.module('balrogApp.config', [])
.constant('balrogConfig', {
'backend': 'http://127.0.0.1:8000/api/catalog'
});
Now, I've been through a few articles about $resource and karma but I didn't really get how to set up the unit tests for my case.
Here is my test file : (edited after #Freezystem answer)
describe("Services test", function () {
var Requests, Projects, Users;
beforeEach(function () {
angular.mock.module("balrogApp.services");
angular.mock.inject(function (_Requests_, _Projects_, _Users_) {
Requests = _Requests_;
Projects = _Projects_;
Users = _Users_
});
});
it("API factories must be defined", function () {
expect(Requests).toBeDefined();
expect(Projects).toBeDefined();
expect(Users).toBeDefined();
});
});
I also tried a few things with $httpBackend but couldn't make it neither.
How to make this work in order to know if the services are working.
Also, how to check if the services are returning the expected response from the API ?
Edit : Adding karma.conf.js :
// Karma configuration
// Generated on Tue Nov 17 2015 13:48:48 GMT+0100 (Romance 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: [
'bower_components/jquery/dist/jquery.js',
'bower_components/angular/angular.js',
'bower_components/angular-animate/angular-animate.js',
'bower_components/angular-aria/angular-aria.js',
'bower_components/angular-material/angular-material.js',
'bower_components/angular-messages/angular-messages.js',
'bower_components/angular-mocks/angular-mocks.js',
'bower_components/angular-resource/angular-resource.js',
'bower_components/angular-route/angular-route.js',
'bower_components/angular-sanitize/angular-sanitize.js',
'bower_components/angular-bootstrap/ui-bootstrap.js',
'bower_components/ui-select/dist/select.js',
'bower_components/angular-smart-table/dist/smart-table.js',
'bower_components/angular-ui-switch/angular-ui-switch.js',
'bower_components/angular-growl-v2/build/angular-growl.js',
'bower_components/angular-number-picker/angular-number-picker.js',
'bower_components/moment/moment.js',
'app/*.js',
'app/**/*.js',
'tests/*.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: ['Chrome'],
plugins: [
'karma-jasmine',
'karma-chrome-launcher',
'karma-firefox-launcher'
],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
// Concurrency level
// how many browser should be started simultanous
concurrency: Infinity
})
};
So far, I'm getthing this error : http://codepen.io/anon/pen/OyqWdE

Just try to inject each factory by its own name :
describe("Services test", function () {
var users, $httpBackend;
beforeEach(function(){
angular.mock.module('balrogApp.services');
angular.mock.inject(function (_Users_, _$httpBackend_) {
users = _Users_;
$httpBackend = _$httpBackend_;
});
});
// clear all outstanding requests after each tests
afterEach(function() {
$httpBackend.verifyNoOutstandingExpectation();
$httpBackend.verifyNoOutstandingRequest();
});
it("Factories must be defined", function () {
// simulate API response
$httpBackend.when('/api/catalog/users/1337')
.respond( 200, { id : 1337, name : 'Tom' } );
// there is a better way to do it actually but I'm unable to make it work
// $httpBackend.whenRoute('GET', '/api/catalog/users/:id')
// .respond(function ( method, url, data, headers, params ) {
// return [ 200, { user : params.id } ] ;
// });
// make the user request to the API
var user = users.get({id:1337});
$httpBackend.flush();
// test API returned Object
expect(user.id).toBe(1337);
expect(user.name).toBe('Tom');
});
});
Let me know if you have any other questions.

Karma unit test tries to send a request to a completely different module

I have the following karma test for the angular-fullstack scaffold:
describe('Directive: categoryLookAhead', function () {
// load the directive's module and view
beforeEach(module('portfolioApp'));
beforeEach(module('app/article/Directives/categoryLookAhead/categoryLookAhead.html'));
var element, scope;
beforeEach(inject(function ($rootScope) {
scope = $rootScope.$new();
}));
it('should make hidden element visible', inject(function ($compile) {
element = angular.element('<category-look-ahead></category-look-ahead>');
element = $compile(element)(scope);
scope.$apply();
expect(element.text()).not.toBe(null);
}));
});
and this is my karma.conf.js
// Karma configuration
// http://karma-runner.github.io/0.10/config/configuration-file.html
module.exports = function(config) {
config.set({
// base path, that will be used to resolve files and exclude
basePath: '',
// testing framework to use (jasmine/mocha/qunit/...)
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'client/bower_components/jquery/dist/jquery.js',
'client/bower_components/angular/angular.js',
'client/bower_components/angular-mocks/angular-mocks.js',
'client/bower_components/angular-resource/angular-resource.js',
'client/bower_components/angular-cookies/angular-cookies.js',
'client/bower_components/angular-sanitize/angular-sanitize.js',
'client/bower_components/angular-route/angular-route.js',
'client/bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
'client/bower_components/lodash/dist/lodash.compat.js',
'client/bower_components/angular-socket-io/socket.js',
'client/bower_components/angular-ui-router/release/angular-ui-router.js',
'client/bower_components/angular-markdown/angular.markdown.js',
'client/bower_components/angular-ui-router-title/angular-ui-router-title.js',
'client/app/app.js',
'client/app/app.coffee',
'client/app/**/*.js',
'client/app/**/*.coffee',
'client/components/**/*.js',
'client/components/**/*.coffee',
'client/app/**/*.jade',
'client/components/**/*.jade',
'client/app/**/*.html',
'client/components/**/*.html'
],
preprocessors: {
'**/*.jade': 'ng-jade2js',
'**/*.html': 'html2js',
'**/*.coffee': 'coffee',
},
ngHtml2JsPreprocessor: {
stripPrefix: 'client/'
},
ngJade2JsPreprocessor: {
stripPrefix: 'client/'
},
// list of files / patterns to exclude
exclude: [],
// web server port
port: 8080,
// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,
// Start these browsers, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers: ['PhantomJS'],
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: false
});
};
and this is the directive's controller:
angular.module('portfolioApp')
.directive('categoryLookAhead', function($interval, $filter) {
return {
templateUrl: 'app/article/Directives/categoryLookAhead/categoryLookAhead.html',
restrict: 'E',
scope: {
suggestedTags: '=',
selectedTags: '='
},
...
In my head, it should just compile from that template and start doing its thing but I get an error:
Error: Unexpected request: GET app/main/main.html
main.html does not include this directive at all, so I don't know why it's getting an unexpected request for this.
I've read in other StackOverflow posts that I can use whenGET(*).passThrough() to ignore these things, but I'd like to know why it's making a request to a module that has nothing to do with the directive.

Karma Jasmine Angular not defined

I am trying to learn how to use angular and karma to test angularjs and nodejs. I have used Noesavy's youtube videos to learn how to set up karma and jasmine. His examples work fine but when I try to use jasmine and karma with my own code I get angular undefined. My code is posted below:
passwordScript.js
angular.module('myApp', []).controller('S',
['$scope',
function($scope){
$scope.checkPass = function(insert_password, confirm_password){
if(insert_password == confirm_password){
$scope.passBoole = true;
} else {
$scope.passBoole = false;
}
};
}]);
checkPassSpec
describe("Password Controller", function(){
var $rootScope,
$scope,
controller;
beforeEach(function(){
module('myApp');
inject(function($injector){
$rootScope = $injector.get('$rootScope');
$scope = $rootScope.$new();
controller = $injector.get('$controller')("S", {$scope: $scope});
});
});
describe('Password check', function(){
it('should set $scope.passBoole top false', function(){
checkPass("bob", "tom");
expect($scope.passBoole).toEqual(false);
})
it('should set scope.passBoole to true', function(){
checkPass("bob", "bob");
expect($scope.passBoole).toEqual(true);
});
});
});
karma.conf.js
// Karma configuration
// Generated on Thu Dec 11 2014 17:07:06 GMT+0000 (GMT)
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-resource/angular-resource.js',
'app/**/*.js',
'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: {
},
// 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
});
};
I really have no idea why this is happening and any help would be greatly appreciated.

files: [
'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
'bower_components/angular-resource/angular-resource.js',
'app/**/*.js',
'spec/**/*.js'
],
I know this is a late answer, but I had the same problem and removing the './' solved it for me

Please replace content of files:[] block inside karma.config.js with following
files: [
'/bower_components/angular/angular.js',
'/bower_components/angular-mocks/angular-mocks.js',
'/bower_components/angular-resource/angular-resource.js',
'app/**/*.js',
'test/**/*.js'
],

Angularjs unit testing with Karma

Having a few issues with testing a directive - our application is trying to be modular hence the need for module.exports which exports the angular module;
module.exports = angular.module('project', [])
.config(function ($stateProvider) {
$stateProvider
.state('alive', {
url: '/college',
templateUrl: 'dashboard.html',
controller: 'CollegeCtrl',
authenticate: true
});
})
.factory('College', require('./services/college.service.js'))
.controller('CollegeCtrl', require('./dashboard/college.controller.js'))
.directive('collegeTile', require('./dashboard/tile/tile.directive.js'))
.run(function ($rootScope, SideFactory) {
SideFactory.push({
'priority': 1,
'icon': 'fa-th-large'
});
});
Directive looks like this;
<div class="thumbnail" ng-click="openProject(college._id)">
<span>{{college}}</span>
</div>
</div>
The directive spec looks like this - note, the templates loads in all the html templates;
'use strict';
describe('Directive: tile', function () {
var $compile;
var $scope;
// load the directive's module and view
beforeEach(module('ui.router'));
beforeEach(module('project'));
beforeEach(module('templates'));
// Create the SideFactory
beforeEach(module(function ($provide) {
var sideFactory = {
push: function () {
}
};
$provide.value('SideFactory', sideFactory);
}));
beforeEach(inject(function (_$compile_, _$rootScope_) {
$compile = _$compile_;
$scope = _$rootScope_.$new();
}));
it("should validate to true", function () {
expect(true).toBe(true);
});
});
I get the following error when running karma;
TypeError: 'undefined' is not a function (evaluating 'expect(true).toBe(true)')
Karma config;
module.exports = function (config) {
config.set({
// base path, that will be used to resolve files and exclude
basePath: '',
// testing framework to use (jasmine/mocha/qunit/...)
frameworks: ['jasmine', 'chai'],
// list of files / patterns to load in the browser
files: [
'dev/assets/bundle.js',
'angular-mocks/angular-mocks.js',
'sample/client/*.html',
'sample/client/*.spec.js',
'client/**/*.html',
'client/**/*.spec.js'
],
preprocessors: {
'client/**/*.html': ['ng-html2js']
},
ngHtml2JsPreprocessor: {
// strip this from the file path
stripPrefix: 'client/',
prependPrefix: 'college/',
// setting this option will create only a single module that contains templates
// from all the files, so you can load them all with module('foo')
moduleName: 'templates'
},
// list of files / patterns to exclude
exclude: [],
// test results reporter to use
// possible values: 'dots', 'progress', 'junit'
reporters: ['progress', 'coverage'],
coverageReporter: {
type: 'html',
dir: 'coverage'
},
// enable / disable colors in the output (reporters and logs)
colors: true,
// web server port
port: 8080,
// level of logging: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
logLevel: 'INFO',
// enable / disable watching file and executing tests whenever any file changes
autoWatch: true,
// - IE (only Windows)
browsers: ['PhantomJS'],
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: false
});
};