Angular UI-Router verify onEnter in test - javascript

I am in the middle of writing some tests for my application (AngularJS).
As we speak I encountered a problem with verifying if onEnter property of my state was called correctly.
Let me share some code with You
describe('Midway :: routesTest', function () {
var $state,
$rootScope,
$injector,
navigationService;
beforeEach(function () {
module('springatom', function ($provide) {
$provide.value('navigationService', navigationService = {});
});
states.configure();
inject(function (_$rootScope_, _$state_, _$injector_, $templateCache) {
$rootScope = _$rootScope_;
$state = _$state_;
$injector = _$injector_;
// We need add the template entry into the templateCache if we ever
// specify a templateUrl
$templateCache.put('/static/sa/views/home/home.html', '');
$templateCache.put('/static/sa/tpls/grid.html', '');
});
navigationService.getNavigationModel = jasmine.createSpy('getNavigationModel').and.returnValue([]);
navigationService.setNavigatorModel = jasmine.createSpy('setNavigatorModel').and.callFake(function (arg) {
});
});
it("should have a working home route", inject(function () {
var homeState = $state.get('home');
expect(homeState).toBeDefined();
expect($state.href(homeState)).toEqual('#/sa');
$rootScope.$apply(function () {
$state.go(homeState);
});
var current = $state.current;
expect($injector.invoke(current.resolve.actionModel)).toEqual([]);
expect($injector.invoke(current.onEnter)).toHaveBeenCalled();
}));
});
The failing assertion is the last one I am trying to verify therefore mentioned onEnter.
Error is:
Error: [$injector:unpr] Unknown provider: actionModelProvider <- actionModel
http://errors.angularjs.org/1.3.8/$injector/unpr?p0=actionModelProvider%20%3C-%20actionModel
As it is expected Angular tries to resolve actionModel which is the property from the resolve.
I dont know what I might be doing wrong here, so any help will be gladly welcomed.
I am attaching the state configuration as well:
define(
[
'views/home/homeController',
'views/home/recentlyUpdatedController',
// angular deps
'services/navigation'
],
function homeState(homeController, recentlyUpdatedController) {
return {
name : 'home',
definition: {
url : '/sa',
templateUrl: '/static/sa/views/home/home.html',
resolve : {
actionModel: function (navigationService) {
return navigationService.getNavigationModel('main.navigation')
}
},
onEnter : function (actionModel, navigationService) {
navigationService.setNavigatorModel('main.navigation');
},
views : {
'': {
controller : recentlyUpdatedController,
templateUrl: '/static/sa/tpls/grid.html'
}
}
}
}
}
);

Related

Karma-Jasmine: How to test ionicModal?

THE SITUATION:
In my Ionic app I am testing the correct opening of a modal.
I have made several attempts, but i am getting the following error:
TypeError: Cannot read property 'then' of undefined
THE FUNCTION:
$scope.open_register_modal = function()
{
$ionicModal.fromTemplateUrl('templates/project_register.html', {
scope: $scope
}).then(function(modal) {
$scope.modal_register = modal;
$scope.modal_register.show();
});
};
THE TEST:
describe('App tests', function() {
beforeEach(module('my_app.controllers'));
beforeEach(inject(function(_$controller_, _$rootScope_)
{
$controller = _$controller_;
$rootScope = _$rootScope_;
$scope = _$rootScope_.$new();
$ionicModal =
{
fromTemplateUrl: jasmine.createSpy('$ionicModal.fromTemplateUrl'),
then : function(modal){} // <--- attempt
};
var controller = $controller('MainCtrl', { $scope: $scope, $rootScope: $rootScope, $ionicModal: $ionicModal });
}));
describe('Modal tests', function()
{
it('should open register modal', function()
{
$scope.open_register_modal();
expect($ionicModal).toHaveBeenCalled();
});
});
});
ATTEMPTS:
These are some of the attempts to initialize $ionicModal:
1.
$ionicModal =
{
fromTemplateUrl: jasmine.createSpy('$ionicModal.fromTemplateUrl'),
then : function(modal){}
};
2.
$ionicModal =
{
fromTemplateUrl: jasmine.createSpy('$ionicModal.fromTemplateUrl'),
then: jasmine.createSpy('$ionicModal.then')
};
3.
$ionicModal =
{
fromTemplateUrl: jasmine.createSpy('$ionicModal.fromTemplateUrl'),
then: jasmine.createSpy('$ionicModal.fromTemplateUrl.then')
};
4.
$ionicModal = jasmine.createSpyObj('$ionicModal', ['show', 'close','fromTemplateUrl']);
But they all give the same error:
TypeError: Cannot read property 'then' of undefined
THE QUESTION:
How can i pass the .then method inside the test?
How can i properly test ionicModal?
I don't know anything about ionic, but I think your mistake is expecting that the method then is part of it. The code
$ionicModal.fromTemplateUrl('templates/project_register.html', {
scope: $scope
}).then(function(modal) {
$scope.modal_register = modal;
$scope.modal_register.show();
});
can be refactor to:
var temp=$ionicModal.fromTemplateUrl(
'templates/project_register.html',
{scope: $scope});
temp.then(function(modal) {
$scope.modal_register = modal;
$scope.modal_register.show();
});
so the method then is part of the object returned by the call to fromTemplateUrl
A solution could be something like:
function fakeTemplate() {
return { then:function(){}}
}
$ionicModal = {
fromTemplateUrl: jasmine.createSpy('$ionicModal.fromTemplateUrl').and.callFake(fakeTemplate)
};

Angular Jasmine UI router inject resolve value into test

In my Angular app, UI router resolves a promise into the controller. When trying to test this controller, Karma is complaining about an unknown provider. How do I inject a fake object into the test to represent this resolve object.
My app's code looks something like:
angular.module('myapp')
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('tab.name', {
...
resolve: {
allTemplates: function(Templates) {
return Templates.all().then(function(templates) {
return templates;
});
}
}
})
})
.controller('QueriesCtrl', function(allTemplates, UserQuery) {
var vm = this;
vm.queries = allTemplates;
vm.goToUrl = function(index, data) {
var processedUrl = UserQuery.process(data, vm.queryTyped[index]);
UserQuery.goToUrl(processedUrl);
};
});
When trying to run tests I get the error
Unknown provider: allTemplatesProvider <- allTemplates <- QueriesCtrl
I've tried creating a spy and injecting it, but this does not work. Here's my test at the moment:
describe('Unit: queriesCtrl', function() {
var controller,
scope,
UserQuery;
beforeEach(function() {
module('myapp');
inject(function($injector) {
UserQuery = $injector.get('UserQuery');
allTemplates = jasmine.createSpyObj('allTemplates', [{a:1}, {a:2}, {b:3}]);
});
});
describe('goToUrl', function() {
beforeEach(inject(function ($rootScope, $controller) {
scope = $rootScope.$new();
controller = $controller('QueriesCtrl as ctrl', {
'$scope': scope
});
}));
it('should call UserQuery.process()', function() {
spyOn(UserQuery, 'process');
scope.ctrl.goToUrl();
expect(UserQuery.process).toHaveBeenCalled();
});
});
});
Since there is no route involved in unit test you would have to inject the allTemplates as a normal object with $controller function. Can you try:
controller = $controller('QueriesCtrl as ctrl', {
'$scope': scope,
'allTemplates':allTemplates
});
Else you can use the $provide API to create a dummy service.
module(function ($provide) {
$provide.value("allTemplates", {[{a:1}, {a:2}, {b:3}]});
Do it first thing in your beforEach block.

Testing uiRouter with requirejs

I have been stuck on this issue for a bit and have not had success with any other questions on here regarding testing uiRouter with requirejs. I have a fairly basic controller setup that uses the $state.go to transition between states once a button is clicked.
runsController.js
define([],
function() {
"use strict"
var runsController = function($scope, $window, $http, $state) {
function getRuns() {
$http.get($window.apiLinks.runs).success(function(data) {
$scope.runs = data.objects;
}).error(function(data) {
console.error();
console.error(data);
});
}
getRuns();
$scope.refresh = getRuns;
$scope.createRun = function() {
//$state.go('createRun');
}
return ["$scope", "$window", "$http", "$state", runsController];
});
The controller is added to an app that depends on uiRouter.
app.js
define(["angular", "js/controllers/runsController", "js/router", "uiRouter"],
function(angular, runsController, router) {
'use strict'
var appName = "myApp";
var app = angular.module(appName, ["ui.router"]);
app.config(router);
app.controller("runsController", runsController);
function getName() {
return appName;
}
return {
app : app,
getName : getName
};
});
router.js
define(["./controllers/runsController"],
function(runsController){
var routes = function($stateProvider, $urlRouterProvider) {
// For any unmatched url, redirect to /runs
$urlRouterProvider.otherwise("/runs");
// Set up the states
$stateProvider
.state('runs', {
url: "/runs",
templateUrl: "partials/runs.html",
controller: "runsController"
})
.state('createRun', {
url: "/createRun",
templateUrl: "partials/runCreator.html"
});
};
return ["$stateProvider", "$urlRouterProvider", routes];
});
Here's the test I have setup for this controller:
define(["angular", "angularMocks", "js/app", "js/controllers/runsController"],
function(angular, mocks, app, runsController) {
'use strict'
describe('runsController Unit Tests', function() {
var mockApp, scope, httpBackend, objects, state;
objects = [
{rid : 1, filename : "myFile.txt", exitCode : 0},
{rid : 2, filename : "test.zip", exitCode : 0},
{rid : 3, filename : "test2.tar", exitCode : 0}
];
beforeEach(function() {
mockApp = angular.module(app.getName());
});
beforeEach(inject(function ($rootScope, $controller, $httpBackend, $http, $state) {
scope = $rootScope.$new();
window.apiLinks = {"runs" : "/mock/api/runs"};
httpBackend = $httpBackend;
state = $state;
httpBackend.when("GET", "/mock/api/runs").respond({
"objects" : objects
});
$controller(runsController[4], {
$scope : scope,
$window : window,
$http : $http,
$state : $state
});
httpBackend.flush();
}));
it("Get state working in test environment", function() {
});
it("Test that controller automatically gets the runs", function() {
// Because of the way our controller files are setup, we have to specify the
// last element in the array instead of just
expect(scope.runs.length).toBe(3);
});
});
This is currently giving me an error message of: Error: [$injector:unpr] Unknown provider: $stateProvider <- $state
From what I have been reading I believe this means I need to be injecting the dependencies that the controller needs in order to run state, but if I am using the app before every test I run then the dependencies should be in there when the .config() is done right? Can anybody help me figure out what it is I am not seeing with this?
Thanks in advance!
I had this same issue this is what I came up with.
This is very important:
karma.conf.js
{
pattern: 'ROOT/TO/YOUR/angular-ui-router/release/angular-ui-router.js',
included: false
},
test-main.js : This is your karma - require - config file
paths: {
// External libraries
'angular': '/base/PATH/TO/YOUR/angular/angular',
'angularMocks': '/base/PATH/TO/YOUR/angular-mocks/angular-mocks',
'uiRouter' : '/base/PATH/TO/YOUR/angular-ui-router/release/angular-ui-router',
.....
/base/ + your path
DO THE SHIMMY
shim: {
'angular': { 'exports': 'angular' },
'angularMocks': { deps: ['angular'], 'exports': 'angular.mock' },
'uiRouter' : {deps: ['angular'], 'exports' : 'uiRouter'},
Now we are inside out test.
define the module
define([
'angular',
'angularMocks',
'uiRouter',
.....
Now when you set up your beforeEach
BeforeEach(inject(function ($injector){
$state = $injector.get('$state');
....
Hope this helps you out.

Angular ui router unit testing (states to urls)

I'm having some trouble unit testing the router in my application, which is built on the Angular ui router. What I want to test is whether state transitions change the URL appropriately (there will be more complicated tests later, but this is where I'm starting.)
Here is the relevant portion of my application code:
angular.module('scrapbooks')
.config( function($stateProvider){
$stateProvider.state('splash', {
url: "/splash/",
templateUrl: "/app/splash/splash.tpl.html",
controller: "SplashCtrl"
})
})
And the testing code:
it("should change to the splash state", function(){
inject(function($state, $rootScope){
$rootScope.$apply(function(){
$state.go("splash");
});
expect($state.current.name).to.equal("splash");
})
})
Similar questions on Stackoverflow (and the official ui router test code) suggest wrapping the $state.go call in $apply should be enough. But I've done that and the state is still not updating. $state.current.name remains empty.
Been having this issue as well, and finally figured out how to do it.
Here is a sample state:
angular.module('myApp', ['ui.router'])
.config(['$stateProvider', function($stateProvider) {
$stateProvider.state('myState', {
url: '/state/:id',
templateUrl: 'template.html',
controller: 'MyCtrl',
resolve: {
data: ['myService', function(service) {
return service.findAll();
}]
}
});
}]);
The unit test below will cover testing the URL w/ params, and executing the resolves which inject its own dependencies:
describe('myApp/myState', function() {
var $rootScope, $state, $injector, myServiceMock, state = 'myState';
beforeEach(function() {
module('myApp', function($provide) {
$provide.value('myService', myServiceMock = {});
});
inject(function(_$rootScope_, _$state_, _$injector_, $templateCache) {
$rootScope = _$rootScope_;
$state = _$state_;
$injector = _$injector_;
// We need add the template entry into the templateCache if we ever
// specify a templateUrl
$templateCache.put('template.html', '');
})
});
it('should respond to URL', function() {
expect($state.href(state, { id: 1 })).toEqual('#/state/1');
});
it('should resolve data', function() {
myServiceMock.findAll = jasmine.createSpy('findAll').and.returnValue('findAll');
// earlier than jasmine 2.0, replace "and.returnValue" with "andReturn"
$state.go(state);
$rootScope.$digest();
expect($state.current.name).toBe(state);
// Call invoke to inject dependencies and run function
expect($injector.invoke($state.current.resolve.data)).toBe('findAll');
});
});
If you want to check only the current state's name it's easier to use $state.transitionTo('splash')
it('should transition to splash', inject(function($state,$rootScope){
$state.transitionTo('splash');
$rootScope.$apply();
expect($state.current.name).toBe('splash');
}));
I realize this is slightly off topic, but I came here from Google looking for a simple way to test a route's template, controller, and URL.
$state.get('stateName')
will give you
{
url: '...',
templateUrl: '...',
controller: '...',
name: 'stateName',
resolve: {
foo: function () {}
}
}
in your tests.
So your tests could look something like this:
var state;
beforeEach(inject(function ($state) {
state = $state.get('otherwise');
}));
it('matches a wild card', function () {
expect(state.url).toEqual('/path/to/page');
});
it('renders the 404 page', function () {
expect(state.templateUrl).toEqual('views/errors/404.html');
});
it('uses the right controller', function () {
expect(state.controller).toEqual(...);
});
it('resolves the right thing', function () {
expect(state.resolve.foo()).toEqual(...);
});
// etc
For a state that without resolve:
// TEST DESCRIPTION
describe('UI ROUTER', function () {
// TEST SPECIFICATION
it('should go to the state', function () {
module('app');
inject(function ($rootScope, $state, $templateCache) {
// When you transition to the state with $state, UI-ROUTER
// will look for the 'templateUrl' mentioned in the state's
// configuration, so supply those templateUrls with templateCache
$templateCache.put('app/templates/someTemplate.html');
// Now GO to the state.
$state.go('someState');
// Run a digest cycle to update the $state object
// you can also run it with $state.$digest();
$state.$apply();
// TEST EXPECTATION
expect($state.current.name)
.toBe('someState');
});
});
});
NOTE:-
For a nested state we may need to supply more than one template. For ex. if we have a nested state core.public.home and each state, i.e. core, core.public and core.public.home has a templateUrl defined, we will have to add $templateCache.put() for each state's templateUrl key:-
$templateCache.put('app/templates/template1.html');
$templateCache.put('app/templates/template2.html');
$templateCache.put('app/templates/template3.html');
Hope this helps. Good Luck.
You could use $state.$current.locals.globals to access all resolved values (see the code snippet).
// Given
$httpBackend
.expectGET('/api/users/123')
.respond(200, { id: 1, email: 'test#email.com');
// When
$state.go('users.show', { id: 123 });
$httpBackend.flush();
// Then
var user = $state.$current.locals.globals['user']
expact(user).to.have.property('id', 123);
expact(user).to.have.property('email', 'test#email.com');
In ui-router 1.0.0 (currently beta) you could try to invoke $resolve.resolve(state, locals).then((resolved) => {}) in the specs. For instance https://github.com/lucassus/angular-webpack-seed/blob/9a5af271439fd447510c0e3e87332959cb0eda0f/src/app/contacts/one/one.state.spec.js#L29
If you're not interested in anything in the content of the template, you could just mock $templateCache:
beforeEach(inject(function($templateCache) {
spyOn($templateCache,'get').and.returnValue('<div></div>');
}

Why simple JasmineJS and AngularJS based unit test not working

I am trying to write a simple test using Jasmine. The test checks if $scope.testFlag is set to false.
Here is my test code
describe('Abc Controller', function() {
var $scope = null;
var ctrl = null;
//you need to indicate your module in a test
beforeEach(module('myApp'));
beforeEach(inject(function($rootScope, $controller) {
$scope = $rootScope.$new();
ctrl = $controller('abcController', {
$scope: $scope
});
}));
// test 1
it('testFlag should be set to False', function() {
expect( $scope.testFlag).toEqual(false);
});
});
But for some reason I get this error:
Error: Unknown provider: ConfigProvider <- Config <- collectionMetaFactory
Here is how my application's app.js looks like which I am including in testRunner.html
var app = angular.module('myApp')
app.constant('Config',
{
baseURL : serviceURL,
httpTimeout : 3600000 // 1 minute
});
app.config(function($logProvider) {
$logProvider.debugEnabled(true);
});
What am I missing?
Here is controller's snippet
app.controller('abcController', function ($scope, $log,abcFactory, Config) {
$scope.testFlag = false;
// more code follows
});
Let me know if you need see more of the application's code (like factory, services and controller)
You haven't provided your test with Config, so it doesn't recognize what Config is and that's why you are getting this error.
A solution would be to inject Config into your test by using the $provide module. Here's how:
describe('Abc Controller', function() {
var $scope = null;
var ctrl = null;
var Config = {
baseURL : 'someURL',
httpTimeout : 3600000 // 1 minute
};
beforeEach(function(){
beforeEach(module('myApp'));
module(function (_$provide_) {
$provide = _$provide_;
$provide.value('Config', Config);
});
});
//you need to indicate your module in a test
beforeEach(inject(function($rootScope, $controller) {
$scope = $rootScope.$new();
ctrl = $controller('abcController', {
$scope: $scope
});
}));
// test 1
it('testFlag should be set to False', function() {
expect( $scope.testFlag).toEqual(false);
});
});
This should run the tests successfully.
Hope this helps others facing a similar problem.

Categories

Resources