Angular 单元测试在浏览器中有效，但在 Chutzpah 中出现错误答案

【问题标题】：Angular unit test works in browser but errors in ChutzpahAngular 单元测试在浏览器中有效，但在 Chutzpah 中出现错误
【发布时间】：2014-12-11 14:18:20
【问题描述】：

我有一个 angular 模块，它使用 angular ui bootstrap typeahead 指令。我正在尝试使用 qunit 和 chutzpah 对此进行单元测试。

单元测试在通过浏览器运行时运行并通过，但在使用 Chutzpah 运行时返回错误：

错误：错误：[$injector:modulerr] 无法实例化模块 myApp 由于：错误：[$injector:nomod] 模块“myApp”不可用！你要么拼错模块名称，要么忘记加载它。如果注册一个模块确保您将依赖项指定为第二个论据。

为什么会出现这个错误？

(function () {
    var app = angular.module('myApp', ['ui.bootstrap']);

    app.factory('myFactory', ['$http', function ($http) {
        var myFactory = {};
        myFactory.getLocations = function (query) {
            return $http.get('/Locations', { params: { query: query } });
        };

        return myFactory;
    }]);

    app.controller('MyController', ['myFactory', function (myFactory) {
        this.location = '';

        this.getLocations = function (query) {
            return myFactory.getLocations(query).then(function (response) {
                return response.data;
            });
        };
    }]);
})();

HTML

<div data-ng-app="myApp" data-ng-controller="MyController as my">
    <input name="location" type="text" data-ng-model="my.location" data-typeahead="location for location in my.getLocations($viewValue)" class="form-control">
</div>

单元测试

///<reference path="angular.js"/>
///<reference path="angular-mocks.js"/>
///<reference path="angular-ui/ui-bootstrap-tpls.js"/>
///<reference path="qunit-1.15.0.js"/>
///<reference path="sinon-1.9.1.js"/>
///<reference path="myapp.js"/>

var appMocks = angular.module("appMocks", []);

appMocks.config(function ($provide) {
    $provide.decorator('$httpBackend', angular.mock.e2e.$httpBackendDecorator);
});

var injector = angular.injector(['ng', 'myApp', 'appMocks']);
var scope = {};
var $controllers = injector.get('$controller');
var $httpBackend = injector.get('$httpBackend');
var myFactory = injector.get('myFactory');

QUnit.module("MyApp Tests", {
    setup: function () {
        scope = injector.get('$rootScope').$new();
        $controllers('MyController as my', {
            $scope: scope,
            myFactory: myFactory
        });
    }
});

QUnit.test('Get locations returns valid locations', function (assert) {
    $httpBackend.expectGET('/Locations?query=l').respond(['london', 'leeds']);

    var result;
    scope.my.getLocations('l').then(function (response) {
        result = response;
    });
    $httpBackend.flush();

    assert.equal(2, result.length, "correct number of results returned");
});

胆量设置

{    
    "Framework": "qunit",
    "CodeCoverageIncludes": ["*.js"],
    "CodeCoverageExcludes": [
        "*\\sinon-1.9.1.js",  
        "*\\angular.js", 
        "*\\angular-mocks.js",
        "*\\angular-ui/ui-bootstrap-tpls.js",
        "*\\Tests\\*"
    ],   
    "RootReferencePathMode":"SettingsFileDirectory",
    "TestHarnessDirectory": "./"
}

【问题讨论】：

我的猜测是（根据错误消息）它无法加载myapp.js 文件。不幸的是，我不认识 Chutzpah。 :/ 我会看看实际加载了哪些文件，以及如何加载。
如果你能将repro上传到github并分享repo会更有帮助。
@MatthewManela 谢谢，我已经上传了一个 repro 到 github - github.com/ChaoticNadirs/ChutzpahTestFailure

标签： angularjs angular-ui qunit chutzpah

【解决方案1】：

问题是 .js 加载顺序之一。当您在代码覆盖范围内运行时，blanket.js 插件将检测您的文件并导致它们异步加载。由于您从检测中排除了您的测试文件，因此它在源文件之前加载它。要更改此设置，只需通过从您的 coverageexcludes 部分中删除“\test-js\”来检测您的测试文件：

{    
    "Framework": "qunit",
    "CodeCoverageIncludes": ["*.js"],
    "CodeCoverageExcludes": [
        "*\\angular/angular.js", 
        "*\\angular/angular-mocks.js",
        "*\\angular-ui/ui-bootstrap-tpls.js",
        "*\\qunit/qunit-1.15.0.js",
        "*\\sinon/sinon-1.9.1.js"
    ],   
    "RootReferencePathMode":"SettingsFileDirectory",
    "TestHarnessDirectory": "./"
}

【讨论】：