Testing Angular Modules / Ionic Project

Question

I have a very simple controller that looks like this.

timeInOut.controller('timeInOutController', function($scope, $filter, $ionicScrollDelegate){ ... }); 

Whenever I try to create a unit test for it like this ...

 (function() { 'use strict'; var scope, controller, filter; describe('timeInOutController', function () { beforeEach(module('common.directives.kmDateToday')); beforeEach(inject(function ($rootScope, $controller, $filter) { scope = $rootScope.$new(); filter = $filter; controller = $controller('timeInOutController', { $scope: scope }); })); describe('#date setting', function(){ ... }); }); })(); 

I get an error message:

[$ injector: unpr] Unknown provider: $ ionicScrollDelegateProvider <- $ ionicScrollDelegate

Obviously, in my example here I am not trying to insert $ionicScrollDelegate into the test, because I tried this with any number of methods without success and I don’t know what unsuccessful attempt to include.

Also in my karma.conf.js file I include the ionic.bundle.js and angular-mocks.js .

I can successfully unit test something that does not use anything in it, and therefore I know that my test environment is configured correctly, the problem is that it injects everything related to the ion exchanger.

Answer 1

You need to pass all the parameters if you are going to instantiate your controller via angular. By adding the parameters that you tell angular every time you create one of these controllers, I need it because I am dependent on them.

So my suggestion is to mock some representation of these dependencies and introduce them when creating the controller. They should not (and should not be) actual services for your unit tests. Jasmine gives you the ability to create spy objects that you can enter so that you can check the behavior of this device.

 (function() { 'use strict'; var scope, controller, filter, ionicScrollDelegate; describe('timeInOutController', function () { beforeEach(module('common.directives.kmDateToday')); beforeEach(inject(function ($rootScope, $controller, $filter) { scope = $rootScope.$new(); filter = $filter; // func1 and func2 are functions that will be created as spies on ionicScrollDelegate ionicScrollDelegate = jasmine.createSpyObj('ionicScrollDelegate', ['func1', 'func2'] controller = $controller('timeInOutController', { $scope: scope, $filter: filter, $ionicScrollDelegate: ionicScrollDelegate }); })); describe('#date setting', function(){ ... }); }); })(); 

Learn more about spies through the jasmine documentation.

Answer 2

You need to create mock objects for all the dependencies used by your controller.

Take this controller as an example:

 angular.module('app.module', []) .controller('Ctrl', function($scope, $ionicLoading) { $ionicLoading.show(); }); 

Here you use the $ionicLoading service, so if you want to test this controller, you need to make fun of this object by specifying the methods that you use in the controller :

 describe('Test', function() { // Mocks var $scope, ionicLoadingMock; var ctrl; beforeEach(module('app.module')); beforeEach(function() { // Create $ionicLoading mock with `show` method ionicLoadingMock = jasmine.createSpyObj('ionicLoading', ['show']); inject(function($rootScope, $controller) { $scope = $rootScope.$new(); ctrl = $controller('Ctrl', { $scope: $scope, $ionicLoading: ionicLoadingMock }); }); }); // Your test goes here it('should init controller for testing', function() { expect(true).toBe(true); }); });