Angularjs Unit testing – Why Karma

There are somany tutorial available on how to write unit test. So you have writtern one simple unit test, but want to know the connection of jasmine, karma and angularjs.

Basically, to test a single angular controller/service etc, you need to make it as page. And include all the dependencies like jasmine, angular and your source files.

This service/controller will be called in your tests. So, include those tests in that page. Now, this tests should be called, which will be performed by jasmine specrunner.

Sample jasmine specrunner.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Jasmine Spec Runner</title>

  <link rel="shortcut icon" type="image/png" href="lib/jasmine-1.3.1/jasmine_favicon.png">
  <link rel="stylesheet" type="text/css" href="lib/jasmine-1.3.1/jasmine.css">
  <script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
  <script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>

  <!-- include vendor libs... -->
  <script type="text/javascript" src="vendor/angular/angular.js"></script>
  <script type="text/javascript" src="vendor/angular/angular-resource.js"></script>
  <script type="text/javascript" src="vendor/angular/angular-cookies.js"></script>

  <!-- include source files here... -->
  <script type="text/javascript" src="src/Player.js"></script>
  <script type="text/javascript" src="src/Song.js"></script>

  <!-- include spec files here... -->
  <script type="text/javascript" src="spec/SpecHelper.js"></script>
  <script type="text/javascript" src="spec/PlayerSpec.js"></script>

  <script type="text/javascript">
    (function() {
      var jasmineEnv = jasmine.getEnv();
      jasmineEnv.updateInterval = 1000;

      var htmlReporter = new jasmine.HtmlReporter();

      jasmineEnv.addReporter(htmlReporter);

      jasmineEnv.specFilter = function(spec) {
        return htmlReporter.specFilter(spec);
      };

      var currentWindowOnload = window.onload;

      window.onload = function() {
        if (currentWindowOnload) {
          currentWindowOnload();
        }
        execJasmine();
      };

      function execJasmine() {
        jasmineEnv.execute();
      }

    })();
  </script>

</head>

<body>
</body>
</html>

But, if you use karma, creation of this page, launching browser will be taken care by editing a simple config file. It provides many additional features also.

Quote from https://github.com/karma-runner/karma

When should I use Karma?

You want to test code in real browsers.
You want to test code in multiple browsers (desktop, mobile, tablets, etc.).
You want to execute your tests locally during development.
You want to execute your tests on a continuous integration server.
You want to execute your tests on every save.
You love your terminal.
You dont want your (testing) life to suck.
You want to use Istanbul to automagically generate coverage reports.
You want to use RequireJS for your source files.
This entry was posted in AngularJS and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *