Unit Testing a Controller Ionic Framework Karma - angularjs

I've been beating my head against the wall trying to figure out why these tests aren't working using Karma and Jasmine to test an Ionic Controller. I'm new to ionic, karma unit testing, angularjs, and just about everything else here. Can anyone identify the reason these tests are failing?
Here's my controller:
angular.module('starter.controllers')
.controller('TemplateCtrl', function($scope) {
$scope.text = 'Hello Template';
});
Here's my test:
describe('Template Controller', function(){
var scope;
beforeEach(module('starter.controllers'));
beforeEach(inject(function($rootScope, $controller) {
scope = $rootScope.$new();
$controller('TemplateCtrl', {$scope: scope});
}));
// tests start here
it('should have scope defined', function() {
expect(scope).toBeDefined();
});
it('should have text set to Hello Template', function(){
expect(scope.text).toEqual('Hello Template');
});
});
Test results:
PhantomJS 2.1.1 (Linux 0.0.0) Template Controller should have scope defined FAILED
Expected undefined to be defined.
PhantomJS 2.1.1 (Linux 0.0.0) Template Controller should have text set to Hello Template FAILED
TypeError: undefined is not an object (evaluating 'scope.text') in controller-tests/template.tests.js (line 23)
Thank you for your time.

Phil Identified the problem, without me even posting my karma config file:
Does Karma include the files that define your starter.controllers
module as well as the TemplateCtrl controller?
Simply adding the path to the karma config file fixed my issue.
Thank you Phil!

Related

Karma running old test file [AngularJS, Karma, Jasmine, PhantomJS]

I'm not sure why, but when I run a new Karma test for my AngularJS app I get output from a previous version of my test file. I'm new to Karma testing so I'm sure I'm missing something somewhere.
PhantomJS 2.1.1 (Windows 7 0.0.0) Calendar Constructor instantiates a calendar with a year, month, and options FAILED
(This is what I had previously set as output for the this test)
I have no idea how I'm getting the above output when my test file looks like this.
test.js
'use strict';
describe('holidays', function () {
var scope, controller;
beforeEach(function(){
module('holiday');
});
describe('HolidaysController', function(){
beforeEach(inject(function($rootScope, $controller){
scope = $rootScope;
controller = $controller('HolidaysController', {
'vm': scope
});
}));
it('should work', function(){
expect(vm.tooltips).toBe(false);
});
});
});
Angular version: 1.4.0
Karma version: 0.13.22
PhantomJS version:
2.1.1
I figured it out, I had another terminal open that I had previously ran karma in. After closing both terminals and reopening one the problem was fixed.

Jasmine Angular http testing

I'm trying to test a REST API wrapped in an AngularJS service using Jasmine async testing. I know, I should be, and am, running tests on the API on the server, and using a mock $httpBackend to test the service.
but when i test this code :
'use strict';
describe('controllers: SiteCtrl', function() {
var scope, httpBackend, http, controller;
var zipcode = "94305";
beforeEach(module('ngMockE2E'));
beforeEach(module('ironridge'));
beforeEach(inject(function($rootScope, $controller, $httpBackend, $http) {
scope = $rootScope.$new();
httpBackend = $httpBackend;
controller = $controller;
http = $http;
// httpBackend.w hen('http://api.zippopotam.us/us/' + zipcode).respond({});
$controller('SiteCtrl', {
$scope: scope,
$http: $http
});
}));
it('should define more than 5 awesome things',function (){
expect(scope.nav.radio).toMatch('site');
});
it("should match a correct zip code", function() {
httpBackend.expectGET('http://api.zippopotam.us/us/' + zipcode).responde(200);
http.get('http://api.zippopotam.us/us/' + zipcode).
success(function(data) {
console.log(data);
}).
error(function(status) {
console.log(status);
});
httpBackend.flush();
});
});
but i get an error when running test
[16:01:41] all files 33.1 kB
[16:01:41] Finished 'scripts' after 1.06 s
[16:01:41] Starting 'test'...
WARN [watcher]: Pattern "/home/hpro/ironridge/src/**/*.mock.js" does not match any file.
INFO [karma]: Karma v0.12.37 server started at http://localhost:9876/
INFO [launcher]: Starting browser PhantomJS
INFO [PhantomJS 1.9.8 (Linux 0.0.0)]: Connected on socket Cfi_cbdTVW-YOCX8_BaV with id 45541989
PhantomJS 1.9.8 (Linux 0.0.0) controllers: SiteCtrl should match a correct zip code FAILED
TypeError: 'undefined' is not a function (evaluating 'httpBackend.expectGET('http://api.zippopotam.us/us/' + zipcode).responde(200)')
at /home/hpro/ironridge/src/app/site/site.controller.spec.js:28
PhantomJS 1.9.8 (Linux 0.0.0): Executed 2 of 2 (1 FAILED) (0.006 secs / 0.059 secs)
[16:01:42] 'test' errored after 1.41 s
[16:01:42] Error: 1
at formatError (/usr/lib/node_modules/gulp/bin/gulp.js:169:10)
at Gulp.<anonymous> (/usr/lib/node_modules/gulp/bin/gulp.js:195:15)
at Gulp.emit (events.js:107:17)
at Gulp.Orchestrator._emitTaskDone (/home/hpro/ironridge/node_modules/gulp/node_modules/orchestrator/index.js:264:8)
at /home/hpro/ironridge/node_modules/gulp/node_modules/orchestrator/index.js:275:23
at finish (/home/hpro/ironridge/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:21:8)
at cb (/home/hpro/ironridge/node_modules/gulp/node_modules/orchestrator/lib/runTask.js:29:3)
at removeAllListeners (/home/hpro/ironridge/node_modules/karma/lib/server.js:215:7)
at Server.<anonymous> (/home/hpro/ironridge/node_modules/karma/lib/server.js:226:9)
at Server.g (events.js:199:16)
Thanks for help :D
You cannot do E2E tests with httpBackend.
First option, to forfit E2E tests, and make tests for $httpBackend, without e2e tests and run it from grunt running grunt test. Which would be unit tests.
Second option, which you can mix with first is to create separate file for E2E tests, also in Jasmine syntax and run it independly with protractor.
In edited code, use flush before calling handle.success.
Flushing means that get operation goes into action.
Instead of:
$http.get('http://api.zippopotam.us/us/' + zipcode).
then(handler.success,handler.error);
httpBackend.flush();
Write:
var prom = $http.get('http://api.zippopotam.us/us/' + zipcode);
httpBackend.flush();
prom.then(handler.success,handler.error);
It's possible that handler.success is called before flush is made.

Angular $watchGroup and $watch undefined in Jasmine tests

Whoever said that testing Angular apps is a breeze had to be joking. Since I started writing tests for our Angular application, I consider it a great success when I move from one error message to another when running karma. Most of the examples online seem to be simplified and are not really transferable to my error cases. Now, onto the current problem I have:
I have angular-mocks.js and other angular dependencies hooked up in karma.conf.js file, I have tested config block of our app (controllers and templates matching routes) and the tests are green. Now I am trying to test controller which has $watchGroup - for some bloody reason $watchGroup is undefined (and also $watch when I tried to use it) in my jasmine test. When I comment the $watchGroup out my dummy test expect(true).toBe(true) is green, but with $watchGroup code in the controller (which is working fine btw) karma console reports that $watchGroup is undefined.
This is the code in the controller:
$scope.$watchGroup([
'Message.AgeRangeMin',
'Message.AgeRangeMax',
'Message.SubscriberListFileId',
'Message.SmsSettings.SelectedSender',
'Message.EmailSettings.SelectedTemplate',
'Message.PushSettings.SelectedSenders.length',
'Message.SocialSettings.SelectedSocialNetworks.length'
], $scope.triggerUserForecast
);
$scope.triggerUserForecast = function () {
commsMgmtHttpService.GetTotalReach($scope.Message)
.then(function (data) {
$scope.UserDeliveryForecast = data;
}, function () {
$scope.UserDeliveryForecast.TotalUserReach = 0;
});
};
This is my test case:
describe('forge.communications.CommsApp', function () {
beforeEach(module('forge.communications.CommsApp'));
describe('CreateScheduledMessageController', function () {
var ctrl, $scope, $rootScope, $controller, $httpBackend;
beforeEach(function () {
inject(function (_$rootScope_, _$controller_, _$httpBackend_) {
$rootScope = _$rootScope_;
$scope = $rootScope.$new();
$httpBackend = _$httpBackend_;
$controller = _$controller_('CreateScheduledMessageController', {
$scope: $scope,
$scope: {
ModelState: new ModelState($scope)
},
$location: $location,
$modal: $modal,
$upload: $upload
});
})
});
it("dummy should be true", function () {
expect(true).toBe(true);
});
});
});
This is the Karma console error I am getting:
Chrome 40.0.2214 (Windows 7) forge.communications.CommsApp CreateScheduledMessageController dummy should be defined FAILED TypeError: undefined is not a function at new (C:/work/theforge/src/TheForge/dist/CommsApp.js:2581:12) at invoke (C:/work/theforge/src/TheForge/Scripts/angular.js:4118:17) at Object.instantiate (C:/work/theforge/src/TheForge/Scripts/angular.js:4129:23) at C:/work/theforge/src/TheForge/Scripts/angular.js:8320:28 at Object. (C:/work/theforge/src/TheForge/FrontEndTests/CommsAppTests/unit/Controllers/CreateScheduledMessage/CreateScheduledMessageController.spec.js:31:31) at Object.invoke (C:/work/theforge/src/TheForge/Scripts/angular.js:4118:17) at Object.workFn (C:/work/theforge/src/TheForge/Scripts/angular-mocks.js:2257:20) at window.inject.angular.mock.inject (C:/work/theforge/src/TheForge/Scripts/angular-mocks.js:2229:37) at Object. (C:/work/theforge/src/TheForge/FrontEndTests/CommsAppTests/unit/Controllers/CreateScheduledMessage/CreateScheduledMessageController.spec.js:22:13) Error: Declaration Location at window.inject.angular.mock.inject (C:/work/theforge/src/TheForge/Scripts/angular-mocks.js:2228:25)at Object. (C:/work/theforge/src/TheForge/FrontEndTests/CommsAppTests/unit/Controllers/CreateScheduledMessage/CreateScheduledMessageController.spec.js:22:13) Chrome 40.0.2214 (Windows 7): Executed 15 of 15 (1 FAILED) (0 secs / 0.12 secs) WARN [web-server]: 404: /forge/signalr/negotiate?clientProtocol=1.4&connectionDaChrome 40.0.2214 (Windows 7): Executed 15 of 15 (1 FAILED) (0.415 secs / 0.12 secs)
Any advice will be of much help to me.
Thanks.
It looks like I was overwriting the $controller's $scope property in jasmine test. Removing the following lines of code, following #Chandermani's advice fixed my problem.
$scope: {
ModelState: new ModelState($scope)
}

$rootScope is undefined when testing with Karma

I am trying to write some unit tests for an angular project. I've followed some examples about testing a controller but I always end up with the same problem: $rootScope seems to be undefined.
My test.js:
describe("Unit: BodyCtrl", function() {
var scope;
beforeEach(function($rootScope, $controller) {
scope = $rootScope.$new();
});
it('foo should be foo', function() {
expect("foo").toBe("foo");
});
})
and the error:
TypeError: Cannot read property '$new' of undefined'
I have included all the angular files in karma.conf.js. Could it cause problems that I have mounted the main application through sshfs from a server to my local Ubuntu 14.04 and Karma is installed on the said local machine?
You need to inject it. Use inject in beforeEach, otherwise it is a mere variable defined in your function scope which is not defined with any value.
Example:-
beforeEach(inject(function($rootScope, $controller) {
scope = $rootScope.$new();
ctrl = $controller('yourcontroller', {
$scope: $rootScope.$new()
});
}));

AngularJS + Jasmine test scripts failing fn is not function

I'm using Yeoman to create an angular project and have modules defined as:
angular.module('angularApp')<br />
.controller('LogOutCtrl', function ($scope) {//do stuff});
Test scripts via Yeoman are as follows:
describe('Controller: LogOutCtrl', function () {
// load the controller's module
beforeEach(module('angularApp', ['ui', 'appSettings']));
var LogOutCtrl,
scope;
// Initialize the controller and a mock scope
beforeEach(inject(function ($controller) {
scope = {};
LogOutCtrl = $controller('LogOutCtrl', {
$scope: scope
});
}));
it('should pass', function () {
expect(2+2).toBe(4); //aka some test
});
});
This is returning as an error via grunt/karma:
Error: Argument 'fn' is not a function, got string
I have looked at a few other ways of writing these as well:
How do I test an AngularJS service with Jasmine?
Any help would be appreciated, as I am new to Angular and Jasmine testing. I believe this is probably an issue with Yeoman's templates for test scripts.
Thanks!
This was an issue with the templates that Yeoman was using. They have been resolved after an update from 1.0 beta.

Resources