Testing AngularJS controller with Jasmine - javascript

I have the following NewPageCtrl.js
angular.module('NewPageCtrl', []).controller('NewPageController', function($scope, $document) {
$scope.showMe = false;
});
And the following test.js
describe('NewPageCtrl', function() {
var scope, $document, createController;
beforeEach(inject(function ($rootScope, $controller _$document_) {
$document = _$document_;
scope = $rootScope.$new();
createController = function() {
return $controller('NewPageCtrl', {
'$scope': scope
});
};
}));
it('should check showMe', function() {
});
});
I will write the test case later, but for now Jasmine is giving me the error:
Chrome 48.0.2564 (Mac OS X 10.10.5) ERROR
Uncaught SyntaxError: Unexpected identifier
at /Users/me/myProject/test/test.js:23
Line 23 is the beforeEach(... line
I got the example from http://nathanleclaire.com/blog/2013/12/13/how-to-unit-test-controllers-in-angularjs-without-setting-your-hair-on-fire/

You missed a comma.
Change
$rootScope, $controller _$document_
to
$rootScope, $controller, _$document_

Related

Ionic unit test in controller, spyOn not passing

It's a very simple test.. and it's not passing.. If someone can throw some light into this :)
This is the controller code (part of it) that needs to be tested
AppCtrl
$scope.requestAuthorization = function() { requestAuthorization(); };
if ($stateParams.requestAuthorization === true) {
console.log('$stateParams.requestAuthorization');
$scope.requestAuthorization();
}
function requestAuthorization() {
console.log('requestAuthorization()');
// more code here..
}
Test
describe('AppCtrl', function() {
var AppCtrl, $rootScope, $scope, $stateParams;
beforeEach(module('myapp'));
// disable ionic cache to avoid GET errors
beforeEach(module(function($provide, $urlRouterProvider) {
$provide.value('$ionicTemplateCache', function() {});
$urlRouterProvider.deferIntercept();
}));
beforeEach(inject(function($controller, _$rootScope_, _$injector_, _$stateParams_) {
$rootScope = _$rootScope_;
$scope = $rootScope.$new();
$stateParams = _$stateParams_;
AppCtrl = $controller('AppCtrl',{
$scope: $scope
});
spyOn($scope, 'requestAuthorization');
$stateParams.requestAuthorization = true;
}));
it('$stateParams.requestAuthorization should be defined', function() {
expect($stateParams.requestAuthorization).toBeDefined();
});
it('$scope.requestAuthorization should be defined', function() {
expect($scope.requestAuthorization).toBeDefined();
});
// this test is not passing..
it('should call requestAuthorization', function() {
expect($scope.requestAuthorization).toHaveBeenCalled();
});
});
The function is actually being called, I can see the console.log in the console, but it's not passing.
Easy tests, all passing.. except the last one..
Thanks for your time :)
NOTE: There is a $stateParams.requestAuthorization, and a $scope.requestAuthorization. First one is boolean, the other a function, the function is not passing.
In your beforeEach block, define the $stateParams before instanciate the Controller.
beforeEach(inject(function($controller, _$rootScope_, _$injector_, _$stateParams_) {
$rootScope = _$rootScope_;
$scope = $rootScope.$new();
$stateParams = _$stateParams_;
$stateParams.requestAuthorization = true;
AppCtrl = $controller('AppCtrl',{
$scope: $scope,
$stateParams: $stateParams
});
spyOn($scope, 'requestAuthorization');
}));

Jasmine + karma + angular test create controller

Where I make mistake? How can I get instance of controller in Jasmine + angular? How can I resolve controller? I have no idea what should I use to resolve that.
'use strict';
angular.module('myApp.contact', ['ui.router'])
.controller('contactCtrl', ['$scope', function ($scope) {
$scope.contact = {
name: 'John Doe'
};
}]);
describe('myApp.contact module tests', function () {
var scope, createController;
beforeEach(inject(function ($rootScope, $controller) {
scope = $rootScope.$new();
createController = function () {
return $controller('contactCtrl', {
'$scope': scope
});
};
}));
it('contact name is John Doe', function () {
var controller = createController();
expect(controller).toEqual('John Doe');
});
});
myApp.contact module tests
✗ contact name is John Doe
Error: [ng:areq] Argument 'contactCtrl' is not a function, got undefined
http://errors.angularjs.org/1.4.9/ng/areq?p0=contactCtrl&p1=not%20a%20function%2C%20got%20undefined
at E:/angular-seed/app/bower_components/angular/angular.js:68:12
at assertArg (E:/angular-seed/app/bower_components/angular/angular.js:1816:11)
at assertArgFn (E:/angular-seed/app/bower_components/angular/angular.js:1826:3)
You had missed several things here
You need to initialize angular module to make your controller & all other components available by doing module('myApp.contact') in your before each so that Error: [ng:areq] Argument 'contactCtrl' is not a function, got undefined will went away.
Then inside your Assert statement of test you should use scope object instead of controller(you could use controller when your properties are bounded to this)
Don't forget to refer contactCtrl.js & ui-router.js on page.
expect(scope.contact.name).toEqual('John Doe');
Code
describe('myApp.contact module tests', function () {
var scope, createController;
beforeEach(module('myApp.contact')); //1st change
beforeEach(inject(function ($rootScope, $controller) {
scope = $rootScope.$new();
createController = function () {
return $controller('contactCtrl', {
'$scope': scope
});
};
}));
it('contact name is John Doe', function () {
var controller = createController();
expect(scope.contact.name).toEqual('John Doe'); //2nd change
});
});

Angular Karma Test getting “TypeError: 'undefined' is not a function”

Controller
dashboardApp.controller('ExecutiveController', ['$scope', 'ExecutiveService',
function ($scope, executiveService) {
executiveService.getDashboardData().then(
function success(response) {
$scope.productsInfo = response.data;
}, function error(reason) {
console.log(reason);
});
} ]);
Test case for Controller
'use strict';
describe('ExecutiveController', function () {
var scope, ctrl, mockService, $timeout;
beforeEach(module('do.dashboard'));
beforeEach(inject(function ($rootScope, $controller, $q, _$timeout_) {
mockService = jasmine.createSpyObj('ExecutiveService', ['getDashboardData']);
scope = $rootScope.$new();
$timeout = _$timeout_;
mockService.getDashboardData.andReturn($q.when(
[{Products:{Name:'Resource ',measure:'59',Work:'60'}}]
));
ctrl = $controller('ExecutiveController', {
$scope: scope,
ExecutiveService: mockService,
});
}));
it('controller should not be null', function () {
expect(ctrl).not.toBe(null);
});
it('should call the service method and set the scope data', function () {
expect(mockService.getDashboardData).toHaveBeenCalled();
$timeout.flush();
expect(scope.productsInfo.Products.Name).toEqual('Resource');
expect(scope.productsInfo.products.measure).toEqual(59);
});
});
Here when i run it in karma runner it shows error as Angular Karma Test getting “TypeError: 'undefined' is not a function” and it gives the message which is present in the it method
You have the wrong syntax for Jasmine 2.0 - it should be
mockService.getDashboardData.and.returnValue
not
mockService.getDashboardData.andReturn
http://jsfiddle.net/xqa41at0/

Karma error Argument 'Controller' is not a function, got undefined

I got a problem when I tried to test my controller. When I run my test I got an error
Error: [ng:areq] Argument 'MainCtrl' is not a function, got undefined http://errors.angularjs.org/1.3.8/ng/areq?p0=MainCtrl&p1=not%20a%20function%2C%20got%20undefined
at assertArg (/Users/tetianachupryna/project/bower_components/angular/angular.js:1577)
at assertArgFn (/Users/tetianachupryna/project/bower_components/angular/angular.js:1588)
at /Users/tetianachupryna/project/bower_components/angular/angular.js:8418
at /Users/tetianachupryna/project/src/spec/controllers/main-controller.spec.js:11
at /Users/tetianachupryna/project/src/spec/controllers/main-controller.spec.js:17
at /Users/tetianachupryna/project/node_modules/karma-jasmine/lib/adapter.js:184
at http://localhost:9877/karma.js:185
at http://localhost:9877/context.html:51
I know that SO is full of similar questions. But I'm a total null in Angular and JS in general, so those answers didn't help me. From similar questions on SO I discovered that my problem is in wrong definition of the controller but I still can't figure out what I did wrong. I've stack and I'm begging for your help.
First of all here is my src/app/index.js file where my module is defined
var app = angular.module('myModule', [
'ngAnimate',
'ngSanitize',
'ngResource',
'ui.router',
'pascalprecht.translate',
'thing1',
'thing2']);
Here is src/app/controllers/main-controller.js
angular.module('myModule').controller('MainCtrl', [
'$scope',
'$state',
function ($scope, $state) {
$scope.state = $state;
//***
$scope.isBigStep = function isBigStep() {
return $state.$current.step == 3;
};
}]);
And finally this a file with the test src/spec/controllers/main-controller.spec.js
describe('MainCtrl', function() {
var scope, $state, createController;
beforeEach(inject(function ($rootScope, $controller) {
scope = $rootScope.$new();
createController = function() {
return $controller('MainCtrl', {
'$scope': scope
});
};
}));
it('should make 3 as current step', function() {
var controller = createController();
expect(scope.isBigStep()).toBe(true);
});
});
In karma config I have all those files
files: [
'bower_components/angular/angular.js',
'bower_components/angular-mocks/angular-mocks.js',
'src/app/index.js',
'src/app/controllers/*.js',
'src/spec/controllers/*.js'
],
For run my test I use karma-runner plugin in RubyMine.
I'd be thankful for any help!
What you are missing is to add the module in the beforeEach hook for test setup. Otherwise the controller will not be found. So add beforeEach(module('myModule')).
describe('MainCtrl', function() {
var scope, $state, createController;
beforeEach(module('myModule')); //<--- Hook module
beforeEach(inject(function ($rootScope, $controller) {
scope = $rootScope.$new();
createController = function() {
return $controller('MainCtrl', {
'$scope': scope
});
};
}));
it('should make 3 as current step', function() {
var controller = createController();
expect(scope.isBigStep()).toBe(true);
});
});

How to test scope values after service call http.get

I am trying to write a unit test to test that tests a factory that performs a http.get and then tests the scope bindings.
The factory is called within my controller.
Here's a plunker showing my http.get: http://plnkr.co/edit/VqUSeTiEj3MP37tAXKad?p=preview
Ctrl:
app.controller('MainCtrl', function($scope, $http, factoryGetJSONFile) {
$scope.name = 'World';
factoryGetJSONFile.getMyData(function(data) {
$scope.Addresses = data.Addresses.AddressList;
$scope.People = data.Names.People;
$scope.Country = data.Country;
});
});
Test:
describe('with httpBackend', function () {
var app;
beforeEach(function () {
app = angular.mock.module('plunker')
});
describe('MyCtrl', function () {
var scope, ctrl, theService, httpMock;
beforeEach(inject(function ($controller, $rootScope, factoryGetJSONFile, $httpBackend) {
httpMock = $httpBackend;
scope = $rootScope.$new();
ctrl = $controller('MyCtrl', {
$scope: scope,
factoryGetJSONFile: factoryGetJSONFile,
$httpBackend: httpMock
});
}));
it("should make a GET call to data.json", function () {
console.log("********** SERVICE ***********");
httpMock.expectGET("data.json?").respond(data);
console.log(data.Addresses);
console.log(data.Names);
console.log(data.Country);
//expect(factoryGetJSONFile.getMyData()).toBeDefined();
httpMock.flush();
});
})
});
The test for the http.get seems ok, but when i try logging the reponse (data), an error occurs.
UPDATE:
When i try to log the call via:
console.log(httpMock.expectGET("data.json?").respond(data));
Undefined is displayed.

Categories

Resources