Testing Javascript with Jasmine 🗒️ web dev notes

Jasmine

http://jasmine.github.io/

Jasmine is a behavior-driven development framework for testing JavaScript code. It does not depend on any other JavaScript frameworks. It does not require a DOM. And it has a clean, obvious syntax so that you can easily write tests.

As its description says, Jasmine helps you to test any testable piece of javascript. For the seasoned java developers is very similar to the jUnit approach: you create a suite in which you define a set of tests with its appropiate assertions.

You can create your custom matchers but by default Jasmine has a large list of matchers to create your assertions:

Jasmine default matchers
the matcher	negation	Expectation
Equality
expect(a).toBe(b)	expect(a).not.toBe(null)	The 'toBe' matcher compares with ===
expect(foo).toEqual(bar)	expect(foo).not.toEqual(bar)	The 'toEqual' matcher. Works for simple literals and variables and also for objects
Regular expressions
expect(message).toMatch(/bar/);	expect(message).not.toMatch(/quux/);	The 'toMatch' matcher is for regular expressions
Undefined or null
expect(a.foo).toBeDefined();	expect(a.bar).not.toBeDefined();	The 'toBeDefined' matcher compares against `undefined`
expect(a.foo).not.toBeUndefined();	expect(a.bar).toBeUndefined();	The `toBeUndefined` matcher compares against `undefined`
expect(null).toBeNull();	expect(foo).not.toBeNull();	The 'toBeNull' matcher compares against null
Boolean matchers
expect(foo).toBeTruthy();	expect(a).not.toBeTruthy();	The 'toBeTruthy' matcher is for boolean casting testing
expect(a).toBeFalsy();	expect(foo).not.toBeFalsy();	"The 'toBeFalsy' matcher is for boolean casting testing
Arrays
expect(a).toContain("bar");	expect(a).not.toContain("quux");	The 'toContain' matcher is for finding an item in an Array
Arithmetical matchers
expect(e).toBeLessThan(pi);	expect(pi).not.toBeLessThan(e);	The 'toBeLessThan' matcher is for mathematical comparisons
expect(pi).toBeGreaterThan(e);	expect(e).not.toBeGreaterThan(pi);	The 'toBeGreaterThan' matcher is for mathematical comparisons
expect(pi).not.toBeCloseTo(e, 2);	expect(pi).toBeCloseTo(e, 0);	The 'toBeCloseTo' matcher is for precision math comparison
Expecting exceptions
expect(bar).toThrow();	expect(foo).not.toThrow();	The 'toThrow' matcher is for testing if a function throws an exception
expect(foo).toThrowError(TypeError); expect(foo).toThrowError(TypeError, "foo bar baz");		The 'toThrowError' matcher is for testing a specific thrown exception

And in order to execute it you only have to run them in any browser able to run Javascript to run the test. This is an example:

function.js file

function helloWorld() {
	return "Hello world!";
}

test-specs.js file

describe("Hello world", function () {
	it("says hello", function () {
		expect(helloWorld()).toEqual("Hello world!");
	});
});

specrunner.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Jasmine Spec Runner</title>

		<link
			rel="shortcut icon"
			type="image/png"
			href="lib/jasmine/jasmine_favicon.png"
		/>
		<link rel="stylesheet" href="lib/jasmine/jasmine.css" />

		<script src="lib/jasmine/jasmine.js"></script>
		<script src="lib/jasmine/jasmine-html.js"></script>
		<script src="lib/jasmine/boot.js"></script>

		<!-- include source files here... -->
		<script src="function.js"></script>

		<!-- include spec files here... -->
		<script src="test-specs.js"></script>
	</head>

	<body></body>
</html>

If you open the html in any browser with javascript enabled you can get the results of the tests executions. Jasmine comes with a set of libraries in order to process these results and show up them into a specific format.

You also have some options to change and rerun the tests under these changes.

Jasmine suits for testing any piece of callable javascript