I'm testing a really simple directive using Karma :
.directive('a', function() {
return {
restrict: 'A',
controller: function() {
}
}
})
.directive('b', function() {
return {
restrict: 'E',
require: ['^a'],
link: function() {
}
}
})
It works in an HTML page but using karma i got the following error :
Error: [$compile:ctreq] Controller 'a', required by directive 'b',
can't be found!
Using the following code in a karma/jasmine test :
var html = angular.element('<div a />\
<b>directive content</b>\
</div>')[0];
body.appendChild(html);
$compile(html)(scope);
Any ideas ?
Here are the full files :
karma.conf.js
// Karma configuration
// Generated on Fri Feb 26 2016 20:08:50 GMT+0100 (CET)
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.js',
'node_modules/angular-mocks/angular-mocks.js',
'directives.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: {
'src/!(*.mock|*.spec).js': ['coverage']
},
coverageReporter: {
type : 'html',
// output coverage reports
dir : 'coverage/'
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress', 'coverage'],
// 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', 'Firefox'],
// 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
})
}
directives.js
(function(angular) {
angular.module('directives', [])
.directive('a', function() {
return {
restrict: 'A',
controller: function() {
}
}
})
.directive('b', function() {
return {
restrict: 'E',
require: ['^a'],
link: function() {
}
}
});
})(angular);
directives.spec.js
describe('Simple test', function() {
var body, $compile, $rootScope, scope;
beforeEach(module('directives'));
beforeEach(inject(['$compile', '$rootScope', function(_$compile, _$rootScope) {
$compile = _$compile;
$rootScope = _$rootScope;
scope = $rootScope.$new();
body = document.querySelector('body');
}]));
it('should work', function() {
var html = angular.element('<div a />\
<b>directive content</b>\
</div>')[0];
body.appendChild(html);
$compile(html)(scope);
});
});
Related
I have the next service "IrChartService":
public getDataAfterUpdate(entityId: number, timestamp: number) {
var deferred = this.$q.defer();
var requestUrl = this.IrChartData + '/datasequences/entities/' + entityId + '/ir?timestamp=' + timestamp;
this.$http.get(requestUrl).then((result) => {
deferred.resolve(result.data);
});
return deferred.promise;
}
That service is used in a controller.
Here I have the test file:
/* Test Code */
describe('IrChartService', function () {
var IrChartService, $httpBackend, $q, IrChartData;
beforeEach(function(){
angular.module('genscape.rt.irchart')
});
beforeEach(inject(function(_$httpBackend_, _IrChartService_, _$q_, _IrChartData_) {
IrChartService = _IrChartService_;
$httpBackend = _$httpBackend_;
$q = _$q_;
IrChartData = _IrChartData_;
}));
it('is defined', function () {
console.log('def');
expect(IrChartService).toBeDefined();
});
it('should call the backend testurl', function() {
var returnData = {
"ImagePath": "/20160406/167/167_20160406_065626.jpg",
"ConfidenceValue": 4
};
console.log('test');
//7. expectGET to make sure this is called once.
$httpBackend.expectGET("../mock/chartData.specs.json").respond(returnData);
$httpBackend.flush();
});
});
It return me errors like:
Error: [$injector:unpr] http://errors.angularjs.org/1.4.0-rc.2/$injector/unpr?p0=IrChartServiceProvider%20%3C-%20IrChartService
TypeError: Cannot read property 'expectGET' of undefined
Expected undefined to be defined.
Can you help me, please? Thanks!
Update:
// Karma configuration
// Generated on Wed May 20 2015 15:52:13 GMT-0400 (Eastern Daylight 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'],
plugins: [
'karma-chrome-launcher',
'karma-jasmine',
'karma-html-reporter',
'karma-ng-html2js-preprocessor'
],
// list of files / patterns to load in the browser
files: [
'Scripts/angular.min.js',
'Scripts/angular-mocks.js',
'Scripts/genscape.common.js',
'app/template.module.js',
'app/app.module.js',
'app/templates.js',
'app/app.widget.service.js',
'app/IRchart/IRchart.service.js',
'app/IRchart/IRchart.controller.js',
'app/IRchart/IRchart.directive.js',
'app/IRchart/IRchart-error.directive.js',
'app/IRchart/IRchart-popup/IRchart-popup.controller.js',
'app/IRchart/IRchart-player/IRchart-player.controller.js',
'app/IRchart/IRchart-player/IRchart-player.directive.js',
'test/specs/specs.js',
// fixtures
{ pattern: 'test/mock/*.json', watched: true, served: true, included: false }
],
preprocessors: {
'**/*.html': ['ng-html2js']
},
ngHtml2JsPreprocessor: {
// we want all templates to be loaded in the same module called 'templates'
moduleName: 'genscape.rt.irchart'
},
// list of files to exclude
exclude: [
],
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress', 'html'],
// 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'],
browsers: ['Chrome'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false
});
};
Getting below error on running test case
Controller: LoginCtrl, test should have a empty loginUser object
FAILED minErr/<#D:/XAMPP/htdocs/abc/lib/angular/angular.js:68:12
loadModules/<#D:/XAMPP/htdocs/abc/lib/angular/angular.js:4385:15
forEach#D:/XAMPP/htdocs/abc/lib/angular/angular.js:336:11
loadModules#D:/XAMPP/htdocs/abc/lib/angular/angular.js:4346:5
createInjector#D:/XAMPP/htdocs/abc/lib/angular/angular.js:4272:11
workFn#D:/XAMPP/htdocs/abc/lib/angular-mocks/angular-mocks.js:2799:44
angular.mock.inject#D:/XAMPP/htdocs/abc/lib/angular-mocks/angular-mocks.js:2779:30
#D:/XAMPP/htdocs/abc/tests/getStarted/login/loginCtrl.tests.js:19:5
LOGIN TEST CTRL
describe('Controller: LoginCtrl, test', function() {
var $rootScope, $scope, $q, $state, $httpBackend, $translate, Auth, Navigation;
var loginCtrl;
beforeEach(function(){
module('abc', function ($provide, $translateProvider) {
$provide.factory('customTranslationLoader', function ($q) {
return function () {
var deferred = $q.defer();
deferred.resolve({});
return deferred.promise;
};
});
$translateProvider.useLoader('customTranslationLoader');
});
inject(function(_$rootScope_, _$controller_, _$state_, _$q_, _Auth_, _Navigation_, _$httpBackend_, _$translate_) {
$rootScope = _$rootScope_;
$scope = $rootScope.$new();
$q = _$q_;
$httpBackend = _$httpBackend_;
$translate = _$translate_;
Auth = _Auth_;
Navigation = _Navigation_;
$state = _$state_;
loginCtrl = _$controller_('LoginCtrl', { $scope: $scope });
// turn off debug messages
configurations.debug = false;
// mock the template requests
$httpBackend.whenGET('app/default/default.html').respond(200, '');
});
});
it("should have a empty loginUser object", function() {
expect($scope.loginUser.username).toEqual("");
expect($scope.loginUser.password).toEqual("");
});
});
KARMA CONF
// 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'],
plugins: [
'karma-phantomjs-launcher',
'karma-jasmine',
'karma-coverage'
],
// list of files / patterns to load in the browser
files: [
//libs
'../lib/angular/angular.js',
'../lib/angular-mocks/angular-mocks.js',
'../lib/angular-ui-router/build/angular-ui-router.min.js',
'../lib/angular-bootstrap/ui-bootstrap.min.js',
'../lib/angular-route/angular-route.min.js',
'../lib/localforage/dist/localforage.min.js',
'../lib/angular-localforage/dist/angular-localForage.min.js',
'../lib/angular-translate/angular-translate.min.js',
'../lib/angular-translate-loader-url/angular-translate-loader-url.min.js',
'../lib/angular-translate-loader-static-files/angular-translate-loader-static-files.min.js',
'../lib/angular-translate-loader-partial/angular-translate-loader-partial.min.js',
//app
'../app/config/configurations.js',
'../app/*.js',
'../app/**/*.js',
// Tests
'**/*.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: {
'../app/**/*.js': ['coverage']
},
coverageReporter: {
type: 'html',
dir: 'coverage'
},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress', 'coverage'],
// 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: ['PhantomJS'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false,
})
}
I am configuring my Karma amd mocha framework with grunt in my project.
When I am running karma start I am getting below mentioned error.
Uncaught Error: [$injector:modulerr] Failed to instantiate module myModule due to: Error: [$injector:nomod] Module 'myModule' is not available!
My controller:
(function () {
var module = angular.module('myModule',[]);
module.controller('myCtrl', function($scope, $q, $rootScope, templateValuesSrv) {
function() {
var self = this;
self.firstName = '';
self.lastName = '';
self.getFullName = function() {
return self.firstName + ' ' + self.lastName;
};
return self;
}
});
})();
My Controller Spec:
describe('myCtrl', function() {
beforeEach(module('myModule'));
describe('getFullName()', function() {
it('should handle names correctly', inject(function($controller) {
var myController = $controller('myCtrl');
myController.firstName = 'George';
myController.lastName = 'Harrison';
myController.getFullName().should.equal('George Harrison');
}));
});
});
My Karma.conf.js
// Karma configuration
// Generated on Fri Nov 27 2015 11:48:47 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: ['mocha', 'chai'],
// list of files / patterns to load in the browser
files: [
'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
'test/specs/*.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: ['PhantomJS', 'Chrome'],
// 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
})
}
Please suggest what I am missing.
Before the specs you should add the js files that you want to test.
// Karma conf
files: [
'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
'src/**/*.js',
'test/specs/*.js',
//'test/*.js'
],
If you use a bundler like webpackt or bower then you could require then on each spec
I've created a simple test application that write hello.
The application is:
boot.js
require.config({
appDir: '',
baseUrl: '',
paths: {
angular: 'app/bower_components/angular/angular',
Controller: 'app/js/Controller'
},
shim: {
'angular': {'exports': 'angular'}
},
config: {
},
priority: [
"angular"
]
});
require(['app/js/Module'], function()
{
console.log("Loaded!");
});
Module.js:
(function(define) {
"use strict";
define(['angular', 'Controller'],
function(angular, NccController) {
var app, appName = 'myApp';
app = angular
.module(appName, [])
.controller('Controller', NccController);
angular.bootstrap(document.getElementsByTagName("body")[0], [appName]);
return app;
});
}(define));
Controller.js
(function(define) {
"use strict";
define([], function()
{
var NccController = function($scope)
{
$scope.message = "ciao"; //data to graph
};
return NccController;
});
}(define));
The content of karma.conf.js is:
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', 'requirejs'],
// list of files / patterns to load in the browser
files: [
{pattern: 'public_html/app/bower_components/angular/angular.js', included: false}
'test-main.js',
{pattern: 'public_html/app/js/*.js', included: false},
{pattern: 'public_html/app/test/**/*Spec.js', included: false},
],
// list of files to exclude
exclude: [
'public_html/app/js/boot.js'
],
// 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
});
};
the test-main.js is
var allTestFiles = [];
var TEST_REGEXP = /(spec|test)\.js$/i;
var pathToModule = function(path) {
return path.replace(/^\/base\//, '').replace(/\.js$/, '');
};
Object.keys(window.__karma__.files).forEach(function(file) {
if (TEST_REGEXP.test(file)) {
// Normalize paths to RequireJS module names.
allTestFiles.push(pathToModule(file));
}
});
require.config({
// Karma serves files under /base, which is the basePath from your config file
baseUrl: '/base',
paths: {
'angular': 'public_html/app/bower_components/angular/angular',
'Module': 'public_html/app/js/Module',
'Controller': 'public_html/app/js/Controller',
},
// dynamically load all test files
deps: allTestFiles,
// we have to kickoff jasmine, as it is asynchronous
callback: window.__karma__.start
});
the MainSpec.js is:
define(['Module','Controller'], function(angular,Module,Controller) {
describe('Controller', function(){
beforeEach(module('myApp'));
it('should print hello', inject(function($controller) {
var scope = {},
ctrl = $controller('Controller', {$scope:scope});
expect(scope.message).toBe('ciao');
}));
});
});
But when i run the test i obtain:
/usr/local/lib/node_modules/karma/bin/karma start
INFO [karma]: Karma v0.12.17 server started at http://localhost:9876/
INFO [launcher]: Starting browser Chrome
INFO [Chrome 36.0.1985 (Mac OS X 10.8.5)]: Connected on socket 14waTQA-kAa0VgYpvBBk with id 39770086
Chrome 36.0.1985 (Mac OS X 10.8.5) ERROR
Uncaught TypeError: Cannot read property 'module' of undefined
at /Users/daniele/Desktop/JARK/public_html/app/js/Module.js:8
What's wrong????
Thank you a lot.
Great tbranyen,
you've solved my great problem after 2 days of configuration. I post here all codes because I think that there're a lot of people that want to use angular/karma/RequireJs but have a lot of difficulty to setup all.
So boot.js, Module.js and controller.js are the same otherwise the file:
karma.conf.js is:
// Karma configuration
// Generated on Sat Jul 26 2014 18:36:34 GMT+0200 (CEST)
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', 'requirejs'],
// list of files / patterns to load in the browser
files: [
{pattern: 'public_html/app/bower_components/angular/angular.js', included: false},
{pattern: 'public_html/app/bower_components/angular-mocks/angular-mocks.js', included: false},
{pattern: 'public_html/app/js/*.js', included: false},
{pattern: 'public_html/app/test/**/*Spec.js', included: false},
'test-main.js',
],
// list of files to exclude
exclude: [
'public_html/app/js/boot.js'
],
// 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
});
};
test.main.js is:
var allTestFiles = [];
var TEST_REGEXP = /(spec|test)\.js$/i;
var pathToModule = function(path) {
return path.replace(/^\/base\//, '').replace(/\.js$/, '');
};
Object.keys(window.__karma__.files).forEach(function(file) {
if (TEST_REGEXP.test(file)) {
// Normalize paths to RequireJS module names.
allTestFiles.push(pathToModule(file));
}
});
require.config({
// Karma serves files under /base, which is the basePath from your config file
baseUrl: window.__karma__ ? "/base/" : "/",
paths: {
'angular': 'public_html/app/bower_components/angular/angular',
'angular-mocks': 'public_html/app/bower_components/angular-mocks/angular-mocks',
'Module': 'public_html/app/js/Module',
'Controller': 'public_html/app/js/Controller',
},
shim: {
'angular': {'exports': 'angular'},
'angular-mocks': ['angular']
},
});
require(['angular-mocks'], function() {
require(allTestFiles, window.__karma__.start);
});
and MainSpec.js is:
define(['angular','angular-mocks','Module','Controller'], function(angular,mocks,Module,Controller) {
describe('Controller', function(){
beforeEach(module('myApp'));
it('should print hello', inject(function($controller) {
var scope = {},
ctrl = $controller('Controller', {$scope:scope});
expect(scope.message).toBe('ciao');
}));
});
});
I hope that can help same people that want use it
Karma serves files under the /base/ root path, not /. You need to change your baseUrl property within the RequireJS configuration to be baseUrl: "/base/".
A simple way of handling this conditionally is:
baseUrl: window.__karma__ ? "/base/" : "/"
Edit:
I'm incorrect with the above, you have it configured correctly. The only other guess I have is that deps is loading your tests before the configuration has finished being set. Although you have mentioned that Angular loads 200 OK. My recommendation here would be to try extracting the test loading away from deps and instead break the configuration and loading into two different operations.
require.config({
"paths": { "angular": "<path/to/angular>" }
});
require(allTestFiles, function() {
window.__karma__.start();
});
I would also remove the callback from the karma Require configuration.
Edit 2:
Another recommendation would be to share your main application configuration so that you don't have to declare paths over again. An example of how this would look is:
https://gist.github.com/tbranyen/e37a7d888f7f90c25e63#file-config-js-L27-L28
Edit 3 (Hopefully last):
After debugging the project the error ended up being a missing Angular shim configuration in the test-main.js file.
Look at this project that uses requirejs and karma for angular js. Try and follow the set up. https://github.com/adikari/angular-seed
I have been learning AngularJS and the time has come to start writing tests but I'm falling at the first hurdle.
My karma config file is:
module.exports = function(config) {
config.set({
basePath: '..',
// frameworks to use
frameworks: ['mocha'],
// list of files / patterns to load in the browser
files: [
'node_modules/chai/chai.js',
'public/js/libs/jquery-1.9.1.js',
'public/js/libs/angular.js',
'test/libs/angular-mocks.js',
'public/js/**/*.js',
'test/angular/**/*.js'
],
exclude: [],
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_DEBUG,
autoWatch: true,
browsers: ['Chrome'],
captureTimeout: 60000,
singleRun: false
});
};
I have a filter declared:
angular.module('timeMachine.filters',[])
.filter('hours', function() {
return function(input) {
return input == 1
? '1 hour'
: input + ' hours';
}
});
And a test:
var should = chai.should();
describe("The hours filter", function() {
beforeEach(function() {
angular.module('timeMachine.filters');
});
it('should be able to test', function(){
true.should.equal(true);
});
it('should be able to inject an hours filter', inject(function($filter) {
var hours = $filter('hours');
expect(hours).not.to.equal(null);
}));
});
However, the second test fails with the message:
[$injector:unpr] Unknown provider: hoursFilterProvider <- hoursFilter
In the context of the running Angular app this filter works.
I assume I'm missing something through inexperience and any help would be awesome!
You should be using angular.mock.module in the test.
See my answer here