- Details
- Written by: Stanko Milosev
- Category: Jasmine
- Hits: 4803
JS:
(function(ns) {
var bar;
function getBar() {
return bar;
}
function setBar(value) {
bar = value;
}
function MyTest() {
bar = 5;
return {
getBar: getBar,
setBar: setBar
}
}
window.MyTest = MyTest;
}(window.MyTest));
Then spec:
describe("call fake test", function () {
var sut;
beforeEach(function () {
sut = new window.MyTest();
spyOn(sut, "getBar").and.callFake(function() {
return 1001;
});
});
it("should return 1001", function () {
expect(sut.getBar()).toBe(1001);
})
});
describe("create spy then force a call", function () {
var sut,
fetchedBar;
beforeEach(function () {
sut = new window.MyTest();
spyOn(sut, "getBar").and.callFake(function() {
return 1001;
});
sut.setBar(123);
fetchedBar = sut.getBar();
});
it("tracks that the spy was called", function () {
expect(sut.getBar).toHaveBeenCalled();
})
it("should return 1001", function () {
expect(sut.getBar()).toBe(1001);
})
});
With line:
fetchedBar = sut.getBar();
I am executing getBar method, then with line:
expect(sut.getBar).toHaveBeenCalled();
I am sure that getBar method is executed, and with line:
expect(sut.getBar()).toBe(1001);
we can see that fake value is returned.
Example download from here.
- Details
- Written by: Stanko Milosev
- Category: Jasmine
- Hits: 10208
Idea is to have a web page which takes time to load, but also to have timer which will be executed if loading page is stuck somewhere. Code which I am going to present is not the best one, of course, but point is just to show an example.
First we need web site which we will test, since code is small I will not present every file, just main JS which I am gonna test:
(function(ns) {
function MyLoadFile() {
var isLoadingStarted,
contentURI = 'http://localhost/jasmineClock/file.html',
loadingTimeOutHandle;
function startLoading() {
isLoadingStarted = true;
setTimeout(function () {
$( "#myWebSite" ).append( "<p>setTimeout</p>" );
isLoadingStarted = false;
}, 15000);
$.get( contentURI, function (data) {
isLoadingStarted = false;
$( "#myWebSite" ).append( data );
});
}
function getIsLoadingStarted() {
return isLoadingStarted;
}
return {
isLoadingStarted: getIsLoadingStarted,
startLoading: startLoading
}
}
ns.MyLoadFile = MyLoadFile;
}(window.loadFile))
Here notice method:
function getIsLoadingStarted() {
return isLoadingStarted;
}
I've completely forgot that variable "isLoadingStarted" cannot be seen "outside", instead you need "get" method ("getters" and "setters" in .NET world)
Now Jasmine test:
describe("when web site is loading", function() {
var sut;
beforeEach(function() {
sut = new window.loadFile.MyLoadFile();
jasmine.clock().install();
sut.startLoading();
jasmine.clock().tick(15000);
});
afterEach(function() {
jasmine.clock().uninstall();
});
it("isLoadingStarted should be false", function() {
expect(sut.isLoadingStarted()).toBe(false);
});
});
Here first notice install and uninstall clock, and then tick. If you try to debug, you will see that Jasmine test will go directly to setTimeOut part of startLoading method, even though loading files is still going on, exactly how and why at this moment I don't know.
Jasmine test example you can see here, code which I am testing is here (you have to wait 15 sec to see text "setTimeout"), and whole example download from here.
- Details
- Written by: Stanko Milosev
- Category: Jasmine
- Hits: 5492
Just a short note to my self, window.onload must not be included in Jasmine test, otherwise it will not work.
For example, my index.js looks like:
window.onload = function () {
window.loadFile.MyLoadFile();
}
namespaces.js:
window.loadFile = window.loadFile || {};
window.loadFile.js:
(function(ns) {
function MyLoadFile() {
var contentURI = 'http://localhost/jasmineClock/file.html',
isLoadingStarted,
loadingTimeOutHandle;
isLoadingStarted = true;
setTimeout(function () {
$( "#myWebSite" ).append( "<p>setTimeout</p>" );
isLoadingStarted = false;
}, 100);
$.get( contentURI, function (data) {
isLoadingStarted = false;
$( "#myWebSite" ).append( data );
});
}
ns.MyLoadFile = MyLoadFile;
}(window.loadFile))
and in SpecRunner.html I didn't import the index.js:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Jasmine Spec Runner v2.1.3</title> <link rel="shortcut icon" type="image/png" href="/lib/jasmine-2.1.3/jasmine_favicon.png"> <link rel="stylesheet" href="/lib/jasmine-2.1.3/jasmine.css"> <script src="/lib/jasmine-2.1.3/jasmine.js"></script> <script src="/lib/jasmine-2.1.3/jasmine-html.js"></script> <script src="/lib/jasmine-2.1.3/boot.js"></script> <script type="text/javascript" src="/../jquery-2.1.3.js"></script> <script type="text/javascript" src="/../namespaces.js"></script> <script type="text/javascript" src="/../window.loadFile.index.js"></script> <!-- include spec files here... --> <script src="/spec/indexSpec.js"></script> </head> <body> </body> </html>
- Details
- Written by: Stanko Milosev
- Category: Jasmine
- Hits: 5472
Idea is to check how some method was called. Check this example:
describe("A spy", function() {
var
foo = jasmine.createSpyObj("foo", ["setBar"])
it("To have been called with", function() {
foo.setBar.calls.reset();
foo.setBar(123);
expect(foo.setBar).toHaveBeenCalledWith(123);
});
});
Notice line:
foo = jasmine.createSpyObj("foo", ["setBar"])
With that we created "mock" object named "foo", with one method "setBar".
Then notice line:
foo.setBar(123);
We that line we "called" setBar method with parameter "123". Now we want to check if that method was called with correct parameter ("123"):
expect(foo.setBar).toHaveBeenCalledWith(123);