Cannot get simple AngularJS Jasmine test to pass with Chutzpah - angularjs

Question

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?

Answer 1

I recommend using a chutzpah.json settings file for angular projects. I placed mine at the root of my project, next to the web.config. You can specify the dependencies in one place this way, which is very helpful as the angular project grows rapidly. I can't know for sure, but I think yours would look something like the following:
{
"Framework": "jasmine",
"FrameworkVersion": "1",
"References": [
{ "Path": "./Scripts/angular/angular.js" },
{
"Path": "./Scripts/angular",
"Includes": [ "*.js" ]
},
{ "Path": "./Scripts/angular-ui/ui-bootstrap.js" },
{ "Path": "./app/app.js" },
{
"Path": "./app",
"Includes": [ "*.js" ]
}
],
"Tests": [
{ "Includes": [ "*.spec.js" ] }
]
}
This will run on jasmine version 1. I'm not sure how you It will include everything that matches "./Scripts/angular*.js" and everything that matches "./app/*.js" (including sub-directories). As you add new angular references and app modules, you should not need to modify this configuration (once you get it working).

Answer 2

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