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

它是。

测试存在于test / specs /

中

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

我的app文件看起来像这样......

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;

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

由于以下原因无法实例化模块应用：模块＆＃39; app＆＃39;不可用！您要么错误拼写了模块名称，要么忘记加载它。

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

非常感谢任何帮助！

非常感谢！

Grunt output

Answer 1

如果你使用茉莉花的卡玛，你可能会遇到茉莉花太急切的问题。

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

在 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();

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链。顺序。，这就是你设置 shim 配置的原因之一 'angular-mocks': { exports: 'angular-mocks', deps: ['angular'] },
所以当需要角度模拟时也需要角度，看一下[this github repo]（https://github.com/tnajdek/angular-requirejs- 种子）， ...一旦你的规范中有一个附加到angular.module /mock.module的实例，再次检查Steve的答案，如果找不到boot.js，则可能正在使用与Karma适配器捆绑在一起的jasmine。在这种情况下它应该工作，因为你已经整理了require test-maiin.js / config /“NG_DEFER_BOOTSTRAP！” / resumeBootstrap故事

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

2 个答案: