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

Question

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

我的应用程序是为以下目录

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' 
    ], 

测试 - 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; 

当我尝试运行测试，我得到的错误是

未能实例化模块应用程序，原因是：模块“应用程序”不可用！您拼错了模块名称或忘记加载模块名称。

我假设它没有加载，但不知道我怎么能说。这是完成我的测试的最佳方式吗？

任何帮助，非常感谢！

非常感谢！

Answer 1

如果使用噶茉莉，你可以是具有茉莉花过于急切的问题。

这可以通过做两个更改来解决，最初在我做类似的事情时写的文章中描述过，Combining TypeScript, Jasmine and RequireJS。

在boot.js你需要注释掉env.execute();方法调用：

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

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

一旦加载你需要的模块，您就可以拨打：

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

Answer 2

这是它就会与您的代码和-m amd开关

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

     beforeEach(function() { 
      module('app', ['ngRoute', 'ngAnimate', 'ngCookies', 'kendo.directives', 'breeze.angular', 'ui.bootstrap']); 
      inject(function ($rootScope, $q, $location) { 
       scope = $rootScope; 
       q = $q; 
       routeParams = {}; 
       location = $location; 
      }); 
      // controller = new controller.ApplicationService(q, scope, route, location, _datasvc, _searchsvc); 
     }); 
     it('Test Application Created', function() { 
      expect(true).toBe(true); 
     }); 
    }); 

不是编译为模块，与其同步

但是。在一个模块中工作

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); 
     }); 
    }); 
}); 

或可替代更TypeScripty W/ES6esque方式：

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); 
     }); 
    }); 

检查您所装入的角度作为脚本标签
“files:[Scripts/angular.js',...， 这就是为什么你 WARNING:tried load angular more than once 把它放在{pattern: 'Scripts/angular.js', included: false ...], 你需要计算requirejs.confg，直到满足deps链。在顺序和那你为什么设置垫片配置与 'angular-mocks': { exports: 'angular-mocks', deps: ['angular'] },
的原因之一，所以需要在角嘲笑角度要求也 看看[本GitHub库（https://github.com/tnajdek/angular-requirejs- 种子）， ......并且，如果您的规范中有angular.module /mock.module实例，请再次检查Steve的答案， 如果找不到boot.js，则可能会使用与Karma适配器捆绑在一起的茉莉花。在这种情况下，它应该工作，因为你已经整理了require test-maiin.js/config /“NG_DEFER_BOOTSTRAP！”/resumeBootstrap故事