Search code examples
angularjsvisual-studiounit-testingjasminechutzpah

Cannot get simple AngularJS Jasmine test to pass with Chutzpah

I have a very simple jasmine unit test that targets testing a simple operation on an AngularJS controller as follows:

/// <reference path="../src/jasmine.js"/>
/// <reference path="../../Scripts/angular.js"/>
/// <reference path="../../Scripts/angular-mocks.js"/>
/// <reference path="../../Scripts/angular-ui-router.js"/>
/// <reference path="../../Scripts/angular-route.js"/>
/// <reference path="../../Scripts/angular-resource.js"/>
/// <reference path="../../Scripts/angular-ui/ui-bootstrap.js"/>
/// <reference path="../../app/app.js"/>
/// <reference path="../../app/controllers/myController.js"/>

describe("my Controller", function () {

   var scope, ctrl, vm;

   beforeEach(module("app"));

   beforeEach(inject(function ($controller, $rootScope) {
      scope = $rootScope.$new();
      ctrl = $controller(MyController, { $scope: scope });
      vm = ctrl;
   }));

   it("sets the title", function() {          
      expect(vm.title).toBe("This is the title");
   });


});

To begin the above test passes when using either of the following:

  • Open SpecRunner.html which contains the same references and displays a passed unit test in the jasmine default test runner
  • Test without modification passes if running via ReSharper test runner (this tool is not important other than to show the test passes using another test runner; the test isn't the culprit)

However no matter whenever I do any of the following using Chutzpah the test fails:

  • Run from the command line using chutzpah.console.exe
  • Use the right-click menu open in VS.NET to Run JS Tests

Each time the following error is given:

Error: [$injector:modulerr] Failed to instantiate module app due to: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

So this is a very typical error if the AngularJS references are not included. However as you can see above they are for sure included and the other test runners see them and the test passes. The error is identical regardless if I run the unit test from the command line or if I view the output in VS.NET.

I even turned on the /trace parameter from the command line and viewed the chutzpah.log file. It sure enough is finding the Angular reference files so I'm not sure why the test is failing.

I've seen a ton of posts surrounding this and the solution is always that the references are missing. That's not the case here and I'm stuck. What am I missing to make this test pass using Chutzpah?

Solution

  • I believe through thorough testing I have determined the cause. The issue is most likely that I'm using ES6 classes in my Angular .js files being used in my tests.

    The issue is PhantomJS which Chutzpah uses does not support ES6 and the class keyword and thus it fails (see this for validation). I was able to reproduce in a non Angular sample. I used an old fashioned ES5 style IIFE and the simple test now passed. This is why it worked in Chrome and in ReSharper which used Chrome as the default test browser and Chrome supports the ES6 class keyword. If I make ReSharper use PhantomJS instead of Chrome, then my simple test also fails.

    The root problem appears to be PhantomJS and its lack of support for ES6 syntax.

    Here is a blog post I wrote on my findings after pulling my hair out on this for a couple of weeks. It explains more in detail about the issues with writing non-ES5 complaint code and using that with Chutzpah and PhantomJS:

    Chutzpah and non-ES5 JavaScript for Unit Testing is Problematic