Argument IndexController not a function, got undefined: when running karma test - angularjs

Here is my test file for testing the IndexController
//modules/application/tests/spec/controllers/IndexController.js
'use strict';
(function() {
describe('Application IndexController', function() {
beforeEach(function() {
module('HtEwa');
module('HtEwa.Application');
});
var scope, IndexController;
beforeEach(inject(function($controller, $rootScope) {
scope = $rootScope.$new();
IndexController = $controller('IndexController', {
$scope: scope
});
}));
it('should expose global scope', function() {
expect(scope.global).toBeTruthy();
});
});
})();
I have seen other answers but it is not working for me. And I have the files included in my karma.conf.js is:
files:_.flatten(_.values(assets.core.js)).concat([
'modules/*/*.js',
'modules/*/*/*.js',
'modules/*/tests/spec/*/*.js'
]);
I have HtEwa and HtEwa.Application module. Under the HtEwa.Application there is IndexController.
//modules/application/controllers/IndexController.js
'use strict';
angular.module('HtEwa.Application').controller('IndexController', ['$scope', 'Global',
function($scope, Global) {
$scope.global = Global;
}
]);
I guess that my IndexController file is not included, but I have included modules/*/*/*.js in my karma.conf.js and that's where the IndexController is.Or Am I missing anything?
Edit:
And the karma --log-level debug shows that all files that are needed is served.
Here are the included files that i watched from chrome
<!-- Dynamically replaced with <script> tags -->
<script type="text/javascript" src="/base/node_modules/karma-jasmine/lib/jasmine.js"></script>
<script type="text/javascript" src="/base/node_modules/karma-jasmine/lib/adapter.js"></script>
<script type="text/javascript" src="/base/bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="/base/bower_components/angular/angular.js"></script>
<script type="text/javascript" src="/base/bower_components/angular-mocks/angular-mocks.js"></script>
<script type="text/javascript" src="/base/bower_components/angular-cookies/angular-cookies.js"></script>
<script type="text/javascript" src="/base/bower_components/angular-resource/angular-resource.js"></script>
<script type="text/javascript" src="/base/bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script type="text/javascript" src="/base/bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script type="text/javascript" src="/base/bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="/base/modules/application/application.js"></script>
<script type="text/javascript" src="/base/modules/application/controllers/FooterController.js"></script>
<script type="text/javascript" src="/base/modules/application/controllers/HeaderController.js"></script>
<script type="text/javascript" src="/base/modules/application/controllers/IndexController.js"></script>
<script type="text/javascript" src="/base/modules/application/init.js"></script>
<script type="text/javascript" src="/base/modules/application/routes/ApplicationRoutes.js"></script>
<script type="text/javascript" src="/base/modules/application/services/Global.js"></script>
<script type="text/javascript" src="/base/modules/application/services/HTTPInterceptor.js"></script>
<script type="text/javascript" src="/base/modules/application/tests/spec/controllers/IndexController.js"></script>
<script type="text/javascript" src="/base/modules/users/controllers/UserController.js"></script>
<script type="text/javascript" src="/base/modules/users/routes/Auth.js"></script>
<script type="text/javascript" src="/base/modules/users/services/UserService.js"></script>
<script type="text/javascript" src="/base/modules/users/tests/spec/controllers/UserController.js"></script>
<script type="text/javascript" src="/base/modules/users/users.js"></script>
<script type="text/javascript">
window.__karma__.loaded();
</script>

Try doing this instead:
files:_.flatten(_.values(assets.core.js)).concat([
'modules/**/*.js'
]);
Notice the use of two *. Read the File Pattern example in the karma configuration documentation.
Wherein the examples are:
**/*.js: All files with a "js" extension in all subdirectories
**/!(jquery).js: Same as previous, but excludes "jquery.js"
**/(foo|bar).js: In all subdirectories, all "foo.js" or "bar.js" files

Related

AdalAngular can work ncaught Error: [$injector:modulerr] with angularjs

i try to use AdalAngular in angularJS but it can inject the modul .do you have en idee to solve that i try to work with the AZUreAD :
var app = angular.module("myApp", [ 'ngRoute', 'AdalAngular' ]);
app.config(['$routeProvider', '$httpProvider', 'adalAuthenticationServiceProvider', function($routeProvider,
$httpProvider, adalProvider, $locationProvider) {
$routeProvider.when('/', {
controller : "loginController",
templateUrl : "login.html"
}
the file d'index : the load of the file work but u have this error ncaught Error: [$injector:modulerr]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Car parks</title>
<link href="/css/style.css" rel="stylesheet">
<link href="/css/bootstrap.min.css" rel="stylesheet">
<link
href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"
rel="stylesheet">
</head>
<body ng-app="myApp">
<script src="modul/angularJS-1.2.32/angular.min.js"
type="text/javascript"></script>
<script src="modul/angularJS-1.2.32/angular-resource.min.js"
type="text/javascript"></script>
<script src="modul/angularJS-1.2.32/angular-route.min.js"
type="text/javascript"></script>
<script src="modul/angularJS-1.2.32/adal.min.js"></script>
<script src="modul/angularJS-1.2.32/adal-angular.min.js"></script>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/popper.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/myApp.js" type="text/javascript"></script>
<script src="js/controller/loginController.js" type="text/javascript"></script>
<script src="js/controller/UserController.js" type="text/javascript"></script>
<script src="js/controller/SecretaryController.js"
type="text/javascript"></script>
<script src="js/controller/AdminController.js" type="text/javascript"></script>
<script src="js/controller/SearchCarController.js"
type="text/javascript"></script>
<script src="js/controller/UserAddController.js" type="text/javascript"></script>
<script src="js/controller/AddCarController.js" type="text/javascript"></script>
<script src="js/controller/ProfilController.js" type="text/javascript"></script>
<script src="js/controller/ValidateController.js"
type="text/javascript"></script>
<script src="js/controller/LogoutController.js" type="text/javascript"></script>
<div ng-view></div>
</body>
</html>
You don't have $locationProvider
app.config(['$routeProvider', '$httpProvider', 'adalAuthenticationServiceProvider', '$locationProvider',
function ($routeProvider, $httpProvider, adalProvider, $locationProvider) {
$routeProvider.when('/', {
controller: "loginController", templateUrl: "login.html"
});
}]);

Backbonejs JST is not defined without Rails

I have one page index.html
I've made page with head:
<script src="/assets/javascripts/jquery.js"></script>
<script src="/assets/javascripts/underscore.js"></script>
<script src="/assets/javascripts/jquery-ui.js"></script>
<script src="/assets/javascripts/json2.js"></script>
<script src="/assets/javascripts/jquery.lazyload.js"></script>
<script src="/assets/javascripts/scrollstop.js"></script>
<script src="/assets/javascripts/backbone.js"></script>
<script src="/assets/javascripts/backbone/search.js"></script>
<script src="assets/javascripts/backbone/templates/filter.jst.ejs" type="text/template"></script>
<script src="/assets/javascripts/backbone/templates/item.jst.ejs" type="text/template"></script>
<script src="/assets/javascripts/backbone/templates/item_loading.jst.ejs" type="text/template"></script>
<script src="/assets/javascripts/backbone/templates/more.jst.ejs" type="text/template"></script>
<script src="/assets/javascripts/backbone/templates/razbor.jst.ejs" type="text/template"></script>
<script src="/assets/javascripts/backbone/templates/total.jst.ejs" type="text/template"></script>
<script src="/assets/javascripts/backbone/models/filter.js"></script>
<script src="/assets/javascripts/backbone/models/filter_value.js"></script>
<script src="/assets/javascripts/backbone/models/item.js"></script>
<script src="/assets/javascripts/backbone/models/more.js"></script>
<script src="/assets/javascripts/backbone/models/razbor.js"></script>
<script src="/assets/javascripts/backbone/models/search.js"></script>
<script src="/assets/javascripts/backbone/views/filter_view.js"></script>
<script src="/assets/javascripts/backbone/views/item_view.js"></script>
<script src="/assets/javascripts/backbone/views/razbor_view.js"></script>
<script src="/assets/javascripts/backbone/views/search_view.js"></script>
<script src="/assets/javascripts/backbone/routers/search_router.js"></script>
And chrome tells me:
Uncaught ReferenceError: JST is not defined
at filter_view.js:4
The line 4:
template: JST["backbone/templates/filter"],
What should I do without Rails to fix my problem?
Thanks for advises!

I am manually bootstrapping angular. Even though the module is injected it's having trouble loading

Here i am declaring a module.
angular.module('users', []);
Here i am bootstrapping.
var mainApplicationModuleName = 'mean';
var mainApplicationModule = angular.module(mainApplicationModuleName, ['ngRoute', 'users']);
mainApplicationModule.config(['$locationProvider',
function($locationProvider) {
$locationProvider.hashPrefix('!');
}
]);
if (window.location.hash === '#_=_') window.location.hash = '#!';
angular.element(document).ready(function() {
angular.bootstrap(document, [mainApplicationModuleName]);
});
i have declared all the scripts in the html file, but it still having trouble loading.
Ensure that your script files are refered in correct order as below
<script type="text/javascript" src="/lib/angular/angular.js"></script>
<script type="text/javascript" src="/lib/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="/lib/angular-resource/angular-resource.min.js"></script>
<script type="text/javascript" src="/application.js"></script>
<script type="text/javascript" src="/users/users.client.module.js"></script>
<script type="text/javascript" src="/core/core.client.module.js"></script>
<script type="text/javascript" src="/core/controllers/core.client.controller.js"></script>
<script type="text/javascript" src="/core/config/core.client.routes.js"></script>
<script type="text/javascript" src="/users/services/authentication.client.service.js"></script>
<script type="text/javascript" src="/articles/articles.client.module.js"></script>
<script type="text/javascript" src="/articles/controllers/articles.client.controller.js"></script>
<script type="text/javascript" src="/articles/services/articles.client.service.js"></script>
<script type="text/javascript" src="/articles/config/articles.client.routes.js"></script>
Second in your users.server.controller.js file modify the method.
User.findById({
id: id /// modified here
}, function(err, user) {
if (err) {
next(err);
} else {
req.user = user;
next();
}
});

ngMessages is not working with ngRoute and ngMaterial

I am creating an Angular App,
var app = angular.module("myApp", ["ngRoute","ngMaterial","ngMessages"]);
When i am using 'ngMessages' with 'ngMaterial', it is not working.
Make sure you have loaded them in the references with the correct versions ,
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs//1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="app.js"></script>
DEMO

Argument 'ClockOnController' is not a function, got undefined

Hi I've been having some problems refactoring my controllers into their own snippets
I want the controllers to inherit the dependencies from my initial app declaration.
"use strict";
angular.module('clockOn', ['angular-contextual-date','logon','milli','mobile','ClockOnController','Auth','ngStorage'])
I need these dependencies to flow through my controllers.
angular.module('clockOn').controller('LogonController', ['$rootScope','$scope','$location','$localStorage','Auth',
function($rootScope, $scope, $location, $localStorage,Auth){
creates unknown provider errors --I'm assuming the dependencies aren't flowing down--
angular.module('clockOn',[]).controller()
creates undefined function 'controllerName' errors -In this scenario I'm assuming I'm redefining the app and hence loosing the other controllers-
Here's two of the controllers
(function (){
angular.module('clockOn',['Auth','angular-contextual-date'])
.controller('ClockOnController', ['$http','Auth','contextualDateService' ,function ($http,Auth,contextualDateService){
this.user = Auth.getTokenClaims().user; //authorised is a property of the controller
contextualDateService.config.fullDateFormats.thisMonth = "MMM d 'at' h:mm a ";
this.shifts = getShifts(this);
function getShifts(clockOnCtrl){
var date = new Date();
var curr_date = Date.now();
var week_from_now = Date.now()+"7";
$http({
method: 'GET',
url: '/shifts',
params: {"user_id":clockOnCtrl.user._id,
"start_at":curr_date,
"finish_at":week_from_now}
}).
then(function(res){
if (typeof res !== 'undefined'){
console.log(res.data);
clockOnCtrl.shifts = res.data;
}},
function(error){
console.log(error)
});
}
}]);
})();
My index file
<!DOCTYPE html>
<html class="container" ng-app="clockOn"> <!-- ng-app tells the html page which app/module it belongs too runs the store module on load-->
<head>
<meta name="viewport" content="width=device-width , initial-scale=1">
<link rel="stylesheet" type="text/css" href="../resources/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="../resources/custom.css"/>
</head>
<body>
<script type="text/javascript" src="../resources/jquery.min.js"></script>
<script type="text/javascript" src="../resources/angular.min.js"></script>
<script type="text/javascript" src="../resources/bower_components/angular-contextual-date/dist/angular-contextual-date.js"></script>
<script type="text/javascript" src="../modules/app.js"></script>
<script type="text/javascript" src="../modules/logon.js"></script>
<script type="text/javascript" src="../modules/tasks.js"></script>
<script type="text/javascript" src="../services/milli.js"></script>
<script type="text/javascript" src="../services/auth.js"></script>
<script type="text/javascript" src="../modules/mobile.js"></script>
<script type="text/javascript" src="../modules/shifts.js"></script>
<script type="text/javascript" src="../modules/layout-components.js"></script>
<script type="text/javascript" src="../resources/bower_components/ngstorage/ngStorage.min.js"></script>
<script type="text/javascript" src="../controllers/controller-clockOn.js"></script>
<script type="text/javascript" src="../controllers/controller-logon.js"></script>
<script type="text/javascript" src="../controllers/controller-tasks.js"></script>
<div class="container" ng-controller="ClockOnController as clockOnCtrl">
<div class= "" ng-controller="LogonController as logonCtrl">
<logon-form></logon-form>
<top-menu></top-menu>
<div class="page-header" ng-show="token">
<h2 class="">Welcome {{clockOnCtrl.user.name | uppercase}}
<small>You currently have {{clockOnCtrl.shifts.length}} shifts</small>
<h2>
</div>
<shifts-list></shifts-list>
<custom-footer></custom-footer>
</div>
</div>
</body>
</html>
The error Argument 'ClockOnController' is not a function, got undefined

Resources