Overview Of Knockout js Unit Testing

Posted By : Rajan Rawat | 10-Apr-2017

KNOCKOUT JS UNIT TESTING

KnockoutJS is a JavaScript framework that makes it easy to quickly create data pages that are as complex as the old browser IE6. Although it makes use of proprietary data links to HTML elements as well as:

the above example is showing us that it will replace the value input tag with the whatever is in the Firstname. it will also check any changes that user makes to the Firstname and the will make in synchronize mode.

The thing is that Knockout uses the implementation of the Model, View, ViewModel or you can say it uses the MVVM pattern. This pattern will approach to reduce client server side coupling and provides the easier testing of UI code, and that will make it simpler to get data where you want in the view

In this blog post you will how you can test KnockoutJs view code and using jasmine and phantomjs

How KnockoutJs works simply

Now we will see a simple code exampe which will not show the full power of KnockoutJS, but it gives us a direction to start

we will take a simple HTML with few inputs where user can enter their firstname and last name and then put the computes value into a span

<p>First Name: <input type="text" data-bind="value:FirstName"></p><br>
<p>Last Name: <input type="text" data-bind="value:LastName"></p><br>
<span>data-bind="text:FullName</span>

Now the javascript of our viewModel will servers a very simple purpose. It will check that what's in the FirstName and LastName , then concatenate them with in a space between when any changes will occur there

JS CODE

var PersonNameViewModel = function(first, last) {
var self = this;

self.FirdtName = ko.observable(first);
self.LastName = ko.observable(last);

self.fullName = ko.computed(function() {
return self.FirstName() + " " + self.LastName();
}, self);
};

$(function() {
ko.applyBindings(new PersonNameViewModel("Abc", "Loveabc"));
});

Testing of knockoutJS with jasmine and Phantomjs

Now we will se how to test knockoutJs code with Jasmnine and PhantomJS and we will se thier approachs and for that need following things

Phantomjs this will you find on Phantomjs site you have to install it . It is very simple just download zip file and add that file to you bin directory and phantomjs to your path
Jasmine you can find on GitHub
The phantom-jasmine scripts you can find on Github as well
Hello world specification

describe("Person Name", function() {
it("computes fullName based on FirstName and LastName", function() {
var target = new PersonNameViewModel("Abc","Loveabc");
expect(target.FullName()).toBe("Abc Lovelabc");
});
});

Jasmine Test Runner

<!DOCTYPE HTML>
<html>
<head>
<title>Jasmine Test Runner</title>
<link rel="stylesheet" type="text/css" href="jasmine-1.2.0/jasmine.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="jasmine-1.2.0/jasmine.js"></script>
<script type="text/javascript" src="jasmine-1.2.0/jasmine-html.js"></script>
<script type="text/javascript" src="console-runner.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.1.0.js"></script>

Now lets see that file one step at time

The first block of the code is pulling the javascript in the different js framwork we need to run our code. Because it is very easy mock jQuery as compare to using real one and one important thing its better to download code for knockout js and jQuery than using the CDN approach by this you can run your code unit test when you are offline also

now the actual code you want to test is your next code and then you specs. Whenever you will add a new ViewModel, you add a new specs line and a new source line that will include the new files

<script type="text/javascript" src="mytest.js"></script>

<script type="text/javascript" src="mytest-spec.js"></script>

now see the third part thats a bit of JavaScript that will a start the test runner and report the results as well

var console_reporter = new jasmine.ConsoleReporter()
jasmine.getEnv().addReporter(new jasmine.TrivialReporter());
jasmine.getEnv().addReporter(console_reporter);
jasmine.getEnv().execute();
</script>

Invocation

when the all the setup is done, you can the phantomjs run_jasmine_test.coffee TestRunner.Html in a terminal and then i will fire the phantomjs and run your test and then you will something like this

$ phantomjs run_jasmine_test.coffee TestRunner.html
Starting...

Finished
-----------------
1 spec, 0 failures in 0.013s.

ConsoleReporter finished

THANKS