Angularjs 使用Require和Typescript测试角度控制器

我正在尝试创建一个基本测试，以验证我是否可以创建控制器或服务

我的应用程序位于以下目录中

app/js/app.js

我的控制器位于以下目录中

app/js/controllers/

这是我的karma.conf.js文件

        files: [
        'Scripts/jquery-2.1.1.min.js',
        'Scripts/require.js',
        'Scripts/angular.js',
        'Scripts/angular-mocks.js',
        { pattern: 'app/js/*.js', included: false },
        { pattern: 'app/js/**/*.js', included: false },
        { pattern: 'app/js/**/**/*.js', included: false },
        { pattern: 'app/js/**/**/**/*.js', included: false },
        { pattern: 'test/specs/**/*.js', included: false },
         'test/test-main.js',
    ],

    // list of files to exclude
    exclude: [
         'app/js/main.js'
    ],

test-main.js

var testFiles = [];
for (var file in window.__karma__.files) {
console.log(file);
if (/Spec\.js$/.test(file)) {
    testFiles.push(file);
}
}

requirejs.config({
paths: {
    // External libraries
    'jquery': '../../Scripts/jquery-2.1.1.min',
    'angular': '../../Scripts/angular',
    'angular-mocks': '../../Scripts/angular-mocks',
    'ngRoute': '../../Scripts/angular-route.min',
    'angular-animate': '../../Scripts/angular-animate.min',
   'angular-cookies': '../../Scripts/angular-cookies.min',

},
baseUrl: '/base/app/js',

shim: {
    'angular': {
        exports: 'angular',
        deps: ['jquery']
    },
    'angular-mocks': { exports: 'angular-mocks', deps: ['angular']  },
    'angular-animate': { exports: 'angular-animate', deps: ['angular'] },
    'ngRoute': { exports: 'ngRoute', deps: ['angular'] },
    'angular-cookies': { exports: 'angular-cookies', deps: ['angular'] },
},

  // dynamically load all test files
deps: testFiles,

  // we have to kickoff jasmine, as it is asynchronous
  callback: window.__karma__.start
});

我加了这句话

console.log(file)

以确保文件已加载到

window.__karma__.files

的确如此

该测试在测试/规范中有效/

define(['angular', 'angular-mocks'], (angular, ngMock: ng.IMockStatic) => {
var module = ngMock.module;
var inject: (...fns: Function[]) => any = ngMock.inject;

describe("Create an Application", function () {
    var scope, q, routeParams;
    var location;
    var app;
    beforeEach(function () {

        app = angular.module('App', []);
        inject(function ($rootScope, $q: ng.IQService, $location: ng.ILocationService) {
            scope = $rootScope;
            q = $q;
            routeParams = {};
            location = $location;
        });
    });

    it('Test Application Created', function () {
        expect(true).toBe(true);
    });
});
});

我的应用程序文件如下所示

import angular = require('angular');
import angularRoute = require('angular-route');
import angularAnimate = require('angular-animate');
import ds = require('services/DataService');

var app = angular.module('app', [
    'ngRoute',
    'ngAnimate',
    'ngCookies',
    'kendo.directives',
    'breeze.angular',
    'ui.bootstrap'
]);

export = app;

尝试运行测试时出现的错误是

无法实例化模块应用程序，原因是：模块“应用程序”不可用！您要么拼错了模块名，要么忘记加载它

我假设它没有加载，但不确定如何判断。这是完成测试的最佳方式吗

非常感谢您的帮助

非常感谢

---

如果你对茉莉花使用业力，你可能会有茉莉花过于渴望的问题

这可以通过做两个改变来解决，这最初是在我做类似事情时写的一篇文章中描述的

在boot.js中，您需要注释掉env.execute；方法调用：

window.onload = function() {
    if (currentWindowOnload) {
        currentWindowOnload();
    }
    htmlReporter.initialize();
    //env.execute();
};

这是因为window.onload事件可能在require.js加载所有内容之前发生

加载所需模块后，您可以调用：

// Hai Jasmine - ready to go!
jasmine.getEnv().execute();

---

这是用您的代码和-m amd开关编译的

不是一个模块，它是同步的

但是。在模块中工作

define(['angular','angular-mocks'],(angular,ngMock:ng.IMockStatic)=>{
    var module = ngMock.module;
    var inject: (...fns: Function[])=>any =  ngMock.inject;

    describe("Create an Application", function () {
        var scope, q, routeParams;
        var  location;
        var app;
        beforeEach(function () {

            app = angular.module('App', []);
            inject(function ($rootScope, $q: ng.IQService, $location: ng.ILocationService) {
                scope = $rootScope;
                q = $q;
                routeParams = {};
                location = $location;
            });
        });

        it('Test Application Created', function () {
            expect(true).toBe(true);
        });
    });
});

或者，以一种更为典型的方式：

    import ngMock = require('angular-mocks');
    import angular = require('angular');
    var module = ngMock.module;
    var inject: (...fns: Function[])=>any =  ngMock.inject;

    describe("Create an Application", function () {
        var scope, q, routeParams;
        var  location;

        beforeEach(function () {
            var app = angular.module('app', []);
            inject(function ($rootScope, $q: ng.IQService, $location: ng.ILocationService) {
                scope = $rootScope;
                q = $q;
                routeParams = {};
                location = $location;
            });
        });
        it('Test Application Created', function () {
            expect(true).toBe(true);
        });
    });

检查是否正在加载脚本标记中的角度 '文件：[Scripts/angular.js'， 这就是为什么你会 警告：尝试加载角度超过一次 将其放入{模式：'Scripts/angular.js'，included:false…]， 您需要计算requirejs.confg，直到满足deps链。这就是为什么要使用 '角度模拟'：{exports:'角度模拟'，deps:['angular']}， 因此，当需要角度模拟时，也需要角度模拟， 看看[这个github回购协议] 种子 …一旦你的规范中有一个实例连接到angular.module/mock.module，再次检查Steve的答案，

---

如果你找不到boot.js，你可能正在使用与Karma适配器捆绑在一起的jasmine。在这种情况下，如果你已经整理好require test-maiin.js/config/NG\u DEFER\u BOOTSTRAP！/resumeBootstrap故事，应该可以使用。谢谢你的输入，但是在require的test-main.js文件中，我有一行回调：window.\uu Karma\uu.start这是否会延迟jasmine的启动，直到require加载了所有内容？您可能仍然需要注释jasmine的boot.js文件中的env.execute；。感谢您的反馈，我认为您为我指明了正确的方向，但我仍然收到一个错误，无法读取第2行未定义的属性'module'，即var module=ngMock.module；check我需要我在“test main.js”上配置的“angularMocks”，你称它为“angularMocks”，它应该导出angularMocks。是的，我注意到了这一点，并更改了我的命名以匹配你的命名。我用我所做的更新更新了我的问题。我还附上了grunt的输出。再次感谢你的帮助。我会很高兴在g！添加了评论。我希望这会有帮助：谢谢你的投入，我必须在另一个项目上工作几天，所以我必须把这个写下来。我将查看github链接，并将其与我的项目进行比较。我确实有一个问题要问你…什么是…fns我以前从未见过。谢谢你的帮助！我会将你的信息发布在我的公关上在接下来的一周里，我一直在看《食人魔》。

    import ngMock = require('angular-mocks');
    import angular = require('angular');
    var module = ngMock.module;
    var inject: (...fns: Function[])=>any =  ngMock.inject;

    describe("Create an Application", function () {
        var scope, q, routeParams;
        var  location;

        beforeEach(function () {
            var app = angular.module('app', []);
            inject(function ($rootScope, $q: ng.IQService, $location: ng.ILocationService) {
                scope = $rootScope;
                q = $q;
                routeParams = {};
                location = $location;
            });
        });
        it('Test Application Created', function () {
            expect(true).toBe(true);
        });
    });