We Keep Coding

Argument 'fooController' is not a function, got undefined

I'm doing a web page and everything works great. No errors at all.
But now I decided to make a unit test case using Karma and Jasmine.
Somehow I get this error when I run my test
Error: [ng:areq] Argument 'moduleApp.SearchPageController' is not a function, got undefined
I also tried just SearchPageController but I get the same error.
What is missing here??
Route
angular.module('moduleApp').config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/cmt/complaint/search', {
templateUrl: 'src/callCenter/page1/searchPage.html',
controller: 'moduleApp.SearchPageController',
controllerAs: 'vm'
})
.otherwise({ redirectTo: '/' });
}]);
Unit test
describe('Controller: SearchPageController', function () {
var vm;
beforeEach(module('moduleApp'));
beforeEach(inject(function ($controller) {
vm = $controller('moduleApp.SearchPageController', {}, {});
}));
it('should bla bla', function () {
expect(vm).toBeDefined(); // vm is undefined, probably because of the erro above
});
});
Controller
angular.module('moduleApp.controller').controller('moduleApp.SearchPageController', SearchPageController);
SearchPageController.$inject = ['$log', '$scope', 'moduleApp.SearchPageService', '$http'];
function SearchPageController($log, $scope, searchPageService, $http) {
'use strict';
var vm = this;
vm.filterOption = 'Account ID';
}
Karma Config:
// Karma configuration
m
odule.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: [
'angular.js' // yes this is on the same folder, it works
'../app/app.js',
'../components/angular-mocks/angular-mocks.js',
'unit/*.js',
'..app/src/'
],
// list of files / patterns 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_LOG,
// 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
})
}

You definitely don't want to reference the controller with the module name:
$routeProvider
.when('/cmt/complaint/search', {
templateUrl: 'src/callCenter/page1/searchPage.html',
controller: 'moduleApp.SearchPageController', //<--- this is never correct
controllerAs: 'vm'
})
You always access a controller, service, or factory by the name it was defined:
$routeProvider
.when('/cmt/complaint/search', {
templateUrl: 'src/callCenter/page1/searchPage.html',
controller: 'SearchPageController',
controllerAs: 'vm'
})
It looks like you are including your tests BEFORE you include your app source:
// list of files / patterns to load in the browser
files: [
'angular.js' // yes this is on the same folder, it works
'../app/app.js',
'../components/angular-mocks/angular-mocks.js',
'unit/*.js',
'..app/src/' //<-- if this is your app source, it should be before tests!
],
I would just re-arrange the last two entries, but it also looks like you aren't actually including any files with the '..app/src/' statement. You should use the wildcarad to include all .js files:
// list of files / patterns to load in the browser
files: [
'angular.js' // yes this is on the same folder, it works
'../app/app.js',
'../components/angular-mocks/angular-mocks.js',
'..app/src/**/*.js' //<--- all .js files in folders and subfolders
'unit/*.js',
],
Typically, you want your tests to be the very last entry in the files section of your config.

SystemJs and jasmine spyOn error "Module Exports Cannot Be Changed Externally"

I was using webpack+aurelia for a project and recently switch to JSPM version 0.16.52. I use jasmine's spyOn for utility or factory functions that are imported into my classes. However tests that have spyOn(object, 'method') have this error:
"Module Exports Cannot Be Changed Externally"
This occurs when jasmine sets the spied method on the module obj[methodName] = spiedMethod'
Here is a very simple example:
test.js
import * as env from '../../src/env';
describe('stackoverflow example', () => {
it('runs the test', () => {
// this gets thrown and swallowed. jasmine does not report an error, but does not increase the test count.
let envSpy = spyOn(env, 'getBaseUrl');
});
});
env.js
export function getBaseUrl(location) {
return location.port ? `http://${location.hostname}:9001/api/`: '/api/';
}
karam.conf.js
'use strict'
const path = require('path')
module.exports = function(config) {
config.set({
// base path that will be used to resolve all patterns
basePath: __dirname,
// frameworks to use
frameworks: ['jspm', 'jasmine'],
// list of files / patterns to load in the browser
files: [],
// list of files to exclude
exclude: [],
jspm: {
// Edit this to your needs
loadFiles: [
'test/unit/setup.js',
'test/unit/**/*.js'
],
serveFiles: [
'src/**/*.*',
'jspm_packages/system-polyfills.js'
],
paths: {
'*': 'src/*',
'test/*': 'test/*',
'github:*': 'jspm_packages/github/*',
'npm:*': 'jspm_packages/npm/*'
}
},
// preprocess matching files before serving them to the browser
preprocessors: {
'test/**/*.js': ['babel'],
'src/**/*.js': ['babel']
},
'babelPreprocessor': {
options: {
sourceMap: 'inline',
presets: [ ['es2015', { loose: true }], 'stage-1'],
plugins: [
'syntax-flow',
'transform-decorators-legacy',
'transform-flow-strip-types',
[ 'istanbul', { 'ignore': 'test/' } ]
]
}
},
// test results reporter to use
reporters: ['mocha'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// 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
browsers: ['Chromium'],
// Continuous Integration mode
// if true, Karma captures browsers, runs the tests and exits
singleRun: false
});
};
setup,js
import 'babel-polyfill'; // for async/await
import 'aurelia-polyfills';
import {initialize} from 'aurelia-pal-browser';
initialize();
UPDATE
When I pulled down a fresh copy of Aurelia-esnext I did not receive the error. So commented out all my tests in my production app and the first spyOn worked, but as i added more tests I started recieving the error again, and it seems to be the way the module is loaded by systemjs. Below is how the imported module object looks when it is loaded into the test
Fresh Copy does not throw
{
__esModule: true,
getBaseUrl: (),
__proto__: Object
}
Original that throws
{
__esModule: (...)
get __esModule: ()
set __esModule: ()
getBaseUrl: (...)
get getBaseUrl: ()
set getBsaeUrl: ()
_proto__: Object
}
Update
I found the snippet of code in system.js where the difference in import occurs. In my larger original project loader.defined[name]; returned undefined and the fresh copy of aurelia loader.defined[name]; is defined...still have not found a workaround
system.src.js
function getModule(name, loader) {
var exports;
var entry = loader.defined[name];
if (!entry) {
exports = loader.get(name);
if (!exports)
throw new Error('Unable to load dependency ' + name + '.');
}
else {
if (entry.declarative)
ensureEvaluated(name, entry, [], loader);
else if (!entry.evaluated)
linkDynamicModule(entry, loader);
exports = entry.module.exports;
}
if ((!entry || entry.declarative) && exports && exports.__useDefault)
return exports['default'];
return exports;
}

jasmine error when I inject a Factory

I ran a jasmine test over angular js, and i get the next error:
PhantomJS 2.1.1 (Linux 0.0.0) test_servicioCalculadora should provide
a version FAILED
/home/ivan/workspace/mobile.trackphone/www/lib/ionic/js/ionic.bundle.js:13218:53
forEach#/home/ivan/workspace/mobile.trackphone/www/lib/ionic/js/ionic.bundle.js:9168:24
loadModules#/home/ivan/workspace/mobile.trackphone/www/lib/ionic/js/ionic.bundle.js:13178:12
createInjector#/home/ivan/workspace/mobile.trackphone/www/lib/ionic/js/ionic.bundle.js:13104:22
workFn#/home/ivan/workspace/mobile.trackphone/www/lib/angular-mocks/angular-mocks.js:3074:60
loaded#http://localhost:9876/context.js:151:17
I tried to change the routes, inject other service, and it's not working too
I ran other case like
it("compara un valor con otro", function () {
var pi = 3.1415926,
e = 2.78;
expect(e).toBeLessThan(pi);
expect(pi).not.toBeLessThan(e);
});
and this's working fine.
This is my test file
describe("test_servicioCalculadora", function () {
var calcu;
beforeEach(module('starter'));
it('should provide a version', inject(function(version) {
expect(version).toEqual('v1');
}));
});
my index.js is
var app = angular.module('starter', ['ionic', 'LocalStorageModule', 'btford.socket-io', 'angularMoment', 'ngCordova', 'ngAudio']);
app.value('version', 'v1');
my karma.config.js
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
'../www/lib/ionic/js/ionic.bundle.js',
'../www/lib/angular-mocks/angular-mocks.js',
'../www/js/index.js',
'../tests/**/*-test.js'
],
exclude: [
],
preprocessors: {
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_ERROR,
autoWatch: true,
browsers: ['PhantomJS'],
singleRun: false,
concurrency: Infinity
})
};

You are trying to inject a value. Should be a service or a factory.
e.g.
beforeEach(module('some.service', function($provide){
var log = {
info: function(data){
console.log(data);
}
}
$provide.value('$log', log);
});
beforeEach(inject(function(_serviceName_){
serviceName = _serviceName_;
}));
it("Actual test", function(){
serviceName.performAction();
});
See the example, first is the module where you can set some values. Then is the service or factory at the end the test.
This mean that the value of log will be injected on serviceName when is used on the actual test.
Hope this help to clarify.

Injecting $http fails in jasmine testing with typescript

we are developing a programm test-driven in Typescript.
This is our test with jasmine:
import IDifferentialPilotService = DifferentialPilot.IDifferentialPilotService;
import Ev3DifferentialPilotService = DifferentialPilot.Ev3DifferentialPilotService;
import IHttpService = ng.IHttpService;
describe("restClientService integration test: ", function () {
// sut
var ev3DifferentialPilotService: IDifferentialPilotService;
//doc
var http: IHttpService;
beforeAll(function () {
angular.mock.inject(function ($http: IHttpService) {
this.http = $http;
});
ev3DifferentialPilotService = new Ev3DifferentialPilotService(http);
});
it("robot should run 5 m", function () {
expect(ev3DifferentialPilotService.runDistance(5)).toBe("success");
});
});
the class Ev3DifferentialPilotService which is tested looks like that:
namespace DifferentialPilot {
"use strict";
import IHttpService = ng.IHttpService;
export class Ev3DifferentialPilotService implements IDifferentialPilotService {
private http: IHttpService;
static $inject = ['$http'];
constructor($http: IHttpService) {
this.http = $http;
}
public runDistance(runDistance: number): string {
this.http({
method: "POST",
url: "10.0.0.44:8080/differentpilot/run/5"
}).then(function successCallback(response: any) {
return "success";
}, function errorCallback(response: any) {
return "error";
});
return undefined;
}
}
}
Like you can see, we want to inject in our test the $http-service, so that Ev3DifferentialPilotService can retrieve the Http-service as parameter and use it in its runDistance-method.
When we log the this.$http-Object in Ev3DifferentialPilotService , then we get undefined, what means that the injection fails. According to that the test also fails.
Im registrating Ev3DifferentialPilotService as service in App.js:
var app = angular.module("AngularDifferentialPilotModule", []);
app.service("ev3DifferentialPilotService", DifferentialPilot.Ev3DifferentialPilotService);
And we using all that stuff in our karam.conf.js:
// Karma configuration
// Generated on Thu Dec 17 2015 14:02:38 GMT+0100 (Mitteleuropäische Zeit)
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",
"src/Ev3DifferentialPilotService.js",
"spec/*.spec.js",
"src/app.js"
],
// list of files to exclude
exclude: [],
// preprocess matching files before serving them to the browser
// available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
preprocessors: {},
// test results reporter to use
// possible values: 'dots', 'progress'
// available reporters: https://npmjs.org/browse/keyword/karma-reporter
reporters: ['progress'],
// web server port
port: 9876,
// enable / disable colors in the output (reporters and logs)
colors: true,
// level of logging
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
logLevel: config.LOG_INFO,
// enable / disable watching file and executing tests whenever any file changes
autoWatch: false,
// start these browsers
// available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
browsers: ['Firefox'],
// 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
})
}
Furthermore we are using a tsconfig which looks like that:
{
"compilerOptions": {
"module": "commonjs",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true
}
So where is the error? Can somebody help me?

You can't inject in beforeAll (https://github.com/angular/angular.js/issues/10238)
A feature has been opened (https://github.com/angular/angular.js/pull/14093) but not yet merged.

Angular.js unitest a Directive with external template using html2js - Fail to load templates

I am trying to test a Directive which uses external template. I tried all the following solutions with no luck:
ng-directive-testing
How to test directives that use templateUrl and controllers?
AngularJS + Karma + Ng-html2js => Failed to instantiate module ...html
I created a test directive (a simple div) and tested it using an inline 'template' and external 'templateUrl'. The inline solution works while the external doesn't:
angular.module('AdUnit').directive('actionButton',function($location){
return{
scope:{
actionName: '#'
},
restrict: 'E',
//template: "<div ng-click='click()'>action button</div>",
templateUrl: '/staticfiles/adunit/html/directives/actionButtonTemplate.html',
controller: ['$scope', function($scope){
$scope.click = function(){
$scope.$emit('ACTION_CLICK', $scope.actionName);
}
}]
}
});
describe("Unit: Testing action button directive", function() {
var elm, scope, linkFn;
beforeEach(
module('AdUnit')
);
beforeEach(module('/staticfiles/adunit/html/directives/actionButtonTemplate.html'));
beforeEach(inject(function($rootScope, $compile) {
elm = angular.element('<action-button action-name="post-action-0"></action-button>');
scope = $rootScope;
linkFn = $compile(elm);
linkFn(scope);
scope.$digest(); // have to digest to bring html from templateCache
console.log('post compile',elm.html());// <== the html here still have {{}}
}));
it('should show a thumb',function() {
console.log('post link',elm.html());// <== the html is bound
expect(elm.text()).toBe("action button");
});
});
My Karma config file:
module.exports = function(config) {
config.set({
// base path, that will be used to resolve files and exclude
basePath: '',
// frameworks to use
frameworks: ['jasmine'],
// list of files / patterns to load in the browser
files: [
'http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js',
'http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js',
'http://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-route.js',
'http://code.angularjs.org/1.0.6/angular-mocks.js',
'../html/*.html',
'../html/directives/*.html',
'../js/adUnit.js',
'../js/controllers/*.js',
'../js/directives/*.js',
'../js/services/*.js',
'../*.js',
'../**.*.js',
'**/*.tests.js'
],
preprocessors : {
'../html/**/*.html': ['ng-html2js']
},
/* ngHtml2JsPreprocessor: {
'AdUnit': '/staticfiles/adunit/html/directives/actionButtonTemplate.html'
*//*moduleName: '/staticfiles/adunit/html/directives/internalPlayerTemplate.html'*//*
},*/
// list of files to exclude
exclude: [
],
// test results reporter to use
// possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
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, currently available:
// - Chrome
// - ChromeCanary
// - Firefox
// - Opera (has to be installed with `npm install karma-opera-launcher`)
// - Safari (only Mac; has to be installed with `npm install karma-safari-launcher`)
// - PhantomJS
// - IE (only Windows; has to be installed with `npm install karma-ie-launcher`)
browsers: ['Chrome'],
// If browser does not capture in given timeout [ms], kill it
captureTimeout: 60000,
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: false
});
};
I keep getting the following error:
Failed to instantiate module /staticfiles/adunit/html/directives/actionButtonTemplate.html due to:
Error: [$injector:nomod]
Any help will be appreciated!
EDIT: #MK Safi's answer solved my problem. I was missing the following:
ngHtml2JsPreprocessor: {
'moduleName': 'Templates',
// Function that transforms the path to look exactly like
// you have it in templateUrl in your Angular code
//
// Mine looks like this
cacheIdFromPath: function(filepath) {
return filepath.match(/\/staticfiles\/adunit\/html\/directives\/.*\.html/);
}
},
and before each test:
beforeEach(module('Templates'));
it is important for the regular expression to point to the same path as the directive's "templateUrl", since html2js will cache those templates using this path (see html2js for more details about that)

I have this setup correctly in my tests and your setup looks right, except for a few things.
Make the following changes to your Karma config file:
ngHtml2JsPreprocessor = {
'moduleName': 'Templates',
// Function that transforms the path to look exactly like
// you have it in templateUrl in your Angular code
//
// Mine looks like this
cacheIdFromPath: function(filepath) {
return filepath.match(/views\/.*/)[0]
}
}
Then in your test's beforeEach include the Templates module that you specified in your Karma config above: module('Templates')
beforeEach(function() {
module('Templates')
})