Testing directive with Chutzpah + AngularJS + jasmine

Question

I try to use Chutzpah + jasmine to test my AngularJS code.

Here are the files I reference

jasmine.js ver:1.3.1

jasmine-html.js

angular.min.js ver:1.2.0RC1

angular-mocks.js

alert.js

It actually works if I don't test anything with template.

I figured there must something wrong when I load template.

Here is how I did it when I try to run alert directive from AngularJS UI Bootstrap.

I don't use the way in the test like below, since it is for Karma runner.

beforeEach(module('template/alert/alert.html'));

I use a different approach from this post

  beforeEach(inject(function ($templateCache) {
      var directiveTemplate = null;
      var req = new XMLHttpRequest();
      req.onload = function () {
          directiveTemplate = this.responseText;
      };
      req.open("get", "../../../template/alert/alert.html", false);
      req.send();
      $templateCache.put("template/alert/alert.html", directiveTemplate);
  }));

It is still having a lot of problem, but I think the template is loaded.

Only "should not show close buttons if no close callback specified" passed

most of errors are like

TypeError: 'undefined' is not a function (evaluating 'expect(alerts.eq(0)).toHaveClass('alert-success')') in ....

It seems like the alerts are not created.

Since the first error is

Test 'alert:should generate alerts using ng-repeat' failed Expected 0 to equal 3.

Any idea ?

Answer 1

Finally, I figured it out.

I need to reference 2 more files.

jQuery and Jasmine-jQuery.