karma.config.js:
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
'node_modules/angular/angular.min.js',
'node_modules/angular-mocks/angular-mocks.js',
'node_modules/angular-translate/dist/angular-translate.min.js',
'browser/javascripts/*.js',
'browser/tests/*.spec.js'
],
exclude: [],
preprocessors: {},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
concurrency: Infinity
})
};
home.spec.js:
describe('Home Controller', function() {
beforeEach(
module('pascalprecht.translate'),
module('tradeshiftApp')
);
var $controller;
beforeEach(inject(function(_$controller_){
$controller = _$controller_;
}));
it('should exist', function(){
controller = $controller('HomeController', {
$scope: {}
});
expect(controller).not.toBe(undefined);
})
});
I am using karma-jasmine and the problem is following: my app.js file has this module and it's loading correctly:
var app = angular.module('tradeshiftApp', ['pascalprecht.translate']);
But when I try to mock my controller, which is
app.controller('HomeController', function ($scope, $req, $window, $translate, $q) {
// some code
});
I get an error, which says that HomeController is not a function. As you can see, dependencies are wired up and everything should be fine, I guess. Any tips?
Note: I've tried to inject $rootScope and get $rootScope.$new() and it's successful.
Try this:
beforeEach(function() {
angular.module('pascalprecht.translate', [])
angular.mock.module('tradeshiftApp')
}
);
So, the problem was in 'pascalprecht.translate' module. In my code I have a small dependency wired to the foregoing module, which was included in my HTML file, but not in my Karma config file. Guys, be careful and vigilant about your code :)
Related
I am trying to build basic unit tests for an Angular 1.5 with the purpose of A) practicing unit testing, and B) familiarizing myself with component-based development in Angular 1.5.x. I'm trying to unit test a simple component, but I keep getting the following message:
Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module
ngComponentRouter due to:
Error: [$injector:nomod] Module
'ngComponentRouter' is not available! You either misspelled the module
name or forgot to load it. If registering a module ensure that you
specify the dependencies as the second argument.
I'd like a little guidance on how to inject this specific dependency/module into a unit test. This is the code I have:
app.js
(function(){
"use strict";
const app = angular.module("app", ["ngComponentRouter"])
app.value("$routerRootComponent", "componentApp");
})();
component-app.component.js
(function(){
"use strict";
angular.module("app").component("componentApp", {
templateUrl: "/javascripts/component-app.component.html",
controller: ["$router", function($router){
$router.config([
{ path: "/users", component: "usersComponent", name: "Users" },
{ path: "/**", redirectTo: ["Users"]}
]);
}]
});
})();
component-app.component.spec.js
describe("componentApp component", function(){
beforeEach(module("app"));
var $componentController, componentApp;
beforeEach(inject(function($injector){
$componentController = $injector.get("$componentController");
componentApp = $componentController("componentApp", { $scope: {}});
}));
it("componentApp component is defined", function(){
expect(componentApp).toBeDefined();
});
});
So two changes did the trick, first I need to change component-app.component.js:
angular.module("app").component("componentApp", {
templateUrl: "/templates/component-app.component.html",
$routeConfig: [
{ path: "/Users", name: "Users", component: "usersComponent" },
{ path: "/Home", name: "Home", component: "homeComponent"},
{ path: "/Profile/:id", name: "Profile", component: "profileComponent" },
{ path: "/**", redirectTo: ["Users"]}
]
});
And I needed to include the file in karma.conf.js:
module.exports = function(config) {
config.set({
basePath: "",
frameworks: ["jasmine"],
files: [
"bower_components/angular/angular.js",
"bower_components/angular-mocks/angular-mocks.js",
"bower_components/angular-component-router/angular_1_router.js",
"javascripts/**/*.js"
],
exclude: [
],
preprocessors: {
},
reporters: ["progress"],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ["Chrome"],
singleRun: false,
concurrency: Infinity
});
};
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();
});
});
I am developing an angular application. I have the application running with few controllers and services. Now I wanted to start unit testing the services and controllers. But don't know what I am doing wrong, I am not able to run a test properly for a even a single service. When I try to run the test using karma using:
karma start karma.conf.js
I get following error:
Firefox 38.0.0 (Windows 7 0.0.0) service: MyCategoryService should send a request to MyCategoryService FAILED
minErr/<#c:/Users/bgurung2/workspace/admintoolui/src/main/webapp/bower_components/angular/angular.js:68:12
loadModules/<#c:/Users/bgurung2/workspace/admintoolui/src/main/webapp/bower_components/angular/angular.js:4458:15
forEach#c:/Users/bgurung2/workspace/admintoolui/src/main/webapp/bower_components/angular/angular.js:340:11
loadModules#c:/Users/bgurung2/workspace/admintoolui/src/main/webapp/bower_components/angular/angular.js:4419:5
createInjector#c:/Users/bgurung2/workspace/admintoolui/src/main/webapp/bower_components/angular/angular.js:4344:11
workFn#c:/Users/bgurung2/workspace/admintoolui/src/main/webapp/js/libs/angular-mocks.js:2797:44
angular.mock.inject#c:/Users/bgurung2/workspace/admintoolui/src/main/webapp/js/libs/angular-mocks.js:2777:30
#c:/Users/bgurung2/workspace/admintoolui/src/main/webapp/js/tests/services/preferenceCategoryService.test.js:18:9
TypeError: $httpBackend is undefined in c:/Users/bgurung2/workspace/admintoolui/src/main/webapp/js/tests/services/preferenceCategoryServi
ce.test.js (line 33)
#c:/Users/bgurung2/workspace/admintoolui/src/main/webapp/js/tests/services/preferenceCategoryService.test.js:33:9
Firefox 38.0.0 (Windows 7 0.0.0): Executed 13 of 13 (1 FAILED) (0.016 secs / 0.039 secs)
I am not sure where did I go wrong. I tried to follow this stackoverflow question but was out of clue.
Any help or suggestion would be great!!
Here is my app:
'use strict';
/* App Module */
var app = angular.module('myApp', [
'ngRoute', // uri routing
'controllers', // controllers
'services', // services
'ngMock'
]);
// module controllers
var appCtrl = angular.module('controllers', []);
// module services
var appServices = angular.module('services', [ 'ngResource' ]);
Here is my service:
'use strict';
appServices.factory('MyCategoryService', ['$resource', 'REST_RESOURCE',
function ($resource, REST_RESOURCE) {
return $resource(REST_RESOURCE.PREFERENCE, {}, {
query: {
method: 'GET',
params: {},
isArray: false
}
});
}]);
Here is my Service Spec:
describe('service: MyCategoryService', function () {
var $httpBackend;
var $rootScope;
var MyCategoryService;
var REST_RESOURCE;
beforeEach(function () {
angular.mock.module('myApp');
angular.mock.inject(function ($injector) {
$httpBackend = $injector.get('$httpBackend');
$rootScope = $injector.get('$rootScope');
MyCategoryService= $injector.get('MyCategoryService');
REST_RESOURCE = $injector.get('REST_RESOURCE');
});
});
it('should send a request to MyCategoryService', function () {
//TODO
var mockdata = {
items: {
}
};
$httpBackend.expect('GET', REST_RESOURCE.PREFERENCE).respond(200, mockdata);
MyCategoryService.query(function (response) {
$rootScope.data = response.items;
});
$httpBackend.flush();
expect($rootScope.data).toEqual(mockdata);
});
});
Here 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: [
//dependencies
'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
'bower_components/angular-route/angular-route.js',
'bower_components/angular-bootstrap/ui-bootstrap.js',
'bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
'bower_components/angular-cookies/angular-cookies.js',
'js/app.js',
'js/libs/*.js',
'js/directives/*.js',
'js/routes.js',
'js/resource_uri.js',
'js/services/*.js',
'js/controllers/*.js',
//test files
'js/tests/*.test.js',
'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: {
},
// 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: ['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
});
};
I finally got my test running after going through some changes in some files. I don't know what the exact reason was, but I got it working with the following changes. Here's my changes below:
I removed ngMocks dependency. After changes, my app.js file looks like following.
'use strict';
/* App Module */
var app = angular.module('admintool', [ 'ngRoute', // uri routing
'controllers', // controllers
'services', // services
'angularUtils.directives.dirPagination', // pagination service
'ui.bootstrap', // angular ui bootstrap
'ui', // ui sortable
'uiSwitch', // on of switch service
'ngMessages', // for form validation
'xeditable', // for table edit
'ngCookies'
// messages
]);
// module controllers
var appCtrl = angular.module('controllers', []);
// module services
var appServices = angular.module('services', [ 'ngResource' ]);
service.js looks like:
'use strict';
//appServices.factory('PreferenceCategory', ['$resource', 'REST_RESOURCE',
angular.module('services').factory('PreferenceCategory', ['$resource', 'REST_RESOURCE',
function ($resource, REST_RESOURCE) {
return $resource(REST_RESOURCE.PREFERENCE_CATEGORY, {}, {
query: {
method: 'GET',
params: {},
isArray: false
}
});
}]);
serviceSpec.js looks like:
describe('Preference Category Service',
function() {
beforeEach(angular.mock.module("admintool"));
var httpBackend, pc;
beforeEach(inject(function($httpBackend, PreferenceCategory) {
httpBackend = $httpBackend;
pc = PreferenceCategory;
}));
afterEach(function() {
httpBackend.verifyNoOutstandingExpectation();
httpBackend.verifyNoOutstandingRequest();
});
it(
'Check GET Request',
function() {
httpBackend
.expectGET(
'http://jboss-pmadmin-tool-dev.ose-core.optum.com/pmadmin-tool/v1/preference_categories')
.respond({
username : 'test'
});
// call the function on our service instance
var response = pc.query();
httpBackend.flush();
expect(response.username).toEqual('test');
});
});
karma.conf.js file, I removed 'js/libs/*' and added individual files that are used in the app.
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns (eg. files,
// exclude)
basePath : '../admintoolui/src/main/webapp/',
// 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.min.js',
'bower_components/angular-mocks/angular-mocks.js',
'js/libs/angular-resource.js',
'bower_components/angular-route/angular-route.js',
'bower_components/angular-bootstrap/ui-bootstrap.js',
'js/libs/pagination.js',
'js/libs/angular-ui.js',
'js/libs/angular-ui-switch.min.js',
'js/libs/angular-messages.js',
'js/libs/xeditable.min.js',
'bower_components/angular-cookies/angular-cookies.js',
'js/app.js',
'js/resource_uri.js',
'js/services/*.js',
'js/controllers/*.js',
'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 : {},
// 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 : [ '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
})
}
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'
],
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
});
};