Mock issue with AngularJS and Jasmine - angularjs

Tryin' to get started with testing in angularjs (based on this) but can't seem to get the mocks working correctly. Here's my jasmine file:
describe 'FlightsController', ->
beforeEach module 'surf-air'
beforeEach inject ($rootScope, $controller) ->
scope = $rootScope.$new()
FlightsController = $controller('FlightsController', {scope: scope})
it 'should work', -> expect(true).toBe(true)
And here's what Testacular spits back:
Chrome 23.0 FlightsController should work FAILED
Error: Unknown provider: $scopeProvider <- $scope
at Error (<anonymous>)
at /Users/chriskun/forge-workspace/surf-air-pilot-mobile/src/js/angular.min.js:28:395
at Object.c [as get] (/Users/chriskun/forge-workspace/surf-air-pilot-mobile/src/js/angular.min.js:26:180)
at /Users/chriskun/forge-workspace/surf-air-pilot-mobile/src/js/angular.min.js:28:476
at c (/Users/chriskun/forge-workspace/surf-air-pilot-mobile/src/js/angular.min.js:26:180)
at d (/Users/chriskun/forge-workspace/surf-air-pilot-mobile/src/js/angular.min.js:26:314)
at Object.instantiate (/Users/chriskun/forge-workspace/surf-air-pilot-mobile/src/js/angular.min.js:27:455)
at /Users/chriskun/forge-workspace/surf-air-pilot-mobile/src/js/angular.min.js:50:239
at null.<anonymous> (/Users/chriskun/forge-workspace/surf-air-pilot-mobile/test/unit/controllers.js:9:34)
at Object.d [as invoke] (/Users/chriskun/forge-workspace/surf-air-pilot-mobile/src/js/angular.min.js:27:325)
Error: Declaration Location
at window.jasmine.window.inject.angular.mock.inject (/Users/chriskun/forge-workspace/surf-air-pilot-mobile/test/lib/js/angular-mocks.js:1717:25)
at null.<anonymous> (/Users/chriskun/forge-workspace/surf-air-pilot-mobile/test/unit/controllers.js:6:16)
at /Users/chriskun/forge-workspace/surf-air-pilot-mobile/test/unit/controllers.js:4:3
at /Users/chriskun/forge-workspace/surf-air-pilot-mobile/test/unit/controllers.js:18:4
Chrome 23.0: Executed 1 of 1 (1 FAILED) (0.221 secs / 0.04 secs)
which is caused by:
$controller('FlightsController', {scope: scope})
Any ideas?

Change this line
FlightsController = $controller('FlightsController', {scope: scope})
to the following
FlightsController = $controller('FlightsController', {$scope: scope})
I have updated the example jsfiddle to CoffeeScript: http://jsfiddle.net/jaimem/5Afbm/2/

Related

Angular NaNmageDirective error

I am using angularjs-imageupload-directive for upload image in base64 in my application.
This directive give me error as below.
Error: [$injector:unpr] http://errors.angularjs.org/1.2.27/$injector/unpr?p0=aProvider%20%3C-%20a%20%3C-NaNmageDirective
at Error (native)
at http://www.example.com/min/admin-production.min.js:19:10395
at http://www.example.com/min/admin-production.min.js:19:25331
at Object.c [as get] (http://www.example.com/min/admin-production.min.js:19:24402)
at http://www.example.com/min/admin-production.min.js:19:25405
at c (http://www.example.com/min/admin-production.min.js:19:24402)
at Object.d [as invoke] (http://www.example.com/min/admin-production.min.js:19:24617)
at http://www.example.com/min/admin-production.min.js:19:29463
at f (http://www.example.com/min/admin-production.min.js:19:10732)
at Object.<anonymous> (http://www.example.com/min/admin-production.min.js:19:29430)
Anyone have solution for this.
angularjs-imageupload-directive use following.
angular.module('imageupload', [])
.directive('image', function($q) {...}
It is not work after uglify. For the param $q may be converted to another name such as a,b,c,f, etc by uglify compiler.
So i convert it to and it works perfectly.
angular.module('imageupload', [])
.directive('image', ['$q', function($q) {...}]

AngularJS karma -- Unable to initiate unit test

I am trying to write sample unit test for angular controller. But test fails with error message :
Error: Unknown provider: $$rAFProvider from ngMock
at Error (native)
at c:/eclipse/workspace/Ecomm-Fron-End/WebContent/js/assets/vendor/angularjs/angular.min.js:28:338
at Object.c [as get] (c:/eclipse/workspace/Ecomm-Fron-End/WebContent/js/assets/vendor/angularjs/angular.min.js:26:104)
at Object.j.$provide.decorator (c:/eclipse/workspace/Ecomm-Fron-End/WebContent/js/assets/vendor/angularjs/angular.min.js:28:217)
at c:/eclipse/workspace/Ecomm-Fron-End/WebContent/js/assets/vendor/angularjs/angular-mocks.js:1746:12
at Object.d [as invoke] (c:/eclipse/workspace/Ecomm-Fron-End/WebContent/js/assets/vendor/angularjs/angular.min.js:26:320)
at c:/eclipse/workspace/Ecomm-Fron-End/WebContent/js/assets/vendor/angularjs/angular.min.js:25:107
at Array.forEach (native)
at m (c:/eclipse/workspace/Ecomm-Fron-End/WebContent/js/assets/vendor/angularjs/angular.min.js:6:193)
at e (c:/eclipse/workspace/Ecomm-Fron-End/WebContent/js/assets/vendor/angularjs/angular.min.js:24:398)
TypeError: Cannot read property 'testName' of undefined
at null.<anonymous> (c:/eclipse/workspace/Ecomm-Fron-End/WebContent/js/assets/test/sample.js:18:18)
My sample test case was :
describe('Unit: homeCtrl', function() {
// Load the module with MainController
beforeEach(module('yourMarketApp'));
var ctrl, scope;
beforeEach(inject(function($controller, $rootScope) {
// Create a new scope that's a child of the $rootScope
scope = $rootScope.$new();
// Create the controller
ctrl = $controller('homeCtrl', {
$scope: scope
});
}));
it('should test scope.testName',
function() {
expect(scope.testName).toEqual("");
});
});
I have already checked , angular and angular mock file versions are same(v1.2.19)

angularjs: could not inject a factory

I have a factory,
var commonFactories = angular.module('commonFactories', []).
factory('acampaign', function () {
// return {'a' : 1};
return "hello";
});
and I am injecting it to a module,
angular.module("campaign", ["ngRoute", "ngResource", "commonServices", "commonFactories"]).
// configure campaign module
config(["acampaign", function(acampaign) {
...
}
Angular throws error saying it cannot instantiate campaign module,
Failed to instantiate module campaign due to:
Error: [$injector:unpr] http://errors.angularjs.org/1.3.12/$injector/unpr?p0=acam...
at Error (native)
at http://localhost:8000/static/assets/angularjs/angular.min.js:6:417
at http://localhost:8000/static/assets/angularjs/angular.min.js:38:7
at d (http://localhost:8000/static/assets/angularjs/angular.min.js:36:13)
at Object.e [as invoke] (http://localhost:8000/static/assets/angularjs/angular.min.js:36:283)
at d (http://localhost:8000/static/assets/angularjs/angular.min.js:34:498)
at http://localhost:8000/static/assets/angularjs/angular.min.js:35:99
at s (http://localhost:8000/static/assets/angularjs/angular.min.js:7:302)
at g (http://localhost:8000/static/assets/angularjs/angular.min.js:34:399)
at ab (http://localhost:8000/static/assets/angularjs/angular.min.js:38:135
Your acampaign factory is acampaignProvider in the config function. factories and services are essentially sugar syntax for providers. Look at provider in the guide the provider recipe section

Argument 'ListCtrl' is not a function, got undefined

I'm new to Karma and Jasmine, and wanted to get some assistance trying to use grunt test on controllers. The error I get when I run the test is (shortened):
Running "karma:unit" (karma) task
INFO [karma]: Karma v0.10.9 server started at http://localhost:8080/
INFO [launcher]: Starting browser Chrome
WARN [watcher]: Pattern "/Users/doronkatz/Development/Angular/Chapter4/test/mock/**/*.js" does not match any file.
INFO [Chrome 31.0.1650 (Mac OS X 10.9.1)]: Connected on socket 34BLydt6tI-UpBXZQBCZ
Chrome 31.0.1650 (Mac OS X 10.9.1) Controllers ListCtrl should have list of recipes FAILED
Error: [ng:areq] Argument 'ListCtrl' is not a function, got undefined
http://errors.angularjs.org/1.2.6/ng/areq?p0=ListCtrl&p1=not%20a%20function%2C%20got%20undefined
at /Users/doronkatz/Development/Angular/Chapter4/app/bower_components/angular/angular.js:78:12
at assertArg (/Users/doronkatz/Development/Angular/Chapter4/app/bower_components/angular/angular.js:1360:11)
at assertArgFn (/Users/doronkatz/Development/Angular/Chapter4/app/bower_components/angular/angular.js:1370:3)
at /Users/doronkatz/Development/Angular/Chapter4/app/bower_components/angular/angular.js:6755:9
at null.<anonymous> (/Users/doronkatz/Development/Angular/Chapter4/test/spec/controllers/controllers.js:21:14)
at Object.invoke (/Users/doronkatz/Development/Angular/Chapter4/app/bower_components/angular/angular.js:3697:17)
at workFn (/Users/doronkatz/Development/Angular/Chapter4/app/bower_components/angular-mocks/angular-mocks.js:2102:20)
Error: Declaration Location
at window.inject.angular.mock.inject (/Users/doronkatz/Development/Angular/Chapter4/app/bower_components/angular-mocks/angular-mocks.js:2087:25)
at null.<anonymous> (/Users/doronkatz/Development/Angular/Chapter4/test/spec/controllers/controllers.js:17:16)
at null.<anonymous> (/Users/doronkatz/Development/Angular/Chapter4/test/spec/controllers/controllers.js:13:3)
at /Users/doronkatz/Development/Angular/Chapter4/test/spec/controllers/controllers.js:1:1
Expected undefined to equal [ 1, 2, 3 ].
Error: Expected undefined to equal [ 1, 2, 3 ].
at null.<anonymous> (/Users/doronkatz/Development/Angular/Chapter4/test/spec/controllers/controllers.js:28:30)
Chrome 31.0.1650 (Mac OS X 10.9.1) Controllers EditController should save the recipe FAILED
...
Controllers.js test:
describe('Controllers', function() {
var $scope, ctrl;
//you need to indicate your module in a test
beforeEach(module('chapter4App',
['directives', 'services']));
beforeEach(function() {
this.addMatchers({
toEqualData: function(expected) {
return angular.equals(this.actual, expected);
}
});
});
describe('ListCtrl', function() {
var mockBackend, recipe;
// The _$httpBackend_ is the same as $httpBackend. Only written this way to
// differentiate between injected variables and local variables
beforeEach(inject(function($rootScope, $controller, _$httpBackend_, Recipe) {
recipe = Recipe;
mockBackend = _$httpBackend_;
$scope = $rootScope.$new();
ctrl = $controller('ListCtrl', {
$scope: $scope,
recipes: [1, 2, 3]
});
}));
it('should have list of recipes', function() {
expect($scope.recipes).toEqual([1, 2, 3]);
});
});
Please look at https://github.com/doronkatz/angularjs-book/tree/master/chapter4 which has the code, including test script for the controller, and controller.
4th line:
WARN [watcher]: Pattern "/Users/doronkatz/Development/Angular/Chapter4/test/mock/*/.js" does not match any file.
Sooo, maybe You dont load all required files?

Always-true test failing in Karma - why?

I am trying to write Karma tests for an Angular app. This test is failing:
describe('Controller: AdherenceCtrl', function () {
// load the controller's module
beforeEach(module('myApp'));
var MainCtrl,
scope;
// Initialize the controller and a mock scope
beforeEach(inject(function ($controller, $rootScope) {
// do nothing for the moment
// scope = $rootScope.$new();
// MainCtrl = $controller('AdherenceCtrl', {
// $scope: scope
// });
}));
it('should pass a basic test', function () {
expect([1,2].length).toBe(2);
});
});
If I delete the beforeEach(inject section, though, it passes.
describe('Controller: AdherenceCtrl', function () {
// load the controller's module
beforeEach(module('myApp'));
var MainCtrl,
scope;
it('should pass a basic test', function () {
expect([1,2].length).toBe(2);
});
});
What is wrong with the beforeEach(inject section?
The error message I get from Karma is this, which I cannot parse:
Chrome 31.0.1650 (Mac OS X 10.9.0) Controller: AdherenceCtrl should pass a basic test FAILED
Error: [$injector:modulerr] http://errors.angularjs.org/undefined/$injector/modulerr?p0=astellasRiskfactorcalcAppApp&p1=Error%3A%20%5B%24injector%3Amodulerr%5D%20http%3A%2F%2Ferrors.angularjs.org%2Fundefined%2F%24injector%2Fmodulerr%3Fp0%3DngRoute%26p1%3DError%253A%2520%255B%2524injector%253Anomod%255D%2520http%253A%252F%252Ferrors.angularjs.org%252Fundefined%252F%2524injector%252Fnomod%253Fp0%253DngRoute%250A%2520%2520%2520%2520at%2520Error%2520(%253Canonymous%253E)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9876%252Fabsolute%252FUsers%252Fanna%252FDropbox%252Fprojects%252Fastellas-riskfactorcalc-app%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F1383935561000%253A6%253A453%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9876%252Fabsolute%252FUsers%252Fanna%252FDropbox%252Fprojects%252Fastellas-riskfactorcalc-app%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F1383935561000%253A20%253A119%250A%2520%2520%2520%2520at%2520a%2520(http%253A%252F%252Flocalhost%253A9876%252Fabsolute%252FUsers%252Fanna%252FDropbox%252Fprojects%252Fastellas-riskfactorcalc-app%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F1383935561000%253A19%253A353)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9876%252Fabsolute%252FUsers%252Fanna%252FDropbox%252Fprojects%252Fastellas-riskfactorcalc-app%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F1383935561000%253A20%253A14%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9876%252Fabsolute%252FUsers%252Fanna%252FDropbox%252Fprojects%252Fastellas-riskfactorcalc-app%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F1383935561000%253A28%253A434%250A%2520%2520%2520%2520at%2520Array.forEach%2520(native)%250A%2520%2520%2520%2520at%2520q%2520(http%253A%252F%252Flocalhost%253A9876%252Fabsolute%252FUsers%252Fanna%252FDropbox%252Fprojects%252Fastellas-riskfactorcalc-app%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F1383935561000%253A7%253A261)%250A%2520%2520%2520%2520at%2520e%2520(http%253A%252F%252Flocalhost%253A9876%252Fabsolute%252FUsers%252Fanna%252FDropbox%252Fprojects%252Fastellas-riskfactorcalc-app%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F1383935561000%253A28%253A374)%250A%2520%2520%2520%2520at%2520http%253A%252F%252Flocalhost%253A9876%252Fabsolute%252FUsers%252Fanna%252FDropbox%252Fprojects%252Fastellas-riskfactorcalc-app%252Fapp%252Fbower_components%252Fangular%252Fangular.min.js%253F1383935561000%253A28%253A451%0A%20%20%20%20at%20Error%20(%3Canonymous%3E)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A9876%2Fabsolute%2FUsers%2Fanna%2FDropbox%2Fprojects%2Fastellas-riskfactorcalc-app%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F1383935561000%3A6%3A453%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A9876%2Fabsolute%2FUsers%2Fanna%2FDropbox%2Fprojects%2Fastellas-riskfactorcalc-app%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F1383935561000%3A29%3A262%0A%20%20%20%20at%20Array.forEach%20(native)%0A%20%20%20%20at%20q%20(http%3A%2F%2Flocalhost%3A9876%2Fabsolute%2FUsers%2Fanna%2FDropbox%2Fprojects%2Fastellas-riskfactorcalc-app%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F1383935561000%3A7%3A261)%0A%20%20%20%20at%20e%20(http%3A%2F%2Flocalhost%3A9876%2Fabsolute%2FUsers%2Fanna%2FDropbox%2Fprojects%2Fastellas-riskfactorcalc-app%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F1383935561000%3A28%3A374)%0A%20%20%20%20at%20http%3A%2F%2Flocalhost%3A9876%2Fabsolute%2FUsers%2Fanna%2FDropbox%2Fprojects%2Fastellas-riskfactorcalc-app%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F1383935561000%3A28%3A451%0A%20%20%20%20at%20Array.forEach%20(native)%0A%20%20%20%20at%20q%20(http%3A%2F%2Flocalhost%3A9876%2Fabsolute%2FUsers%2Fanna%2FDropbox%2Fprojects%2Fastellas-riskfactorcalc-app%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F1383935561000%3A7%3A261)%0A%20%20%20%20at%20e%20(http%3A%2F%2Flocalhost%3A9876%2Fabsolute%2FUsers%2Fanna%2FDropbox%2Fprojects%2Fastellas-riskfactorcalc-app%2Fapp%2Fbower_components%2Fangular%2Fangular.min.js%3F1383935561000%3A28%3A374)
at Error (<anonymous>)
at /Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js:6:453
at /Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js:29:262
at Array.forEach (native)
at q (/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js:7:261)
at e (/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js:28:374)
at Object.Xb [as injector] (/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js:32:427)
at workFn (/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/test/angular-mocks.js:2114:52)
Here is the URL decoded stack trace:
Error: [$injector:modulerr] http://errors.angularjs.org/undefined/$injector/modulerr?p0=astellasRiskfactorcalcAppApp&p1=Error: [$injector:modulerr] http://errors.angularjs.org/undefined/$injector/modulerr?p0=ngRoute&p1=Error: [$injector:nomod] http://errors.angularjs.org/undefined/$injector/nomod?p0=ngRoute
at Error (<anonymous>)
at http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:6:453
at http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:20:119
at a (http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:19:353)
at http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:20:14
at http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:28:434
at Array.forEach (native)
at q (http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:7:261)
at e (http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:28:374)
at http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:28:451
at Error (<anonymous>)
at http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:6:453
at http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:29:262
at Array.forEach (native)
at q (http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:7:261)
at e (http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:28:374)
at http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:28:451
at Array.forEach (native)
at q (http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:7:261)
at e (http://localhost:9876/absolute/Users/anna/Dropbox/projects/astellas-riskfactorcalc-app/app/bower_components/angular/angular.min.js?1383935561000:28:374)
It mentions ngRoute in line 1. The documentation says:
In AngularJS 1.2.0 and later, ngRoute has been moved to its own module. If you are getting this error after upgrading to 1.2.x, be sure that you've installed ngRoute.
If you are using Angular 1.2.x, have you tried adding ngRoute as a dependency of myApp?

Resources