Blog

  • Overview Of Knockout js Unit Testing

    Posted by Rajan Rawat | Last Updated: 24-May-17

    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

Tags: Knockoutjs