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:  

 

<input data-bind="value:Firstname">

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>

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

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

<script type="text/javascript">
  var console_reporter = new jasmine.ConsoleReporter()
  jasmine.getEnv().addReporter(new jasmine.TrivialReporter());
  jasmine.getEnv().addReporter(console_reporter);
  jasmine.getEnv().execute();
</script>
</body>
</html>

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

 

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

 

 <!-- SOURCE FILES -->
  <script type="text/javascript" src="mytest.js"></script>
 <!-- TEST FILES -->
  <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

 

<script type="text/javascript">

  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

About Author

Author Image
Rajan Rawat

Rajan is a UI Developer, having good knowledge of HTML, CSS and javascript. His hobbies are internet surfing and watching sports.

Request for Proposal

Name is required

Comment is required

Sending message..