Angular Unit tests in Visual Studio failing

Question

Having installed the necessary packages (Chutzpah, Jasmine and Karma), I made a simple Angular test to try testing (propped up in an MVC project), and I am having trouble with the tests.

When I run the tests in Karma from the command line, they pass. When I run them through ReSharper/Chutzpah in Visual Studio, they fail. My tests are running but I am having trouble understanding the errors.

MainCtrl.js:

var myModule = angular.module("MyApp", []);
  myModule.controller("MainCtrl", ["$scope", function ($scope) {
    $scope.addNum = function(x, y) {
       return x + y;
    }

    $scope.fullName = function (x, y) {
        return x + " " + y;
    }

    $scope.age = 29;
}]);

MainCtrlSpec.js:

/// <reference path="../../AngularTesting/Scripts/_references.js" />

describe("Controller: MainCtrl", function () {
    beforeEach(module("MyApp"));
    var MainCtrl, scope;
    beforeEach(inject(function ($controller) {
        scope = {};
        MainCtrl = $controller("MainCtrl", {
            $scope: scope
        });
    }));
        it("should have scope defined", function () {
        expect(scope).toBeDefined();
    });
    it("should add 2 numbers", function () {
        expect(scope.addNum(5, 4)).toBe(9);
    });
    it("should have a name", function() {
        expect(scope.fullName("Steve", "Jackson")).toBe("Steve Jackson");
    });
    it("should have an age of 29", function () {
        expect(scope.age).toBe(29);
    });
});

Karma.conf.js:

// Karma configuration
// Generated on Tue Jan 26 2016 13:05:20 GMT-0800 (Pacific Standard Time)

module.exports = function(config) {
  config.set({
    basePath: '',

    frameworks: ['jasmine'],

    files: [
      'AngularTesting/Scripts/angular.js',
      'AngularTesting/Scripts/angular-mocks.js',
      'AngularTesting/ng-scripts/**.js',
      'AngularTesting.Tests/ng-tests/**.js'
    ],

    exclude: [
    ],

    preprocessors: {
    },

    reporters: ['progress'],

    port: 9876,

    colors: true,

    logLevel: config.LOG_INFO,

    autoWatch: true,

    browsers: ['Chrome'],

    singleRun: false,

    concurrency: Infinity
  })
}

When I run the tests in karma, all 4 pass. In VS Test Explorer, it launches the Jasmine debugger but all 4 tests fail. I get the following errors:

Error: ReferenceError: Can't find variable: angular (on line 1 of MainCtrl.js)
Error: Error: Bootstrap requires jQuery
Error: TypeError: undefined is not an object (evaluating '$.extend') 
Error: TypeError: undefined is not an object (evaluating '$.validator')

Also getting the warning:

Log Message: WARNING: Tried to load angular more than once.

Any help with these errors or warning would be welcomed, thank you.

just make sure you have got the same js dependencies added in references section in chutzpah.json? — sdfacre
@sdfacre I'm not finding the chutzpah.json file anywhere. any ideas where its typically located? I reinstalled chutzpah into the project to make sure I still have it. — jacksonSD

Matthew Manela Matthew Manela · Accepted Answer · 2016-02-04T05:23:09

You are missing a chutzpah.json file. Chutzpah does not run off of a karma config file. Just create a chutzpah.json file next to your karma one and follow the documentation at http://github.com/mmanela/chutzpah

For example :

{
  "Framework": "jasmine", 
  "References": [
    { "Path": "angular.min.js" },
    { "Path": "angular-mocks.js" },
    { "Path": "src", "Includes":["*.js"] }
  ],
  "Tests": [{ "Includes":  ["*tests.js"] }]
}

Angular Unit tests in Visual Studio failing

1 Answers