- Details
- Written by: Stanko Milosev
- Category: Jasmine
- Hits: 4539
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);
- Details
- Written by: Stanko Milosev
- Category: Jasmine
- Hits: 4831
In this article I will try to write every step of writing browser Jasmine tests.
First I wrote some simple knockout script, which looks like:
HTML:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="/knockout-3.1.0.js"></script> <script type="text/javascript" src="/index.js"></script> </head> <body> <p>myJasmineTest:<strong data-bind="text: myJasmineTest"></strong></p> </body> </html>
JS:
var JasmineTestViewModel = function() { this.myJasmineTest = ko.observable("test"); } window.onload = function () { ko.applyBindings(new JasmineTestViewModel()); }
Unfortunately with window.onload doesn't work, at this moment I don't know why, instead, I downloaded jQuery, and instead window.onload I wrote:
$(function() { debugger; ko.applyBindings(new JasmineTestViewModel()); });
As you can see pretty simple. This small script, without Jasmine and without jQuery you can download from here.
We have to download standalone release of Jasmine test. To download I clicked on a zip file then "View Raw", and download started automatically. After unzipping folder structure should look like:
Now, we need SpecRunner.html file and lib folder to copy into folder where is our simple example. In my case I created "test" subfolder in a folder where my main project is.
Next thing, I will create "spec" folder in my "test" folder, where my real tests will be.
In SpecRunner.html file I will delete examples which came with Jasmine. In this moment my SpecRunner looks like:
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Jasmine Spec Runner v2.0.1</title> <link rel="shortcut icon" type="image/png" href="/lib/jasmine-2.0.1/jasmine_favicon.png"> <link rel="stylesheet" type="text/css" href="/lib/jasmine-2.0.1/jasmine.css"> <script type="text/javascript" src="/lib/jasmine-2.0.1/jasmine.js"></script> <script type="text/javascript" src="/lib/jasmine-2.0.1/jasmine-html.js"></script> <script type="text/javascript" src="/lib/jasmine-2.0.1/boot.js"></script> <!-- include source files here... --> <!-- include spec files here... --> </head> <body> </body> </html>
I am now ready to start writing my test. Create for example indexSpec.js file in folder spec, and it look like:
describe("Yo! This is a test!", function () { });
Add it to SpecRunner.html, in my case I just added line:
<!-- include spec files here... --> <script type="text/javascript" src="/spec/indexSpec.js"></script>
Now we can open file SpecRunner.html, but there will be nothing special.
Next thing which we have to do is to include jQuery, Knockout and our source files, that means in SpecRunner.html add files:
<script type="text/javascript" src="/../knockout-3.1.0.js"></script> <script type="text/javascript" src="/../jquery-2.1.1.js"></script> <!-- include source files here... --> <script type="text/javascript" src="/../index.js"></script>
Now, we can write our first Knockout Jasmine test, which looks like:
describe("Yo! This is a test!", function () { it("display 'My first Jasmine test'", function () { var sut = new JasmineTestViewModel(); expect(sut.myJasmineTest()).toBe("My first Jasmine test"); }); });
POI's are:
var sut = new JasmineTestViewModel(); - with this I created new view model object
expect(sut.myJasmineTest()).toBe("My first Jasmine test"); - here I am checking result of my observable, brackets I painted red because I already forgot to put then :)
sut is "system under test"
Example download from here.
- Details
- Written by: Stanko Milosev
- Category: Jasmine
- Hits: 6313
Jasmine tests are separated in two separate files. One is for HTML view, and it is called, like, myFile.Specrunner.html, second is javascript file, which will be used for testing our javascript.
In beforeEach section we can put things which have to be executed before starting test. In my case, for example, I needed to add Resources, something like:
describe("Add notification rule", function() { beforeEach(function() { Resource = { Notification_Choose_parameter: 'Choose Parameter' ,Component_Notification_Position: 'test' }; }); });
Otherwise I was receiving error "Resource not found".
In the HTML file, if I need some HTML I can add it on the of file, in my case, I needed something like:
<body> <button id="cleanApply" data-bind="click: cleanApply">Click to apply "clean" - without any model - bindings</button> <button id="addPredefCars" data-bind="click: addPredefCars">Click to apply bindings with predefined type and subtype (example for </body>
All javascript files which are needed for testing are in HTML file.
Then, for example, I was testing addCars method from my "add cars" example:
describe("Add cars", function() { it("add two type of cars", function() { var target = new CarsViewModel(); target.addCars(); expect(target.Cars().length).toBe(1); target.addCars(); expect(target.Cars().length).toBe(2); }); });
My Jasmine example you can see here.
- Details
- Written by: Stanko Milosev
- Category: Jasmine
- Hits: 883
I had a problem to test touchmove and mouseve events.