I want to know how the "spyOn" function works internally. I read that the 'spyOn' function internally replaces the implementation of the function being spied on. Does it keep the old functionality?
As an example, suppose I wanted to spy on an object that sends data to a server.
describe("A spy", function() {
var object;
spyOn(object, 'sendDataToServer');
object.sendDataToServer('Some Message');
});
In this case, does the message still get sent to the server or does the spy mock it?
The message does not get sent to the server. The way you defined the spy, it will replace the sendDataToServer function whenever it is called in the context of your test case.
You can specify a more elaborate spy, for example when you want to call another function instead:
let mySpy = spyOn(object, 'sendDataToServer').and.callFake((message: string) => {
console.log('I have been called with ' + message);
});
object.sendDataToServer('Some Message'); // -> will call the function defined above and log the message passed
Or if you want to call the actual function:
let mySpy = spyOn(object, 'sendDataToServer').and.callThrough();
object.sendDataToServer('Some Message'); // -> will call the actual function on object
Related
I have a function in my service as:
logError(message: string, stack: string) {
console.log('LoggingService: ' + message);
}
and I want to test this function test case I am writing are as:
it('should be created', inject([LoggerService], (loggerService: LoggerService) => {
expect(loggerService).toBeTruthy();
}));
it('log error should be called', inject([LoggerService], (loggerService: LoggerService) => {
spyOn(loggerService, 'logError');
expect(loggerService.logError).toHaveBeenCalled();
expect(loggerService.logError).toHaveBeenCalledTimes(1);
}));
Problem is when I run tests and I see code coverage it shows that logError function is not covered and also the console.log statement is not covered.
But when I change my approach from spyOn to call the actual method it says there are no expectations and I am not sure what will be the right expectaion in this case?
Any help on recommended approach is appreciated.
spyOn installs a spy onto a method of an existing object but it doesn't invoke that method. Therefore, after installing the spy on a method, you need to call the method under test, which is supposed to invoke the spied/mocked method.
it('log error should be called', inject([LoggerService], (loggerService: LoggerService) => {
spyOn(console, 'log');
const error = 'abc';
loggerService.logError(...);
expect(console.log).toHaveBeenCalledTimes(1);
expect(console.log)toHaveBeenCalledWith(error);
}));
I have a requirement that I need to create a service in Angular 1 and load data with an API call which can be accessed in controllers. I earlier tried by making a API call with $http service and assigning the data to the variable / object. I then injected the service and assigned the variable / object to the controller scope variable / object.
What I observed in the controller event loop is not same as service event loop and controller scope variable / object remains undefined. Later I got a solution to work by returning a promise from the service, and calling the promise in the controller, however I'm new to promises and not able to fully absorb that when I called a promise, I had to pass the function as argument which I think is a callback for the $http API call, but I'm uncertain how it's working under the hood. Can someone explain it?
//service code
this.getuserimages = function(uname) {
console.log("Username in UserImage Service: " + uname);
var promise = $http.get('/api/images/' + uname).then(function(response) {
this.userimages = response.data;
return this.userimages;
});
return promise;
}
// controller code
var userimagespromise = userImageService.getuserimages($routeParams.username);
userimagespromise.then(function(data) {
$scope.userimages = data;
Your code is a Promise chain.
I rewrited your code in a way that this chain is more clear, but the meaning is exactly the same:
$http.get('/api/images/' + uname)
.then(function(response) {
this.userimages = response.data;
return this.userimages;
})
.then(function(images) {
$scope.userimages = images;
});
You can read this flow in this way:
Please get me user images
And then, we they will be available (=> returned from the get and passed to the then function), save them in a variable and return them to the next element of the chain
And then, we they will be available (=> return from the previous promise), set them in the $scope
Please note that the entire flow is asynchronous because every Promise is "an object representing the eventual completion or failure of an asynchronous operation".
You can find more information in the Promise documentation.
I have function getData() which make an ajax call and retrive JSON data. On success i call another function which is marquee() . inside marquee on finish event i call getData() again, But each time getData() when get called, it increases it's request to mentioned file data.php, For example on first call it call once, Second call it request twice, and then twice become 4times,8times and more and more, how to avoid this?!
function getData()
{
$.get('data.php).done(function(response)
{
var data = JSON.parse(response);
if(data.Direction == "left")
{
$(".marquee").html("<span data-direction='"+data.Direction+"'>"+data.Message+"</span>");
}else if(data.Direction == "right"){
$(".marquee").html("<span data- direction='"+data.Direction+"'>"+data.Message+"</span>");
}
});
}
function marquee()
{
$(".marquee").marquee({duration : 10000}).bind("finished",function()
{
getData();
});
}
I hope i was clear... Appreciate each answer.
Every time you are calling marquee function, you are basically binding an event finished on to it. On multiple such function calls, you will have duplicate events. In your code setup, you need to unbind the function before binding it. Something like
$(".marquee").marquee({duration : 10000}).unbind("finished",getData).bind("finished",getData)
Ideally, you should bind only once so you do not have to unbind it again and again.
I'm trying to create a amd module that runs a d3 request (d3.json() in this case) and returns the data from the request. I can't seem to figure out how to make the module wait for the request to finish before it returns the data. As a result I keep getting undefined in my main program when I try to access the data.
define(['app/args'], function(args){
d3.json("resources/waterData.php?stn=" + args.stationID, function (error, data) {
var dataToReturn = {};
//Do some stuff with data
return dataToReturn;
});
});
That is the basic structure of what I'm trying to do. I think the main issue is that the 2nd argument in d3.json is a callback for when the data is loaded, so when I try to return the data, it isn't getting outside the module. I haven't been able to figure out how to get the data from the callback to return it outside the module.
The real issue is that the d3.json function is asynchronous, so you can't just return the processed data from the outside function directly. One way you can work around this is by returning a promise rather than the data itself. You can use the d3.json callback to resolve the promise, and then other modules which depend on the data can register their own callbacks which will run once that promise has been resolved.
For example, if you use jQuery's $.Deferred() you can do the following:
define(['app/args', 'jquery'], function(args, $){
// CREATE DEFERRED OBJECT
var deferred = $.Deferred();
d3.json("resources/waterData.php?stn=" + args.stationID, function (error, data) {
var dataToReturn = {};
//Do some stuff with data
// RESOLVE NOW THAT THE DATA IS READY
deferred.resolve(dataToReturn);
});
// RETURN THE PROMISE
return deferred.promise();
});
Then when you want to use the data, you can require the above module, and register a listener that will fire once the data is ready:
require(['nameOfYourModuleAbove'], function(deferred) {
deferred.done(function(data) {
// DO SOMETHING WITH YOUR DATA
});
})
Task: get data from server with $.post, process them by method .success(), after that call some function.
var t;
$.when($.post("get_json.php", function(res) {
t = res;
}, 'json')).done(function() {
console.log(t);
});
Do I understand correctly that the Deferred method .done() is executed after .success is done (ie t = res)?
But why "console.log(t)" shows "undefined"?
Is .done() fires after request, but before .success()?
Passing a "success" callback to $.post() is an alternative to the (preferred) chaining of .done(...). Do one or the other, not both, then you don't need to worry about the execution order.
Also, unless you have a decent caching strategy for async data, you shouldn't be setting t as an outer var.
$.post("get_json.php", ...).done(function(t) {
console.log(t);
//do awesome things with t here
});
Caching would be something like this :
var asyncCache = {};
...
function get_t() {
return (asyncCache.t) ? $.when(asyncCache.t) : $.post("get_json.php", ...).done(function(t) {
asyncCache.t = t;
});
}
...
get_t().done(function(t) {
console.log(t);
//do awesome things with t here
}
$.when() is ONLY needed when you have multiple promises and you want to wait for all of them to complete. You simply don't need it at all for your single ajax call. You can just do it like this:
$.post("get_json.php").done(function(t) {
// use the results of the ajax call here
console.log(t);
});
In addition, your code example was using BOTH a success callback function AND a .done() handler. Pick one of the other, not both as they are different ways of getting a callback when the ajax call is done. I'd suggest the promise implementation above because it's more flexible. But, you could also use just the success handler:
$.post("get_json.php", function(t) {
// use the results of the ajax call here
console.log(t);
}, 'json');
Note, when you have an asynchronous operation like this, you need to consume the results of the ajax call in the success callback (or the promise callback) or call some function from there and pass it the data. You do not want to put the data into a global variable or a variable in a higher scope because other code will simply have no way of knowing when the data is ready and when it is not. Put your action in the callback.
If you have more than one ajax call that you want to wait for, then you can do it like this:
$.when($.post("get_json.php"), $.post("get_json2.php")).done(function(r1, r2) {
// use the results of the ajax call here
console.log(r1[0]); // results from first ajax call
console.log(r2[0]); // results from second ajax call
});