使用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故事