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)
Related
I have a module 'moduleA' that has 2 services, and one(serviceB) is depending on the other one(serviceA). I am trying to inject serviceB into a controller which belongs to a different module 'foo', however I got unknown provider error. Below is my code:
module.js
angular.module('moduleA', []);
factory-a.js
angular
.module('moduleA')
.factory('factoryA', factoryA);
factoryA.$inject = ['$q', '$log', '$timeout'];
function factoryA($q, $log, $timeout) {
//Do Stuff
}
factory-b.js
angular
.module('moduleA')
.factory('factoryB', factoryB);
factoryB.$inject = ['factoryA'];
function factoryB(factoryA) {
//Do Stuff
}
foo-controller.js
angular.module('foo', ['moduleA'])
.controller('fooController', ['factoryB', function(factoryB){
//Do Stuff
})
Error in Console:
generic-console-medium.js:23 2016-11-27 18:49:42.395 - [$injector:unpr] Unknown provider: factoryBProvider <- factoryB <- fooController
http://errors.angularjs.org/1.5.5/$injector/unpr?p0=factoryBProvider%20%3C-%20factoryB%20%3C-%20fooController Error: [$injector:unpr] Unknown provider: factoryBProvider <- factoryB <- fooController
http://errors.angularjs.org/1.5.5/$injector/unpr?p0=factoryBProvider%20%3C-%20factoryB%20%3C-%20fooController
at http://localhost:9001/components/angular/angular.js:68:12
at http://localhost:9001/components/angular/angular.js:4458:19
at Object.getService [as get] (http://localhost:9001/components/angular/angular.js:4611:39)
at http://localhost:9001/components/angular/angular.js:4463:45
at getService (http://localhost:9001/components/angular/angular.js:4611:39)
at injectionArgs (http://localhost:9001/components/angular/angular.js:4635:58)
at Object.invoke (http://localhost:9001/components/angular/angular.js:4657:18)
at $controllerInit (http://localhost:9001/components/angular/angular.js:10115:34)
at nodeLinkFn (http://localhost:9001/components/angular/angular.js:9033:34)
at http://localhost:9001/components/angular/angular.js:9433:13
This might sound trivial but Did you include your factory-b.js file in your project?
I think you should fix the code shown below. Everything looks fine except for this.
function factoryA($q, $log, $timeout) { //remove the ''
//Do Stuff
}
I'm new to AngularJS and I'm trying to use sweet alert plugin from https://github.com/oitozero/ngSweetAlert , I already added the corresponding scripts to my index.html like this :
index.html
<link rel="stylesheet" href="bower_components/sweetalert/dist/sweetalert.css">
<script src="bower_components/angular-sweetalert/SweetAlert.min.js"></script>
<script src="bower_components/sweetalert/dist/sweetalert.min.js"></script>
As the documentacion says. Now in my ctrl.js I have this :
var ctrl = function ($scope, SweetAlert) {
SweetAlert.swal("Here's a message"); // this does not work
}
ctrl.$inject = ['$scope', 'oitozero.ngSweetAlert];
angular.module('myApp.missolicitudes.controllers',
[
'oitozero.ngSweetAlert'
])
.controller('MiSolicitudCtrl', ctrl);
But is not working, on my browser I got this error from developer tools:
Error: [$injector:unpr]
http://errors.angularjs.org/1.4.3/$injector/unpr?p0=oitozero.ngSweetAlertProvider%20%3C-""itozero.ngSweetAlert%20%3C-%20MiSolicitudCtrl
at Error (native)
at http://localhost:8081/assets/libs/angular/angular.min.js:6:416
at http://localhost:8081/assets/libs/angular/angular.min.js:40:375
at Object.d [as get] (http://localhost:8081/assets/libs/angular/angular.min.js:38:364)
at http://localhost:8081/assets/libs/angular/angular.min.js:40:449
at d (http://localhost:8081/assets/libs/angular/angular.min.js:38:364)
at e (http://localhost:8081/assets/libs/angular/angular.min.js:39:124)
at Object.instantiate (http://localhost:8081/assets/libs/angular/angular.min.js:39:273)
at $get (http://localhost:8081/assets/libs/angular/angular.min.js:80:228)
at link (http://localhost:8081/assets/libs/angular/angular-route.min.js:7:268)
How can I implement this plugin correctly?
Update 1
I have already try this suggestion by #Pankaj Parkar and #Mike G
ctrl.$inject = ['$scope', 'oitozero.ngSweetAlert'];
and like this
ctrl.$inject = ['$scope', 'SweetAlert'];
My developer tools throws this message:
Error: [$injector:unpr] http://errors.angularjs.org/1.4.3/$injector/unpr?p0=oitozero.ngSweetAlertProvider%20%3C-"<div class="container ng-scope" ng-view="">"itozero.ngSweetAlert%20%3C-%20MiSolicitudCtrl
at Error (native)
at http://localhost:8081/assets/libs/angular/angular.min.js:6:416
at http://localhost:8081/assets/libs/angular/angular.min.js:40:375
at Object.d [as get] (http://localhost:8081/assets/libs/angular/angular.min.js:38:364)
at http://localhost:8081/assets/libs/angular/angular.min.js:40:449
at d (http://localhost:8081/assets/libs/angular/angular.min.js:38:364)
at e (http://localhost:8081/assets/libs/angular/angular.min.js:39:124)
at Object.instantiate (http://localhost:8081/assets/libs/angular/angular.min.js:39:273)
at $get (http://localhost:8081/assets/libs/angular/angular.min.js:80:228)
at link (http://localhost:8081/assets/libs/angular/angular-route.min.js:7:268)
Here is a simple module that I wrote to make SweetAlert work.
// sweetalert.js
angular
.module('sweetalert', [])
.factory('swal', SweetAlert);
function SweetAlert() {
return window.swal;
};
Hence, no need to use any other library to use sweetalert, simply write your own.
Simply inject the module in the controller where you want to use it.
Example
angular
.module('demo', ['sweetalert'])
.controller('DemoController', DemoController);
function DemoController($scope) {
$scope.btnClickHandler = function() {
swal('Hello, World!');
};
};
Here is an example gist in coffeescript: https://gist.github.com/pranav7/d075f7cd8263159cf36a
I got it work, by NOT injecting it in the module.
my ctrl.js just got like this
ctrl.$inject = ['$scope'];
and inside my controller y just call it like this
var ctrl = function ($scope) {
swal("Here's a message");
}
And it works!, i dont know if the correct way... but at least works.
Inject sweetalert.min.js and sweetalert.css.
Used like this code in your controller
swal({
type: "error",
title: "Error!",
text: "fail",
confirmButtonText: "OK"
});
`
Never inject a module into to controller as dependency. You should inject SweetAlert factory there which has various function to show alerts. Also add the missing ' qoute on the factory injection.
You should use
ctrl.$inject = ['$scope', 'SweetAlert'];//<==`oitozero.ngSweetAlert` module
//could be injectable inside your app module.
Demo Plunkr
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
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?
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/