Angular injecting $rootScope in provider - javascript

I cannot access $rootScope inside of a provider.I looked lot of angular other modules implementations. it is the same as how i implemented.
What is wrong?
it tried urload as a separate function(similar to other getValue function) it did not work
Error is $emit is undefined
define(['angularAMD'], function () {
var contextServiceModule = angular.module('contextService', []);
var contextService = function () {
var context = {};
this.$get = ['$rootScope', function ($rootScope) {
console.log($rootScope);
return function (){
return {
init: init,
getValue: getValue,
setValue: setValue,
urlLoad: function () {
$rootScope.$emit('onInit', {});/// error here
}
};
};
}];
this.init = function () {
return context;
};
this.getValue = function (key) {
var value = context[key] ? context[key] : null;
return value;
};
this.setValue = function (key, value) {
context[key] = value;
};
}
contextServiceModule.provider('contextService', contextService);
});

You can't inject $rootScope into the provider $get function because it isn't yet available. However, you can inject it manually when the function is called.
this.$get = ['$injector', function ($injector) {
return function (){
return {
init: init,
getValue: getValue,
setValue: setValue,
urlLoad: function () {
var $rootScope = $injector.get('$rootScope');
console.log($rootScope);
$rootScope.$emit('onInit', {});/// error here
}
};
};
}];

Angular providers are created during the configuration phase and $rootScope isn't available until the app run phase. Here are a couple Angular resources on it and a similar question:
https://docs.angularjs.org/guide/module
https://docs.angularjs.org/guide/providers
https://stackoverflow.com/a/10489658/3284644

That's how i was getting $rootScope to broadcast messages from React.js to Angular.
In case if your ng-view isn't located in body, use yours instead.
function $broadcast(event, args]) {
angular.element('body').injector().invoke([
'$rootScope',
'$timeout',
($rootScope, $timeout) =>
{
args.unshift(event);
$timeout(() => {
$rootScope.$broadcast.apply($rootScope, args);
});
}
]);
}
Got it from here:
https://www.bimeanalytics.com/engineering-blog/you-put-your-react-into-my-angular/

!! IMPORTANT: The below solution does not work when minified. For this you need to do dependency injection, but than $get cannot be called during config phase
app.provider('someHandler', function() {
this.$get = function ($rootScope) {
function doBroadcast(words) {
$rootScope.$broadcast(words);
}
return {
shout: function (words) {
doBroadcast(words);
}
}
}
});
If you need to use in the config phase you can do the following
app.config(['someHandlerProvider', function(someHandlerProvider) {
someHandlerProvider.$get().shout('listen up');
}
During run you can just do someHandler.shout('listen up')

Related

TypeError: undefined is not a function in Karma / Jasmine test on init function in Angular factory

I have simple factory in AngularJS:
function usersListDataProviderFactory(UserResource, $q) {
var usersListDataProvider = {},
queryParams = {};
init(queryParams);
return {
initDataProvider: function (queryParams) {
init(queryParams);
},
getDataProviderPromise: function () {
return usersListDataProvider;
}
};
function init(queryParams) {
var defer = $q.defer();
UserResource.getUsers(queryParams).then(function (response) {
defer.resolve(response);
}, function (error) {
defer.reject(error);
});
usersListDataProvider = defer.promise;
}
}
I have written tests in Karma / Jasmine that pass after commenting the lines:
init(queryParams);
When I restore an automatic function call I get a message:
TypeError: undefined is not a function (evaluating 'UserResource.getUsers(queryParams).then')
I know the problem is the configuration of the test and the moment the spy was created, but I have no idea how to solve the problem. Current test configuration:
describe('Service: UsersListDataProvider', function () {
var usersListDataProvider,
userResourceStub,
deferred,
$rootScope,
$q;
beforeEach(function () {
module('UsersList');
});
beforeEach(function () {
userResourceStub = {
getUsers: function (queryParams) {
return queryParams;
}
};
module(function ($provide) {
$provide.value('UserResource', userResourceStub);
});
});
beforeEach(inject(function (_UsersListDataProvider_, _$rootScope_, _$q_) {
usersListDataProvider = _UsersListDataProvider_;
$rootScope = _$rootScope_;
$q = _$q_;
deferred = _$q_.defer();
}));
beforeEach(function () {
spyOn(userResourceStub, 'getUsers').and.returnValue(deferred.promise);
});
describe('Method: initDataProvider', function () {
it('');
});
});
Any idea ?

Issue with jasmine spies call through

I am having trouble calling through to the actual implementation and I am getting this error:
TypeError: undefined is not an object (evaluating 'GitUser.GetGitUser('test').then') ...
Here are my codes:
app.controller('HomeController', ['$scope', 'GitUser', function ($scope, GitUser) {
$scope.name = "user";
GitUser.GetGitUser('test').then(function (data) {
console.log(data);
if (data) {
$scope.name = data;
}
});
}]);
app.factory('GitUser', function ($http) {
return {
GetGitUser: function (username) {
return $http.get('https://api.github.com/users/' + username)
.then(function success(response) {
return response.data.login;
});
}
};
});
Here is my unit test:
describe('HomeController Unit Test', function () {
var $controllerConstructor, scope;
beforeEach(module("AngularApp"));
beforeEach(inject(function ($controller, $rootScope) {
$controllerConstructor = $controller;
scope = $rootScope.$new();
}));
it('should test if scope.name is test', function () {
// Act
GitUser = {
GetGitUser: function () { }
};
spyOn(GitUser, "GetGitUser").and.callThrough();
GitUser.GetGitUser();
$controllerConstructor('HomeController', {
'$scope': scope,
'GitUser': GitUser
})
// Assert
expect(GitUser.GetGitUser).toHaveBeenCalled();
expect(scope.name).toBe('test');
});
});
The problem is a bit more complex than just a missing inject ...
Here's an adjusted test:
https://plnkr.co/edit/ZMr0J4jmLPtDXKpRvGBm?p=preview
There are a few problems:
1) you are testing a function that returns a promise - so you need to also mock it that way (by using return $q.when(..) for example).
2) you are trying to test code that happens when your controller is created - the
GitUser.GetGitUser('test').then(function (data) {
console.log(data);
if (data) {
$scope.name = data;
}
});
should be wrapped in a function instead:
function init() {
GitUser.GetGitUser('test').then(function (data) {
console.log(data);
if (data) {
$scope.name = data;
}
});
}
and then make that available on your scope:
scope.init= init;
Then in your test call the function and verify your assertions. If you don't wrap it in a function it won't be testable.
Also - the mocking and the callThrough thing ... as you are testing the controller (and not the service) you can use callFake instead - the callFake function can return a Promise with a value (the one that you want to verify later) - then you can ensure that the controller part of the puzzle works.
var name = 'test';
// instead of trying to mock GitUser you can just callFake and be sure to return a promise
spyOn(GitUser, "GetGitUser").and.callFake(function() {
return $q.when(name);
});
I hope this all makes sense - the plunker should make things clear - I will add some more comments there.
I think you just miss something here
beforeEach(inject(function ($controller, $rootScope, _GitUser) {
$controllerConstructor = $controller;
scope = $rootScope.$new();
GitUser = _GitUser;
}));

Unit test inject dependency like controller for service in angularJS

Lets see, we have this according to:https://docs.angularjs.org/guide/unit-testing
describe('PasswordController', function() {
beforeEach(module('app'));
var $controller;
beforeEach(inject(function(_$controller_){
// The injector unwraps the underscores (_) from around the parameter names when matching
$controller = _$controller_;
}));
describe('$scope.grade', function() {
it('sets the strength to "strong" if the password length is >8 chars', function() {
var $scope = {};
var controller = $controller('PasswordController', { $scope: $scope });
$scope.password = 'longerthaneightchars';
$scope.grade();
expect($scope.strength).toEqual('strong');
});
});
});
now i am making service and factory, is there any equivalent to ____$controller____ for service and factory? so i can inject it with something else like:
var controller = $controller('PasswordController', { $scope: $scope });
and change the inner functions of the dependency so i can test it, or is there any better approach?
Edit: to make question more clear
here is the example of the question:
i have this:
var app = angular.module("app").service("MyService",["$scope","$http",function($scope,$http){
this.myFunction = function(){
$http.get("/myApi/1");
}
}]);
how do i use the equivalent of
var controller = $controller('PasswordController', { $scope: $scope });
so i can inject $scope and $http with something else to myService?
You can't inject dependencies to factories or services on the go, but you can mock the dependencies with your custom objects and have angular substitute them automatically. You can use $provide for that. Here is an example:
angular.module('app').service('some', function(dependencyService) {
});
When testing:
beforeEach(module(function($provide) {
$provide.value('dependencyService', {
});
}));
After doing a workarround, i found out from https://www.sitepoint.com/unit-testing-angularjs-services-controllers-providers/ about the service. i tested out the tutorial here and here is the test script:
(function () {
angular.module('services', [])
.service('sampleSvc', ['$window', 'modalSvc', function ($window, modalSvc) {
this.showDialog = function (message, title) {
if (title) {
modalSvc.showModalDialog({
title: title,
message: message
});
} else {
$window.alert(message);
}
};
}]);
describe("Testing service", function () {
var mockWindow, mockModalSvc, sampleSvcObj;
beforeEach(module(function ($provide) {
$provide.service('$window', function () {
this.alert = jasmine.createSpy('alert');
});
$provide.service('modalSvc', function () {
this.showModalDialog = jasmine.createSpy('showModalDialog');
});
}, 'services'));
beforeEach(inject(function ($window, modalSvc, sampleSvc) {
mockWindow = $window;
mockModalSvc = modalSvc;
sampleSvcObj = sampleSvc;
}));
it('should show alert when title is not passed into showDialog', function () {
var message = "Some message";
sampleSvcObj.showDialog(message);
expect(mockWindow.alert).toHaveBeenCalledWith(message);
expect(mockModalSvc.showModalDialog).not.toHaveBeenCalled();
});
it('should show modal when title is passed into showDialog', function () {
var message = "Some message";
var title = "Some title";
sampleSvcObj.showDialog(message, title);
expect(mockModalSvc.showModalDialog).toHaveBeenCalledWith({
message: message,
title: title
});
expect(mockWindow.alert).not.toHaveBeenCalled();
});
});
})();
and i try my own test script:
(function () {
describe("Testing service", function () {
var mockHttp, mockCookies, mockApi;
beforeEach(function () {
module(function ($provide) {
$provide.service('$http', function () {
this.defaults = {
headers: {
common: {
}
}
};
});
$provide.service('$cookies', function () {
});
});
module('timesheet');
});
beforeEach(inject(function ($http, $cookies, APIService) {
mockHttp = $http;
mockCookies = $cookies;
mockApi = APIService;
}));
it('Test Service', function () {
});
});
})();
apparently in somewhere in my code, there is an app.run which inside do the
$http.defaults.headers.common.Authorization = 'Bearer ' + $cookies.get('sessionToken');
and causes the error the moment i inject the $http with something else because headers not defined, i thought it was from my own test script because they are using same name, but apparently this is the one causing problem.
So, actually the moment we load in testing mode, the angularjs still do the whole running of application, in which i forgot about this one.

How to spy on anonymous function using Jasmine

I'm using Jasmine to test my angular application and want to spy on an anonymous function.
Using angular-notify service https://github.com/cgross/angular-notify, I want to know whether notify function have been called or not.
Here is my controller:
angular.module('module').controller('MyCtrl', function($scope, MyService, notify) {
$scope.isValid = function(obj) {
if (!MyService.isNameValid(obj.name)) {
notify({ message:'Name not valid', classes: ['alert'] });
return false;
}
}
});
And here is my test:
'use strict';
describe('Test MyCtrl', function () {
var scope, $location, createController, controller, notify;
beforeEach(module('module'));
beforeEach(inject(function ($rootScope, $controller, _$location_, _notify_) {
$location = _$location_;
scope = $rootScope.$new();
notify = _notify_;
notify = jasmine.createSpy('spy').andReturn('test');
createController = function() {
return $controller('MyCtrl', {
'$scope': scope
});
};
}));
it('should call notify', function() {
spyOn(notify);
controller = createController();
scope.isValid('name');
expect(notify).toHaveBeenCalled();
});
});
An obviously return :
Error: No method name supplied on 'spyOn(notify)'
Because it should be something like spyOn(notify, 'method'), but as it's an anonymous function, it doesn't have any method.
Thanks for your help.
Daniel Smink's answer is correct, but note that the syntax has changed for Jasmine 2.0.
notify = jasmine.createSpy().and.callFake(function() {
return false;
});
I also found it useful to just directly return a response if you only need a simple implementation
notify = jasmine.createSpy().and.returnValue(false);
You could chain your spy with andCallFake see:
http://jasmine.github.io/1.3/introduction.html#section-Spies:_andCallFake
//create a spy and define it to change notify
notify = jasmine.createSpy().andCallFake(function() {
return false;
});
it('should be a function', function() {
expect(typeof notify).toBe('function');
});
controller = createController();
scope.isValid('name');
expect(notify).toHaveBeenCalled();

Testing an Angular Promise with Jasmine

The following test keeps failing and I can't figure out why? I am trying to figure out how to test defereds/promises with Jasmine.
Error
Expected undefined to be 'Resolved Data'.
Test
describe('Queued Repository', function () {
var ctrl,
rootScope,
scope,
service;
beforeEach(function () {
module('testApp');
inject(function ($rootScope, $controller, TestSrvc) {
rootScope = $rootScope;
scope = $rootScope.$new();
service = TestSrvc;
});
});
afterEach(inject(function ($rootScope) {
$rootScope.$apply();
}));
it('test something', function () {
expect(service.calculate(1, 5)).toBe(6);
});
it('resolves promises', function () {
var result;
service.getPromise().then(function (data) {
result = data;
});
rootScope.$apply();
expect(result).toBe('Resolved Data');
});
});
Service
var app = angular.module('testApp', []);
app.service('TestSrvc', ['$q', '$timeout', '$http', function ($q, $timeout, $http) {
return {
getPromise: function () {
var d = $q.defer();
$timeout(function () {
d.resolve('Defered Result');
}, 5000);
return d.promise;
},
getSomething: function () {
return "Test";
},
calculate: function (x, y) {
return x + y;
}
}
}]);
Try calling $timeout.flush() before expect(result).toBe('Resolved Data');.
In your example, you will need to call both $timeout.flush() AND $rootScope.$apply().
Explanation: $timeout.flush() will force your $timeout in the service to run immediately. Your service will then call 'resolve' - but the promise.then() will not be called until the subsequent digest cycle; therefore you will need to call $rootScope.$apply() to propagate any 'resolves' and 'watches' - which will occur synchronously.
NOTE: In Jasmine, ensure that your promise.then() function appears BEFORE your call to $rootScope.$apply otherwise it will not fire the promise.then() function. (I haven't figured out why this is the case in Jasmine.)

Categories