I complete the tutorial from this codelab, and as suggested tried to fix the errors on the unit tests.
But i don't know how to fix this error. I already took a look at this question:running-tests-with-localstorage but it does not address my problem.
Here's my test file:
'use strict';
describe('Controller: MainCtrl', function () {
// load the controller's module
beforeEach(function(){
module('mytodoApp'),
module('LocalStorageModule')
});
var MainCtrl,
scope;
// Initialize the controller and a mock scope
beforeEach(inject(function ($controller, $rootScope) {
scope = $rootScope.$new();
MainCtrl = $controller('MainCtrl', {
$scope: scope
});
}));
it('should have no items to start', function () {
expect(scope.todos.length).toBe(0);
});
});
And here is the console output:
PhantomJS 1.9.7 (Linux) Controller: MainCtrl should have no items to start FAILED
Error: [$injector:modulerr] Failed to instantiate module mytodoApp due to:
Error: [$injector:modulerr] Failed to instantiate module LocalStorageModule due to:
Error: [$injector:nomod] Module 'LocalStorageModule' 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.
http://errors.angularjs.org/1.2.16/$injector/nomod?p0=LocalStorageModule
at /home/ubuntu/mytodo/bower_components/angular/angular.js:1613
at ensure (/home/ubuntu/mytodo/bower_components/angular/angular.js:1535)
at module (/home/ubuntu/mytodo/bower_components/angular/angular.js:1823)
at /home/ubuntu/mytodo/bower_components/angular/angular.js:3781
http://errors.angularjs.org/1.2.16/$injector/modulerr?p0=LocalStorageModule&p1=Error%3A%20%5B%24injector%3Anomod%5D%20Module%20'LocalStorageModule'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.2.16%2F%24injector%2Fnomod%3Fp0%3DLocalStorageModule%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2Fbase%2Fbower_components%2Fangular%2Fangular.js%3F7dcf1b25480258d399759429338cedc57239f2d1%3A1613%0A%20%20%20%20at%20ensure%20(http%3A%2F%2Flocalhost%3A8080%2Fbase%2Fbower_components%2Fangular%2Fangular.js%3F7dcf1b25480258d399759429338cedc57239f2d1%3A1535)%0A%20%20%20%20at%20module%20(http%3A%2F%2Flocalhost%3A8080%2Fbase%2Fbower_components%2Fangular%2Fangular.js%3F7dcf1b25480258d399759429338cedc57239f2d1%3A1823)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2Fbase%2Fbower_components%2Fangular%2Fangular.js%3F7dcf1b25480258d399759429338cedc57239f2d1%3A3781
at /home/ubuntu/mytodo/bower_components/angular/angular.js:3810
http://errors.angularjs.org/1.2.16/$injector/modulerr?p0=mytodoApp&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20Failed%20to%20instantiate%20module%20LocalStorageModule%20due%20to%3A%0AError%3A%20%5B%24injector%3Anomod%5D%20Module%20'LocalStorageModule'%20is%20not%20available!%20You%20either%20misspelled%20the%20module%20name%20or%20forgot%20to%20load%20it.%20If%20registering%20a%20module%20ensure%20that%20you%20specify%20the%20dependencies%20as%20the%20second%20argument.%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.2.16%2F%24injector%2Fnomod%3Fp0%3DLocalStorageModule%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2Fbase%2Fbower_components%2Fangular%2Fangular.js%3F7dcf1b25480258d399759429338cedc57239f2d1%3A1613%0A%20%20%20%20at%20ensure%20(http%3A%2F%2Flocalhost%3A8080%2Fbase%2Fbower_components%2Fangular%2Fangular.js%3F7dcf1b25480258d399759429338cedc57239f2d1%3A1535)%0A%20%20%20%20at%20module%20(http%3A%2F%2Flocalhost%3A8080%2Fbase%2Fbower_components%2Fangular%2Fangular.js%3F7dcf1b25480258d399759429338cedc57239f2d1%3A1823)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2Fbase%2Fbower_components%2Fangular%2Fangular.js%3F7dcf1b25480258d399759429338cedc57239f2d1%3A3781%0Ahttp%3A%2F%2Ferrors.angularjs.org%2F1.2.16%2F%24injector%2Fmodulerr%3Fp0%3DLocalStorageModule%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520Module%2520'LocalStorageModule'%2520is%2520not%2520available!%2520You%2520either%2520misspelled%2520the%2520module%2520name%2520or%2520forgot%2520to%2520load%2520it.%2520If%2520registering%2520a%2520module%2520ensure%2520that%2520you%2520specify%2520the%2520dependencies%2520as%2520the%2520second%2520argument.%250Ahttp%253A%252F%252Ferrors.angularjs.org%252F1.2.16%252F%2524injector%252Fnomod%253Fp0%253DLocalStorageModule%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8080%252Fbase%252Fbower_components%252Fangular%252Fangular.js%253F7dcf1b25480258d399759429338cedc57239f2d1%253A1613%250A%2520%2520%2520%2520at%2520ensure%2520(http%253A%252F%252Flocalhost%253A8080%252Fbase%252Fbower_components%252Fangular%252Fangular.js%253F7dcf1b25480258d399759429338cedc57239f2d1%253A1535)%250A%2520%2520%2520%2520at%2520module%2520(http%253A%252F%252Flocalhost%253A8080%252Fbase%252Fbower_components%252Fangular%252Fangular.js%253F7dcf1b25480258d399759429338cedc57239f2d1%253A1823)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A8080%252Fbase%252Fbower_components%252Fangular%252Fangular.js%253F7dcf1b25480258d399759429338cedc57239f2d1%253A3781%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A8080%2Fbase%2Fbower_components%2Fangular%2Fangular.js%3F7dcf1b25480258d399759429338cedc57239f2d1%3A3810
at /home/ubuntu/mytodo/bower_components/angular/angular.js:3810
PhantomJS 1.9.7 (Linux): Executed 1 of 1 (1 FAILED) ERROR (0.04 secs / 0.006 secs)
Warning: Task "karma:unit" failed. Use --force to continue.
Aborted due to warnings.
UPDATE: Added the answer.
Here's my karma.conf.js file, fixed. Had to add the module angular-local-storage.js to the list of files.
// 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-animate/angular-animate.js',
'bower_components/angular-cookies/angular-cookies.js',
'bower_components/angular-resource/angular-resource.js',
'bower_components/angular-route/angular-route.js',
'bower_components/angular-sanitize/angular-sanitize.js',
'bower_components/angular-touch/angular-touch.js',
'bower_components/jquery/dist/jquery.js',
'bower_components/jquery-ui/jquery-ui.js',
'bower_components/angular-ui-sortable/sortable.js',
'bower_components/angular-local-storage/angular-local-storage.js',
'app/scripts/**/*.js',
'test/mock/**/*.js',
'test/spec/**/*.js'
],
The karama.conf.js file contains a files array. When testing, make sure the files containing all of your dependent modules are inserted in to the array:
files: [
/* file paths */
]
One other cool thing is that the file section supports patterns. One way to avoid this problem in the future is to put all your modules or required scripts in to one place or under one common folder and use a pattern to load them all:
files: [
/* or whatever other pattern you want to use */
'/myProject/scripts/vendor/*.min.js',
'/myProject/scripts/modules/*.min.js',
/* the use of ** will search any child folder for the file pattern */
'/myProject/scripts/tests/**/*.js'
]
Related
I'm using yeoman generator for scaffolding angular web application with requirejs. Its working fine but when I tried to concat and minifying all the js file into a single file through grunt task runner its started giving me above mentioned error. I've researched online about the issue and common solution is I may be mis-spelled any service injecting in the module or service does not exists, I've cross checked again all the spelling, quotation marks etc everything seems fine but still I'm unable to resolve this issue.
Here is my app.js file where my main module with dependencies is listed.
return angular
.module('arteciateYeomanApp', [
'arteciateYeomanApp.controllers.MainCtrl',
'arteciateYeomanApp.controllers.AboutCtrl',
'arteciateYeomanApp.services.Xhr',
'arteciateYeomanApp.services.Common',
'arteciateYeomanApp.controllers.ArtworkCtrl',
'arteciateYeomanApp.controllers.AddAccountCtrl',
'arteciateYeomanApp.controllers.AddArtgroupCtrl',
'arteciateYeomanApp.controllers.AddArtistCtrl',
'arteciateYeomanApp.controllers.AddArtworkCtrl',
'arteciateYeomanApp.controllers.AddCampaignsCtrl',
'arteciateYeomanApp.controllers.AddGenreCtrl',
'arteciateYeomanApp.controllers.AddInstitutionCtrl',
'arteciateYeomanApp.controllers.AdminSignupCtrl',
'arteciateYeomanApp.controllers.ArtistInfoCtrl',
'arteciateYeomanApp.controllers.DirectUserSignupCtrl',
'arteciateYeomanApp.controllers.ErrorCtrl',
'arteciateYeomanApp.controllers.ForgotPasswordCtrl',
'arteciateYeomanApp.controllers.GroupBuyingCtrl',
'arteciateYeomanApp.controllers.LoginCtrl',
'arteciateYeomanApp.controllers.AdminLoginCtrl',
'arteciateYeomanApp.controllers.ResetPasswordCtrl',
'arteciateYeomanApp.controllers.SignupCtrl',
'arteciateYeomanApp.controllers.UnblockUserCtrl',
'arteciateYeomanApp.controllers.UpdatePasswordCtrl',
'arteciateYeomanApp.controllers.DashboardCtrl',
'ngRoute','ngResource']).config(.....);
here is grunt task which I'm running for minifying the js files.
registering task
grunt.registerTask('dev', ['requirejs' ]);
Here is task running script
requirejs : {
compile : {
options : {
baseUrl : "<%= yeoman.app %>/scripts",
mainConfigFile : "<%= yeoman.app %>/scripts/main.js",
name : "main",
out : "requireArterciate.js"
}
}
}
Please let me know if I'm doing something wrong here.
If you need to minify the angularjs code, then use the following standard format syntax to define the controller and to inject the dependencies. Refer Dependency Injection
angular.module('test').controller('testController', testController);
testController.$inject = ['$scope', '$rootScope'];
function testController($scope, $rootScope) {};
Running into a weird issue with loading an Angular module.
I have a file structure like so
-ng-app
-app
-account
accountCtrl.js.coffee
-auth
authCtrl.js.coffee
-other_folders
app.js.coffee
and I'm loading accountCtrl and other controllers like so
#app/app.js.coffee
angular.module("app", [
'ngResource'
'smart-table'
'checklist-model'
'ui.router'
...
])
#app/account/accountCtrl.js.coffee
#app = angular.module('app')
app.controller 'accountCtrl', ($scope, $state) ->
....
#app/auth/authCtrl.js.coffee
#app = angular.module('app')
app.controller 'authCtrl', ($scope, $state) ->
....
But then accountCtrl throws an error
Module 'app' 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 know the syntax is correct, because I'm loading a a few dozen other controllers with the same syntax. So I started playing around with different scenarios.
I deleted the 'account' folder
No error thrown, other controllers load normally
I renamed account folder to z-account
No error thrown, all controllers including accountCtrl load normally
So the error only occurs when the folder is named 'account' and is the first file in the 'app' folder. Any ideas what's going on?
Rails asset pipeline includes javascript files aphabetically, and app/account.js.coffee was being included before app/app.js.coffee, hence the missing module error.
Two solutions possible:
prefix files with an underscore to ensure it loads first like so:
_app.js.coffee
Or
Remove
//= require_tree .
in application.js and include files manually.
I am setting up my Karma configuration file, but I do not fully understand some of options that exist as I am not having success testing templates that have ran through the ngHtml2JsPreprocessor and have been
$templateCached
Inside of the ngHtml2JsPreprocessor I can add a few key value properties involving paths.
ngHtml2JsPreprocessor: {
stripPrefix: ".*/Went all the way back to the root of my application/",
// moduleName: 'templatesCached'//
},
I commented out the templates for now to make sure that I am getting access to each file as module. I am loading the modules with no error. I can find the templateCached version in my dev tools.
beforeEach(module('template'));
My Templates folder sits outside the basepath I created.
basePath: 'Scripts/',
I have it referenced inside the preprocessors object
preprocessors: {
'../Templates/**/*.html' : ['ng-html2js']
},
Again all of my templates are now js files and cached.
I inside of my package.json I saved the files as
save-dev
"karma-chrome-launcher": "^0.2.2",
"karma-jasmine": "^0.2.2",
"karma-ng-html2js-preprocessor": "^0.2.1",
I referenced my installs in the plugins.
plugins: [
'karma-chrome-launcher',
'karma-jasmine',
'karma-sinon',
'karma-ng-html2js-preprocessor'
],
I have all of my files loaded
files: [
//jquery libaries
// angular libraries
// Scripts files
// source app.js
// tests folder and files
]
My tests are running off of Karma start
However, my directive is just an empty string
element.html()
returns ""
I have bard inject set up
bard.inject(
"$compile",
"$controller",
"$rootScope",
'$templateCache',
"haConfig",
"$q"
);
Here is the inside of my beforeEach
bard.mockService(haConfig, {
getTemplateUrl: '/tst!'
});
//bard.mockService(haConfig, {});
console.log('ha config2', haConfig.getTemplateUrl());
var html = angular.element("<div explore-hero></div>");
console.log('htl',haConfig.getTemplateUrl());
scope = $rootScope.$new();
//templateCache
element = $compile(html)(scope);
//console.log(haConfig.getTemplateUrl(html));
scope.$digest(element);
console.log('missing text',haConfig.getTemplateUrl(html));
controller = element.scope();
console.log("element", element);
I have no idea why I am getting an empty string back. I am creating the html file but, nothing is inside of it.
All I can wonder if I should have the the templatesCached files showing up in a folder on my dev tools? Also whether or not the files should be referenced inside of the files array inside karma.conf.js
Right now I have the html files referenced? I have tried the js files but that did not seem to do anything
The problem was actually quite simple fix. I was tempted to delete it but, in case someone has a similar issue I want this to be available.
Inside the karma.conf.js I have a
stripPrefix: 'rootDirectory' // was already in place
stripSuffix: '.js.html' // I had to make a strip on the templatesCached
prependSuffix: '.html' // this is what I was searching for
When the preprocessor ran it templateCached all of my files. However, they did not end the way that I was expecting them and I could not read them. I had the module and other parts set up correctly.
I'm testing an Angular app with Karma. I've got everything working, but it seems like I'm doing something wrong.
https://gist.github.com/guyjacks/7bca850844deb612e681
Karma will throw the following error if I comment out 'app/notes/notes.main.js' :
Uncaught Error: [$injector:nomod] Module 'notes.main' 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.
http://errors.angularjs.org/1.4.3/$injector/nomod?p0=notes.main
at /Users/guyjacks/projects/adr-demo/node_modules/angular/angular.js:1958
I don't want to have to manually list each application file to control the order in which each file loads. Am I don't something wrong or do I just have to list each file in the order I want?
---- Solution based on the accepted answer ----
My app is organized into modules as recommended by the Angular Style Guide: https://github.com/johnpapa/angular-styleguide.
'app/app.module.js',
'app/**/*.module.js',
'app/**/*.service.js',
'app/**/*.controller.js',
'app/**/*.directive.js',
'app/**/*.js'
I don't think the following lines are necessary above
'app/**/*.service.js',
'app/**/*.controller.js',
'app/**/*.directive.js'
when each module has an angular module declared in the *.module.js file like my app does.
That said, if you did need to explicitly load services before controllers & controllers before directives then this would be the way to do it.
Update : I could not see your karma file, now Gist link is fixed.
The point in notes[.]main.js is causing the problem,
So, 'app/**/*.js' is not matching notes.main.js.
Try now like this : app/**/*. *.js
=============================================================
Before update :
You have to load the modules that you app depends on, in karma config. file :
module.exports = function(config) {
config.set({
.......
// list of files / patterns to load in the browser
files: [
'./client/app/vendors/angular/angular.js',
// =====> load Your modules here ...
'./client/app/app.js',
'./client/app/controllers/*.js',
'./client/app/directives/*.js',
'./client/app/services/*.js',
'./test/client/unit/**/*.js'
],
.....
}) }
I run my angular tests with karma, my application is running fine in browser, but tests fails and I am suspecting wrong settings.
Here are the controllers and tests :
// app/scripts/controllers/main.js
'use strict';
angular.module('GloubiBoulgaClientApp')
.controller('MainCtrl', function ($scope) {
});
Here is the test file :
'use strict';
describe('Controller: MainCtrl', function () {
// load the controller's module
beforeEach(module('GloubiBoulgaClientApp'));
var MainCtrl,
scope;
// Initialize the controller and a mock scope
beforeEach(inject(function ($controller, $rootScope) {
scope = $rootScope.$new();
MainCtrl = $controller('MainCtrl', {
$scope: scope
});
}));
it('should attach a list of awesomeThings to the scope', function () {
expect(true).toBe(true);
});
});
The karma conf
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'],
// list of files / patterns to load in the browser
files: [
'app/bower_components/angular/angular.js',
'app/bower_components/angular-mocks/angular-mocks.js',
'app/bower_components/angular-resource/angular-resource.js',
'app/bower_components/angular-cookies/angular-cookies.js',
'app/bower_components/angular-sanitize/angular-sanitize.js',
'app/scripts/*.js',
'app/scripts/**/*.js',
'test/mock/**/*.js',
'test/spec/**/*.js'
],
// list of files / patterns to exclude
exclude: [],
// web server port
port: 8080,
// level of logging
// possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || 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
// - Safari (only Mac)
// - PhantomJS
// - IE (only Windows)
browsers: ['PhantomJS'],
// Continuous Integration mode
// if true, it capture browsers, run tests and exit
singleRun: false
});
};
The error ouput
PhantomJS 1.9.2 (Linux) Controller: MainCtrl should attach a list of awesomeThings to the scope FAILED
Error: [ng:areq] Argument 'MainCtrl' is not a function, got undefined
http://errors.angularjs.org/1.2.8-build.2094+sha.b6c42d5/ng/areq?p0=MainCtrl&p1=not%20a%20function%2C%20got% 2
0undefined
at assertArg (--obfuscated-path--GloubiBoulga/GloubiBoulgaClient/app/bower_components/angular/angula
r.js:1362)
at assertArgFn (--obfuscated-path--GloubiBoulga/GloubiBoulgaClient/app/bower_components/angular/angu
lar.js:1373)
at --obfuscated-path--GloubiBoulga/GloubiBoulgaClient/app/bower_components/angular/angular.js:6763
at --obfuscated-path--GloubiBoulga/GloubiBoulgaClient/test/spec/controllers/main.js:15
at invoke (--obfuscated-path--GloubiBoulga/GloubiBoulgaClient/app/bower_components/angular/angular.j
s:3704)
at workFn (--obfuscated-path--GloubiBoulga/GloubiBoulgaClient/app/bower_components/angular-mocks/angular -mocks.js:2120)
I am wondering why this happen, I tried to find some documentation about the karma initialization with angularjs. But the most documentation I found is only dummy tutorial that are repeating the same pattern ( like the dummy todo list, but with phones ... )
It seem that $controllerProvide.register fails to resolve my controllers name.
But Directives tests are working correctly ...
Thanks for your attention.
Edit Notes : I replaced the controller PersonCtrl by MainCtrl in this thread because It was confusing people about where to look. Now MainCtrl is the simpliest failing example I found.
This issue is only affecting my controllers, ( all of them ), but tests for Services and Directives are working as expected
I solved my problem, I've spent nearly a week to figure why this was not working.
I'd like to warn you, that Karma Stacktrace and error reports, even in debug mode, were not showing clues and were mainly missleading.
I've spent time in javascript debugger jumping frame to frame, to understand why my controllers where not loaded. ( Inspecting Angular's controllers register, shown it was empty)
While digging in my directories I've found a *.js that were not loaded in the index in production but by the globbing pattern in tests.
It was my old http_interceptor service that I moved but did not trashed the file.
Removing this buggy file fixed the weird Karma/Jasmine/Angular behaviour.
Lesson learned :
Do not trust tests output ( but what should I trust then ? ).
Remove files you are not using/testing.
Thanks to everyone who tryied to solve this issue.
i think the main problem is coming from the karma conf :
files: [
'app/bower_components/angular/angular.js',
'app/bower_components/angular-mocks/angular-mocks.js',
'app/bower_components/angular-resource/angular-resource.js',
'app/bower_components/angular-cookies/angular-cookies.js',
'app/bower_components/angular-sanitize/angular-sanitize.js',
'app/scripts/*.js',
'app/scripts/**/*.js',
'app/scripts/**/**/*.js',
'test/mock/**/*.js',
'test/spec/**/*.js'
],
removing the * and specifying files one by one in the correct order, because if one is loaded before another it can break.
Edit : Add your files in the same order as your index.html
looking at this I'm wondering if the error message is confusing things.
in the stack trace i can see
TypeError: 'undefined' is not an object (evaluating 'scope.awesomeThings.length')
and from the example it does seem as though you have not defined any properties on the scope in your controller.
do you still have the problem if you add
$scope.awesomeThings = [];
to your controller?
If you're using the latest angular and also using the angular-route module, you should include the angular-route script in the karma conf file too:
files: [
'app/bower_components/angular/angular.js',
'app/bower_components/angular-route/angular-route.js',
'app/bower_components/angular-mocks/angular-mocks.js',
'app/bower_components/angular-resource/angular-resource.js',
'app/bower_components/angular-cookies/angular-cookies.js',
'app/bower_components/angular-sanitize/angular-sanitize.js',
'app/scripts/*.js',
'app/scripts/**/*.js',
'app/scripts/**/**/*.js',
'test/mock/**/*.js',
'test/spec/**/*.js'
],
I had this problem and adding it to the karma file did the trick.