Problems Setting Up Testacular With Jasmine and Angular - javascript

I'm trying to set up a unit testing environment for my project and I'm having some problems. I'm trying to use Testacular with Jasmine for testing my AngularJS code.
I have a module Services which has a factory method called KeepAlive. Here is its set up.
angular.module('services', []).factory('KeepAlive', ['$rootScope', function($rootScope){
//My Code
}]);
This module is attached to a module called MainModule. Here is its code.
angular.module('MainModule', ['filters', 'services', 'directives', 'ui'])
.config(['$httpProvider', function($httpProvider){
//My Code
}]).run(['$rootScope', '$timeout', '$routeParams', 'KeepAlive', function($rootScope, $timeout, $routeParams, KeepAlive){
//My Code
}]);
So Now I want to add this code for my tests. So here is my testacular file set up.
JASMINE,
JASMINE_ADAPTER,
'assets/lib/jquery/jquery-1.7.1.js',
'assets/lib/angular/angular.js',
'assets/lib/angular/angular-ui.js',
'jsTests/MockingLib/angular-mocks.js',
'assets/scripts/modules/Admin.js',
'assets/scripts/modules/MainModule.js',
'assets/scripts/services/KeepAlive.js',
'assets/scripts/services/Admin.js',
'assets/scripts/filters.js',
'assets/scripts/directives.js',
'assets/scripts/controllers/admin/*.js',
Now this is throwing a error in my testacular console. Here is the error that I'm getting.
Error: Unknown provider: KeepAliveProvider <- KeepAlive
at Error (<anonymous>)
at d:/Work/Workspace/TalentNetwork/assets/lib/angular/angular.js:2627:8
at Object.getService [as get] (d:/Work/Workspace/TalentNetwork/assets/lib/angular/angular.js:2755:32)
at d:/Work/Workspace/TalentNetwork/assets/lib/angular/angular.js:2632:38
at getService (d:/Work/Workspace/TalentNetwork/assets/lib/angular/angular.js:2755:32)
at Object.invoke (d:/Work/Workspace/TalentNetwork/assets/lib/angular/angular.js:2773:6)
at d:/Work/Workspace/TalentNetwork/assets/lib/angular/angular.js:2637:71
at Array.forEach (native)
at forEach (d:/Work/Workspace/TalentNetwork/assets/lib/angular/angular.js:110:11)
at Object.createInjector [as injector] (d:/Work/Workspace/TalentNetwork/assets/lib/angular/angular.js:2637:3)
Here is my Jasmine Test case.
beforeEach(function () {
admin = module("MainModule");
module("services");
});
What I'm I missing? I'm new to testacular. Thanks in advance.

The error says that somebody asked for a service called "KeepAlive" but the injector does not know how to create it (there is no provider for it).
That means, you probably didn't load the module.
When you bootstrap your app on production, you give it ng-app="something", which tells Angular which module to load. In the same way, you need to specify which modules you wanna load during testing.
This should solve your problem:
beforeEach(module('services'));

Related

TypeError: Cannot read property 'expectGET' of undefined for $httpBackend

I am getting a few different errors. One of them is the one listed in the title.
This failure is for my TEST file that is written using Karma.
I'm assuming the problem is related to $httpBackend not registering somewhere. I am building an application using IONIC, Angular, and Rails.
I've tried using both _$httpBackend_ syntax and the $httpBackend syntax in the beforeEach(inject(function()) and I'm still getting the same error.
Here is the full error:
BillService
✗ fetches a list of Bills
Error: [$injector:modulerr] Failed to instantiate module starter due to:
Error: [$injector:modulerr] Failed to instantiate module ionic due to:
Error: [$injector:nomod] Module 'ionic' 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.5.3/$injector/nomod?p0=ionic
at /Users/knowerlittle/Dropbox/Projects/splitter-frontend/www/lib/ionic/js/angular/angular.js:68:12
TypeError: Cannot read property 'expectGET' of undefined
at Object.<anonymous> (/Users/knowerlittle/Dropbox/Projects/splitter-frontend/test/unit/BillService.spec.js:15:16)
BELOW IS THE TEST FILE:
describe('BillService', function() {
beforeEach(module('starter'));
var billService, httpBackend;
var billData = [{event: "Party"}, {event: "Birthday"}];
beforeEach(inject(function(_billService_, _$httpBackend_) {
billService = _billService_;
httpBackend = _$httpBackend_;
}));
it('fetches a list of Bills', function(){
httpBackend.expectGET("http://localhost:3000/bills/").respond(billData);
var bill1 = { event: "Party"};
var bill2 = { event: "Birthday"};
billService.getAll().then(function(bills) {
expect(bills).toEqual([bill1, bill2]);
});
httpBackend.flush();
});
});
Any help would be amazing! Thank you in advance.

Errors in Angular web app and now showing any views

I'm following a tutorial which is making Angular on Rails.
here is a JSFiddle URL for the project: https://jsfiddle.net/dcbavw4e/4/
I'm currently getting 2 errors right now:
1. Uncaught SyntaxError: Unexpected token .
Error occuring at : .controller('MainCtrl', ['$scope', 'posts', function($scope, posts) {
2. angular.js:68 Uncaught Error: [$injector:modulerr] Failed to instantiate module flapperNews due to:
Error: [$injector:nomod] Module 'flapperNews' 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.9/$injector/nomod?p0=flapperNews
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js:68:12
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js:2006:17
at ensure (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js:1930:38)
at module (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js:2004:14)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js:4447:22
at forEach (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js:341:20)
at loadModules (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js:4431:5)
at createInjector (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js:4356:11)
at doBootstrap (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js:1677:20)
at bootstrap (https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js:1698:12)
http://errors.angularjs.org/1.4.9/$injector/modulerr?p0=flapperNews&p1=Erro….googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.9%2Fangular.js%3A1698%3A12)
I'm not really sure what I'm doing wrong since I did check App name in index.html and app.js but they all match.
There were some syntax errors in your code. At line 24 on the fiddle, you used a ';' it breaks the chain, so controller 'MainCtrl' won't get attached to module 'flapperNews'. (There are a few more mistakes as well.) See the fiddle in comments
.factory('posts', [function(){
var o = {
posts: []
};
return o;
}]);

Karma Unit testing of Ionic App. Error: [ng:areq] Argument 'StockCtrl' is not a function, got undefined

I'm getting an error while trying to unit test my ionic app. I went through previously asked questions and non of the answers worked for me. Any ideas what I'm doing wrong?
Error I'm getting:
PhantomJS 1.9.8 (Mac OS X 0.0.0) StockCtrl should have a scope variable defined FAILED
TypeError: 'undefined' is not a function (evaluating 'queueableFn.fn.call(self.userContext)')
Error: [ng:areq] Argument 'StockCtrl' is not a function, got undefined
http://errors.angularjs.org/1.4.3/ng/areq?p0=StockCtrl&p1=not%20a%20function%2C%20got%20undefined
undefined
at assertArg (/Users/Projects/online-shop/www/lib/angular/angular.js:1770)
at assertArgFn (/Users/Projects/online-shop/www/lib/angular/angular.js:1781)
at /Users/Projects/online-shop/www/lib/angular/angular.js:8975
at /Users/Projects/online-shop/www/lib/angular-mocks/angular-mocks.js:1848
at /Users/Projects/online-shop/test/stockController.spec.js:9
at invoke (/Users/Projects/online-shop/www/lib/angular/angular.js:4450)
at workFn (/Users/Projects/online-shop/www/lib/angular-mocks/angular-mocks.js:2404)
PhantomJS 1.9.8 (Mac OS X 0.0.0): Executed 1 of 1 (1 FAILED) ERROR (0.006 secs / 0.007 secs)
stockFactory.js
app.factory('stockService', function($resource){
return $resource('js/shopStock.json/:items', 'items');
})
stockController.js
app.controller("StockCtrl", function($scope, $rootScope, $stateParams, stockService) {
var items = stockService.get(function(){
$scope.stock = items['items'];
});
});
stockController.spec.js
describe('StockCtrl', function() {
beforeEach(angular.module('Shop'));
var scope;
beforeEach(inject(function($rootScope, $controller){
scope = $rootScope.$new();
$controller("StockCtrl", {$scope: scope});
}));
it("should have a scope variable defined", function() {
expect(scope).toBeDefined();
});
});
I have tried'module' instead of 'angular.module' as suggested in one of the previously posted questions but end up with other error:
Error: [$injector:modulerr] Failed to instantiate module Shop due to:
Error: [$injector:modulerr] Failed to instantiate module ionic due to:
Error: [$injector:nomod] Module 'ionic' 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=ionic
I would be very grateful for a help.
Also, does anyone know how test $resource as a next step?
You definitely need to remove beforeEach(angular.module('Shop')) and replace it with beforeEach(module('Shop')). Your problem with the ionic module not being found could be a few things . I'd start by making sure Karma is loading the correct files into the browser when it runs your tests and that it's doing it in the right order. Check the files property in your Karma.conf file has your ionic module referenced.

Angular - $cookies is undefined

I'm trying to user Angular cookies in my controller but for some reason it is always undefined:
MyApp.controller('ValidationController', ["$cookies", function($cookies) {
debugger; //checking $cookies here return an object
$cookies.put("test","test"); //trying to add value to the cookie here return TypeError: undefined is not a function
alert(JSON.stringify($cookies));
}]);
var MyApp = angular.module("MyApp", [
"ui.router",
"ui.bootstrap",
"oc.lazyLoad",
"ngSanitize",
"ngCookies"
]);
This is the full stack error:
TypeError: undefined is not a function
at new <anonymous> (CookiesController.js:6)
at Object.e [as invoke] (angular.min.js:37)
at $get.z.instance (angular.min.js:76)
at angular.min.js:59
at s (angular.min.js:7)
at v (angular.min.js:59)
at g (angular.min.js:52)
at angular.min.js:51
at angular.min.js:17
at l.$get.l.$eval (angular.min.js:126)
any ideas?
Seems like $cookies doesn't have setter in angular 1.3.10 while angular 1.4.0 does provided, Please refer their documents.
You could solve your problem by 2 ways.
If you want to stay with angular 1.3.10 then use $cookieStore object instead of $cookies
Do upgrade angular to version 1.4.0.beta.6 latest version
Hope this could help you, Thanks.

How to get more verbose error info in Angular?

I get only this error text in Chrome. No any additional info:
What does it mean? What happened? Is there a way to tell Angular or Chrome to show more verbose error information?
Here is my app.js file. Nothing else is included:
'use strict';
// Declare app level module which depends on filters, and services
var vsApp = angular.module('vsApp', [
'ngRoute',
'vsApp.filters',
'vsApp.services',
'vsApp.directives',
'vsApp.controllers'
]);
vsApp.config(["$routeProvider"], function($routeProvider) {
$routeProvider.when('/registration', {templateUrl: 'partials/reg.html', controller: 'regCtrl'});
$routeProvider.when('/login', {templateUrl: 'partials/login.html', controller: 'loginCtrl'});
$routeProvider.otherwise({redirectTo: '/'});
});
vsApp.controller("regCtrl", function() {});
vsApp.controller("loginCtrl", function() {});
ng-app attribute inclusion:
<!DOCTYPE html>
<html ng-app="vsApp">
My <head> tag:
<script id="angularScript" src="/bower_components/angular/angular.js"></script>
<script src="/bower_components/angular-route/angular-route.js"></script>
<script src="/assets/js/app.js"></script>
UPD:
Protractor brought more info:
Message:
UnknownError: unknown error: [$injector:modulerr] Failed to instantiate module vsApp due to:
Error: [ng:areq] Argument 'fn' is not a function, got string
http://errors.angularjs.org/1.3.0-build.2795+sha.222d473/ng/areq?p0=fn&p1=not%20a%20function%2C%20got%20string
at http://localhost:3000/bower_components/angular/angular.js:78:12
at assertArg (http://localhost:3000/bower_components/angular/angular.js:1583:11)
at assertArgFn (http://localhost:3000/bower_components/angular/angular.js:1593:3)
at annotate (http://localhost:3000/bower_components/angular/angular.js:3318:5)
at Object.invoke (http://localhost:3000/bower_components/angular/angular.js:3986:21)
at runInvokeQueue (http://localhost:3000/bower_components/angular/angular.js:3915:35)
at http://localhost:3000/bower_components/angular/angular.js:3924:11
at Array.forEach (native)
at forEach (http://localhost:3000/bower_components/angular/angular.js:320:11)
at loadModules (http://localhost:3000/bower_components/angular/angular.js:3905:5)
I don't know how to get more verbose error messages. I don't think it is even possible. However, you seem to have a at least a syntax error:
vsApp.config(["$routeProvider", function($routeProvider) {
/* notice the [ ] */
}]);
because you're using annotated injection of dependencies, just like in the documentation: https://docs.angularjs.org/guide/providers#providers_provider-recipe
myApp.config(["unicornLauncherProvider", function(unicornLauncherProvider) {
unicornLauncherProvider.useTinfoilShielding(true);
}]);
In any case I tried to reproduce the error message you got but I only obtain useful error messages. see http://jsfiddle.net/CE6j9/1/
Uncaught Error: [$injector:modulerr] Failed to instantiate module vsApp due to:
Error: [ng:areq] Argument 'fn' is not a function, got string
http://errors.angularjs.org/1.2.1/ng/areq?p0=fn&p1=not%20a%20function%2C%20got%20string
at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js:78:12
at assertArg (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js:1346:11)
at assertArgFn (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js:1356:3)
at annotate (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js:2926:5)
at Object.invoke (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js:3587:21)
at http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js:3534:37
at Array.forEach (native)
at forEach (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js:300:11)
at loadModules (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js:3521:5)
at createInjector (http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js:3461:11)
http://errors.angularjs.org/1.2.1/$injector/modulerr?p0=vsApp&p1=Error%3A%2…cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.2.1%2Fangular.js%3A3461%3A11)
http://errors.angularjs.org/1.2.1/$injector/modulerr?p0=vsApp&p1=Error%3A%2…cloudflare.com%2Fajax%2Flibs%2Fangular.js%2F1.2.1%2Fangular.js%3A3461%3A11) angular.js:78
(anonymous function) angular.js:78
(anonymous function) angular.js:3555
forEach angular.js:300
loadModules angular.js:3521
createInjector angular.js:3461
doBootstrap angular.js:1282
bootstrap angular.js:1297
angularInit angular.js:1246
(anonymous function) angular.js:20126
trigger angular.js:2298
(anonymous function) angular.js:2562
forEach angular.js:300
eventHandler
maybe you had something else interfering?
I got the lower half of errors (with line numberS) when I clicked in the arrow. maybe you have the wrong settings in chrome?

Categories