One example of Jasmine clock

Details
Written by: Stanko Milosev
Category: Jasmine
Hits: 9822

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.

window.onload

Details
Written by: Stanko Milosev
Category: Jasmine
Hits: 4933

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>

To have been called with

Details
Written by: Stanko Milosev
Category: Jasmine
Hits: 5114

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);

Knockout

Details
Written by: Stanko Milosev
Category: Jasmine
Hits: 5423

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.

  1. Some tips
  2. Testing screenX
  3. Formating date
  4. Stylelint

Subcategories

Ajax

JavaScript

ExtJS


jQuery

Bing Maps AJAX Control, Version 7.0

Knockout

Jasmine

Moment

node.js

Page 21 of 24