We Keep Coding

How to spy on localStorage methods with jasmine

Suppose I have a JavaScript code:
function modifiesLocalStorage() {
var someBoolean = false;
if(localStorage.getItem('someKey') === 'true'){
localStorage.removeItem('someKey');
someBoolean = true;
}
return someBoolean;
}
Then I have a jasmine test to test this method:
it('should return true', function(){
spyOn(localStorage, 'removeItem');
spyOn(localStorage, 'getItem').and.returnValue('true');
var returnValue = modifiesLocalStorage();
expect(localStorage.getItem).toHaveBeenCalled(); //Error in this line
expect(returnValue).toBeTruthy();
});
while executing this test I am getting following error:
Error: <toHaveBeenCalled> : Expected a spy, but got Function.
What is this error and how do I fix it?
I am using Firefox 45.9.0 browser in headless mode to run the tests.

As per this question's answer:
Expected a spy, but got Function
We need to get into the actual method, which in this case is on the proto.
if I modify my tests like below, the test passes:
it('should return true', function(){
spyOn(localStorage.__proto__, 'removeItem');
spyOn(localStorage.__proto__, 'getItem').and.returnValue('true');
var returnValue = modifiesLocalStorage();
expect(localStorage.__proto__.getItem).toHaveBeenCalled();
expect(returnValue).toBeTruthy();
});
Since __proto__ is deprecated we can also use Object.getPrototypeOf(localStorage) to get the prototype of the localStorage object

event.currentTarget.getAttribute() doesn't work in Firefox - event is undefined

I have function
function someFunction(event) {
var dataP = event.currentTarget.getAttribute("some-attribute");
}
and only in Firefox I got error that "Event is undefined".
What can I do about this problem?

I changed the way of getting this attribute value like this
var dataP = document.getElementById("element-id").getAttribute("some-attribute")
and it works.

Javascript variable is undefined but it is defined

I've this method in my global controller object of my JavaScript application. Now I get the error, that the statement self.texts.buttons.disabledFinishedJobs is undefined. But I don't understand that because the console.log() statement outputs the expected value. What can be the reason?
toggleFinishedJobs: function() {
var self = this;
console.log(self.texts.buttons.disabledFinishedJobs[0]);
if (this.disabledFinished) {
$(".status_99").show();
this.disabledFinished = false;
$("btn_finishedJobs").text(self.texts.buttons.disabledFinishedJobs[0]);
} else {
$(".status_99").hide();
this.disabledFinished = true;
$("btn_finishedJobs").text(self.texts.buttons.disabledfinishedJobs[0]);
}
}

Try this:
$("btn_finishedJobs").text(self.texts.buttons.disabledFinishedJobs[0]);
^-Typo error
instead of
$("btn_finishedJobs").text(self.texts.buttons.disabledfinishedJobs[0]);

Looks like you have a typo at the end of your code. self.texts.buttons.disabledfinishedJobs instead of self.texts.buttons.disabledFinishedJobs.

How to access variables inside a function in javascript

I have the code:
var here;
function setNews(data2){
here = data2;
console.log(here);//1st console log
}
console.log(here);//2nd console log
in the 1st console log the the data inside here are printed but in the 2nd console log it prints undefined how can i access the data inside the setNews function so that I can use it outside setNews.
Thank you.

Probably you need to review your architecture.
var here;
function setNews(data2){
here = data2;
console.log(here);//1st console log
}
//executed immediatly, `here` is not yet initialized by setNews
console.log(here);//2nd console log
Variable 'here' is being output to the console immedialy when javascript is loaded, but since it's undefined, console shows 'undefined'.
When later you call setNews('sample'), it will set global variable here but there is no point in that, because it was already outputted.

var here;
function setNews(data2){
here = data2;
console.log("inside function " +here);//1st console log
}
setNews("something");
console.log("outside function" +here);//2nd console log
Fiddle: http://jsfiddle.net/bmArj/

// initialize this to desired value.
var here = "your value";

I think...use return...
var here = setNews(2);
function setNews(data2){
here = data2;
console.log(here);//1st console log
return here;
}
console.log(here);//2nd console log

Please read this article on JavaScript Variable and Function Hoisting.
What happened is when you first declare the variable here, it wasn't initialized.
When you give here a value inside function setNews(), its value is not available to the outer console.log.
So you need to call setNews() first before displaying the content of here in the second call to the console, like so:
var here;
function setNews(data2){
here = data2;
console.log(here);//1st console log
}
setNews("some data here");
console.log(here);//2nd console log, it will display "some data here"

If you want to define a variable, (let's call it "here") that is automatically set to the value of some function named "setNews," then this might work better:
var here,
data2 = "the news!";
// Set value of "here" to processed data2
here = (function (news) {
// Process news
news = "This is " + news;
return news;
})(data2);
console.log(here);
// Prints "This is the news!"

Something is wrong in JavaScript object declaration

This code:
var doc = {
foldPrompt: function(folded) {
return folded ? "Click to unfold" : "Click to fold"
},
createFoldButtons: function() {
var prompt = foldPrompt(true); //The error is here
$("#ComparisonTable td.secrow").each(function(index, td){
$(td).prepend($('<img src="minus.gif" class="foldbtn" alt="'+prompt+'" title="'+prompt+'">'));
});
}
}
gives me an error: Undefined variable: foldPrompt
What am I doing wrong?

foldPrompt is not a variable; it's a property of doc, and you need an object reference to access properties of that object.
If someone calls doc.createFoldButtons(), then the this context variable will point at the same object that the doc variable does. So, replace foldPrompt(true) with this.foldPrompt(true).