Need help setting up Karma (Getting an error) - javascript

I am new to Karma and would really appreciate any help understanding the reason for the error below:
Uncaught Error: [$injector:nomod] Module 'myApp.controllers' 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.
app.js
angular.module('myApp', [
'ngRoute',
'myApp.controllers',
'myApp.filters',
'myApp.services',
'myApp.directives'
]).
config(function ($routeProvider, $locationProvider) {
controllers.js
angular.module('myApp.controllers', []);
StoreCtrl.js
angular.module('myApp.controllers').
controller('StoreCtrl', ['$scope', '$http', function ($scope, $http) {
StoreCtrl.spec.js
describe('StoreCtrl', function() {
beforeEach(module('myApp.controllers'));
var $controller;
beforeEach(inject(function(_$controller_){
// The injector unwraps the underscores (_) from around the
// parameter names when matching
$controller = _$controller_;
}));
describe('$scope.filterByPrice', function() {
it('test spec', function() {
});
});
});
karma.conf.js
files: [
'public/js/scripts/angular/angular.js',
'public/js/scripts/angular-mocks/angular-mocks.js',
'public/js/scripts/angular-route/angular-route.min.js',
'public/js/app.js',
'public/js/controllers/*.js',
'tests/**/*.spec.js'
],
File Structure

Karma wasn't picking the controllers.js file before the StoreCtrl.js
I had to change the code below:
'public/js/controllers/*.js',
to
'public/js/controllers/controllers.js',
'public/js/controllers/StoreCtrl.js',
and it works now :)

Related

Dealing With Dependencies in angularjs Testing

This is for work (I have permission) so I can't post exact code.
So I have to test controllers of a large module. The module has a large config function with a bunch of controllers for the logic of the different pages.
For the actual application it's loaded with bower, which is irritating since I'm testing with Karma-Browserify and npm. So the the dependencies are a mess. I basically have to import everything that was loaded from bower.json to package.json.
This is my karma.conf.js:
module.exports = function(config) {
config.set({
basePath: 'resources',
browserify: {
debug: true,
transform: [ 'browserify-shim' ]
},
browsers: [ 'PhantomJS' ],
captureTimeout: 60000,
client: {
mocha: {}
},
files: [
'tests/assist/test.js',
'assets/scripts/libs/logger.min.js'
],
frameworks: [ 'browserify', 'phantomjs-shim', 'mocha', 'chai' ],
port: 8080,
preprocessors: {
'tests/assist/controller.js': [ 'browserify' ]
},
reporters: [ 'mocha', 'coverage' ],
singleRun: true
});
};
So the code below this is my test.js (removing some company-specific names). Also I need to put angular.mock. or it won't work
require('angular');
require('angular-mocks');
//Main module needs these
jQuery = require('jquery');
require('angular-bootstrap');
require('angular-recaptcha');
require('angular-ui-router');
require('ngstorage');
require(**The path to the main module**);
require(**The path to a service it uses**);
require(**The path to a service it uses**);
require(**The path to a service it uses**);
describe('Blah', function () {
beforeEach(angular.mock.module('myApp'));
var $controller;
beforeEach(angular.mock.inject(function(_$controller_) {
$controller = _$controller_;
}));
describe('blahblah', function () {
it('sets loading to true', function () {
var $scope = {};
var controller = $controller('controller', {$scope: $scope});
assert($scope.showLoading === true);
});
});
});
The main module:
(function() {
'use strict';
})();
// Jquery noconflict
jQuery.noConflict();
var myApp = angular.module('myApp', ['ui.router', 'ngStorage', 'vcRecaptcha', 'ui.bootstrap']);
myApp.config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider) {
...
}])
.run([blah bunch of dependencies]) {
...
}]);
The controller (separate fie):
'use strict';
myApp.controller('controller', ['$scope', '$http', '$localStorage', 'service1', 'service2', 'service3',
function ($scope, $http, $localStorage, service1, service2, service3) {
..
}
...
As you can see I'm in dependency hell. I got the example test on the angular site to work, the main problem is with the dependencies and myApp not being visible to the controller. "ReferenceError: Can't find variable: myApp" in controllers/services
If anyone has a better way of going about testing I'm all ears.
This is not about dependency hell, not about testing also.
The code seems to rely on myApp global variable, this is strictly opposite to what Angular modules are for.
myApp should be a local variable that is defined dynamically in each function scope
(function () {
var myApp = angular.module('myApp', [...]);
...
})();
(function () {
var myApp = angular.module('myApp');
myApp.controller('controller', ...)
...
})();

$routeProvider config route throwing 'Uncaught Error: [ng:areq] Argument 'fn' is not a function, got string'

I'm writing routing logic using ngRoute of angular JS. The following is my code.
index.js
(function() {
'use strict';
function config($routeProvider, $httpProvider, cfpLoadingBarProvider, $tooltipProvider) {
$routeProvider.otherwise({redirectTo: '/404'});
$httpProvider.defaults.withCredentials = false;
$httpProvider.defaults.headers.common['content-type'] = "application/json";
}
angular
.module('pacman', ['ngCookies', 'ngRoute', 'ui.bootstrap', 'ui.validate',
'angular-cache', 'angular-loading-bar', 'angular-md5', 'rt.iso8601', 'ngAnimate']
)
.config(['$routeProvider', '$httpProvider', 'cfpLoadingBarProvider', '$tooltipProvider', config])
.run(['$rootScope', '$location', '$modalStack', '$cookies']);
})();
app.controller.js
(function() {
'use strict';
function config($routeProvider) {
$routeProvider.when('/', {
templateUrl: 'app/components/landingpage/landingpage.html',
controller: 'appController'
});
}
function appController($scope, $rootScope, $location) {
$scope.submitLogin = function() {
alert("Successfully loggedIn");
};
}
angular
.module('pacman')
.controller('appController', ['$scope', '$rootScope', '$location', appController])
.config(['$routeProvider', config]);
})();
notFound.controller.js
(function() {
'use strict';
function config($routeProvider) {
$routeProvider.when('/404', {
templateUrl: 'app/components/notFound/404page.html',
controller: 'notFoundController'
});
}
function notFoundController($scope, $rootScope, $location) {
debugger;
}
angular
.module('pacman')
.controller('notFoundController', ['$scope', '$rootScope', '$location', notFoundController])
.config(['$routeProvider', config]);
})();
My code is a simple app. I'm trying to load different controllers based on routes. However at the time of loading the app, in the last controller's '$routeProvider' it throws an error
Uncaught Error: [ng:areq] Argument 'fn' is not a function, got string
http://errors.angularjs.org/1.4.8/ng/areq?p0=fn&p1=not%20a%20function%2C%20got%20string
I have no clue how to figure out the problem. Any leads would be appreciated.
The following is my library bundle order.
'node_modules/jquery/dist/jquery.js',
'node_modules/angular/angular.js',
'node_modules/angular-route/angular-route.js',
'node_modules/jquery.transit/jquery.transit.js',
'node_modules/angular-cache/dist/angular-cache.js',
'node_modules/angular-cookies/angular-cookies.js',
'node_modules/angular-loading-bar/build/loading-bar.js',
'node_modules/angular-ui-validate/dist/validate.js',
'node_modules/chart.js/Chart.js',
'node_modules/angular-md5/angular-md5.js',
'node_modules/angular-iso8601/dist/angular-iso8601.js',
'node_modules/angular-animate/angular-animate.js',
'node_modules/angular-chart.js/dist/angular-chart.js',
'node_modules/rx/dist/rx.all.js',
'node_modules/angular-ui-bootstrap/ui-bootstrap-tpls.js',
'node_modules/bootstrap/dist/js/bootstrap.js'
Kindly help.
Issue is in your index.js where you define the run method on your angular app.
angular
.module('pacman', []) // removed dependencies for brevity
.run(['$rootScope', '$location', '$modalStack', '$cookies']);
The last argument in the array passed to run should be a function but you forgot to pass a function. Change your run to add some implementation like below or remove the run if you don't see any use for it.
angular.module('pacman', []) // removed dependencies for brevity
.run(['$rootScope', '$location', '$modalStack', '$cookies',
function($rootScope,$location,$modalStack,$cookies){
// some statements here
}]);
Angular JS file declaration must come before the jquery in your index.html
'node_modules/angular/angular.js',
'node_modules/jquery/dist/jquery.js',

Angular minification with grunt results in 'Failed to instantiate module' error

I am aware of setting up a controller, service, model etc for prepping for minification. I have about 20 controllers, models and services as individual files and I want to minify and concat them all into one JS file for production.
To get an idea of how I have these files setup, here is an example:
VforumJS.controller('MainController', ['$scope', '$location', '$sce', 'MainModel', 'LogModel', 'MainDebug', 'timecode', 'Idle', function($scope, $location, $sce, MainModel, LogModel, MainDebug, timecode, Idle)
{
...
}]);
After minification, I get the error
Failed to instantiate module VforumJS due to:
Error: [$injector:unpr] http://errors.angularjs.org/1.4.1/$injector/unpr?p0=a
If I click the error link, it says Unknown provider: a
Here is where my module gets created
var VforumJsConfig = function($routeProvider, $locationProvider, localStorageServiceProvider)
{
localStorageServiceProvider.setPrefix('vforumdesktop');
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
...
})
.otherwise({
...
});
};
var VforumJS = angular.module('VforumJS', ['ngRoute','LocalStorageModule', 'ngTouch', 'ui-rangeSlider','base64','ngIdle'])
.config(['$routeProvider', '$locationProvider', 'localStorageServiceProvider', VforumJsConfig])
.constant('LogTypes', {
LOGIN: 1,
IDLE_LOGOUT: 2,
MANUAL_LOGOUT: 3,
VFORUM_OPEN: 4,
VFORUM_CLOSE: 5
})
.constant('SendLogs', false)
.constant('MainDebug', true);
Am I maybe not doing the proper minification prep in the above code where the module is created?
Here is my Gruntfile.js
'use strict';
module.exports = function(grunt)
{
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
uglify: {
all_src: {
options: {
sourceMap: true,
sourceMapName: 'source.map'
},
src: 'resources/js/**/*.js',
dest: 'composite.all.min.js'
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.registerTask('default', ['uglify']);
};
Your .config is definitely one of the issues. Double check and make sure that everywhere in your code that you are injecting a service/provider that you are using the in-line minification.
This is what a config injecting one provider (just $logProvider for this example) will look like after minification:
.config(function(a){
console.log("Never gets here, but a is", a);
})
When really it should look like this:
.config(['$logProvider', function(a){
console.log("a is", a);
}])
Here is a codepen: http://codepen.io/troylelandshields/pen/xGjKGV
Your VforumJsConfig line is the issue
var VforumJsConfig = function($routeProvider, $locationProvider, localStorageServiceProvider)
The function parameters get minified, and angular doesn't know where to inject them from. You need to supply them as strings ( just like your other functions ), as strings won't be altered during minification.
From the docs:
https://docs.angularjs.org/tutorial/step_05#a-note-on-minification
So you will need to add after the definition of VforumJsConfig:
VforumJsConfig.$inject = ['$routeProvider', '$locationProvider', 'localStorageServiceProvider']
Use the array syntax for VforumJsConfig so that the dependencies are defined explicitly rather than implied by the parameter names which will be minified. Instead of:
var VforumJsConfig = function($routeProvider, $locationProvider,
localStorageServiceProvider)
{
localStorageServiceProvider.setPrefix('vforumdesktop');
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
...
})
.otherwise({
...
});
};
Try:
var VforumJsConfig = ['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider, localStorageServiceProvider)
{
localStorageServiceProvider.setPrefix('vforumdesktop');
$locationProvider.html5Mode(true);
$routeProvider
.when('/', {
...
})
.otherwise({
...
});
}];

Angular - Unknown Provider from Provider

I have the strange issue, that somehow my own provider is not injecting correctly into my app.
This is my provider:
angular.module '1425App'
.provider 'OData',[() ->
#_baseUrl = ''
return {
setBaseUrl: (value) ->
#_baseUrl = value
return
$get: ['$http', '$q', ($http, $q) ->
return {
getAll: (resource) ->
dfd = $q.defer()
$http.get("#{#_baseUrl}/#{resource}").success (res) ->
console.log res
dfd.resolve()
return
return dfd.promise
}
]
}
]
This is my app + config block:
angular.module('1425App', [
'ngCookies',
'ngResource',
'ngSanitize',
'ui.router',
'angular-loading-bar',
'ngAnimate',
'toaster',
'ui.gravatar',
'ngFitText',
'google-maps',
'mm.foundation',
'restangular',
'ui.select2',
'ngTable',
'ngGrid',
'ngCsv',
'ui.date',
'ngDragDrop',
'ui.sortable'
])
.config ($stateProvider, $urlRouterProvider, $locationProvider, $httpProvider, cfpLoadingBarProvider, baseUrl, ODataProvider) ->
$httpProvider.interceptors.push('httpInterceptor')
ODataProvider.setBaseUrl(baseUrl + '/odata/')
cfpLoadingBarProvider.includeSpinner = false
...
Im getting following error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module
1425App due to: Error: [$injector:unpr] Unknown provider:
ODataProvider
This leads to my believe, that its an issue with injecting the provider into my app. Any idea what im missing?
Looking at you pasted snippet issue could be that you have config block appearing before oData provider has been registered. Try setting up the config block after the oDataProvider registration.
Separate out config block from app registration and load it after your provider(s) have been registered. You can only configure the providers that are registered before the specific config block that uses it. This is not the case with constant though you can have them registered in any order.
The above information (which was a bug) is as of 1.2.* version of angular, with 1.3 you can register providers even after the config block.

Error: Unknown provider - Karma, requirejs, angular

I get this error when i try to make a test
Error: [$injector:unpr] Unknown provider: $translateProvider <- $translate
I'm using karma with requirejs.
loadingCtrlSpec.js
define([
'angular',
'angular-mocks',
'app',
'angular-translate'
], function(angular, mocks, app) {
'use strict';
describe('loadingCtrl', function(){
var ctrl, scope, translate;
beforeEach(mocks.module('TestApp'));
beforeEach(inject(function($injector){
scope = $injector.get('$rootScope').$new();
translate = $injector.get('$translate');
}));
it("contains spec with an expectation", function() {
expect(true).toBe(true);
});
});
});
loadingCtrl.js
define(['angular'], function (angular) {
'use strict';
angular.module('TestApp', [])
.controller('loadingCtrl', ['$scope', '$translate', function($scope, $translate) {
$translate(['build.DEFAULT_EMAIL_SUBJECT','build.DEFAULT_EMAIL_NOTES']).then(function (translations) {
$scope.title = translations["build.DEFAULT_EMAIL_SUBJECT"];
$scope.notes = translations["build.DEFAULT_EMAIL_NOTES"];
});
}]); })
If i don't use angular-translate ($translate) everything is working so i don't think the problem is from karma.conf.js or test-main.js (require.conf for karma).
Your TestApp module will need to specify the pascalprecht.translate module as a dependency. Also be sure to include angular-translate as a dependency when defining your main module so the relevant script gets loaded:
define(['angular', 'angular-translate'], function (angular) {
angular.module('TestApp', ['pascalprecht.translate']);
});

Categories