CODEWITHSUNDEEP
javascriptunit-testingjasmine
HMR
HMR

Reputation: 39310

Jasmine test runs in grunt but fails in browser when spying $.get

Because I'm using vagrant it looks like the automatic tests when I save a file wont work: grunt karma testing on vagrant when host changes sources grunt/karma doesn't detect it

Trying to run the same tests in a browser however gives me an error I didn't get in grunt. This is the test (simplified as the original tests an angularjs directive):

describe('Unit test the login directive', function() {
    var promise = {
      then:function(s,f){
        this.success=s;
        this.fail=f;
      },
      resolve:function(result){
console.log("calling resolve with:",result);
        this.success(result);
      }
    }
    beforeEach(function(){
      spyOn($, "get").andReturn(promise);
    });
    it('Fetch if user is undefined.', function() {
      var user={name:'not set'};
      $.get("").then(function(data){
        user=data;
      });
      promise.resolve({name:"Ben"});
      expect(user.name).toBe("Ben");
    });
});

The html file to do the test:

<!DOCTYPE html>
<html>
  <head>
    <link href="app/bower_components/jasmine-standalone/jasmine.css" rel="stylesheet">
    <title>GSA test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>
  <body>
    <script>
      var loader = {
          loaded:-1,
          sources:[],
          add:function(file){
              this.sources.push(file);
          },
          load:function(){
              var i = ++this.loaded,
              me=this;
              if(i>=this.sources.length){
                  return;
              }
              console.log("adding source:",this.sources[i]);
              el=document.createElement("script");
              el.setAttribute('src',this.sources[i]);
              el.onload=function(){
                  me.load();
              }
              document.head.appendChild(el);
          }
      };
      loader.add('app/bower_components/jasmine-standalone/jasmine.js');
      loader.add('app/bower_components/jasmine-standalone/jasmine-html.js');
      loader.add('app/bower_components/jasmine-standalone/jasmine-boot.js');
      loader.add('app/bower_components/angular/angular.js');
      loader.add('app/bower_components/angular-ui-bootstrap-bower/ui-bootstrap.js');
      loader.add('app/bower_components/jquery/dist/jquery.js');
      loader.add('app/bower_components/angular-mocks/angular-mocks.js');
    </script>
    <script src="sources.js"></script>
    <script>
        loader.load();
    </script>
  </body>
</html>

Output is:

TypeError: spyOn(...).andReturn is not a function in url /test/test/unit/loginSpec.js (line 13)

and

TypeError: $.get(...) is undefined in url /test/test/unit/loginSpec.js (line 17)

Same tests in grunt give me:

[vagrant@localhost html]$ touch -d "now" test/unit/loginSpec.js 
INFO [watcher]: Changed file "/var/www/html/test/unit/loginSpec.js".
LOG: 'calling resolve with:', Object{name: 'Ben'}
PhantomJS 1.9.7 (Linux): Executed 3 of 3 SUCCESS (0.033 secs / 0.029 secs)

This could be browser related (test in Firefox instead of PhantomJS) but I'm not sure how to mock $.get in a browser test.

Upvotes: 0

Views: 320

Answers (1)

HMR
HMR

Reputation: 39310

It looks like grunt karma is using an old jasmine that supports andReturn but newer jasmine actually doesn't have such a method when using spyOn.

spyOn($, "get").and.returnValue(promise);

Now works in a browser but fails in grunt. So after changing the package.json to use a newer karma-jasmine "karma-jasmine":"~0.2.2", and an npm install they both work the same.

Upvotes: 0

Related Questions